louisa lambregts lambrel@algonquincollege com
Download
Skip this Video
Download Presentation
Web Design Theory

Loading in 2 Seconds...

play fullscreen
1 / 40

Web Design Theory - PowerPoint PPT Presentation


  • 200 Views
  • Uploaded on

Louisa Lambregts , [email protected] Web Design Theory. Course Topics. 1) Evolution of “the web site” Changing Anatomy of a Web Site 2) Aspects of a Web Design Project 3) Roles 4) Tools of the Trade 5) The Web Design Process: Concept Design Implement (Evaluate)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Web Design Theory' - azura


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
course topics
Course Topics

1) Evolution of “the web site”

  • Changing Anatomy of a Web Site

2) Aspects of a Web Design Project

3) Roles

4) Tools of the Trade

5) The Web Design Process:

  • Concept
  • Design
  • Implement
  • (Evaluate)

6) Managing Your Web Projects

review html basics
Review: HTML Basics

Basic Page Layout

<html>

<head> <title> My first Web Site </title></head><body><p> Your content</p></body>

</html>

review evolution of web design
Review: Evolution of Web Design

Layout was dominated by

  • Text formatting
  • Layout via tables
  • Frames
  • Javascript: Roll-over buttons Animations
  • Splash page Flash
review css acronym
Review: CSS: (Acronym?)

Then came CSS …

body{background-color:#d0e4fe;}

h1{color:orange;text-align:center;}

p{font-family:"Times New Roman";font-size:20px;}

review css cascade style sheets
Review: CSS – Cascade Style Sheets

What was CSS designed to do?

Why is it called this?

review css cascade style sheets1
Review: CSS – Cascade Style Sheets

Format separated from content

  • Different style sheets for different outputs
  • Can change look and feel of site by linking to a different style sheet

Flexibility of layout

review evolution of web design1
Review: Evolution of Web Design

And then came CSS and Flash.

How does Flash show up in an HTML file?

What is the extension for a Flash movie?

review evolution of web design2
Review: Evolution of Web Design

And then came CSS and Flash.

How does Flash show up in an HTML file?

A movie object that is embedded in the HTML file.

What is the extension for a Flash movie?

.swf

Can also see .flv(flash video movie)

web review group activity
Web Review Group Activity

What is the purpose of these sites?

In partners, you will review three web sites to consider what the purpose and target audience of these sites are.

web review 1
Web Review #1

What is the purpose of these sites?

  • Google search: a) H1N1 CDC (US site)b) H1N1 Ontario Ministry of Health
  • Determine:
    • Target Audience of site
    • What purpose is the organization trying to achieve
    • Was it successful at meeting it’s purpose?
web review 2
Web Review #2

What is the purpose of these sites?

  • Google search: a) How Stuff Works
  • Determine:
    • Target Audience of site
    • What purpose is the organization trying to achieve
    • Was it successful at meeting it’s purpose?
web review 3
Web Review #3

What is the purpose of these sites?

  • Google search: a) David Suzuki Foundation
  • Determine:
    • Target Audience of site
    • What purpose is the organization trying to achieve
    • Was it successful at meeting it’s purpose?
group discussion summary
Group Discussion: Summary

Before you build in Dreamweaver, you must know two things:

Purpose of the Website/Goals

The Target Audience

brainstorming
Brainstorming

What kind of web sites are out there?

  • What features do they have?
  • What styles/conventions do they use?
  • What are some trends?
web design today
Web Design Today

Current Trends

  • Web 2.0
    • Widgets, social media links
  • Mobile Devices
  • Use of CMS’s (Content Management Systems)
group discussion
Group Discussion

What Makes a Web Site Successful and Effective?

Discuss this as a group.

We will then take it up as a class.

group discussion1
Group Discussion

