Web Design TheoryLouisa Lambregts, lambrel@algonquincollege.com

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

Golden Rule - Web Designhttp://www.webdesignfromscratch.com/basics/golden-rule/

Basics of Web Site Design

An article that put together pieces of what we discussed.

The very basics for building an html web site.

http://www.webdesignfromscratch.com/basics/how-to-make-a-web-site/

Website Design Process

Concept

Design

Implementation

Evaluation

Concept

What happens during this phase?

Concept

Gather Informationa) client meeting

b) competitor analysis

c) audience analysis/personnas

d) 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

What happens during this phase?

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

What happens during this phase?

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

What happens during this stage?

Evaluate

Usability and True to Purpose

▪ surveys and usability testing▪ “Is site accomplishing what you

intended”

Overview: Web Design Process

Plan Develop Publish Maintain

Concept Design(Evaluate)

Implement ImplementEvaluate

Overview: Web Design Process

Plan Develop Publish Maintain

Part 1: Client Relationship-Gathering client info-Competitive analysis-confirming project details/getting sign-off

Part 2: Planning the Design-wireframe of layout-navigational structure (information architecture)-storyboard

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.

http://www.webdesignfromscratch.com/website-architecture/ia-models/ 

Overview: Web Design Process

Plan Develop Publish Maintain

-interface design-build pages-add content-edit content-add analytics-build/embed features-user testing

Overview: Web Design Process

Plan Develop Publish Maintain

-review content-upload to server-get web host-get domain name

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)

Dreamweaver/ContributeWorkflow

Site Designed

and Published

in Dreamwea

ver

Site Administrator Assigns Contribute

Roles

Content Contributor

sUse

Contribute to maintain site content

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

Open Source CMS

http://php.opensourcecms.com/

You can try demos of various CMS systems

Project Team: Roles

What Are the Main Tasks and Roles?

Project Team: Roles

What Are Some Main Tasks and Roles?

Content Development•Copy writer•Graphic Designer•Multimedia Developer•Videographer

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

Project Manager

Information Management•Information Architect

Social Media Expert

•SEO Expert

Interface Design

•Interface Designer

Search Engine Optimization

Business Intelligence Expert

Assignment

In this assignment, you will take turns playing the role of client and web designer.

1) As client: Decide on a simple site that you want designed. (e.g. pretend you own a coffeeshop).

2) As web designer:

a) determine: purpose/key goals of client web site

b) determine target audience

c) do competitive analysis: look for 3 competitor sites and record: i) features of siteii) navigational/content categoriesiii) special functionality: social media, sign-up forms,

video or flash video etc.

d) Summarize a) b) a) c) in a Word document

e) Create a wireframe (on paper or in PowerPoint)

f) Share with your client

Selecting Tools to Use

Adobe Suite

Educational SoftwareThrough Algonquin’s ComputerStore