Graphic Design and good Web Design
Assignment: Work on finishing your image websites.
Remember, your image websites are due March
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
- Sewall Academic Program website
- Example of draft revision of Sewall Homepage
- Gallery of the Open Frontier: Digital Image Library
- Images of the American West
- Images of the Western States
- Images from the History of the American West
- American West Images
3..Remember, your Image websites are due on Saturday,
March 25th. If you need some ideas for improving your
websites, see Webby Awards
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:
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"
From the Smart Force homepage, go to
"E-Learning Paths" and select "Assigned
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
will communicate a message within a given context.
The message may be conveyed and even manipulated
through the careful visual juggling of the elements
are used within the design area. Essentially,
elements will be words, photographs, illustrations,
graphic images, combined with a controlling
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
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
with the tools at your
there's no single design
solution suitable for
every [graphic design].
There are always
but never a 'best' solution."
6. Let's look at three Photoshop sample design pages:
Graphic Layout Number 1
Graphic Layout Number 2
7. Williams' Four Basic Principles of Design--CRAP Principles
8. Using the CRAP Principles to manipulate the elements
of a graphic design page
Contrast. If the elements are not the same,
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
Weinman's Inspirational Websites
See the Webby
A skilled web designer learns to develop an
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
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:
Web Design Features
Web Design Features
11. Roger Parker on Web Design
Parker: How to Rate a Web Site
Parker: Web planning and design
Common Web Design Frustrations
your web site address
12. Lynda Weinman on Web Design
Weinman's Inspirational Websites
Weinman's Web Resources Links