Session One: Visual Properties and Compositional Aesthetics
The objective for this session is to overview visual principles that support fundamental design and form building as it relates to web design. Discussions focusing on composition include field, balance, unity/variety, emphasis/focal point, depth and movement. Additional topics addressing visual elements include line, pattern, texture, value and color. The following discussions will be complemented with web sites that support these fundamental theories of design.
The goal of this session is to give the student a palette and tools in which to begin building web pages. This discussion will help to build the students visual vocabulary and expand their critical thinking skills. It will provide a platform for design and visual assessment skills utilized throughout the quarter.
Assignments
Create four web images:
1. Pattern study using a complimentary color scheme.
2. A composition that incorporates, depth, movement and focal point using an analogous color scheme.
3. Create a visual texture, incorporate the texture into a composition that addresses the issue of scale and contrast.
4. Create a composition that focuses on line and shape using a triadic color scheme.
The following compositions will be created using PhotoShop 6 and Image Ready 3.
Create each image at 800 pixels wide x 600 pixels tall. Saved as a PhotoShop file
and GIF and posted to students server space for online critique. *
________
Note: I begin my images in the RGB setting set at 300 dpi, then when I save it as a "web safe" image it is compressed to 72 dpi.
I also build my compositions using a "web colors".
*Posting Your Exercises
To create HTML pages to post exercises, you can simply copy my code (in the browser, go under "source" in file menu and it will allow you to copy" and use my naming conventions for your images. File your html pages and images in a folder titled "ex_one" and upload the folder with html pages and images into your "public" folder on your server space. Your URL to this page will be http://students.washington.edu/user name/ex_one/index.html
Complete a web audit:
Below are question to answer for the web audit assignment. The goal is to begin looking at sites with critical visual skills. These skills will help to formulate your thoughts and ideas regarding web design.
Web audit questions:
Name:
URL Address:
Discuss the compositional aspects of this site to include field, balance, focal point, depth, movement, contrast and scale.
Discuss the visual properties of this site to include shape, line, pattern, texture, value and color.
How do you visually rate this site (1 being terrible and 10 being great) and discuss why.
Complete the following sections in the required text:
These exercises are designed to complement your tool building skills. They offer additional design building skills that will enhance your ability to create stronger sites.
Web Design Essentials, second edition; Dennis, Anita and Giudice, Maria; Adobe Press (Peachpit Press), 2001
Chapter One:
Pg. 10 Tiling a Background
Pg. 12 Selecting and Replacing Colors
Pg. 14 Dithering Part of an Image
Pg. 16 Expanding on the Web-safe Palette
Pg. 18 Managing Page Elements with Layer Styles
Chapter-Reference
Pg. 104 Understanding Color Palettes
Pg. 114 Hex/RGB Conversion Chart
Additional Resources
Recommended textbook for this course:
Adobe PhotoShop 6.0: Classroom in a Book, Adobe Press (Peachpit Press), 2000
Designing Web Graphics.3, third edition, Weinman, Lynda, New Riders Publishing, 1999
Design
A Primer of Visual Literacy, Donis A. Dondis
Design Basics, David Lauer
Design Fundamentals, Robert Gillam Scott
Language of Vision, Gyorgy Kepes
Living with Art, Rita Gilbert
Principals of Two-Dimensional Design, Wucius Wong
Color
Interaction of Color, Josef Albers
The Elements of Color, Johannes Itten
http://www.lynda.com/hex.html
http://www.visibone.com/colorlab
Adobe PhotoShop Online Tutorials
http://www.adobe.com:80/products/tips/photoshopel.html
http://www.adobe.com/products/tips/photoshop.html
http://www.iboost.com/build/software/pshop/748.htm
http://www.lynda.com/tips/index.html