Grid

Emphasizing the Grid

http://www.artic.edu/aic/

The Art Institute of Chicago's website is a very grid based website. It uses many design elements to visually emphasize the idea of the grid. All of the images on the site are a square or rectangular format, and all of the information on the site is also contained in boxes. They also use the element of line to break up information; this further emphasizes the idea of the grid. The only evidence of them some what breaking the grid is the left column of information; on the homepage for instance, the information on left does not directly line up with the box above it, yet it is still in a column format and left aligned. The fact that this site is for the Art Institute of Chicago makes it appropriate that it is a grid based site; however, because it is an institution of art they could have added more organic elements to break up the rigidity.
 

Organically Breaking the Grid
 

http://kids.threadless.com/

The Threadless Kids website is a much more relaxed site as it is a clothing site for kids, so due to this fact is is not limited to a strict grid format. In fact, they break the grid on several occasions. First of all, the background image fades into the top header which makes the header blend into the background. Also, the top header's navigational area is very unstructured as the words to get to each page exist in a balloon, and the balloons are not lined up but hanging at different levels. The images are not hard rectangles, they are instead rounded of rectangles, and the information is also contained in rounded off rectangles. When you go to the various pages the structure becomes much more grid like showing the articles of clothing in rows and columns; however, the images are not contained in boxes. The images are of the articles of clothing themselves, so an image of a shirt looks like an image of a shirt with no background or rectangle to conform it to a square like shape. The images that are in rectangles such as the heading on other pages also break the grid format as they have images coming out of the rectangles border so they break up the rigidity as well.

Shawn Stucky

http://www.shawnstucky.com/

Shawn Stucky is a fine artist in the Chicago area. He also does work in photography and  screen printing. To check out his work you can click the link above which is his website.

His homepage features ten navigational elements including Home, Fine Art, Photography, News, Exhibition CV, Publications, Bio/Artist's Statement, Contact, Links, and Purchase. These elements are arranged on the left side in a single column. The arrangement of these elements fits seamlessly into the overall layout of his pages. The color of the text used for these navigational buttons is a dark gray, and it changes to a light blue when you place the mouse over it. This holds as a general rule for all links. The typeface for the navigational buttons is visually distinct from the other text as it is serif and all the other information on the homepage is in a sans serif typeface, still the font's arrangement and color flow well with all elements on the homepage. The upper left corner features the title of the website: Shawn Stucky, which is a script type font and dark blue in color. It is also the largest in size of all the text on the page. This creates a sense of hierarchy even though his name is in all lowercase letters. To the right of the navigational buttons in a black smaller font he introduces the site and has a review of himself by another person.

The homepage has a good overall sense of balance. He uses the negative/blank space to balance out the areas he has text/image. Speaking of image the only image on the homepage is the background itself which is an image of one of his pieces of artwork. This image remains consistent as the background throughout all of his pages, and he builds his layout around the background. His layout, which remains consistent from page to page, along with his font choice and with his color pallet of blue, gray, white, and black, creates a sense of a distinct visual relationship from page to page

All pages following the homepage pretty much mirror the homepage. In general, the pages are laid out in so that there are chunks of information. The title is the largest and boldest of the information and always in black. The subtitles are smaller but still black and still bold. The information following that is the the same size as that subtitles, but not bold, and the links are gray and when you click on them they turn light blue. He uses white dividing lines to group information together.

If we move on to the Fine Art page we see that the layout of the page remains the same as the homepage with his site title in the upper left corner, the navigational buttons under that, and to the right of the navigational buttons the main information of that page. This page features his works in the fine arts field. First, he introduces the page as he did before on the homepage. Then he goes on to briefly explain each collection and under the explanation is his actual work in that collection.

The works are small, but if you click on them they appear bigger on the page, and the background fades out so you can focus on the piece. Also, when it appears bigger, underneath the picture in gray lettering it features the piece's title along with dimensions and what image number it is out of how many images he has total on that page. Also, if you don't want to see the works bigger, when you run your mouse over the images they lighten and the title and dimensions appears if you pause your mouse on the image.

The Photography page is visually arranged the same as all the others. When you first go to the page, the photography information comes from the bottom of the page and moves straight up to the position of the information on former pages. The arrangement of this information is in a table sort of layout; the table is of the same color pallet as the rest of the site with shades of blue.

Each category of pictures has its own square or rectangle so to speak, and when you run your mouse over that square it turns a darker blue shade. At the bottom of the table there are two rectangle buttons; one to lead you to the previous screen of the table, and one to lead you to the next screen of the table. When you run your mouse over these blue/gray buttons they turn white. There is a small photo on the left side and then a title of the series of pictures and a description underneath about that series of pictures. When you click on the square the information runs down off the page and a picture comes up. There are a series of buttons under the picture (all of the same color pallet) which are much like when viewing a slide show; however, if you choose not to take over managing your viewing time, the pictures are on a timer and change.

The News page consists of news postings regarding things Shawn has done lately including recent things he designed or work of his that was recognized. He also discusses things regarding music such as albums that are coming out. There is hierarchy between the news posts and the date it was posted as the date is a smaller size and gray like the interspersed links. Each news post is separated by a white dividing line making it easy to tell one post from the next.

The Exhibition CV page features his different exhibitions. He divides the information up by date therefore the dates in each group are emphasized the most being bolder and larger than the other text. The date is then divided up into cities and then the galleries featuring his work. The dates go from soonest to latest.

