Blueprint to Develop a Great Web Site

1
Blueprint to Develop a Great Web Site!
2
Blueprint to Develop a Great Web Site!

• Presented by
• Cindy Alvarado
• FCPS Technology Services
• cindy_alvarado_at_co.frederick,md.us
• Mildred Reagle
• FCPS Technology Services
• mildred_reagle_at_co.frederick,md.us

Adapted from a presentation by Michael F.
Ruffini, Ed.D. Delaware State University mruffini_at_
brandywine.netcvvc
3
Why a Blueprint?

• Building a House requires a detailed Blueprint
  includes
• planning
• materials
• knowledge of building tools

4
Build a Website
5
(No Transcript)
6
Systematic Planning

• Why Systematic Planning ?
• Can ensure a quality Web site
• Save Time
• Navigate Web content with ease
• What is Systematic Planning?
• Is an overall plan to problem solving that gives
  attention to all the essential elements in
  designing your Web site
• What are these planning elements?

7
Web Planning Elements

• Who are your site visitors?
• (Target Audience)
• What is the content, depth and breadth of
  information in your Web site?
• (Goals and Objectives)
• How are you going arrange the Topics and
  Subtopics of your Web site?
• (Design the Layout of Web Site using Index Cards
  or Flowchart)
• How are you going to construct your Web site?
• (Web Authoring Program)

8
Design Development

• How is the content and hyperlinks of your
  Web site organized?
• (Navigation Structure)
• How are your Web pages designed?
• (Design Strategies)
• (Design Principles)
• How are you going to select and edit your
  graphics?
• (Graphics Tools)

9
(No Transcript)
10
Target Audience

• Structure Web site to meet the users needs
• Write a statement identifying one or more goals
  to identify Web population
• Questions to ask
• Who is my Web audience?

11
Target Audience

• Audience analysis
• Guides every aspect of your Web
  design
• Impacts
• Design of information
• Selection of Graphics
• Visual elements color, text graphics

12
Web Site Global Goals

• Three Major Global Goals in Developing any Web
  site
• make your content easy to understand
• make your message clear to readers
• allow your visitors to navigate Web content with
  ease

13
Specific Web Site Goals

• Goals provide the general framework of your
  Web site
• Example of a Goal
• The purpose of developing my Web site is to
  inform school districts, corporations and
  individuals, information regarding computer
  training using Microsoft FrontPage 2000

14
Objectives

• Objectives are precise written statements about
  specific Web site content
• Organize information
• Depth and Breadth of information
• Organize content, topics and subtopics
• Questions to ask
• What specific information do I want my Web users
  to know?
• Are my objectives written clearly?

15
Example

• My Web site will consist of five web pages which
  will include
• home page
• about courses/class page
• WBI 1
• WBI 2
• other?

16
Sketch out Web Site

• Build topic and subtopic outline from your
  objectives
• Use index cards or flow chart to simulate your
  web pages

17
Topics and Subtopics

• home page
• 1. Overview welcome, mission statement, etc.
• 2. Site
• links

18
Topics and Subtopics

• about me
• 1. Biography
• 2. Education
• 3. Experience

19
Topics and Subtopics

• about courses/class page
• Overview of courses/curriculum objectives

20
Topics and Subtopics

• WBI 1
• 1. Overview of the activity.
• 2. Objective(s) of the activity
• 3. Link to activity

21
Topics and Subtopics

• WBI 2
• 1. Overview of the activity.
• 2. Objective(s) of the activity
• 3. Link to activity

22
Navigation links
23
Site Navigation

• Web pages are built around navigation structures
• These Structures govern the navigational
  interface of the Web site
• Navigation structures
• hyperlink and organize the interrelationships of
  the Web site content

24
Site Navigation

• Four Structures can be used to build a Web site
• Sequential
• Grid
• Hierarchical
• Web
• Most Web sites use a combination of all four
  structures

25
Sequence Structure

• Organizes information sequentially
• Alphabetical A
  Z
• Chronological 1900
  2000
• General to Specific Training Sites

26
Sequence Structure
Simplest way to organize information is in a
linear sequence. Good structure for training Web
sites
27
Grid Structure

