Talk More Betterer About Web Stuff & Junk

An overview of web design best practice for developer handoff. And more!

Transcript

1. Wade Sakundiak Graphic Designer & Developer at the University of Regina Freelance at Happy Camper Twitter: @WadeS Email: wade@happycamper.me
2. Talk More Betterer About Web Stuff & Junk
3. "Honestly, I'm shocked that in 2010 I'm still coming across 'web designers' who can’t code their own designs. No Excuse." @elliotjaystocks Feb. 17, 2010
5. HTML: The markup language of the web.
6. HTML: The markup language of the web. CSS: How things get pretty programatically.
7. HTML: The markup language of the web. CSS: How things get pretty programatically. JavaScript: Full on interaction.
8. HTML: The markup language of the web. CSS: How things get pretty programatically. JavaScript: Full on interaction. Scripting Language: PHP, Ruby, Python, etc.
9. HTML: The markup language of the web. CSS: How things get pretty programatically. JavaScript: Full on interaction. Scripting Language: PHP, Ruby, Python, etc. Database: Super Nerd Territory.
10. Process.
11. Discover. A high-level understanding of the project.
12. Define. Nail down project goals and scope.
13. Design. Content creation, wireframing, technology requirements, visual design.
14. Develop. Front and back-end development. Implementation of visual design.
15. Deploy. Project launch. May be followed with a post-mortem
17. A Brief is not Enough.
18. Spec Sheet Slideshow Twitter/Facebook Share Buttons Events Listing Twitter Widget
19. Content.
22. Heading: The name of the event. Date: The beginning of the event. Location: The location of the event. Details: An explanation of the event in paragraph form. Contact Details: Email address of the person to contact.
23. Interaction.
24. normal hover active
28. Style & Handoff.
29. “One of (Happy Cogs) design goals is to create work that is sustainable, and our design process always aims for the right amount of consistency without homogenization. We like to create design systems that are easy to build, evolve, and use.” Yesenia Perez-Cruz Sweet Systems – http://cog.gd/2au
30. http://styletil.es
31. Grids: Columns, baseline, key divisions (please use a grid).
32. Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables
33. Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges
34. Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges Messaging: Success messages, error handling
35. Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges Messaging: Success messages, error handling Form Elements: Buttons, text inputs, menus, checkboxes
36. Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges Messaging: Success messages, error handling Form Elements: Buttons, text inputs, menus, checkboxes Links & Navigation: Hover, active, disabled and selected states
37. Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges Messaging: Success messages, error handling Form Elements: Buttons, text inputs, menus, checkboxes Links & Navigation: Hover, active, disabled and selected states Images: Dimensions, margins, placement, usage
38. Do: Name files correctly and only send finals Create a masterfile of reusable elements Name layers descriptively Group layers descriptively Use layer comps Include fonts Dither gradients Use web licensable fonts (Fontspring, Typekit, etc.)
39. Avoid: Using blending modes Images for text in buttons or forms Random or unused guides Including unused layers Extending past the constraints of your grid Background images that don’t tile
40. Don’t Fear The Internet: http://dontfeartheinternet.com/ Designing With Web Standards: http://zeldman.com/dwws/ Bulletproof Web Design: http://simplebits.com/bulletproof/ A Project Guide to UX Design: http://projectuxd.com/ A Practical Guide to Designing for the Web: http://designingfortheweb.co.uk