Wednesday, November 17, 2010
TOPICS
• About me: Why graphic (and/or web) design?
• My education & career path (so far)
• Love/hate about web design
• A...
ABOUT ME
• How I stumbled upon design
• Howstuffworks.com, Word Art, MS Frontpage
Wednesday, November 17, 2010
Wednesday, November 17, 2010
ABOUT ME
• Internships in high school
• I enjoy making things that people use
• Learning, tinkering etc
Wednesday, Novembe...
EDUCATION
• Computer Science Major
• Sketching
• Critique & Discussion
• Develop a thick skin
• Projects are never finishe...
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
• 3 Internships
• UBS, iMed Studios, UBS
• REAL work in my portfolio!
INTERNSHIPS
Wednesday, November 17, 2010
Wednesday, November 17, 2010
INTERNSHIPS
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
MY CAREER
• Types of jobs: in house, small agency
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
MY CAREER
• Blogging, video tutorials, networking, twitter
• Freelancing, podcasting
• Speaking (eek!) at conferences
Wedn...
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
I HATE WEB DESIGN
• Instant gratification
• Fixing mistakes
• Anyone can see what you do!
• Tinkering - nothing is ever fi...
• Instant gratification
• Fixing mistakes
• Anyone can see what you do!
• Tinkering - nothing is ever finished
• Apply des...
APPLYING DESIGN
PRINCIPLES TO THE
WEB
• Typography
• Visual Hierarchy
• Grids
• Color
Wednesday, November 17, 2010
TYPOGRAPHY
• Readability, dark text light background
• Line length
• kerning, tracking, leading
• Letter-spacing, line-spa...
Wednesday, November 17, 2010
TYPOGRAPHY
• Web Safe Fonts
• Arial, Georgia, Times, Verdana etc
• @font-face, Cufon, Images
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
• webfontspecimen.com
• blog.typekit.com/2010/10/05/type-rendering-on-the-web
• daverupert.com/2010/09/lettering-js
• Elem...
VISUAL HIERARCHY
• Directing the users eye around the page
• Call to action - what do you want the user to
do? To click on...
Wednesday, November 17, 2010
VISUAL HIERARCHY
• Size, color, placement, whitespace
• Interaction, animation, transparency
Wednesday, November 17, 2010
Wednesday, November 17, 2010
GRID SYSTEMS
• 960 Grid system
• cssgrid.net
• @media queries
• max-min screen size
• Other grid types
Wednesday, November...
Wednesday, November 17, 2010
Wednesday, November 17, 2010
GRID RESOURCES
• 960.gs
• cssgrid.net
• alistapart.com/articles/responsive-web-design
• Making and Breaking the Grid
Wedne...
COLOR
• Contrast, text on color, legibility
• Color for visually impaired, colorblind etc
• Hex color codes #ffffff
• RGBa...
Wednesday, November 17, 2010
COLOR
• RGB color gamut
Wednesday, November 17, 2010
Wednesday, November 17, 2010
MY TOOLBOX
Wednesday, November 17, 2010
HTML
Wednesday, November 17, 2010
CSS
Wednesday, November 17, 2010
PHP
Wednesday, November 17, 2010
jQuery
Wednesday, November 17, 2010
MY FREELANCE WORK
• Print design, illustration
• Logo design, web design
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
QUESTIONS?
? ?
?
? ?
?
?
?
?
?
?
?
?
?
Wednesday, November 17, 2010
THANK YOU!
• NikiBrown.com
• hi@nikibrown.com
• @Nikibrown
• Please rate my talk at http://nikib.ro/wn/2p
Wednesday, Novem...
Upcoming SlideShare
Loading in...5
×

Syracuse symposium11-17-2010

