Monday, October 17, 2011

Good layout and whitespace on the internets




These layouts use white space to create a flow through the pages.  The white allows the viewer to find what is important.  Google uses simplicity to direct the viewer.  Amazon shows a lot of information clearly and effectively.  Apple uses white space to separate elements while keeping them organized.  The information on these sites look clean and easy to navigate.  They are organized and user friendly.

bad layout and whitespace on the internets





These layouts look like someone randomly dropped elements on the page.  Again there is no emphasis on any elements to direct the viewer.  The top design uses blue text over a blue background for tough reading.  The second layout has very little organization with way too many elements to focus on one.  the bottom layout looks crazy.  It uses white boxes over checkered white and pink boxes.  The white over white has little contrast and is hard to find informative elements.

good layout and whitespace




These layouts use white space effectively to move the reader through the information.  The top two examples use enough white space for the reader to relax and see the emphasis.  These types of ads look more sophisticated than the typical newspaper ad with an abundance of information crammed into a space with no clear emphasis on any element.  The bottom example uses different sizes of of imagery to demand emphasis.  It also uses the color yellow to flow through the layout.  There is enough white space to separate the photos and text from the other.

bad layout and whitespace



These three examples show poor layout and use of white space.  The best buy example is common for newspaper advertising to fit too many items into one page.  All of the items take the same importance, and it looks like a giant mess.  The hearing ad is complete text with little emphasis on what the ad is about.  For most readers, it would be too much reading without enough eye grabbers to show them why they should read about it.  The realty ad has multiple photos with different themes.  At a first glance most wouldn't know the ad is a realty ad or a circus ad.  Also, the three photos are relatively the same size without demanding relative importance.  These ads do not have a flow for eye movement.