The Publication page features various publications regarding Shawn. First, he starts out with the title of the first publication. Then under the title there is a link to the entire story, and following that the story begins. Then there is a white line and the whole layout starts over again with another publication.

The Bio/Artist Statement features exactly what it states: a bio on Shawn and his artist statement. The Contact page features Shawn's contact information along with the social networking sites he belongs to. The Links page is laid out slightly different than the other pages. Instead of being laid out vertically is laid out horizontally in groups. He has the general categories of the links (photographers, visual artists, etc.) going across and the links that belong in that category listed underneath.

And finally we move to the Purchase page. The Purchase page only features a note from Shawn saying you can purchase his work through Etsy as he hasn't really put together the purchase section yet. This is the only unfinished element on his site, but looking at the site through a design perspective it is easy to say it is finished in every other aspect. It is easy to see he spent a good amount time putting together a very well designed and well functioning website. So ,again, I encourage those of you who actually read through this whole post to go  to his site and check out his work if you still have the time because his work is incredibly interesting and unique, and his website is a great example of a website well done.

Website Critique

Playlist.com

Playlist.com, to me, is a very well designed website. I use this website on a daily basis and it is both aesthetically pleasing and well functioning. Playlist.com is a site that allows its users to build their own playlists of music for free as well as listen to other peoples playlists.

I really like the layout of this site. It is not too cluttered, and it is well balanced. The elements of the site are each grouped into their own box making it easy to distinguish one area from another. The site is laid out such that the search box is at the top and the top searches of the day follow under it. The next box holds different featured playlists. The box under that holds the top ten playlists of the day and the box next to that holds the playlist.com blog. Finally, at the bottom of the site there is information "about" the site and things of that nature. The site itself almost has a rhythm to it in a sense because of the way it is laid out (in a grid like style), and certain elements repeat themselves throughout such as the color of the text which holds the whole site together. Also, when you go to the different pages on the site, there is a visual consistency from page to page. This also helps in holding the site together.

Hierarchy is used to distinguish certain elements/parts of the site from one another. For instance the size and color of the text changes throughout, yet it is always easy to read. The color scheme is limited and simple (blue, gray, black, and white), but I think it works very well for this site. It makes it easy to distinguish the text and images. The main navigational buttons/links are located on the top and look different from the other text in the site. The "start building a playlist" text is emphasized the most on the home page. It is right at the top and the text is bigger and bolder than the other text around it. This is appropriate because the main purpose of the site is to build a playlist and listen to others playlists. The titles of the different featured playlists are bigger than the music on the playlist itself.

The site is very easy to use you just click the create a playlist option at the top and then name it. Once you have done that you just search for the music that you want on your playlist and it lists what it has based on what you type in. Then if it is what you want you add it to your playlist by clicking the add button which looks like a (+). It is very uncomplicated, and I have been very happy with it except when it doesn't have the music I'm looking for, but I am often surprised at what it does have.

http://www.playlist.com/

K & S Tailor Alterations and Shoe Repair Shop

K & S Tailor Alterations and Shoe Repair Shop is a website to advertise the store K & S Tailor. It is quite possibly one of the worst websites to advertise a business that I have ever seen. I don't mean to be harsh, but it looks like someone started the website and gave up before they were finished.

For starters, the site consists of one page, the homepage, and nothing else. The homepage has a grid like layout which is fairly cluttered consisting of mostly pictures of the businesses work. The pictures are of varying sizes which leads to and overall unbalanced finish of the homepage. The pictures are also labeled underneath. This would seem appropriate in most circumstances; however, they are hand written labels in various people's handwriting which causes a sort of disconnect between the pictures on the homepage.

Since were on the topic of text I suppose this would be a good time to move on to the title of the site and other information provided that is not handwritten. The font for the title of the website is a script like font and it is used throughout the website. I can see this font being appropriate for the title, but the whole website, I think not. If they had used a sans serif typeface I think that would have set off the title and allowed the user to distinguish between the other information on the site more easily.

They create a sense of hierarchy through color change, boldness, and size change; however, though they use these elements, they are all used wrongly. I also think the colors are all wrong for the site. They use three colors white, black, and yellow. Perhaps they wouldn't be so bad if they had a more organized usage for their colors, but something leads me to believe that wouldn't have saved their site anyway.

 The site has but one link: the link to the companies email, and though this link does function, the site as a whole does not. It is a complete and utter mess when it comes to the principles and elements of design, and it's functionality, though met, looks to the user as if they were barely trying. So, I encourage you to check out this site and perhaps click on the link to the companies email (it won't be hard to find) to give them some advice on how to better their website because, let's face it, this website is a failure to both the company and design which is all around unacceptable.


http://www.kstailor.com/

Andy Warhol

Life

Andy was born August 6, 1928 in Pittsburgh, Pennsylvania. He studied commercial at the School of Fine Arts at Carnegie Institute of Technology. He was a leading figure in the movement known as pop art. He died February 22, 1987

 

Works 

Some of his most famous works are Dollar Sign-1981, Campbell's Soup Cans-1962, Marilyn Monroe-1962, and Liz Taylor-1964.

Information

http://en.wikipedia.org/wiki/Andy_Warhol#Books_and_print

http://www.ocaiw.com/catalog/index.php?lang=en&catalog=pitt&author=702&lista=1