Design Concepts- Week 1

Objective: Exemplify your understanding of the principles and elements covered this week by discussing their use in two different websites.

A List Apart


Unity and Variety:
Unity and variety are achieved mostly through text color. The text for the main menu is black, bold and all caps. Major articles are in orange and all the authors names/sub menu items are in blue. Unity and variety are also achieved through the use of squares which look very much the same in terms of shape and color, but each has a different picture in them.

It is obvious that the most important thing on this page is the site logo. Hierarchy is achieved though the fact that although it is in the shape of a square, nothing else on the entire page looks remotely like it.  The logo maintains some unity with the site by the use of the square shape and color (sort of). But over all it stands out.

Hierarchy on the page is also achieved though text color. It is very easy to see that black bold is most important, text in orange is next, text in blue, then small black lettering is least.

The site is well proportioned in that it is divided into thirds, which actually look more like fourths.

I think this job does a great job with the principle of scale. Everything of the same importance is the same size. The squares featuring events and T-shirts are larger than the object around them, but since everything is so uniform and well proportioned nothing looks too big- oh, except the logo.

This site uses shape (squares) to demarcate importance. The logo is the largest square. Other saleable items are also enclosed in squares. There is also a light square around the main menu at the top (not sure if you can see that in the screen shot). Squares can also be found in the general layout as delineated by the use of white space.

White Space:
White space gives the page a very clean and organized look. I believe the main objective in the use of white space here is to delineate each set of menus, articles, etc. I believe white space is used very well here.

Line is used along with hierarchy on this page. The most important menu at the top uses a thick red line. Topics are separated by dotted lines and a thin solid line is used to separate article title and author from the print. Lines are also used to give emphasis to the square of the logo. I don’t feel that line is used for movement here. At least when I look at it I don’t feel the lines guide my eyes anywhere.

Critique: Although I think this site makes excellent use of many principles and elements, I personally think it is very boring. In fact, the only reason I picked it is that it used to look like this:


Maybe it’s not as clean looking, but I feel the use of the red as line, shape, and space make for a much bolder and interesting look.

The one thing I would definitely change is the logo, or at least the use of the logo in the site. I feel it doesn’t match at all. Although it fits into the color scheme better in the revised site, I just think it could be incorporated better. Of course you want the logo to be noticeable, but this to me is just overkill. I would make it a bit smaller so it doesn’t take up an entire fourth of the page and perhaps instead of brown lines around the square of the logo I might use the red to incorporate it into the color scheme of the design.

Jazz Clubs

OK, not sure why exactly but here I fell in love. And I have to say that to my shock and horror I went to the site a couple of days ago and got this screen shot. Today I went there again to look at something and it was all changed.


I think what impressed me most about this site was how it handles a HUGE amount of information in such a simple way.

Unity and Variety:
Unity is achieved by the use of few colors- brown, light blue and a little orange and black. Also, the shapes are all basically squares (in one form or another). Variety is handled through the use of the jazz lettering at the very right of the page. The background is the usual blue, but the lettering is bold and black. This is juxtaposed by the tiny black line by the sax. Also the tiny orange line at the right unifies that side of the page with the sax on the left. The sax also adds variety by being the only abstract shape on the page.

The shapes here are squares which look more interesting because they are overlapped. What I really like here is the use of squares inside squares (diamonds) that make up the main menu. I thought that was very creative. I also like the sax on the far left and the Jazz lettering on the far right.

White Space:
Here I’ll call it brown space and blue space. I love the way the blue space is handled. It is used as a backdrop for the sax, the menu and the title of the website. What I don’t like is the use of the brown space. Other than holding a few menu items, the brown doesn’t do very much; unless there is a device being used here I don’t know about yet.

Line is used here in several ways. There is a thin orange life to the far right of the page to match the color of the sax on the left. Line is also achieved through the blue diamonds on white squares in the main menu, and also the space between the squares. The title Jazz Clubs and the title menus also act as lines. It sort of draws my eyes across the page in a diagonal way. Also the letter menu under the blue space acts as a line, the Jazz live menu also acts as another line. I like the fact that the designer of this page used letters to create lines.

Generally I really was struck by this site. My only two criticisms are the blank brown spaces; maybe they could have chosen a more pleasing color- just my opinion, I’m not fan of brown. Also the 3 circles at the right side of the page by the menu. I’m not sure if the designer threw them in for variety but they just seem out of place to me.

Objective: Locate successful use of line, and space/white space in a printed medium. Explain how it was used successfully based on your understanding of the elements.

I chose to use the cover for Eric Hutchinson’s CD, “Sounds Like This.”

Why I chose this is the use of line. The artist uses a series of different objects to create lines, all going the outline of the singer and his guitar. What I really thought was creative here was that the objects used were not only straight lines, but curved ones as well which incorporates shape into the line. What I also liked was that the singer himself is a series of different lines. The lines are very distinct and all going in the same direction, which overcomes the lack of unity in the objects around the singer. The white bubble allows us to view the singer’s name and the name of the CD.

Juxtaposed to the chaotic scene is some white space around the singer, giving him a sense of hierarchy among the madness of the drawing. I also think the white space achieves hierarchy because our eyes rest where the most important part of the picture is.

What I think is really great is this is even more pronounced in the color version.

Main Project
Objective: Create a composite that will continue to incorporate new material as the course progresses.

Please get out the Kleenex, ladies and gentlemen; you are witnessing a train wreck.

I had a great website, but because it was also used by the kids in my class it could have a more childish theme (apples, classroom objects). Now I want a site that is certainly child friendly, but also sophisticated enough to make teaching professionals use the site and buy the educational materials that will be on it.

This is what I have so far:

Comp 1

I plan on having some graphic (technology) at the top. What the rest of the page will look like will depend on that.