Blog #3

Example of Good/Bad Design & Commentary on 10 Rules of Design

Website in question:  http://www.suzannecollinsbooks.com/

I chose to comment on Suzanne Collin's website. For those of you who don't know, Suzanne Collins is the writer of the hugely popular series The Hunger Games. She had written a trilogy of books all of which sold millions of copies around the world. Her books were then adapted into movie form which were also extremely popular. When I came across her website, I was shocked to see that it was in this state. At first glance, it was not appealing at all and everything was scattered around the web page. For someone who was so successful and well known, I was expecting her website to be put together and visually appealing. Now let's analyze the website using the book White Space is Not Your Enemy, particularly the "layout sins" located in Chapter 4. 

1. Things that Blink. Incessantly. 

This website doesn't necessarily have blinking visuals in it, however it does have an unappealing lined header which can seem like blinking is going on when you scroll down the page. 

2. Warped Photos

This may be one of the few layout sins that this website doesn't break. The photos on this website are all the right proportions with no warped or stretched photos. While it does have photos of many different sizes seemingly all over the place, they are all left as is and does not seem to be altered at all. 

3. Naked Photos

Because of the website having a plain white background (with the occasional pastel orange), all of the photos on this site do not need to have a border (except maybe the first picture on the webpage) . The colors in the photos contrast enough for the website to not commit this "layout sin". 

4. Bulky Borders and Boxes

This website has one really long bulky orange side bar that showcases the author's reviews and related links. In White Space is Not Your Enemy, "borders and boxes are like fences. they communicate stop... and call attention to themselves". This long orange rectangle really draws the eye away from the main content of the page without effectively communicating what is necessary. 

5. Cheated Margins

Throughout the main web page and the accompanying sub pages, the margins are all over the place. White space is present, but mostly on the left side. Margins are cheated throughout the site. There is no balance and instead I get a message of disorganization before taking the time to read the main message that author is trying to send.  

6. Centering Everything

This website centers (or tries to) everything. All of the main content on the home page occurs in the single middle column of the page. Similarly, if you click the "interview" and "biography" section, the content on that page are all located in the middle. 

7. Corners and Clutter

There's not so much in the corners as they are clutter. Nothing seems to be aligned in a way that is aesthetically pleasing. On the main page, there is a small box of information on the left corner and right corner as well as top, off centered middle, and bottom. Also, by centering most everything, clutter is also created because there is no "symmetrical balance". 

9. Busy Backgrounds

This website design actually does not break this layout sin. There is no busy background because the background is a plain white color. 

10. Tacky Type Emphasis

For the most part, there is limited tacky type except for the review column on the right side of the page. The author made her book titles bolded, blue font color, and underlined when you put your cursor on it. In this case, I don't think that is extremely terrible because the author wants to showcase her books and send a message that if you click it, you can read more about what the particular book is about. 

12. Windows and Orphans (skipped 11 because there are no bullet points)

On the right side of the main web page, under the "selected works" section, there are many featured reviews of Collins' books. While the layout of the reviews start off great, the text seems to indent after each one, moving the text closer and closer to the right side of the page. While this doesn't create "orphans" of letters as mentioned in the book, it does create orphans of words where there is a singular line with a singular word (see photo on the right). 

Overall this website committed many layout sins, however it was not as bad as it could have been if there were a plethora of information randomly spread about. While this website is not very aesthetically pleasing, there is a minimalistic style to it. Perhaps the author did not want to include much information on her website. This website example also shows that she is able to better communicate using a traditional method of literacy (through her books) than multimedia literacy which is interesting because it shows that they are not interchangeable. 

Design Basic Index Harmony Workshop Exercise (created using Canva)
Visual Echo p. 58

Echo Through Style

Echo Through Content

Echo Through Typography

Design Basic Index Loosened Alignment Exercise (created using Canva)
Multi-Image Ad Composition p.87

Highly Structured

Loosely Structured

Resources:

Golombisky, K., & Hagen, R. (2010). White space is not your enemy: a beginner's guide to communicating visually through graphic, web & multimedia design. Amsterdam: Focal Press/Elsevier.

Krause, J. (2004). Design Basics Index. Cincinnati, OH: How Design Books.

http://www.suzannecollinsbooks.com/index.htm

Images taken from https://stocksnap.io/ & https://www.pexels.com/