Archive

Monthly Archives: January 2012

Our first website, an email blast for either and existing or imagined business, was created in Adobe Photoshop, where we set up guides and sliced the files, in preparation for linking the images. Next we opened the files in Dreamweaver where we proceeded to link the individual slices to the appropriate places on the web, for example my email blast was created for the Kate Spade company, therefore I linked several images to their homepage. The linking was completed through adjusting the coding of the file within Dreamweaver, and once we checked the links were working properly, the files were put on the University of Akron sever.

http://gozips.uakron.edu/~lam127/

 

Rule 1: Symmetry is bad- the more visually interesting and complex layouts are usually asymmetrical. Five examples of well designed sites that feature asymmetrical layouts include:

1. http://www.olschinsky.at/  This site uses asymmetry in that there is a long block of images more towards the center containing the artists’ work, balanced out with a small navigation bar on the upper left hand of the page. This style is maintained when you click on individual photos as well, with the display of one large photo towards the right and a longer list of links on the left.

2.http://artless.co.jp/  With most of the type resting on the left side of the page and the amount of information, the white space on the right allows the viewer’s eye to rest.

3. http://www.hellowman.nl/ I like the design and simplicity of this site, however I think that it could be much more dynamic if the layout was asymmetrical rather than having everything evenly placed within the center.

4. http://bennewman.co.uk/ This website has a similar design as the previous one, with a more symmetrical layout of the thumbnails of work, which is made asymmetrical with the inclusion of the left bar of links as well as the artists’ logo in the upper left hand corner. The page shown when you click on an individual work of art is also asymmetrical in that it shows a large image with a small block of type explaining the piece aligned with the left edge. This allows the image to be the main focus on the page.

5. http://saranicely.com/  The layout when you enter the site features large images towards the center that are examples of her designs, and a small set of navigational links towards the left which allow the photos to be the main focus and show viewers her capabilities immediately upon entering.

Rule 2: White space is good; it offers relief for the eye and allows viewers to focus on the content. Five examples of well designed sites with good use of white space include:

1. http://www.turntopage84.com/   This designer has chosen not to use any color within the background of the site as well as in the navigation bar on the left, which allows the bright colors within her work to be the main focus, and keeps them from clashing with others in the design.

2. http://melindatidwell.com/  The work by this designer is mostly collages, and by having all whitespace around the images it keeps the design from being to busy, and allows the viewer’s eye relief.

3. http://mattluckhurst.com/ The use of a white background in this site allows the colors in the images to really pop, especially when viewed at a larger scale.

4. http://www.nathangodding.com/  The large block of images in the center of the page contains very bold colors and is balanced out well by all of the surrounding white space.

5. http://www.joanneyoungillustration.co.uk/   The artists’ illustrations are very soft and use more muted tones which I think is complimented nicely by the use of a simple white background

Rule 3: Less is more; the content must be organized into a clear and concise architecture. Five examples of web sites with well organized content include:

1. http://ednacional.com/  I like the fact that this site only has a few links at the top of the page, that don’t take the viewer’s focus from his artwork displayed in the center. Also, the use of a limited color palette works nicely within this design.

2. http://cargocollective.com/coryschmitz

3. http://www.pocopeople.com.au/   This site features a very simple display of navigational links, which works well with a large image being the background of the page. I also like how when you hover over a link, it interacts with a corresponding element within the photograph. The decision to keep the only color on the page as what is displayed in the photos, while the rest of the type is white allows the design to keep from becoming too busy.

4. http://jasonmunn.com/posters.php   I really enjoy the limited use of color within this design; the white background and light gray text allow the page to be very clean. This also allows for the images of the designer’s work to really come forward, for they are the only source of color and therefore not competing to be the focus.

5. http://www.markwarrenjacques.com/   This designer balances out his decision to use large images with a very small point size of text within his links on the left, and no color throughout the page except in that of his work.

Rule 4: Contrast is Key; there are several types to look for when designing a page, including contrast of visual elements, size, color, shape, texture and direction. Five examples of well designed sites which incorporate contrast into their pages include:

1. http://patperry.net/  There is a nice contrast between the size of the large photos on the page, and the small type used in the navigation links, as well as between the white background and the dark tones within his illustrations.

2. http://hvasshannibal.dk/  I like the contrast of the bright colors within their work and the white background, as well as the two different styles of type used for their name and the links. The use of different scales of thumbnails on the home page is also visually interesting.

3. http://www.hugoandmarie.com/  Within this site I like the contrast between the one large image and the several smaller thumbnails below it, as well as between the grayscale background and the bright colors within the images. There is also a nice contrast in direction, because at the top the links and large image are read horizontally, while the smaller images and text below are lead you vertically down the page.

4. http://margaretkimball.com/  In this design, I like the contrast between the colors within the large image and the way the thumbnails are displayed in black and white, as well as the contrast in size of the images.

5. http://www.anneulku.com/  I like the contrast between the small point size of the type used on the left side of the page, with the large scale images that appear once you click on an icon. Also, I think the contrast between the simple white background of her site and the bright colors within her work is very visually interesting.

Our second assignment was to research five well designed artists’ portfolio websites.

1. www.iamdocto.com  This portfolio site has a soft beige background color that works well with the blues and reds found in much of his work. I like how he has all of his information and work displayed on the homepage, but to make browsing easier he has also incorporated a navigation bar that takes you down the page to the designated section you choose.

2. http://designforfun.com  The designer has used a pleasing textured gray background for this site, and all of the work is displayed upon opening the page, which I find very successful for it shows viewers the designers’ style immediately. You can view the work as an entirety on the homepage, as well as navigate through arrows once you click on an individual photo, where the artist also shows process photos.

3. www.ferrantorras.com Upon first entering this site, I was confused as to where the artist placed the navigation links and I think they could be more easily accessed, however I enjoy the way he incorporates his illustration into the site itself. I also like how when you click on an individual photo, it is enlarged but does not take you away from the page you were on.

4. www.glennsorrentino.com  In this portfolio site, I like the way the designer has organized the examples of his work, as well as the way the images move and interact when you click on a tab. This is also similar to the first site I listed in that everything is displayed on the homepage, and when you click on a certain tab in the navigation bar it takes you to that section on the page.

5. www.tobybartlett.ca  This designer has chosen to include an “enter site” page which I didn’t like, however once you are in the actual site he has a nice use of type and I also enjoyed the use of his logo throughout the sections. His navigation bar on top remains in the same place on each page which makes browsing much easier as well.

Our first research assignment in class was to locate three well designed websites, as well as one that is not aesthetically pleasing.

The three successful sites include:

1. www.pinterest.com  I chose this site due to how easy it is for users to navigate around, as well as how the simple background and text color allows the pictures posted to be the main focus on the page. I also enjoy the way that the design incorporates the idea of this site being similar to a board to which a person could pin up a picture or saying they enjoy. The different sections displayed at the top of the page also make browsing much easier, for it allows users to narrow their results.

2.www.anthropologie.com  This design relates directly to the type of display signs as well as products this retail clothing store features. The colors featured within the site are all soft, and allow the bright colors of the clothing to come forward. The site keeps a consistent navigation bar on each page which makes browsing easier and also have a similar way of displaying their garments to keep the page from being too busy.

3.www.charleyharperprints.com  This is a site displaying the work of Charley Harper, and one aspect which I found successful was immediately upon opening the page, viewers are shown large examples of his art. This site also has a limited and simple color palette, with an illustration done by the artist consistently placed at the top of each page. Designers of this site also made shopping online easier for each work has a large photograph available to view so that customers may get a full feel for his art.

The poorly designed site is located at www.wateronwheels.com