1. Wednesday, November 17, 2010

2. TOPICS
• About me: Why graphic (and/or web) design?
• My education & career path (so far)
• Love/hate about web design
• Applying design principles to web design
• The tools I use
• My work today
Wednesday, November 17, 2010

3. ABOUT ME
• How I stumbled upon design
• Howstuffworks.com, Word Art, MS Frontpage
Wednesday, November 17, 2010

4. Wednesday, November 17, 2010

5. ABOUT ME
• Internships in high school
• I enjoy making things that people use
• Learning, tinkering etc
Wednesday, November 17, 2010

6. EDUCATION
• Computer Science Major
• Sketching
• Critique & Discussion
• Develop a thick skin
• Projects are never finished
Wednesday, November 17, 2010

7. Wednesday, November 17, 2010

8. Wednesday, November 17, 2010

9. Wednesday, November 17, 2010

10. Wednesday, November 17, 2010

11. Wednesday, November 17, 2010

12. • 3 Internships
• UBS, iMed Studios, UBS
• REAL work in my portfolio!
INTERNSHIPS
Wednesday, November 17, 2010

13. Wednesday, November 17, 2010

14. INTERNSHIPS
Wednesday, November 17, 2010

15. Wednesday, November 17, 2010

16. Wednesday, November 17, 2010

17. Wednesday, November 17, 2010

18. Wednesday, November 17, 2010

19. MY CAREER
• Types of jobs: in house, small agency
Wednesday, November 17, 2010

20. Wednesday, November 17, 2010

21. Wednesday, November 17, 2010

22. Wednesday, November 17, 2010

23. Wednesday, November 17, 2010

24. MY CAREER
• Blogging, video tutorials, networking, twitter
• Freelancing, podcasting
• Speaking (eek!) at conferences
Wednesday, November 17, 2010

25. Wednesday, November 17, 2010

26. Wednesday, November 17, 2010

27. Wednesday, November 17, 2010

28. I HATE WEB DESIGN
• Instant gratification
• Fixing mistakes
• Anyone can see what you do!
• Tinkering - nothing is ever finished
• Cross Browser Testing
Wednesday, November 17, 2010

29. • Instant gratification
• Fixing mistakes
• Anyone can see what you do!
• Tinkering - nothing is ever finished
• Apply design knowledge and take it further
I LOVE WEB DESIGN
Wednesday, November 17, 2010

30. APPLYING DESIGN
PRINCIPLES TO THE
WEB
• Typography
• Visual Hierarchy
• Grids
• Color
Wednesday, November 17, 2010

31. TYPOGRAPHY
• Readability, dark text light background
• Line length
• kerning, tracking, leading
• Letter-spacing, line-spacing, word-spacing
• Photoshop type vs real web type
Wednesday, November 17, 2010

32. Wednesday, November 17, 2010

33. TYPOGRAPHY
• Web Safe Fonts
• Arial, Georgia, Times, Verdana etc
• @font-face, Cufon, Images
Wednesday, November 17, 2010

34. Wednesday, November 17, 2010

35. Wednesday, November 17, 2010

36. Wednesday, November 17, 2010

37. • webfontspecimen.com
• blog.typekit.com/2010/10/05/type-rendering-on-the-web
• daverupert.com/2010/09/lettering-js
• Elements of Typographic Style
TYPOGRAPHY
RESOURCES
Wednesday, November 17, 2010

38. VISUAL HIERARCHY
• Directing the users eye around the page
• Call to action - what do you want the user to
do? To click on?
• F & Z shaped pattern
Wednesday, November 17, 2010

39. Wednesday, November 17, 2010

40. VISUAL HIERARCHY
• Size, color, placement, whitespace
• Interaction, animation, transparency
Wednesday, November 17, 2010

41. Wednesday, November 17, 2010

42. GRID SYSTEMS
• 960 Grid system
• cssgrid.net
• @media queries
• max-min screen size
• Other grid types
Wednesday, November 17, 2010

43. Wednesday, November 17, 2010

44. Wednesday, November 17, 2010

45. GRID RESOURCES
• 960.gs
• cssgrid.net
• alistapart.com/articles/responsive-web-design
• Making and Breaking the Grid
Wednesday, November 17, 2010

46. COLOR
• Contrast, text on color, legibility
• Color for visually impaired, colorblind etc
• Hex color codes #ffffff
• RGBa color codes color: rgba (255, 0, 0, .2)
• ‘A’ stands for alpha transparency
Wednesday, November 17, 2010

47. Wednesday, November 17, 2010

48. COLOR
• RGB color gamut
Wednesday, November 17, 2010

49. Wednesday, November 17, 2010

50. MY TOOLBOX
Wednesday, November 17, 2010

51. HTML
Wednesday, November 17, 2010

52. CSS
Wednesday, November 17, 2010

53. PHP
Wednesday, November 17, 2010

54. jQuery
Wednesday, November 17, 2010

55. MY FREELANCE WORK
• Print design, illustration
• Logo design, web design
Wednesday, November 17, 2010

56. Wednesday, November 17, 2010

57. Wednesday, November 17, 2010

58. Wednesday, November 17, 2010

59. Wednesday, November 17, 2010

60. Wednesday, November 17, 2010

61. Wednesday, November 17, 2010

62. Wednesday, November 17, 2010

63. QUESTIONS?
? ?
?
? ?
?
?
?
?
?
?
?
?
?
Wednesday, November 17, 2010

64. THANK YOU!
• NikiBrown.com
• hi@nikibrown.com
• @Nikibrown
• Please rate my talk at http://nikib.ro/wn/2p
Wednesday, November 17, 2010