454

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
454
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Syracuse symposium11-17-2010

  1. 1. Wednesday, November 17, 2010
  2. 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. 3. ABOUT ME • How I stumbled upon design • Howstuffworks.com, Word Art, MS Frontpage Wednesday, November 17, 2010
  4. 4. Wednesday, November 17, 2010
  5. 5. ABOUT ME • Internships in high school • I enjoy making things that people use • Learning, tinkering etc Wednesday, November 17, 2010
  6. 6. EDUCATION • Computer Science Major • Sketching • Critique & Discussion • Develop a thick skin • Projects are never finished Wednesday, November 17, 2010
  7. 7. Wednesday, November 17, 2010
  8. 8. Wednesday, November 17, 2010
  9. 9. Wednesday, November 17, 2010
  10. 10. Wednesday, November 17, 2010
  11. 11. Wednesday, November 17, 2010
  12. 12. • 3 Internships • UBS, iMed Studios, UBS • REAL work in my portfolio! INTERNSHIPS Wednesday, November 17, 2010
  13. 13. Wednesday, November 17, 2010
  14. 14. INTERNSHIPS Wednesday, November 17, 2010
  15. 15. Wednesday, November 17, 2010
  16. 16. Wednesday, November 17, 2010
  17. 17. Wednesday, November 17, 2010
  18. 18. Wednesday, November 17, 2010
  19. 19. MY CAREER • Types of jobs: in house, small agency Wednesday, November 17, 2010
  20. 20. Wednesday, November 17, 2010
  21. 21. Wednesday, November 17, 2010
  22. 22. Wednesday, November 17, 2010
  23. 23. Wednesday, November 17, 2010
  24. 24. MY CAREER • Blogging, video tutorials, networking, twitter • Freelancing, podcasting • Speaking (eek!) at conferences Wednesday, November 17, 2010
  25. 25. Wednesday, November 17, 2010
  26. 26. Wednesday, November 17, 2010
  27. 27. Wednesday, November 17, 2010
  28. 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. 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. 30. APPLYING DESIGN PRINCIPLES TO THE WEB • Typography • Visual Hierarchy • Grids • Color Wednesday, November 17, 2010
  31. 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. 32. Wednesday, November 17, 2010
  33. 33. TYPOGRAPHY • Web Safe Fonts • Arial, Georgia, Times, Verdana etc • @font-face, Cufon, Images Wednesday, November 17, 2010
  34. 34. Wednesday, November 17, 2010
  35. 35. Wednesday, November 17, 2010
  36. 36. Wednesday, November 17, 2010
  37. 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. 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. 39. Wednesday, November 17, 2010
  40. 40. VISUAL HIERARCHY • Size, color, placement, whitespace • Interaction, animation, transparency Wednesday, November 17, 2010
  41. 41. Wednesday, November 17, 2010
  42. 42. GRID SYSTEMS • 960 Grid system • cssgrid.net • @media queries • max-min screen size • Other grid types Wednesday, November 17, 2010
  43. 43. Wednesday, November 17, 2010
  44. 44. Wednesday, November 17, 2010
  45. 45. GRID RESOURCES • 960.gs • cssgrid.net • alistapart.com/articles/responsive-web-design • Making and Breaking the Grid Wednesday, November 17, 2010
  46. 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. 47. Wednesday, November 17, 2010
  48. 48. COLOR • RGB color gamut Wednesday, November 17, 2010
  49. 49. Wednesday, November 17, 2010
  50. 50. MY TOOLBOX Wednesday, November 17, 2010
  51. 51. HTML Wednesday, November 17, 2010
  52. 52. CSS Wednesday, November 17, 2010
  53. 53. PHP Wednesday, November 17, 2010
  54. 54. jQuery Wednesday, November 17, 2010
  55. 55. MY FREELANCE WORK • Print design, illustration • Logo design, web design Wednesday, November 17, 2010
  56. 56. Wednesday, November 17, 2010
  57. 57. Wednesday, November 17, 2010
  58. 58. Wednesday, November 17, 2010
  59. 59. Wednesday, November 17, 2010
  60. 60. Wednesday, November 17, 2010
  61. 61. Wednesday, November 17, 2010
  62. 62. Wednesday, November 17, 2010
  63. 63. QUESTIONS? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Wednesday, November 17, 2010
  64. 64. THANK YOU! • NikiBrown.com • hi@nikibrown.com • @Nikibrown • Please rate my talk at http://nikib.ro/wn/2p Wednesday, November 17, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×