Transcript Website Design

Web Design Process








Define audience and needs
Develop personal mission statement
Determine categories (navigation) within site
Establish colors and design style
Create navigation system
Storyboard and flow chart
Create folders and sub folders
Create graphics for site
Web Design Process cont.








Write content
Create template page
Create links to all navigation items on template
Save template page as necessary navigation
items
Enter content into all pages
Insert images and graphics
Proofread all pages
View in multiple browsers and operating systems
Good Web Design
Good useful content on every page
 Well organized and easily accessible
content
 Well written easily read content
 Consistent and attractive appearance
 Keep it current
 Don’t make hardware assumptions

What is the goal(s)?

Owner’s Goals
 Business
aspect =
Making money
 Measure the audience
 Brand Positioning =
Personality

User’s Goals
 Information
 Commerce
 Easy
 Useable
 Identifiable
Defining Owner’s Goals






How do you make money? How are they
successful?
What are the goals for the site?
Research size of market opportunity
What are the competitors doing?
Identify the user’s behaviors that will best
support the site?
Decide on Brand Personality or Positioning
(3 key adjectives)
Identifying Business Goals

Let’s use the website your group is working on.

What would be some goals for a site?
What is their market?
What are the potential user behaviors?
What are the 3 key adjectives for brand
positioning?



Defining User’s Goals
Analyze the users habits and environment
 What characteristics would affect the
user’s interaction with the site?
 What is the user looking for?
 What steps are involved for the user to
perform tasks ?

Identifying User Goals

Again, let’s use the website your group is
working on.

What would be some user goals for a site?
How would they use the site?
What do they want from this site?
How many steps would be acceptable to perform
a task?



Technical Considerations
What tech resources do you have?
 Any technical restraints? (security,
bandwidth, etc.)
 Who will host the site?
 Is there people to maintain the site?

Determine cost, timeline, and tasks
As a general rule, three variable are time,
money, and people.
 Budget is total of estimated hours for each
task at hourly rate
 Have contractors and consultant work offsite and with own equipment, so they are
not employees

Project Bid
The cover and package
 Table of contents
 Needs analysis and description
 Target audience
 Creative strategy
 Project implementation
 Budget

Content Acquisition





Self produced
Third party content sources (clip art, stock
footage library, public domain sources)
Public Domain has no owner, but never assume
Copyrighted material can not be used without
permission
If in doubt, don’t use it unless you paid for it.
Using Talent






American Federation of Television and Radio
Artists (AFTRA) or Screen Actors Guild (SAG)
Talent Agency
Auditions and Casting Calls
Union Contracts ($540/8 hour day)
Release Forms
Always think about future use, when working
with release forms.
Useable Design Standards
Content is king
 Make it obvious
 Keep it short and simple
 Make it easy to get around
 Be predictable
 Provide other routs

Useable Design Standards cont.
Make it legible
 Learn to love space
 Tone it down
 Don’t get too fancy
 Be available

Information Architecture
 How
many pages?
 What goes on each page?
 How do you get from page to page?
What to include on websites
Home page
 Cover page
 Site map
 Help and FAQ page

Organizing Site Content

Sequential or Linear

Hierarchical

Non-linear

Composite
Designing the Navigation
System

Whole aim is to allow users to get the
content they want

A good clear navigation:

is clear
leads to obvious content
is consistent with other controls
is predictable in its style and location on page



Nav. System- Location
Indicators
Page banner
 Crumb trail ( Home>Video>PSA )
 Color coding site in nav bar
 Graphic coding can be used

Nav. System- Controls
Main navigation
 Subsidiary navigation
 Secondary navigation

Effective Visual Design

Using color, layout, graphics, navigational
elements, interactivity, and interface metaphors
to make the site’s content accessible, useable,
and relevant.

Three hurdles
 1st second: Useful and well crafted
 Next 10 seconds: Easy to use
 Next minute: Interesting content that
easily
is accessed
Defining the overall look and feel

Consistency
 Comfort
and security
 Navigation elements (predictable, intuitive and easy
to find)
 Different layouts for different types?

Simplicity
 Effective
and elaborate not the same thing
 Page loading times
 Effective and aesthetically pleasing
Page DesignShowing Relationships

Info available when and
where it is needed

Guide the user through
the site

Reflect the goals of the
site

How do we as humans
organize concepts?

Makes the sites
functionality available to
the user

Gestalt Principles- Visual
Grouping



Similarity
Proximity
Continuity
Designing Content Elements

Navigational Items
 Placement
 Style

Graphics
 Impact
 Reinforcement
Designing Content Elements

Using Photographs Effectively
Tell story or relevant to text
 Attention grabbing
 Clear, sharp, look good
 Well cropped and quick to download
 Do you have permission to use it?

Designing Content Elements

Typography – Visual Design of Text
Communicate thru font
 Mood and tone
 Coherence of style

 Professional…Fun…Elegant
Designing Content Elements

Text Design

Emphasize headings
Text to background contrast
Use Sans-Serif fonts, not Serif.
Larger Type Size
Shorter Lines
NO ALL CAPS
Avoid excessive italics
Use plenty of blank space around text







