Using graphics in web design

Right now, on the web, there are some really fabulous experimental designers out there already doing this, often for personal sites and portfolios. However, for many designers (myself included), while using a CMS has made our jobs creating websites easier, they have also possibly stunted our growth. I used to build a lot of WordPress sites and while I’d spend a lot of time and enjoyed creating a “unique” design, that design would follow through the whole site. Every page pretty much looked the same. Each blog post looked the same. This could be considered consistency, and repetition is an important principle in design, but does it all become boring after a while? If you’re reading a magazine, does every single article look the same? No sir. (Farley, 2009)

The citation above explains what I want to do with my websites visually. I want the layouts to be creative and unique. I want consistency but I want each page to look a little different and these things will be taken into consideration when designing the layout of my web project.

I have researched the principles of design to help me with this and what I will be focusing on when designing my images. The principles I found most appropriate for web design are:

• Balance - symmetrical or asymmetrical. Looking at images and making sure they make 'sense', for example size of foreground objects against backgrounds, gravity, composition.
• Rhythm - Regular is when the images are equal sizes and lengths and the spaces between objects are equal. Flowing is when an image is given a sense of movement. Progressive is when a sequence of the same image (or similar in size) is shown, usually in a pattern.
• Proportion - the relationship in scale between different objects, ties in with balance and composition.
• Dominance - an object in the foreground may be dominant and the background sub-dominant, or even the other way round. This can be achieved with colour. Dominant objects tend to be brighter and more defined, sub-dominant will be faded and lighter colours would usually be used.
• Unity - how different elements in graphics tie in to give an image a 'story' of sorts. Random images placed in a layout would confuse a user. A certain level of consistency should be used, but not be used so that the site is boring.
• Alignment - our brains group together similar objects, colours, shapes and sizes. This should be used to an advantage so that an image makes 'sense' to our brains.

I also think it's important to have the graphics fit the content. Images of lipstick would not suit the content of a football website and would confuse users. The graphics should be appropriate but can still be creative.

Using this information is important to me for making a suitable layout for my web project so that it is visually appealing to the user and does also not confuse the user.


References

1. Jennifer Farley. (2009). Art Direction: Taking Web Design to the next level. Available: http://www.sitepoint.com/blogs/2009/07/31/art-direction-taking-web-design-to-the-next-level/. Last accessed 11 March 2010.

Further Reading

1. Jennifer Kyrnin. (). Art Direction: Basics of Web Design: 14 Tips for Better Pages. Available: http://webdesign.about.com/od/webdesigntutorials/a/aa070504.htm. Last accessed 11 March 2010.
2. Joshua David McClurg-Genevese. (2005). The Principles of Design. Available: http://www.digital-web.com/articles/principles_of_design/. Last accessed 11 March 2010.