A work of beauty

“In every man’s heart there is a secret nerve that answers to the vibrations of beauty.”

- Christopher Morley

Introduction

This weeks readings were mostly focused on designing websites that are aesthetically pleasing. Certainly this is a topic of the utmost importance to web design. When done properly, the appearance of a website can draw in users and direct their attention to helpful information. Research has shown that users will learn more from websites they find aesthetically pleasing. But to me aesthetics is a topic that goes beyond the surface. Beauty can suffuse life with meaning that is more powerful than that which can be described with mere words. The creation of beauty is a noble undertaking, and I remind myself to strive always to bring a little bit of beauty into a cold and barren world as I seek to carve out my own niche on the web.

Notes on Readings

MacDonald, Chapter 7

In Chapter 7, “Adding Graphics,” MacDonald discusses the ins and outs of adding images to websites. He begins with a description of the <img> command, to include adding alternate text, titles and sizes. He then moves on to the image file formats used on the web, which include:

• GIF: Used for text displays with few colors (such as logos)
• JPEG: Used for photos and other images that require compression
• PNG: Suitable for all kinds of images but does not compress well

MacDonald then explains that these are raster graphics which display images as grids of dots as opposed to vector graphics which display images as mathematically rendered shapes. He moves on to a discussion of compression; reducing the amount of disk space required to store an image. He explains that GIF and PNG files are lossless, preserving image quality but inhibiting compression, while JPEG files are lossy, allowing greater compression but often at the cost of image quality.

Next MacDonald discusses including images in the page. He gives instructions on using CSS style properties to include inline images with wrapping text. He explains how to use the <span> element to add pictures with captions. He also instructs the reader in using thumbnails to create tiled backgrounds and larger images to create “watermark” backgrounds. He explains how the <div> command can be used to create backgrounds for for other elements on the page and CSS properties can be used to create graphical bullets in lists. MacDonald concludes the chapter with tips for finding free art on the web.

This chapter was rather enlightening for me, especially the description of image file formats. I had always thought that an image is an image and had no idea how much difference in display the file format made. The discussion of compression and creating thumbnails will be especially helpful as I create my website. The inclusion of images helps users to remember information by giving them another reference beyond text, and this chapter will help me do so in a manner that will draw the users attention.

MacDonald, Chapter 8

In Chapter 8, “Linking Pages,” MacDonald instructs the reader in the use of hyperlinks to pull many pages together into a single website. He begins by explaining the use of the anchor (<a>) element. He explains the difference between internal links (to other pages on the same site) and external links (to other websites). He also notes the difference between relative URLs (using file paths, only used for internal links) and absolute URLs (using the full http:// address).

MacDonald then moves on to a discussion of the relationship between file directories and relative URLs. He explains how to move down into a subfolder (using a subfolder/filename.htm specification) and up into a rootfolder (using a /rootfolder/filename.htm description). He also discusses linking to other types of content. Next, he instructs the reader in building links into images or parts of an image using an image map. He moves on to a discussion of adding bookmarks to parts of pages (such as in an FAQs section) by adding the # sign to anchor hyper-references (using the <a href=”pagename.htm#bookmarkname”>bookmarkname</a> format). MacDonald concludes with instructions for checking links for ongoing site management.

This was a very useful chapter. Hyperlinks are what really differentiate websites from other information sources as they allow users to gather many different types of information rapidly. I know I stop paying attention to websites when I find a whole bunch of broken links. I hope to include many helpful links in my site, but I will need to be very vigilant in checking them. The descriptions of automated tools to check links I found especially helpful.

Beaird, Chapter 2

In Chapter 2, “Color,” Beaird explains the centrality of color to web design. He begins by discussing psychological associations with certain colors to include:

• Red: Historically associated with passion, it can stimulate adrenaline and blood pressure
• Orange: Historically associated with food, it can stimulate metabolism and appetite
• Yellow: Historically associated with activity, it is very noticeable
• Green: Historically associated with nature, it is generally experienced as soothing and hopeful
• Blue: Historically associated with depression, it tends to be experienced as very calmning
• Purple: Historically associated with royalty, it is the least commonly used color and tends to stand out
• White: Historically associated with purity, it is useful for creating contrast
• Black: Historically associated with evil, it is can be used for forceful displays

Beaird then discusses other concerns, to include:

• Color Temperature: Red to yellow colors denote warmth and green to blue colors denote coolness
• Color Value: Lightness and darkness in color can be used to create dichotomy
• Color Saturation: Bright colors stand out and dull colors can be calmning

Beaird moves on to discuss the difference between primary, secondary and tertiary colors. He explains how color wheels can be used to choose color schemes. These can include:

• Monochromatic: Schemes that use variations on a single color
• Analogous: Using colors adjacent to one another on the color wheel
• Complementary: Using colors located opposite one another on the color wheel
• Split-Complementary: Using 2 analogous colors and another that is complementary to the pair
• Triadic: Using colors located equidistant from one another on the color wheel
• Tetradic: Using a scheme of 4 colors, 2 of which are analogous to the other 2 and the pairs being complementary to one another

Beaird explains how hexidecimal notation is used to display color on the web. He concludes with a description of how his own color selection informed the design of the Florida Country Tile site.

As I have not taken an art class since elementary school, this chapter contained a lot of information that was completely new to me. The psychological associations with color I found especially helpful, as even the color scheme itself can be used to convey information to users. The use of the color wheel was also rather helpful. Having no background in art whatsoever, I will need all the help I can get in making color selections.

Website Reviews

http://webstyleguide.com/index.html

The Web Style guide is a very attractively designed site with a very inviting, muted color scheme. I was blown away by all of the informative content as well. The navigation bars makes the book very easy to both browse and read through. While much of what I looked at was a little too advanced for me at this stage, I am sure it will be very helpful for me to have this page as a resource once these issues become pressing concerns for me.

http://universalusability.com/access_by_design/index.html

Universal Usability is a very simply and elegantly designed site with a calming blue border and muted yellow frames that draws the users attention very well. The content was similar to the previous site, but will also make a handy reference as work on my site progresses. Horton certainly raises many valid concerns I will need to keep in mind as I seek to create sites that all can benefit from.

http://www.jjg.net/ia/

Garret’s site site is very bare-bones, with just enough enough color splashed in to subtly grab the users attention in a few key areas. While there was not as much free content available here as the previous two sites, there was enough to give one a solid introduction to the principles of information architecture. I found the visual vocabulary for interaction design to be particularly helpful.

http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/

Smashing Magazine is a mostly achromatic site with just enough orange and blue thrown in to make for a nice contrast. The blogs they reviewed were another story entirely. Most were so busy and crammed full of stuff that the actual content just seemed to be an afterthought. Some were truly breathtaking however, particularly Antiphrasis.

Final Thoughts

Form follows function in so very many aspects of American life. Architecture and city planning seems so boxy and unoriginal. Most of the writing one encounters on a daily basis seems to take so little pleasure in the written words. Television and cinema mostly follow uninspired cookie-cutter convention. However, it is this very lack of creativity that makes true works of art such a sublime and moving experience when encountered. The new technology gives us all a wonderful flexibility in sharing our own creations with the world. If we are touched by such grace, those creations will be beautiful.

Until next time, take care of yourselves, and one another.

Farley