Transcript Efficient Web Design

Effective Web Design
Rehema Baguma
Effective Web Design
•
•
•
•
1 - Process and Planning
2 - Interface, Site and Page Design
3 - Graphics, Multimedia, Accessibility
5 - Web New Trends, Questions
Process and Planning
•
Organize
–
•
Site Specific Document
–
–
•
Analyze your needs and goals
Detail why and what you intend to do?
How long the process will take (schedule)?
Planning
–
–
Web sites are developed by groups of people for the needs of other
groups of people. Design is (hopefully elegant) “in addition” to
useful information.
"Technology Problem" - enthusiasm for Web technologies. Less
is better! Elegant designs - no clutter e.g. Google ‘s website
(google.com)
Process and Planning
•
Two Types of Web Sites
–
–
•
Entertainment or artistic
Informational Sites
Is design more important than the written
content or sites deliver useful information
enhanced by some design elements?
Process and Planning
Planning Questions
•
•
•
•
•
•
•
•
•
How will creating a Web site support your purpose?
What are two or three important goals for your site?
Who is the primary audience for the Web sites?
What do you want the end user to do after visiting your site?
How will you measure the success of your site?
How will you adequately maintain the finished site?
How many pages will the site contain?
What special technical or functional requirements are needed?
What is the production schedule for the site?
Process and Planning
•
Avoid "scope creep"
Scope creep is the gradual process by which unplanned
"features" are added.
–
–
•
more content, interactive functionality, changes in site structure
no single over commitment is fatal, but the slow, steady accumulation of
additions and changes is often what buries a project under megabytes of
muddle and confusion.
How do you control it?
–
–
Make the plan carefully, and then stick to it.
If you discover something later, ask yourself if this would be good for 1.1
release of your site, or for the next release.
Web Development Cycle
1. Analysis of
site’s purpose
(objectives)
6. Update
2. Design
and test plan
5. Make
available to
audience
3. Prepare and
code material
for web display
4. Test and
debug the pages
1: Analysis of Site’s Purpose
For this analysis, there are three questions to answer:
•
Who are your potential users?
•
Why are they visiting your web site?
•
What do you want users to do at your web site?
1. Analysis of Site’s Purpose
Worksheet
Let’s complete worksheet questions to illustrate how we
planned the web site for this presentation. Participants can
recreate this web site, use this site as a model, or create a totally new
web site.
Example Scenario: Who
Who are potential users?
•
Participants in this class
•
People who would have liked to attend
this class
•
People who are curious about this
class
1. Analysis of
site’s purpose
(objectives)
Example Scenario: Why
Why are users visiting the web
site?
•
To complete the class
activities
•
To learn how to produce a
simple effective web site
1. Analysis of
site’s purpose
(objectives)
Example Scenario: What
1. Analysis of
site’s purpose
(objectives)
What do you want users to do?
• Follow the workshop activities
• Produce an attractive, functional
2 to 3 page web site
• Get resources for continued
learning
• Be able to contact the workshop
leaders
Summary – Analysis of Purpose
Example Scenario
Purpose: Provide information and directions to the
participants of this class so they can
–
–
–
Produce a 2 to 3 page web site that includes text, images,
links, lists, tables, and a communication contact
Review and continue to learn from this presentation after
leaving this conference
Contact the class leaders.
2. Design a Site and a Test Plan
To accomplish this task, you should consider:
•
What is a logical flow of information?
•
How can you facilitate ease of use?
•
How can you present with visual clarity?
•
How should your files be arranged?
•
Will everything work right? (How will you test your
site?)
2. Design a site
and a test plan
Principles: Information Flow
Organize your web site on
paper.
2. Design a site
and a test plan
Good plans will:
– Help you organize the content
that you have.
– Indicate where there are gaps or
missing pieces.
– Avoid time consuming and
costly mistakes.
– Let you see possible logic
problems and design flaws.
– Facilitate the sharing of ideas
with others.
Ease of Use
Help your audience:
•
•
•
•
•
Write clear directions (clear navigation)
to information /activities in the site.
Be task centered and concise, not
unfocused or wordy.
Display a table of contents or an index to
allow users to navigate within your site.
Provide a search button
Avoid unnecessary graphics
2. Design a site
and a test plan
Ease of Use (cont.)
Follow a consistent design throughout
your site:
–
–
–
–
Use similar logos, banners (headers), and
buttons across pages.
Be consistent with margins, spacing, font
styles, and positioning.
Use colors and images to convey meaning.
Naming & design of navigation links
Arrange screens in a logical way:
–
–
2. Design a site
and a test plan
Organize information from left to right,
and from top to bottom.
Group similar information together for
easy processing.
Visual Clarity
Use color purposefully and sparingly.
–
–
–
Maintain similar color scheme; Don’t confuse
users.
Check visibility of the color combinations
(good color contrast).
Follow organisational color theme e.g. FDCblue, ULK-blue & yellow
Limit number of fonts.
–
–
2. Design a site
and a test plan
Not all computer have the same fonts available.
Check readability of your fonts and font sizes
on the web- 10-14, type –aerial, verdana
recommended
File Arrangement
Use a project folder (main folder) on
your disk for your web site.
–
–
•
Create sub folders as needed.
Give files meaningful names and save
files to these folders
When you work on different
computers, copy the entire project
folder.
–
–
Do not just copy files or subfolders.
This practice avoids errors and broken
links.
2. Design a site
and a test plan
Folders and Files
Folder 
Folder
Folders 

