WSiNYE: Exercise 4

{ WSiNYE – White Space is Not Your Enemy }

Go on a Web-based treasure hunt: post a list of the sites you found and the particular error(s) they commit.

At first I was frustrated by how hard it was to find sites breaking the sins that the book listed. How dare they follow the rules??? But then I got a helpful hint to search for websites about cats…and surprisingly I found enough to fill up my blog post in under 5 minutes. Imagine that.

Cattv

> This website violates “Things that blink”, “Trapped Negative Space”, and “Tackytype Emphasis”.

MathCats

> This website violates so much, it made me laugh when I opened it. It violates a total of 5 of the 13 sins! One of them I never even thought I would see outside examples: “Justified Rivers”.

Safe Haven for Cats

> One of the most awful websites I have come across. In this list, it ranks number 1. It violates just as many as the one above plus a new one: “Busy Backgrounds”. Watch out, it even has autoplay music!

Homeless Cat Network

> This website simply violates “Trapped Negative Space”.

Cats United

> This website definitely violates the “Bulky Borders and Boxes” rule!

Spoiled Rotten Kittens

> Violates “Tackytype Emphasis” by using all caps on throughout the site.

Raw Fed Cats

> This site violates “Trapped Negative Space”, “Tackytype Emphasis”, and “Corners and Clutter”.

Dear Tabby the Answer Cat

> This website violates “Tackytype Emphasis” and “Bulky Borders and Boxes”.

Catdoor Websites

> Although this website looks okay, it still violates the “Busy Backgrounds” rule.

Cat Talk 101

> This website also violates the same rule

13Cats

> Violating “Trapped Negative Space” and, a new one, “Centering Everything” got this website on my list.

Cat Stuff

> It has a “Busy Background” and “Bulky Borders and Boxes”!

Angelical Cat

> This site violates a new one! “Naked photos” and it also violates “Trapped Negative Space”.

And with that last website, I am done pulling together sites that violate the “13 Amateur Layout Errors”. I am also tired of seeing bad websites.

WSiNYE: Exercise 2

{ WSiNYE – White Space is Not Your Enemy }

{ The example I am using can be found on pg. 005 of The Web Designer’s Idea Book and is titled Eleven3.com }

Can you find an example (of the Works-Every-Time Layout) on the Web? Identify and label the parts on each.

The columns are split down after the visual on the example website, between the main content and the side content. The visual can be identified in the header and navigation area, the logo and some links from the portfolio are also found in the header area. This can all be considered a part of the visual section of the page. 

The tags of a website can usually be considered any and all links to social media and stuff typically found in the footer. This website has it’s link to flickr located in the bottom-right corner of the site.

WSiNYE: Exercise 3

{ WSiNYE – White Space is Not Your Enemy }

First explain how the design captures your attention. What part of the design do you look at first? What draws your eye to look there first?

The first thing I look at is the entire header area, with the image of the interior of a nice building being used and the logo for the site. Size is the factor that causes me to look at the header area first, the image taking up almost half of the entire website and the logo is a part of the image. The colors being used is also a factor, the red of the logo draws you to read there first.

Image of website being examined

Second, explain how the design controls the eye’s flow through it’s layout. In what order does your eye move from one thing to the other across the space of the layout? Make a numbered list of the order in which your eye travels around the layout. 

As mentioned before, the colors of the page draw you from each item to the next. Each title of a section is a dark red color, causing your eye to be drawn to it and then read it. Then size is also being used again, with the main portion of the content taking up more space on the page than the side content. The eye is drawn from:

1. Header/Logo
2. Navigation
3. Main content
4. Side sections

Although the navigation might end up being seen with the header/logo, in which case it is just taken out of the list.

Third, what kind of information does the design convey? Make a list. Describe how the design conveys this information. 

This website helps support the idea that the people behind “Winston Interior” and the website itself are/is:

1. Professional
2. Sleek
3. To the point

The website helps prove this by choice of colors and the layout. With it’s clean and simple look, it help portray that they get the job done in a professional manner.

What, if any, emotion(s) does the design evoke? How? Why?

The design gives off the feeling of impersonality with the choice of background but still remains friendly with the dark red they chose throughout the site. If they hadn’t used the red color, the site would feel cold and boring. It can still work because the people behind “Winston Interiors” are probably trying to give off a professional impression.