Elements of a Web Page
Header
 Navigation bar
 Content
 Page title
 Footer
 Meta tags
 Page properties

What can be included on a
Home Page





Attractive title element
Site menu
Indication of new content
Copyright and author content
Avoid too many graphics
Storyboarding

Organization and Page Designs
What is the natural division of the info?
 What is the natural information flow?


So let’s do a sketch of your page’s
structure
Planning your Layout




Sketch out the page
Think about your
layers/tables
Consistent design
Design and
Functionality
Writing for the Web

Why is it different?

More difficult to read from screen
Read in small chunks
Impatient users
Non-linear
Clear, concise, relevant, scannable, consistent
and error free writing




Writing for the Web cont.

Behaviors of web users

Impatient
Searching for nugget of info
Don’t read, but scan first
If not immediately obvious, may leave for
millions of other options



Writing for the Web cont.

Web friendly writing

Use brief style (less adjectives/adverbs)
Keep to point, additional info thru hyperlink
Short paragraphs (no more 8-12 lines)
Short sentences
Other ways to present info (list, diagram)
Edit, Edit, Edit





Writing for the Web cont.

Creating scannable pages

Use frequent and meaningful sub-headings
Highlight words in bold/italics (NO UNDERLINE)
Content lists at top with link to article
Use summary on same page with link
Consistent style




Structuring Visual Content






Keep text focused and concise
Start content chunks with summaries and clear
main points
Use strong verbs and active voice
Use lists and hyperlinks
Use meaningful headings, sub headings,
summaries, and link terms
Highlight key content information
Writing Exercise

For your website- find text information about the
organization and bring it to class ( it must be text
that exists outside the web)

In class, You will create text that would be webfriendly and scan able and place the text into a
simple web page, save it, and e-mail it to me.

We will view it in class and talk about it.
Making the Most of Online
Add links to further information
 Use scrolling appropriately (above the
fold)
 Informational graphics & images
 Use multimedia appropriately

Credibility and Ethics






Clear creator and site goals
Avoid manipulation, excessive hype, or bias
Stay focused on users rather than company
Sound friendly, direct, and relatively informal
Include links to other sites
Honesty, fairness and concern for others
Delivering the Project
Alpha testing
 Beta testing
 Archiving files
 Onto the web- bandwidth, ISP, and file
transfer to web server

Bandwidths and Multimedia


Bits per second (bps)
Bottleneck

Compress data as tight as possible
Require user to download onto local hard disk
Design and compact as possible
Design low and high bandwidth alternatives

Implement streaming



Media on the Web
Plug-ins
 Text as pdf
 Vector images thru flash
 Sound as smaller MIDI, embedded thru
programs
 Video is a trade off between bandwidth
and quality

Critiquing a Web Site

Usability problems

Not state clear purpose
Elements take longer than 10 seconds to load
Site specific software
Poor navigation, too little navigation, too much
navigation, or no navigation at all
Poor readability




Critiquing a Web Site cont.

Usability problems cont.

Discomfort due to bad, ugly design or
inconsistent design
Irrelevant content
Complexity or excessive originality of design
Not be accessed by browsers for people with
disabilities



Critiquing a Web Site cont.

Content Tests

Relevant content to the user
Understandable as written
Any content of no great interest
Any missing content
Accurate and consistent content




Critiquing a Web Site cont.

Media Tests

Download time
Media Quality
Rules of professional media standards


Technical Critique





Website Design:
Does the home page include the required elements?

Attractive Title Element (Graphic or Flash)

Navigation Bar

Author and Last Updated Information
Does the website have good navigation control?

Clear Structure

Link Names lead to Obvious Content

Controls Consistent from Page to Page (Style and Location)
Does the page include location indicators?

Page Banner Included

Banner Name the consistent with Navigation Text
Does each page include web-friendly text?

Brief and To The Point

Short Sentences and Paragraphs

Consistent Style from Page to Page

Correct Spelling and Grammar










Video Project: Short Film
Is the project’s camera technique correct?
 Correct Shot Composition (Balance and Placement)
 Good Variety of Shots (CU, MS, WS)
 Correct Balance of Color/Light
 Interesting Subject Matter
Is the project’s editing technique correct?
 Thoughtful use of Transitions
 No Jump Cuts or Black Flashes
 Clear Video and Audio Signal
 Good Balance of Voice/Music/SFX
 Clean and Natural Open/Close
 No Distortions or Audio Pops
Promotional Poster/Flyer Graphic:
Is the basics of good design followed?
 Use of design elements (line, shape, value, color, texture, space)
 Use of design principles (balance, proximity, alignment, unity, emphasis, rhythm)
Is the image clear?
 Correct Balance of Color (Pics to Background to Text)
 Meaningful Font Choice (Fits Idea)
 Clear Message in Graphic
Is the image production technique correct?
 Proper Picture Quality
 Clear Mix of Multiple Layers
Flash Animation:
Is the animation’s image clear?
 Correct Balance of Color (Object to Background)
 Clear Message in Animation
Is the animation production technique correct?
 Smooth Movement of Object
 Clear Mix of Multiple Layers