Sites that demonstrate Fine Art Techniques

Here are a variety of sites related to Week 3 topics that you might enjoy exploring. Try to see how the fine art techniques are applied to web design. Please note: the links will open in a new browser window.

Relationships, Scale, Synergy
http://www.looneybean.com/
Nice use of scale, texture and value to create relationships and synergy.

http://www.mousetominx.co.uk/
Variety of scales

Closure: challenges viewer to complete "partial" objects (might its web equivalent be Interaction?)
http://www.kirsanov.com/index.html
This site encourages viewer participation by using rollovers and partial objects.

Direction, Movement
http://www.i-avion.com/
Notice how the images and shapes help to guide your eyes. They create a dynamic movement on the page.

http://www.honormansion.com/home.htm
Various elements combine to lead the eye around the page. The images create a strong visual direction.

Rhythm

http://lastexpression.northwestern.edu/index2_frameset.html
Different sizes and placement of images creates visual rhythm.

http://www.curiousgenerationgroup.com/
Rhythm created by repetition of different colored circles.

http://veerle.duoh.com/
This designer uses blocks of type, color and image to create rhythm.

Perspective
http://www.forestedge.org.au/
http://www.ljetovanjerab.com/en/
Photos or illustrations can be very effective for leading the eyes right into the screen.

http://www.huxleyprairiefest.com/
Use of converging lines can create perspective and depth.

Value

http://www.vectorstories.com/
Use of values as background and highlight for headings.

http://www.jennysrealm.com/wildrealm/home.html
Value creates visually interesting shapes and dimensionality at this site.

http://frecklesandhandsome.com/
Value can create interesting backgrounds!

Texture
http://jaredcampbell.com/
Huge variety of textures.

http://www.yvettemahon.com/
Combination of handwritten/sketch style and clean typography.

http://boompa.ca/
Quite the background texture on this one. Even the text content area has a textured feel.

Cropping
http://www.celtica-wales.com/
Cropped and angled images can create a very dynamic design.

http://www.worldconcern.org/
Cropping is used to focus in on faces and emphasize the goal of the web site. Be sure to check a few pages to see how they crop closeup photos.

http://www.grenson.co.uk/
Interesting rhythm is created by different types of cropping.

Figure-Ground

http://www.ssstudio.pl/www/main.html
This site encourages the viewer to interpret shapes.

http://douglasmenezes.com/wp/
The diagonal lines seem to create visual confusion about their figure-ground relationship.

http://www.creation-internet-toulouse.fr/
This design creates interesting shapes using figure-ground. Your eyes switch between seeing white shapes (defined by gray lines/areas) or gray shapes (defined by white areas/lines).

Format

http://www.creativehouse.com/flash/
This site uses center screen and is very vertical.

http://www.8vodesigns.com/
This site, by contrast, uses a horizontal scrolling format.

Grid
http://www.boxtop.co.uk/index.php
Peruse this site to see how the layout remains the same from page to page.

Sites with info pertaining to class topics

Grids
http://webstyleguide.com/wsg3/7-page-design/7-design-grids.html
Info on using grids as a layout device

Figure/Ground Illusion Site
http://www.michaelbach.de/ot/
Information on all kinds of optical illusions including figure-ground perception and art. You can have a lot of fun here!

Fine Art Archive
http://www.artchive.com/
Wonderful archive of fine art if you feel like taking a break from screen design!