Files 
Files
Files 
 Files
Test Plan
Do all the images appear?
Do all the links work?
Does the site appear correctly on different browsers?
Can users accomplish the site objectives?
Do pages have good visibility and legibility?
Is the site secure-penetration test, auto vulnerability
scan
2. Design a site
and a test plan
2. Design a Site and a Test Plan
Worksheet
We will now complete the worksheet questions to
illustrate how we designed a site and test plan for the web
site for this module
Example Scenario: Flow
Web Design and
Internet Literacy
Lecture/class
Lecture
Notes
Lecture
presentation
Pages Linked
to Homepage
Homepage
Questions/
Comments
2. Design a site
and a test plan
Example Scenario: Ease of Use
Web content will come from:
• bookmark file
• PowerPoint presentation
• wQuestions/commentss
First page of site will be a contents page with links to the
other three site pages.
2. Design a site
and a test plan
Example: Ease of Use (cont.)
•
Design or find a banner (header) for a 640 x 480 size.
•
Headings twice as large as other text with color to
match banner
•
White page background
•
Black, Ariel type font for text
•
Green links, blue previously accessed links, red active
links
•
Photos of students and lecturer working, not larger than
1/3 height of screen (160 pixels)
2. Design a site
and a test plan
Example Scenario: Visual Clarity
All pages at the site will follow the same:
•
banner design
•
color scheme
•
font scheme
2. Design a site
and a test plan
Example Scenario: Files
Site will have only two folders (directories):
• ULK(Main folder)
• Images (Sub folder of ULK)
ULK folder will have four files:
• Lecture notes.ppt
• Index.htm
(This is the homepage.)
• Registered students
• Questions & answerss.doc
Image folder will contain 5 picture files:
• One banner
• Five photos
2. Design a site
and a test plan
Interface, Site and Page
•
•
•
Make your web pages freestanding
Web pages differ from other documents, such as
books, in that they allow users to access single pages so
it is important to include elaborate information on every
page.
Your identity, copyright information and links to your
homepage should be on every page.
Interface, Site and Page
Every Web page needs:
• An informative title (this also becomes the bookmark
text)
• The owner’s identity
• A creation or revision date on applicable documents
• A link to the homepage or site index page
Interface, Site and Page
Interface/Page Design
•
•
•
•
•
•
•
•
Would a casual user be able to find what they are looking for?
Use consistent, easy-to-understand icons and graphic
elements
Design your pages so that the main content is only one or
two clicks away from the main page and on top of each page
Avoid heavy graphics and multimedia that takes a long time
to load
Avoid using technologies inappropriately. Scrolling text
marquees, Flash, Java applets or JavaScript
Keep the interface simple, familiar and logical. "Creative"
navigation can frustrate users.
Test screen resolution aspects, font size, accessibility, height of
pages – web is not print, it is fluid and ‘unpredictable’
Check your page in different browsers if possible to be sure
they work.
Interface, Site and Page
•
•
•
•
•
Most web sites include a home page, menus and submenus,
other links page, site index, what's new page, search features, and
contact information.
The top left corner of the page is the most visible area of your
web site. Many designers use this area to focus on the site
identity.
Live information makes a home page more attractive and more
likely to make users return. What's new information and
calendar of events are often good to have on the home page.
If your web site is also part of a larger site, it is good to
consider the design elements of that site.You should keep
logos, links, and design elements consistent across the entire
site so that the user feels like they are still on the same
site.
Always provide at least one link to an email address in a
convenient location for feedback or contact information
Interface, Site and Page
Page Design
•
•
•
•
•
•
Without graphics, color and contrast pages are uninteresting and
have less appeal for viewers. By creating columns, using blocks of color
and strategically placing graphics, a page becomes more visually appealing
and easier to read.
Graphic design is creating a visual hierarchy where more
important elements are emphasized and the content is
organized logically. Often there is a main header, sub heads and
contributing graphics.
The most effective designs for most internet users use a
balance of text, links and small graphics
The choice of colors for your web site is important in many ways.
Color Scheme http://wellstyled.com/tools/colorscheme2/index-en.html
Readability is also an issue. The contrast of the text on the page
relative to the background color can make the difference in your
users easily reading your content.
Use only common fonts that most users have are Arial, Verdana,
Helvetica, Times New Roman and Courier. Most designers try to use
one of these fonts for the HTML text parts of the page.
Bold, blocky fonts are for emphasis
Interface, Site and Page
Numerous issues in web display:
• monitor screen resolution
• monitor color support
• operating systems (Mac, PC, UNIX, Linux)
• browsers (IE, Netscape, Opera, AOL)
• font size preferences
There are also more subtle differences between Print and Web
such as:
• Margins on the paper are defined, on the web they are not clear and
vary depending on screen size and resolutions.
• One can also purposefully make windows smaller than the size of the
screen.
• 2 page layout, so popular in Print, is simply impossible to be
reproduced on web site where everything is more or less about one
page
• Only the top of that page is visible, therefore the rest can be only
accessed by scrolling. There is no scrolling on any paper magazine,
newspaper, etc.Vital information must be on top of the screen. In print,
because eye can catch entire page or even two pages (left and right), the
information can be ‘spread’ on two pages, top and bottom.
Interface, Site and Page
Useful Resources on the Internet
• www.webmonkey.com - HTML, design, usability and more
• www.webstyleguide.com - An overall web design guide
• http://about.extension.org/wiki/Recordings_of_eXtension_Professi
onal_Development_Sessions
• Color Scheme
• http://wellstyled.com/tools/colorscheme2/index-en.html
• Project Seven - spend 60 dollars and have cool web site
• www.projectseven.com/products/templates/index.htm
Graphics, Media, Accessibility
Graphics
• Graphics on the web vs. Print materials. Concept of dpi.
Resizing low resolution picture vs. high resolution
picture.
• Graphics size versus bandwidth. Loading Time
Understanding optimization and special web graphic
types.
• Two major compression web graphics formats – GIF, JPG
Graphics, Media, Accessibility
GIF
• 256 Web Safe colors
• Support of transparency.
• GIF gives the ability to animate. But loading time is a
challenge
• GIF images good for cartoon like few colors illustrations,
not photos.
Ad 3 - Graphics, Media, Accessibility
JPG
• Any compression is good, most is undistinguishable in quality
and decreases memory size.
• JPG does not support transparency, neither does it allow
animation.
Ad 3 - Graphics, Media, Accessibility
Multimedia
•
•
•
What is multimedia? Use it or not and if so how to do it right?
Bandwidth Problems
Clear details video requires many Mega Bytes of memory.
Strategies for web multimedia:
•
•
•
Third, the small short display does not have to compete with Star Wars in
its level of details and audio quality. You must “optimize” video the same
way we optimize JPG or GIF images.
Finally, you may consider dropping picture all together and use only audio.
Streaming software. (Quick Time, Real Player, Windows Player and Flash)
Graphics, Media, Accessibility
•
•
•
•
Prepare video and audio for the internet.
It boils down to a need for professional software to
accomplish the tasks of compressing audio and
video for the web – example, Sorenson Squeeze http://sorensonmedia.com/
Also, Quick Time Pro allows for web preparation. There
are probably other software
How does YouTube doing it?
Graphics, Media, Accessibility
•
Accessibility - designing with people with
disabilities in mind as well as other devices
accessing our pages
New Trends/Questions
•
•
•
•
What is a blog? (Examples)
What is Content Management System (CMS)
What is a Learning Management System (LMS)
Social Web Applications