Web Design Theory

Louisa Lambregts, lambrel@algonquincollege.com 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) 6) Managing Your Web Projects

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 Layout was dominated by • Text formatting • Layout via tables • Frames • Javascript: Roll-over buttons Animations • Splash page Flash

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 What was CSS designed to do? Why is it called this?

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 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 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 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 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 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 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 Before you build in Dreamweaver, you must know two things: Purpose of the Website/Goals The Target Audience

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 Current Trends • Web 2.0 • Widgets, social media links • Mobile Devices • Use of CMS’s (Content Management Systems)

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 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 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 Concept Design Implementation Evaluation

Concept What happens during this phase?

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 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 Implement Implement Implement

Overview: Web Design Process Plan Develop Publish Maintain -concept-wireframe of layout -navigational structure (information architecture)

Overview: Web Design Process Plan Develop Publish Maintain -interface design -design template -build pages -add content -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)

Project Team: Roles What Are the Main Tasks and Roles?

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 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? • 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

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 . . . Ask Louisa . . . Any burning questions ??

Web Design Theory