The project that I chose to evaluate was my single page website. My site was a fable titled “The Jay and the Peacock”. To illustrate this fable I chose to use a colorful, hand done, illustrated style. My project embodied certain design principles, but there were some design facets that could be improved upon in order to best guide the user through the content.
Each specific screen on this fable site was carefully formulated to create balance. The website contained multiple elements on every individual screen. Each one was organized and placed together as not to offset the screen, thus creating a sense of balance, specifically horizontal balance. This guided the user by not allowing their eye to get stuck in one place, thus encouraging perpetual movement.
Unity in this page was a result of the color scheme, typography, and site style. The same general color scheme and typography were utilized in each screen, which helped the entire site to seem like it belonged together. The website’s style was consistent throughout all of the site’s screens. Each illustration showed the same thick black outlines and grainy, handmade fill. Therefore, due to the website’s style, a strong sense of unity was created.
Most screens throughout the website placed emphasis on each text box. The contrast of the white text boxes with black outlines on pink backgrounds draws the eye. There is also emphasis placed on the text boxes due to the sharp contrast of its geometric shape to the organic shapes surrounding it. This direction of emphasis is very effective because it will assure that the viewer reads the story.
The layout of the fable website was remotely successful. The placement of each individual screen element was extremely balanced, therefore reaching success. However, there are certain changes that could still be made. The website should be modified so that it opens to a screen that fits perfectly in the window, no matter what size that window is. Likewise, the whole screen should also get smaller or larger as the user resizes their browsing window, still continuing to fit the screen. This will help direct the user to the content, as it will eliminate empty white space that could be distracting.
The color scheme displayed in my project was vibrant but not overpowering. The pink, green, and blue give the website a fun, whimsical, childlike feel. Whereas the black outlines, white sections, and gray portion tone down these bright colors to ensure that they do not become overwhelming. Therefore this balanced color scheme achieved the goal of appealing to children without being too intense. The consistency of the color scheme also helps to direct the user because it is harmonious rather than distracting.
Texture was visible throughout each screen of this page. The text inside the box created the strongest texture on the page, starkly contrasting the bare, un-textured background. The hand done, grainy texture of the birds and feathers on each page slightly contrasted the flat color of the background. This created a hierarchy within the website first drawing the eye to the text, then to the birds and feathers, and then to the background elements.
The navigation of the site was somewhat successful, but could be improved. The navigation is currently clear and understandable on most screens. But, on the title screen, the navigation button needs to attract the user more. Since the link to begin the story is near the bottom right of the screen, it does not demand attention. It may be more convenient for the viewer if the link and the arrowhead that it rests on moved down into place from a higher point upon opening the page. This movement will draw the user’s eye and make navigation more successful.
As previously stated, the fable website embodies a number of design principles which make it successful in properly directing the user to the content. These principles include balance, unity, emphasis, color scheme, and texture. However, as mentioned above, certain principles such as layout and navigation could be improved in order to perfect proper direction. Overall, this website was successful, but could improve with a few slight changes.
From this project I learned several new coding techniques such as, how to correctly navigate a single page website. This may be useful the next time I create a website. I have also learned that hierarchy must be shown using every single design principle in order to best direct the viewer. I will remember these lessons and utilize them in future design projects.