What Makes a Web Site Successful and Effective?

  • Content is intuitively organized (are lead to content without much conscience effort)
  • Copy (text content) is simply presented in basic language
  • Simple layout
  • Strategic placing of key content elements (according to eye tracking research)
  • Not too many clicks to get to content
  • Functionality intuitively allows user to complete task they want to complete
  • Effective search engine
  • Consistent use of site conventions and navigational elements
  • Dynamic content gives people reason to come back
  • Functionality/content that adds value
  • Functionality “functions” as expected (e.g. if registration system on a site doesn’t work or video crashes page, people may not come back)
group discussion2
Group Discussion

What Makes a Web Site Successful and Effective?

Bottom Line . . .

Site are successful if they meet goals/expectations of client and target audience

Can achieve this through goal-oriented design

Article about Goal-oriented Design from Web Design from Scratch

website design process
Website Design Process

Concept

Design

Implementation

Evaluation

concept
Concept

What happens during this phase?

concept1
Concept

Gather Informationa) client meetingb) competitor analysisc) audience analysis/personnasd) brainstorming

e) wireframe

f) confirm timeline of deliverables

g) resources inventory-do you have logo, images, content, domain name…

Product: Client Summary and/or Creative Brief with sign-off (to prevent “scope creep”)

design
Design

What happens during this phase?

design1
Design

Plan the Interface and Content

  • navigational flowchart
  • storyboards of key tasks
  • visual mock up of look and feel
  • logo design
  • Dreamweaver/Contribute? Or CMS?
implement
Implement

What happens during this phase?

implement1
Implement

Build, Launch, Maintain

  • Create prototype
  • Usability testing
  • Build full version
  • Add analytics
  • Final review of content
  • Confirm maintenance plan
  • Train users on Contribute or CMS
  • FTP to live location
evaluate
Evaluate

What happens during this stage?

evaluate1
Evaluate

Usability and True to Purpose

  • surveys and usability testing
  • “Is site accomplishing what you intended”
overview web design process
Overview: Web Design Process

Plan

Develop

Publish

Maintain

Concept

Design

Implement

Implement

Implement

overview web design process1
Overview: Web Design Process

Plan

Develop

Publish

Maintain

-concept-wireframe of layout

-navigational structure (information architecture)

overview web design process2
Overview: Web Design Process

Plan

Develop

Publish

Maintain

-interface design

-design template

-build pages

-add content

-build/embed features

-user testing

overview web design process3
Overview: Web Design Process

Plan

Develop

Publish

Maintain

-review content

-upload to server

-get web host-get domain name

overview web design process4
Overview: Web Design Process

Plan

Develop

Publish

Maintain

-set up content maintenance plan

-set up content owners with Contribute

-set up administrative settings (e.g. versioning,check files in and out)

project team roles
Project Team: Roles

What Are the Main Tasks and Roles?

project team roles1
Project Team: Roles

What Are Some Main Tasks and Roles?

Project Manager

Interface Design

  • Interface Designer

Content Development

  • Copy writer
  • Graphic Designer
  • Multimedia Developer
  • Videographer

Social Media Expert

Search Engine Optimization

  • SEO Expert

Business Intelligence Expert

Web Development

  • Programmer (Flash, client (browser-side)
  • Database programmer
  • CMS Implementation Expert
  • Web Applications programmer

Information Management

  • Information Architect
information architecture
Information Architecture

What is?

Organizing functionality and content into a web site structure

that people can easily navigate.

It’s how people are able to perform tasks and find information.

why use a cms
Why use a CMS?
  • Allows categorization of content for easy retrieval
  • Website requires frequent updating
  • Easily add features (e.g. photogalleries, event calendar, polling tools etc)
  • Maintenance of web content doesn’t require technical knowledge of web design
  • If multiple people will maintain content (especially if they are not knowledgeable about web design)
content management systems
Content Management Systems

Open Source CMS

http://php.opensourcecms.com/

You can try demos of various CMS systems

documentation project management
Documentation:Project Management

Examples on Wiki

Types of documents vary from the form/complicated to the very basic

Documentation is important for:

  • Keeping expectations clear
  • Confirming and sticking to timelines
  • Ensuring accountability
last thoughts
Last thoughts . . .

Ask Louisa . . .

Any burning questions ??

ad