• Organized in no particular order of importance
• Examples
• Lists of university courses
• Medical topics
• Hard to follow unless users recognize the
  interrelationships between topics

28
Grid Structure
Topics of information have no particular
hierarchy of importance
29
Hierarchical Structure

• Most common and best way to organize complex
  navigational schemes
• Best suited for most home page navigation

30
Hierarchical Structure
31
Web-linked Structured

• Free flowing non-structured navigation
• Allows users to explore Web links in an
  autonomous manner
• Hard to follow unless users recognize the
  interrelationships between topics

32
Web-linked site
Pose few restrictions on the organization of
information BUT can be confusing unless site
visitor is familiar with Web content
33
More Educated or Informed audience
The more your audience is familiar with your
information, the more complex Web navigation
structure you can use to organize your Web
information.
Simple Basic Content, training sites
Linear Predictable structure
Non-Linear Flexible Complex structure
34
Site Home Page

• Home page is where you meet and greet your
  site visitors
• The top vertical 4 inches are the most valuable
  real estate in your Web site
• This area should be the most dense area in your
  site in both visual and functional complexity

35
Print Layout Low Functionality
Screen
Upside down gradient of complexity and
functionality
Print layout
High-function areas are invisible without
scrolling
Links pushed below the fold
Web page design using a print layout results in
upside down functionality
36
Screen Layout

• Web layout is about designing screens of
  information
• Readers only see part of the page at any one
  time
• A typical 17-inch monitor cannot show even a
  single letter size (8.5 x 11 inches) page

37
Screen Layout
Screen
High visibility

• Highest priority items
• Vital Graphics
• Highest density of links

Above the fold
Below the fold
Low visibility
Visible only after scrolling
38
Home Page

• Homepage layout should divide the page into
  two visual and functional zones
• Zone One is the top screen of information because
  it is the only area sure to be visible to all
  users (visible without scrolling)
• denser with links
• graphics
• text
• Zone Two has lower priority items (visible by
  scrolling)

39
Home Page Zone One

• Highest priority items
• Most Graphics
• Highest density of links

40
Home Page Zone Two

• Lower priority items
• Less graphic
• Density of links less critical

41
Web site pages
As the reader descends into the Web site the
pages should be less dense with links, visual and
functional complexity. This will allow readers
not to be distracted and to focus on the specific
Web content.
42
Grid Layout

• No one design grid is appropriate for all Web
  pages
• Create a simulation screens using index cards
  Consistency is key!
• Experiment with various arrangements of the
  elements on the card
• Titles
• Subtitles
• Navigation links
• Buttons
• Text
• Graphics

43
Design Page layout
Organized Grid 1. Aid users in quickly finding
information 2. Give your site a professional look
3. Keep graphics and text consistent and
balanced on your pages
44
Home Page Design

• Design Approaches
• Graphic Approach
• Text Approach
• Graphic and Text Approach

45
Splash Screen

• Enter the page with a logo or graphic as
  greeting to your Web visitor
• Can be annoying to site visitors
• Key is to assess your Web audience
• Artist or Medical Web site??

46
Splash Screen

• Consider the function of your site
• Important question
• Is the visitor there for a single visit or will
  they visit often?
• No Splash Screen Splash Screen
• Reference Sites Entertainment Sites
• Corporate Sites Some Corporate Sites
• Academic Sites General Interests
  Sites
• Entice a
  visitor
• Art Music Sites

47
Length of Page

• Research Indicates
• long pages can cause a disorienting effect in
  scrolling the computer screen three or more pages
• 90 of Web surfers dont scroll the page (Sun
  Microsystems - Jakob Nielsen)
• General rule web page contain no more than
  about one or two (640x480) screens worth of
  information
• Navigational links at both the beginning and end
  of the page layout

48
Text

• Use short chunks of information
• Web users have short attention spans
• User of a Web link expects to find a specific
  unit of relevant information not a book
• Audiences tend to be diverse. From a readability
  standpoint, information must be clear and concise
• Concise chunks of information are better suited
  to the computer screen

49
Text

• Chunks of information
• Write short chunks of information that can be
  scanned quickly
• Information should be ranked in importance, and
  organized by the degree of interrelationships
  among topics
• Reading speeds are about 25 slower on a monitor
  than on paper