web design process define audience and needs develop personal mission statement determine categories...
TRANSCRIPT
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 off-site 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 is accessed
easily
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 Design- Showing Relationships Info available when and
where it is needed
Reflect the goals of the site
Makes the sites functionality available to the user
Guide the user through the site
How do we as humans organize concepts?
Gestalt Principles- Visual Grouping Similarity Proximity Continuity
Designing Content Elements
Navigational ItemsPlacementStyle
Graphics ImpactReinforcement
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 web-friendly 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