1. The Design Process &
Analysis
Tuesday, December 13, 11

2. Goals for today
•Review
•Look at the design process
•SEO, clients perception, pro tips
•Usability testing
•Branding
•Be not burnt out.
Tuesday, December 13, 11

3. What is Progressive
Enhancement?
Tuesday, December 13, 11

4. A layered approach
to Web Design,
focused on content,
accessibility & the
user.
Tuesday, December 13, 11

5. HTML - Structure
CSS - Presentation
JS - Behavior
Tuesday, December 13, 11

6. The Design Process
Tuesday, December 13, 11

7. Overview
•Define
•Structure
•Design
•Build & Test
•Launch
Tuesday, December 13, 11

8. Define
Tuesday, December 13, 11

9. Define
•Identifying goals
•Identifying target audience
•Interviewing users
•Requirement gathering
Tuesday, December 13, 11

10. Structure
Tuesday, December 13, 11

11. Structure
•Content Inventory
•Site map/data flow
•Wireframing
Tuesday, December 13, 11

12. Structure
Site map
home
projects about client form
confirmation
project X
data output
Tuesday, December 13, 11

13. Structure
Data flow
submit form
email database
data output API
Tuesday, December 13, 11

14. Structure
Site map
home
projects
project
project
project
contact
about
Tuesday, December 13, 11

15. Structure
Wireframing
•Information Architecture
•Design layout
Tuesday, December 13, 11

16. Structure
Wireframing
Tuesday, December 13, 11

17. Design
Tuesday, December 13, 11

18. Design
•Color scheme
•Design comps
•Interaction prototypes
•Design review
•Client changes
Tuesday, December 13, 11

19. Design
colors
Tuesday, December 13, 11

20. Design
design comp
Interaction
model
Tuesday, December 13, 11

21. Design
Interaction model
options
Tuesday, December 13, 11

22. Design
Design review
Tuesday, December 13, 11

23. Design
Redo it.
Tuesday, December 13, 11

24. Build & Test
Tuesday, December 13, 11

25. Build & Test
•Font-end
•Browser Test
•Back-end (CMS installation)
•Bug tracking
•Final presentation to client
Tuesday, December 13, 11

26. Build & Test
Front-end coding
Tuesday, December 13, 11

27. Build & Test
Front-end coding
1.HTML
2.CSS
3.JavaScript
Tuesday, December 13, 11

28. Build & Test
Back-end (CMS installation)
Tuesday, December 13, 11

29. Build & Test
Bug tracking & QA
...
Tuesday, December 13, 11

30. Build & Test
Final presentation to client
Tuesday, December 13, 11

31. Launch
Tuesday, December 13, 11

32. Launch
Dev -> Test -> Prod
FTP vs. live edit
SVN & GIT
Tuesday, December 13, 11

33. Maintenance
Tuesday, December 13, 11

34. Maintenance
fixing stu when it breaks (it always does)
Tuesday, December 13, 11

35. Tuesday, December 13, 11

36. [ take a break, they’ve had enough ]
Tuesday, December 13, 11

37. Search Engine
Optimization (SEO)
Tuesday, December 13, 11

38. SEO
http://www.youtube.com/watch?v=hF515-0Tduk
Tuesday, December 13, 11

39. SEO
•Content
•Semantic/meaningful HTML
•Page weight
•+1’s
•Links
Tuesday, December 13, 11

40. SEO
<meta name=”keywords” content=”[a list of keywords]”>
Tuesday, December 13, 11

41. SEO
•Web Standards
•Je rey Zeldman
Tuesday, December 13, 11

42. Usability Testing
your design
Tuesday, December 13, 11

43. Testing
Tuesday, December 13, 11

44. Branding
Tuesday, December 13, 11

45. Meaningful Logo Design
Tuesday, December 13, 11

46. Tuesday, December 13, 11

47. Tuesday, December 13, 11

48. Tuesday, December 13, 11

49. Tuesday, December 13, 11

50. Tuesday, December 13, 11

51. Tuesday, December 13, 11

52. Whitespace in Logo Design
Tuesday, December 13, 11

53. Tuesday, December 13, 11

54. Tuesday, December 13, 11

55. Tuesday, December 13, 11

56. Guild of Food Writers
Tuesday, December 13, 11

57. Tuesday, December 13, 11

58. Today is in the past
•Reviewed
•Looked at the design process
•SEO, clients perception, pro tips
•Usability testing
•Branding
Tuesday, December 13, 11

59. Next Class
•Color Wheel
•Color Theory
•Communicating with color
•Typography
•Font Design
Tuesday, December 13, 11

60. Concerns
E-mail: timwright12@gmail.com
Twitter: @csskarma
AIM: csskarma
Tuesday, December 13, 11