Graphic Design and Good Web Design

Assignment: Work on finishing your image websites.
Remember, your image websites are due March
25th.

1. See Examples of Image Websites

2. Creating a website on Hotels at Waikiki

Visit Waikiki Working Draft
Graphics that helped stimulate
design work for this website
Basic Page with the slideshow
in a movable layer
Ideas for Revising and Improving this website.

3. Redesigning the Sewall Academic Program Website

3..Remember, your Image websites are due on Saturday, March 25th. If you need some ideas for improving your websites, see Webby Awards and/or Lynda Weinman's Inspirational Websites and look at some of the award-winning websites across different categories. I would refer to these categories as web genres.

2. Logging on to and using Smart Force's E-Learning Site

Go to Smart Force's E-Learning Site at:

www.colorado.edu/its/cbt/
Smart Force's E-Learning Site is open to all
CU faculty, students and staff. All you need
is your CU login name and your "Identikey"
password.
From the Smart Force homepage, go to
"E-Learning Paths" and select "Assigned
E-Learning."
You will now have a choice between two CU-Boulder IT curricula: 1) IT Certification and 2) IT Curricula. Select "IT Curricula."
In "IT Curricula," notice all the online E-Learning
IT appplications courses you can take. Select
one of these that interest you and explore the material
If you are interested in the full features of Smart Force's E-Learning website, select "Take a Tour"
to get a full tour of all the material available to
you on this site.
Smart Force's E-Learning website provides CU-Boulder faculty, staff, and students invaluable IT and computer learning resources. So take advantage of the Smart Force website.

3. According to Alan Swann in his book, "How to Understand and Use Design and Layout":

"The basis of design is the bringing together of various
   elements into one area to achieve an interaction that
   will communicate a message within a given context.
   The message may be conveyed and even manipulated
   through the careful visual juggling of the elements that
   are used within the design area. Essentially, these
   elements will be words, photographs, illustrations, and
   graphic images, combined with a controlling force of
   black, white, and color."

4 Once you understand the basic elements of graphic
design, then you can manipulate and use them to create good designs.

5. Roger Parker on Successful Graphic Design:

    "Successful graphic design usually emerges from
       trial-and-error experimentation. Complicated
       solutions are the result of a willingness to try
       various design alternatives until the solution
       'looks right.' "

     "Effective design is a process of experimenting
        with the tools at your disposal....Remember
        there's no single design solution suitable for
        every [graphic design]. There are always
        'better' solutions, but never a 'best' solution."

6. Let's look at three Photoshop sample design pages:

7. Williams' Four Basic Principles of Design--CRAP Principles

Contrast
Repetition
Alignment
Proximity

8. Using the CRAP Principles to manipulate the elements of a graphic design page

Contrast. If the elements are not the same, then
make them very different. Contrast is often the
most important visual attraction on a page.
Repetition. Repeat the visual elements of the design throughout the page. Repetition helps develop the organization and strengthens the
unity of a page.
Alignment. Every element on a page should have some visual connection with another element on the page. Alignment creates a clean, sophisticated, fresh look.
Proximity. When several elements are in close proximity to each other, they become one visual unit rather than several separate elements. Proximity helps organize information and reduces clutter.

9. Seeing websites with the eye of a Graphic Designer and Artist

See Lynda Weinman's Inspirational Websites
See the Webby Awards websites
A skilled web designer learns to develop an
"artist's eye."
Robin Williams on learning to see how the eye
moves on a page:

"Be conscious of where your eye is going; where
do you start looking; what path do you follow;
where do you end up; after you've read it, where
does your eye go next?"
Robin Williams argues that "alignment" helps the
eye understand what things go together:

"When items are aligned on the page, it creates a
stronger cohesive unit. Even when elements are
physically separated from each other, if they are
aligned there is an invisible line that connects
them, both in your eye and in your mind."
Robin Williams argues that you can use proximity to combine various "page elements" into discrete,
"visual units." A reader's eye should jump around
the page from one "visual unit" to the next "visual unit." So that a neat, organized page is a collection of strategically organized visual units.
Learn to look for web design inspirations from
advertisements, websites, art, and nature.
Like artists, web designers try to express their
own vision and sense of the "order of things."
Like graphic designers, web designers are challenged to educate their clients about the
"what and why of how things go together."

10. Robin Williams on Web Design:

11. Roger Parker on Web Design

12. Lynda Weinman on Web Design