Web Page Layout

web page image

Process

For this project I decided to target book lovers by using my current website, but changing the look of it.  The purpose of this website is to offer book reviews in hopes that they buy the book.

I first made sketches of what my web page would look like.

sketch image

Second, I created a wire-frame of what the site would look like.

shape map image

Third, I put the actual elements in place.  My layout is an example of what the home page would look like.  I used Adobe Photoshop to make my header background a transparency so the title would stick out on the header.  I also played around with the stack of books to get the colors that I wanted.

Once I finished with my rough draft I posted it to the class Facebook page for critiques.

Critique Process

The following made critiques on my rough draft:

Leah Goodwin: I wonder how it would look if your book background wasn’t so shaded, or even shaded at all? Right now the green color blocks below show up more than the header and it seems like it should be the other way around. You might also think about doing some typography on the title. Other than that I think it looks great.

Liz Miller: Great job with the idea of advertising – that would help with costs. I love the picture you used for the header. I think you did wonderful.

My teacher wanted me to alignment certain elements with certain elements to great a more better flow.  The looks in my footer were hard to read, so she  wanted me to make the orange darker, but I didn’t like it that way so I made it black instead.  I got rid of one ad so that I can create a bigger outlet for white space on my layout.  The last thing I needed to do was add a copyright on the bottom inside my footer.  Everything else I kept the same.

I in turn commented on Hannah Mary Taylor and Jacob Clawson.

Typography

Segoe UI – Sans Serif

Color Scheme

Green and Black

Advertisements

2 thoughts on “Web Page Layout

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s