Transcript PRESENTATION NAME - University of Missouri–Kansas City

Designing for the Web
7 Useful Design Principles
What is Web Design?
“Web design is the creation of digital environments
that facilitate and encourage human activity;
reflect or adapt to individual voices and content;
and change gracefully over time while always
retaining their identity.”
http://www.alistapart.com/articles/understandingwebdesign/
Plan First, Design Later
1.
Start with questions
•
•
•
What is the purpose? What are you trying to achieve?
Who is going to be visiting the site?
Be specific. You will probably have multiple audiences, so you need to prioritize them.
What will they need to accomplish on your site?
Answering these questions will help you make good design decisions.
2.
Build and organize your content
This is why your visitors are coming to your site. The content must be of interest to one or more of
your audiences, relevant to your site goals and organized efficiently.
3.
Design and Develop
This step comes last! If you don’t understand the purpose and goal of a project, you can’t create a
successful design.
Related Links:
http://www.wpdfd.com/issues/87/where_design_really_fits/
http://www.alistapart.com/articles/taking-the-guesswork-out-of-design/
Hierarchy
1.
Prioritize
Everything can’t be important all the time. Referring to your site’s goals, give all of the content on the
page a number: 1, 2 or 3. Then decide how to give the first priorities more weight and keep the third
priorities from interfering from the rest of the design.
2.
Minimize
People don’t read on the Web. They scan. That means they look for headings, short blurbs of text,
bullet points, etc., to find the information they need quickly. If your site needs to cover highly techincal
or academic topics in great detail, find ways to minimize content on landing pages and link to the rest
of the full text.
3.
Organize
Keep similar information grouped together and label each section of the page clearly. Consistency in
organization across pages is also important, so that visitors know where to find certain types of
information on every page.
Related Link:
http://boagworld.com/usability/three-secrets-to-simplicity
Hierarchy Examples
Composition
1.
Visual Flow
The page layout should naturally lead visitors from one key element
to the next.
Test your design by closing your eyes and open them again. Did your eyes
look at the most important element first before moving on to the
second most important element and so on?
Ask others to review your site and rank the most important elements.
2.
Balance
Is there a strong underlying structure to you pages? Do elements align in
logical ways? Try mapping out your page with blocks of color to see if
everything has the proper weight.
Whitespace
Definition: the space between elements in a composition.
1.
It’s not empty space
Whitespace:
•
Gives your eyes a place to rest
•
Improves legibility and helps to prevent eye fatigue
•
Creates a welcoming environment
•
Gives balance and structure to a page
2.
Don’t forget typography
The space between lines and paragraphs of text is white space too! Increasing the spacing will improve
readability and give your page a more polished feel.
Related Link:
http://www.alistapart.com/articles/whitespace/
Whitespace Examples
Glitz and Glam
1.
You don’t need 37 pieces of flair
Too much can make your site look unprofessional and cheap—or downright unusable. Your visitors are
far more interested in how they find the information they’re looking for than in how cool that lens
flare behind your navigation is.
2.
Use Flash wisely
•
•
Avoid using Flash intros that require a visitor to wait before navigating your site.
Flash does not work well for sites with a lot of content.
Unless you are needing a high level of interactivity and only need a paragraph or two of text
on each page, it is probably not going to do what you need.
•
•
Don’t use Flash for navigation.
Do not build your entire site in Flash.
Unless you are highly accomplished in Flash, either of these will result in:
> poor search engine ranking
> poor accessibility
> difficulty in making updates.
Color
1.
Color is subjective
•
•
2.
Less is more
•
•
3.
What kind of emotions do you want your site to convey? Trust and authority? Vibrancy and
youth? Color choice can help you achieve this goal.
Don’t just choose your “favorite colors.” Color choice should relate to the site goals,
intended audiences and subject matter.
Choose two to three colors at most: primary, secondary and tertiary
If you’re going to choose colors from the recommended color palette on the Web Policy site,
make sure you use the exact colors, not approximations. Keeping these colors consistent
across our site will strengthen our image.
Some tools to use
Color Palette Generators: http://pictaculous.com/
http://www.cssdrive.com/imagepalette/
Palette Picker: http://www.worqx.com/color/palette.htm
Color Wizard: http://www.colorsontheweb.com/colorwizard.asp#wizard
Color Examples
And Don’t Forget…
1.
Compatibility
Don’t forget to test your site in various browsers and resolutions and on PC and Mac.
We recommend testing in at least Internet Explorer and Firefox on the PC and
Firefox and Safari on the Mac.
2.
Accessibility http://www.wpdfd.com/issues/87/designing-accessible-websites/
•
•
•
1.
Check that the contrast between foreground text and background color is high
enough for easy legibility.
Is there alternate content available for visual aids like photos and artwork so that
visitors using screen readers will be able to fully navigate your site?
Is your text built so that it can be resized using browser preferences?
Usability
•
•
•
Do links look like links?
Are all of the options for navigation managed so the visitor doesn’t
get overwhelmed?
Does the placement of elements on your page make sense for users across
a variety of browsers and resolutions?
Resources
A List Apart
http://www.alistapart.com/articles/taking-the-guesswork-out-of-design/
http://www.alistapart.com/articles/indefenseofeyecandy/
http://www.alistapart.com/articles/understandingwebdesign/
Web Page Design for Designers
http://www.wpdfd.com/
Boagworld
http://boagworld.com/business-strategy/web-design-wisdom-from-twitter
http://cameronmoll.com/speaking/misc/good-vs-great.pdf