![Page 1: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/1.jpg)
The Web Design Process
Webpage Design
![Page 2: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/2.jpg)
How do I build a website?
![Page 3: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/3.jpg)
Influences on design outcomes • The Client
• The Audience
• The Designer
• The designer negotiates the space and builds a connection between client and audience
• The designer is paid by the client but obliged to the audience
• The designer adds a third influence = creative need
Ideas from The Shape of Design by Frank Chimero
![Page 4: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/4.jpg)
I need a website
A Client
![Page 5: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/5.jpg)
My client needs a new website. Where the heck do I start?
Maybe I should get some stock photography?
A Web Designer
![Page 6: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/6.jpg)
![Page 7: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/7.jpg)
Workflow
Initial ideas on napkin/back of fag packet...
![Page 8: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/8.jpg)
Wireframing
18 Great Examples of Sketched UI Wireframes and Mockups
Wireframing any way you like...
![Page 9: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/9.jpg)
Responsive design? • “Content out”
• “One Web”
• “Mobile first”
• “Device agnostic”
• “Responsive design”
• Isn't there a nice, easy workflow that deals with all of this?
![Page 10: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/10.jpg)
Sketch Design and Mockup
Image mockup in Photoshop
Choice of fonts, colour etc.
![Page 11: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/11.jpg)
Coding and Preview
Coding in text editor and preview in Firefox
![Page 12: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/12.jpg)
The web design process • Client brief
• Sketch design/wireframe (critical analysis & feedback)
• Mock-up (critical analysis & feedback)
• Development
• Testing (critical analysis & feedback)
• Deployment
• Promotion
![Page 13: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/13.jpg)
Anatomy of a webpage
![Page 14: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/14.jpg)
Webpage components • The structural layer – XHTML/HTML
• The presentation layer - CSS
• The behavioural layer – JavaScript, jQuery etc.
• Images in various formats – JPG, GIF & PNG
• Media files – audio, video and Flash
![Page 15: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/15.jpg)
Considerations
• Usability/User Experience (UX) Navigation and search Use of colour/contrast etc. Readability Consistency/logic/conformity etc.
• Findability (on-page SEO) • Accessibility • Business logic
![Page 16: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/16.jpg)
Who is the website for?
• The designer? • The client? • The user? • Know your audience. • Apply a "user centred" design approach. • A website that is not useable or useful for its
target audience is useless.
![Page 17: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/17.jpg)
Software • The actual software you use is not relevant because
the quality of the product does not depend upon it, providing it gives the designer full control.
• There are lots of options, both free and paid.
• You may prefer to use separate tools for code editing and FTP or you may prefer an integrated development environment.
• You'll also need an image editor.
• You'll need lots of browsers, not just IE.
![Page 18: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/18.jpg)
Code editing and FTP
Editor: Notepad or Notepad++ FTP: SmartFTP or FileZilla
![Page 19: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/19.jpg)
Integrated development tools
Dreamweaver or Aptana Studio
![Page 20: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/20.jpg)
Browser and extensions Mozilla Firefox plus... Web Developer * Firebug * HTML Validator * FoxGuide WebRank Toolbar
*essential tools
![Page 21: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/21.jpg)
Software applications • Notepad, Notepad++ or Sublime Text
• SmartFTP, FileZilla or FireFTP
• Adobe Dreamweaver or Aptana Studio
• Adobe Photoshop, Paint.NET or GIMP
• Browsers: IE6/7/8/9/10, FF, Opera, Safari, Chrome...
• Web developer browser extensions
• Any other software you find useful
![Page 22: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/22.jpg)
Web Hosting
• You will need a web hosting service • You more than likely need a domain name • You may need a database • You may need to configure the server • Other considerations...
![Page 23: The Web Design Process - Course Stuff · • The Client • The Audience • The Designer • The designer negotiates the space and builds a connection between client and audience](https://reader033.vdocuments.us/reader033/viewer/2022042418/5f34f02047240d5eb45bfa24/html5/thumbnails/23.jpg)
<end class=“slideshow” />