Presentation Zen: Fine Art Composition
The author of Presentation Zen, Garr Reynolds, has much to say on general rules of design that should be followed when developing graphics. Though much of his instruction is regarding slide decks, these principles can easily be followed by any website or user interface designer. Some of the key concepts he touched on were ideas like keeping a high signal-to-noise ratio in order to not overwhelm viewers/users, utilizing empty space to make design look elegant, utilizing contrast and repetition to make things look professional and non-distracting, and using alignment and proximity to make designs make visual sense and make it so the user/viewer does not have to think. Utilizing these concepts, I’d like to analyze an old website I used as a guide to play a classic video game called Final Fantasy II.
This website had most development take place on it during the years between 2005 and 2012. This page of the website that I will visually analyze was most likely designed during the beginning of the website’s development, and it is easy to tell. It has the hallmark bad contrast and terrible color schemes paragon to websites developed 15+ years ago that looked far more impressive on monolithic computers and monitors that seem like they would belong in an antique shop today. Therefore, it is an excellent choice of a website to serve as a terrible example of what not to do in interfaces designed today.
The banner at the top of the website is mostly harmless in terms of design, though it is cluttered. The main issue with the banner is with the logo of the website, which has terrible contrast with the red text on blue background, making it not only difficult to read but also unpleasant to read. Beneath the banner is another similarly sized section split into three columns with a variety of links. This section breaks more of Reynolds’ guidelines on design. Firstly, contrast is poor due to the black background. Secondly, empty space is not utilized well at all between the interactable elements, leaving large margins around the interactable area and little distinction between separate links in the section. Thirdly, alignment is poorly implemented between the three columns, as the links in the first column section have no margin between the top border and the top of the links, but the third column has a small margin and the middle column is vertically center aligned to have an enormous top margin. Additionally, these links break the rule of proximity, since there are so many interactable sections with very little space in-between one another, and the spacing is inconsistent between sections. Finally, repetition is somewhat broken, as the Donate link present in the third column is of a dramatically different visual style than the rest of the elements on the page.
The rest of the page keeps fairly consistent despite the awful black and blue color scheme. The navigation sidebar, though extensive, is fairly easy to distinguish between elements, and the rest of the page is dominated by a large image of the in-game map, which is the main point of this particular page of the website. Other pages on the website are similarly designed, and the text on these other pages is broken up in ways that make sense with normal and easy-to-read fonts. But this website is certainly a relic of the past and, if it were still being developed or maintained, should have long since altered its visual style.