Web Design Basics

Summary

In this project, I designed and created a splash page. First off, I designed the layout by using a paper mockup. I then created another mock up, but this time I used Adobe Illustrator, which was extremely helpful with learning about what designs would and would not work for a splash page. Finally, I used Adobe Dreamweaver to program the HTML and CSS based website.

Paper Mock Up

Paper Mock Up

Illustrator Mock Up

Splash Page

Sample HTML and CSS Code

What I Learned

My design changed a lot throughout the project. I changed my paper mock up many different times. At first I thought that having three separate sections would look intriguing, but as I was putting the design together, I thought that three sections was too choppy and it didn’t flow well. I then changed my design to the final design I have now. I am very happy with it because it is both a simple design and simple to code. I learned that it takes a few tries in design in order to get the perfect setup. One problem that I had early on in the project was getting images to show up in boxes. In order to solve this problem, I watched the CSS Boxes with Images tutorial. After watching the tutorial, I felt extremely comfortable with creating boxes with images. Here is a link to the tutorial I followed. http://capitalcomtech.info/2008/11/07/explore-html-and-css-relationship-day-4/

Leave a Reply

Your email address will not be published. Required fields are marked *