louisa lambregts, [email protected]. what makes a web site successful and effective?...
TRANSCRIPT
![Page 1: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/1.jpg)
Web Design TheoryLouisa Lambregts, [email protected]
![Page 2: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/2.jpg)
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/
![Page 3: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/3.jpg)
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/
![Page 4: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/4.jpg)
Website Design Process
Concept
Design
Implementation
Evaluation
![Page 5: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/5.jpg)
Concept
What happens during this phase?
![Page 6: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/6.jpg)
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”)
![Page 7: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/7.jpg)
Design
What happens during this phase?
![Page 8: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/8.jpg)
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?
![Page 9: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/9.jpg)
Implement
What happens during this phase?
![Page 10: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/10.jpg)
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
![Page 11: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/11.jpg)
Evaluate
What happens during this stage?
![Page 12: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/12.jpg)
Evaluate
Usability and True to Purpose
▪ surveys and usability testing▪ “Is site accomplishing what you
intended”
![Page 13: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/13.jpg)
Overview: Web Design Process
Plan Develop Publish Maintain
Concept Design(Evaluate)
Implement ImplementEvaluate
![Page 14: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/14.jpg)
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
![Page 15: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/15.jpg)
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/
![Page 16: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/16.jpg)
Overview: Web Design Process
Plan Develop Publish Maintain
-interface design-build pages-add content-edit content-add analytics-build/embed features-user testing
![Page 17: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/17.jpg)
Overview: Web Design Process
Plan Develop Publish Maintain
-review content-upload to server-get web host-get domain name
![Page 18: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/18.jpg)
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)
![Page 19: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/19.jpg)
Dreamweaver/ContributeWorkflow
Site Designed
and Published
in Dreamwea
ver
Site Administrator Assigns Contribute
Roles
Content Contributor
sUse
Contribute to maintain site content
![Page 20: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/20.jpg)
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)
![Page 21: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/21.jpg)
Content Management Systems
Open Source CMS
http://php.opensourcecms.com/
You can try demos of various CMS systems
![Page 22: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/22.jpg)
Project Team: Roles
What Are the Main Tasks and Roles?
![Page 23: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/23.jpg)
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
![Page 24: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/24.jpg)
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
![Page 25: Louisa Lambregts, lambrel@algonquincollege.com. What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations](https://reader033.vdocuments.us/reader033/viewer/2022042717/56649dbd5503460f94aaf4a9/html5/thumbnails/25.jpg)
Selecting Tools to Use
Adobe Suite
Educational SoftwareThrough Algonquin’s ComputerStore