Effective Web Design Rehema Baguma. Effective Web Design 1 - Process and Planning 2 - Interface, Site and Page Design 3 - Graphics, Multimedia, Accessibility

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 – Analyze your needs and goals

• Site Specific Document– 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 PlanningPlanning 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

2. Design and test plan

3. Prepare and code materialfor web display

4. Test and debug the pages

5. Makeavailable toaudience

6. Update

1. Analysis of site’s purpose (objectives)

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 class1. 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

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 leaders1. Analysis of

site’s purpose (objectives)

Summary – Analysis of Purpose

Example ScenarioExample 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 siteand a test plan

Principles: Information Flow

Organize your web site on paper.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


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 linksArrange screens in a logical way:– Organize information from left to

right, and from top to bottom.– Group similar information together

for easy processing.2. Design a siteand a test plan

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.

FDC-blue, ULK-blue & yellowLimit number of fonts.– 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 siteand a test plan

Folders and Files

Folders

Folder

Files

Files

Files

Files

Folder

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

WorksheetWorksheet

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

LectureNotes

Lecturepresentation

Questions/Comments

Web Design and Internet Literacy Lecture/class


Homepage

Pages Linkedto Homepage

Example Scenario: Ease of Use

Web content will come from:• bookmark file• PowerPoint presentation• wQuestions/commentssFirst page of site will be a contents page

with links to the other three site pages.


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)


Example Scenario: Visual ClarityAll pages at the site will follow the same:• banner design• color scheme• font scheme


Example Scenario: FilesSite 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


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 PagePage 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 PageNumerous 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 PageUseful 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_Professional_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, AccessibilityGraphics• 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, AccessibilityJPG • 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, AccessibilityMultimedia

• 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

Documents

Effective Web Design Rehema Baguma. Effective Web Design 1 - Process and Planning 2 - Interface, Site and Page Design 3 - Graphics, Multimedia, Accessibility