Download Web Design and Authoring

Web Design Fundementals
What to do ?
 why to do it on
the web?
Before we get started…
Determine site goals
Identify your target audience
Analyze the “cometition”
Know your abilities and resources
What is the content ?
Map the current site
Visual Design
Design your new site
Have a goal for your web site
review your mission statement
Why are you creating this site?
What does the site owner hope to achieve
with this site?
What action does the site owner want the
audience to take as a result of visiting?
What restrictions or guidelines must be
followed when designing the site?
Audience Analysis
Who are they?




Age
Language and Culture
Level of education
Access to the web(H.Speed , Dial-in)
What are they looking for?
 Information
 Services
 Community
How to find out about the
audience?
Ask the site owners
Look at current site
Talk to people who “fit the bill”
Build feedback capability into your site
Analyze the “competition”
Look for sites with similar
contents,purpose
 Universities
 Organizations
What are the trendes?
Where do they excel or fall short?
Know Resources & Abilities
 What technical knowledge does your team have?
 What tools and resources does your team have access
to?
TIME
Software
Web authoring tools
Image editing tools
Animation tools
Hardware
Camera
Other People
The content......
Identify information you already provide
your audience.
Identify information that you haven’t, but
would like to provide your audience.
Identify the sources of information you
want to provide through your Web site.
Prepare that information for the web by
collecting it and converting it.
What’s the content?
Course materials, media assets (e.g. image,
sound, video, etc)
Communication (e.g. instructor-student,
student-student)
Assessment (e.g. assignments, quiz, exams,
project work)
Site Map
All the pages and all the links of the
current site
Boxes for pages, lines for links
Shows how “deep” your site is
Once again, consider your audience and
content
Site Map
Sponsors
Build
Home
Members
2004
Media Day
2005
Competition
Album
Schedule
Develop a vision for your Web site and
storyboard it before construction begins.
Share your vision and storyboard with
your colleagues and your bosses.
Design(or redesign)the site
Review audience needs/wants with site owner
Determine the site structure(site map)
Gather content(visuals, information)
Moke up a visual design
Build the site in a “test”mode
Perform(user)testing and make changes
Put the site into production
Maintain and update the site
Visual Design
What looks good?
Consistency
is a good goal for any design
Elements of Visual Design
Composition
White Space
Avoid “information overload” syndrome
Helps readers scan/find info quickly
Balance
Color
Make websites easy on the eyes.
(Warm/Cool-Cultural aspects-Light backgrounds with dark text or vice versa?)
Fonts
Use common fonts
Limit number of fonts per page and per site
Use the same fonts consistently throughout the site
Readability
Motion
Bandwidth/download time
Using Graphics and Pictures
Make your site more attractive
Keep picture file size small to keep page
loading time short
Use file types of .jpg and .gif
“Top 10 mistakes in Web
design
Using frames
Gratuitous use of Bleeding-edge technology
Scrolling text, constantly running animation
Complex URLs
Orphan pages
Long scrolling pages
Lack of navigation support
Non-standard link colors
Outdated information
Long loading time
Publish your web site
Arts server
CNS
GPU or WebCT
Upload
download
You create a Web
site on a computer.
Students access the site
Test the web pages locally
Upload the files to a Web server: publish
your web site
Check site online to make sure it looks
and works the way you want it to
Get user feedback
Replan, redesign and revise the site
Maintain it
Dates need to be correct
Services need to be up-to-date
Hours must be correct
People’s names, email addresses & phone
numbers need to be correct
Characteristics of a
good web site
Well-organized
Easy to navigate
Attractive
Useful
Up-to-date
Make your site well-organized
Decide how you want to organize your
information based on your users and
what you know about them
Ways to organize your site:
by department or organizational chart
by audience type
by subject
Organized by department
Organized by audience type
Organized by subject
Make your site easy to navigate
A well-organized generally drives the ease
of navigation.
Keep scrolling down to a minimum by
keeping individual Web pages short.
Always have links back to your home or
major sections.
Use color to identify for users where they
are in your site.
No scrolling necessary to
start navigating.
Standard tool bars and a brief
menu for easy navigation.
Make your site attractive
Choose simple colors that compliment
each other & work on most web browsers.
Keep graphics less than 20,000 Bytes
(20 kilobytes) to make them download
reasonably on a home modem.
Keep animated gifs to a minimum.
Use graphics that compliment your image.
Avoid backgrounds that wash
out your text.
Make your site useful
If you are unique, you’re already useful!
If you are not unique, how do you differ from
similar Web sites?
Is your content unique?
Is your approach unique?
Is your audience unique?
Are you more up to date?
Are you better organized?
Are you more comprehensive?
Keep your site up-to-date
In an organization, make this part of
someone’s job. Pay them to do it. It’s
worth it.
If a person is currently the
“documentation person” or the “filer
person,” consider that person to be your
Webmaster.
General Things to Remember
& Consider
Don’t link to something that is going to exist in
the future.
Avoid having more than one spinning, whirling,
clicking, moving icon or graphic on a page.
Make hyperlinks intuitive so as to avoid the click
here text.
Don’t advertise other products or companies
unless it meets your goal, generates revenue or
helps your audience.
Do not!
Don’t post an “under
construction” graphic after
you’ve published your
URL. In the words of
Nike… Just Do It!
General Things to Remember
& Consider
Provide templates to multiple Web developers to
maintain a consistent look.
Develop standards for your Web site. Limit fonts
and headings on each Web page.
Attempt to use HTML tags that have layout
built-in to ensure a layout, such as a hierarchical
listing.
If you are familiar with hard-copy page layout
principles, use them in Web design.
General Things to Remember
& Consider
Provide white space for easy readability
Limit font usage and typeface usage
Limit text column width
Balance graphics and text on a page
Use complimentary colors with contrast
Standardize on a heading font and text font
Balance the page layout with top/bottom and
right/left margins
General Things to Remember
& Consider
Clearly and Consistently
Identify your site
Banner graphics
Signature icons
Links to local home pages
Essential Elements for
Every Page
Organization or institution
Author or person to contact
Link to local home page
Date created or revised
Copyright statement
Any Question…..