One new trend in website organization is the one-page design. The website One Page Love describes this trend as designs that, “aim to provide the user with enough information in a single page to make a decision and act upon it.” As with any other web layout, there is a “right” and a “wrong” way to use this style. An example of the “wrong way” can be exemplified through Michael Mahaffey’s site, The Hipster Alphabet. Albeit an extremely amusing, innovative and visually appealing site, it defies some of the basic layout principles for all website styles.
The first problem I noticed with The Hipster Alphabet is its failure to follow any sort of conventional visual hierarchy. The order of importance as I scan the page begins with the illustrations, secondly the word that each illustration depicts, next the letter of the alphabet and lastly the description. What the user needs to see is the letter, the word, the picture and lastly, the description. What makes my eyes go to the wrong items has to do with a rule Steven Krug defines in his book, Don’t Make me Think; “The more important something is the prominent it is”. The most prominent thing on the page is the illustrations. This is a problem because I have no idea what the purpose of this image is without the prior knowledge of what letter and word the picture is describing.
The second problem is a disorganization of the website anatomy, specifically the title and logo. A typical website will order the title and logo at the top of the page, then the navigation, the content and lastly the footer. Instead, Michael Mahaffey placed the title and logo at the very bottom of the page. At the very least, a title should allows appear above the “fold”. The fold, as described by Jason Beiard in his book The Principles of Beautiful Web Design, is where the content of the page ends before the user needs to use the scroll bar. The title below the fold makes me ask myself, “Am I on the hipster alphabet? Or am I somewhere else?” A user should always know on what site they have landed. While the title was the only item out of conventional order, it had unintentionally made the navigation bar confusing. I was unsure whether it was a border or a device for locating information on the page.
Despite the site’s issues, the choice of texture and color was spot on. All of the images on the page followed a distinct style that offered variety while still appearing to connect into one seamless design. The color scheme included multiple pure, vibrant hues, which harsh tones were evened out with the use of a few saturated browns and greys. While there was a limited color palette, texture was subtly applied with these hues to create a more dynamic and visually appealing array of graphics. Most importantly, the texture was never over-used; only simply added to create a more depth to the design.
Take Michael Maheffey’s The Hipster Alphabet as a learning tool for one page design. One-page designs need to follow the same basic layout conventions as any other site. They need to include a simple organization of visual hierarchy and element set-up. They also need to follow a strict color scheme and stylistic elements to enhance the one-page design’s unique flow of information. Most importantly, one-page designs need to have easy to understand and usable scroll and navigation devices. Lastly, remember: you need to provide a user with enough information on a single page to inform its target audience.