Slide 1

Web Design TheoryLouisa Lambregts, lambrel@algonquincollege.com

Course Topics1) Evolution of the web siteChanging Anatomy of a Web Site

2) Aspects of a Web Design Project

3) Roles

4) Tools of the Trade

5) The Web Design Process:ConceptDesignImplement(Evaluate)

6) Managing Your Web Projects

Review: HTML BasicsBasic Page Layout

My first Web Site

Your content

Review: Evolution of Web DesignLayout was dominated by

Text formattingLayout via tablesFramesJavascript: Roll-over buttonsAnimationsSplash pageFlashReview: 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 SheetsWhat was CSS designed to do?

Why is it called this?Review: CSS Cascade Style SheetsFormat separated from contentDifferent style sheets for different outputsCan change look and feel of site by linking to a different style sheet

Flexibility of layout

Review: Evolution of Web DesignAnd 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 DesignAnd 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 ActivityWhat 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 #1What is the purpose of these sites?

Google search: a) H1N1 CDC (US site)b) H1N1 Ontario Ministry of Health

Determine:Target Audience of siteWhat purpose is the organization trying to achieveWas it successful at meeting its purpose?

Web Review #2What is the purpose of these sites?

Google search: a) How Stuff Works

Determine:Target Audience of siteWhat purpose is the organization trying to achieveWas it successful at meeting its purpose?

Web Review #3What is the purpose of these sites?

Google search: a) David Suzuki Foundation

Determine:Target Audience of siteWhat purpose is the organization trying to achieveWas it successful at meeting its purpose?

Group Discussion: SummaryBefore you build in Dreamweaver, you must know two things:Purpose of the Website/Goals

The Target AudienceBrainstormingWhat kind of web sites are out there?

What features do they have?What styles/conventions do they use?What are some trends?

Web Design TodayCurrent TrendsWeb 2.0Widgets, social media links

Mobile Devices

Use of CMSs (Content Management Systems)Group DiscussionWhat Makes a Web Site Successful and Effective?Discuss this as a group.

We will then take it up as a class.

Group DiscussionWhat 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 languageSimple layoutStrategic placing of key content elements (according to eye tracking research)Not too many clicks to get to contentFunctionality intuitively allows user to complete task they want to completeEffective search engineConsistent use of site conventions and navigational elementsDynamic content gives people reason to come backFunctionality/content that adds value Functionality functions as expected (e.g. if registration system on a site doesnt work or video crashes page, people may not come back)

Group DiscussionWhat 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 ScratchWebsite Design ProcessConceptDesignImplementationEvaluationConceptWhat happens during this phase?

ConceptGather Information

a) 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)DesignWhat happens during this phase?

DesignPlan the Interface and Content

navigational flowchartstoryboards of key tasksvisual mock up of look and feel logo designDreamweaver/Contribute? Or CMS?

ImplementWhat happens during this phase?

ImplementBuild, Launch, Maintain

Create prototypeUsability testingBuild full versionAdd analyticsFinal review of contentConfirm maintenance planTrain users on Contribute or CMSFTP to live location

EvaluateWhat happens during this stage?

EvaluateUsability and True to Purpose

surveys and usability testingIs site accomplishing what you intended

Overview: Web Design ProcessPlanDevelopPublishMaintainConceptDesignImplementImplementImplementOverview: Web Design ProcessPlanDevelopPublishMaintain-concept-wireframe of layout-navigational structure (information architecture)Overview: Web Design ProcessPlanDevelopPublishMaintain-interface design-design template-build pages-add content-build/embed features-user testingOverview: Web Design ProcessPlanDevelopPublishMaintain-review content-upload to server-get web host-get domain nameOverview: Web Design ProcessPlanDevelopPublishMaintain-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: RolesWhat Are the Main Tasks and Roles?Project Team: RolesWhat Are Some Main Tasks and Roles?Content DevelopmentCopy writerGraphic DesignerMultimedia DeveloperVideographerWeb DevelopmentProgrammer (Flash, client (browser-side)Database programmerCMS Implementation ExpertWeb Applications programmerProject ManagerInformation ManagementInformation ArchitectSocial Media ExpertSEO ExpertInterface DesignInterface DesignerSearch Engine OptimizationBusiness Intelligence ExpertInformation ArchitectureWhat is?Organizing functionality and content into a web site structure that people can easily navigate.

Its how people are able to perform tasks and find information.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 doesnt require technical knowledge of web design

If multiple people will maintain content (especially if they are not knowledgeable about web design)

Content Management SystemsOpen Source CMS

http://php.opensourcecms.com/

You can try demos of various CMS systemsDocumentation:Project ManagementExamples on Wiki

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

Documentation is important for:Keeping expectations clearConfirming and sticking to timelinesEnsuring accountabilityLast thoughts . . . Ask Louisa . . .

Any burning questions ??