Format (AKA Layout)

I read a CreativeBlog.com article about web formatting (or layout) and it mentioned a few tips when first designing a web page. It told us to first sketch out on paper how everything will fit on the page. Then it said that the way the page is arranged should ease the flow of the page and move the user’s eye in a specific direction. The author also encourages the designer to keep it simple, only adding what is necessary.

When I took Web Theory and Design with Dr. Pass last year, I followed these same tips when designing websites. I’m a visual planner, so I always first sketch out how I want the website to look. I’m not as skilled as I’d like to be with designing a webpage so the user’s eye moves across the page. With Dr. Pass, I usually used header images the move the user’s eye across the page, but I’m interested in how actual layout can achieve this also. I found 2 examples of well-designed website format.

website 1

  1. TheNextWeb.com – the first thing that stood out to me with this website is the use of the golden ratio on the home page. The best way to use this layout would be for cases like this, when there are news stories or multiple blog posts that need to be displayed above the fold on the home page. I also notice how the images behind the text are slightly darkened to make the white text stand out. I’ve had to darken the header image before for other websites I’ve designed in order for the title of the page to stand out more.website-5
  2. I was torn between liking this format of a website and another example that was much simpler (mountains as the background image with a single button that says “enter”). I ended up gravitating more towards this Good Food blog more because I found the format of the website to draw me in more, since it had an entire row at the bottom of new recipes. I’m not a fan of the search bar placement. I would have placed it in the upper right hand corner. I see a trend with the darkening of the background image to place white text over the image.

 

Sources: http://www.creativebloq.com/web-design/steps-perfect-website-layout-812625

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s