Becoming a Web Design Champion


Published on

In the course of her career working solo, in a duo, with agencies, with corporations, and with a startup, Meagan's learned a few valuable lessons (some the hard way) about how to grow as a designer. She'll talk about how she got started, as well as insights on collaborating, evolving your style, and getting things launched. You'll also hear about the design maxims she holds dear (and which ones she ignores), and the web development techniques that have strengthened her design skills. She hopes to leave you with some ideas for how to be a web design champion.

Published in: Design
  • Be the first to comment

Becoming a Web Design Champion

  1. 1. becominga web designCHAMPION
  2. 2. Two things on my mind Highlight Olympics
  3. 3. Chartbeat Highlight • Lots of visibility • Fun, shareable, quirky • Clean, simple, and on brand • Works on multiple devices
  4. 4. “The only thing standing betweenus and our Olympic dreams are that we’re out-of-shape, apathetic, and incapable of passing a drug test.”
  5. 5. Achieve your design dreams• How to get started and where to work.• How to overcome common project hurdles.• What skills are important for a web designer.• How to better collaborate and get things launched.
  6. 6. So you want to be aWEB DESIGNER
  7. 7. Common questions• Should I study web design at school?• Should I go back to school?• What should I read?• How do I get a job?• Where do I get ideas?
  8. 8. designers & degreesJeffrey zeldman Ethan Marcotte Dan Cederholmfiction writing english literature music recording Kyle steed Aaron draplin Yours truly dropout dropout dropout
  9. 9. “One of the best pieces of advice I cangive to a designer is to be well-traveled.Design is really about people; the moreyou understand humans, the better you will be as a designer.” - Yaron Schoen, design lead at Twitter NY
  10. 10. start with a good book Head First Don’t Make Designing with BulletproofXHTML & CSS Me Think Web Standards Web Design A Book Apart Series + 5 Simple Steps Series
  11. 11. start with a good bookPosters for the Grid Systems The Elements Books aboutPeople: Art of in Graphic of Typographic designers in the WPA Design Style other fields
  12. 12. Just make things• Do band sites and “business” sites• Make terrible blogs• Do silly online tutorials• Be careful about free work
  13. 13. a first, t Steal like a fiend• Don’t sell or publish your work.• Write and talk about lessons learned.• Don’t be an asshole. Credit the original artist.
  14. 14. various inspirationUI Elements Textures Patterns Typefaces Fashion Street art illustration Fine art
  15. 15. Getting down toBUSINESS
  16. 16. Go corporate• Learn the basics about process, what not to do• Get introduced to the community• Be forced to use weird frameworks• Learn about office politics• Work with people from various fields
  17. 17. Working atan agency• Full of better designers• Work on a variety of projects• Learn about process• Leave when you aren’t challenged
  18. 18. Going solo • Everyone should do this • Network with developers • Learn more and faster than ever • Stretch your skills in every direction • Stop when you get burn out
  19. 19. work at a Startup• The thrill of a risk• Work with a small team of people you love• Have creative control and stake• Rapidly broaden your skills• No HR department!
  20. 20. Should I specialize orDIVERSIFY?
  21. 21. Meet Tony• CEO, British, loves puns• Keeps a chaotic group of immature but brilliant people on track• Looks for specific qualities when hiring
  22. 22. Be “T” shapedInterests • Is it better to be an expert, or good at lots of things? • The answer is “both” • Have a deep specialty in a field,Specialty but a broad range of other interests
  23. 23. Chartbea t-shapes tTom Germeau Yours truly Matt BangoProduct Design Marketing Design Product Design• Front-End Dev • Front-End Dev • Front-End Dev• Mobile Design • Illustration • Typography• Ukelele • Writing • Photography• Batman Comics • Owls • Birding• Being Belgian • Cider • Gin & Tonics• Rhubarb • Pokemon • Katy Perry
  24. 24. Design for different mediums• Keeps you from getting bored• Forces you to hone your instincts about a specific aspect of design.
  25. 25. Responsive shirt Enceladus app Night owl shirt Duet app Pictory mag Pandagram icon
  26. 26. Should designerslearn how to CODE?
  27. 27. Reasons to develop • Better understand constraints • Design and execute seamlessly • Create interactive wireframes • Rapidly prototype • Build responsive designs
  28. 28. make aninteractivewireframe• Show clients :hover behavior, animations and transitions• Make quick edits to CSS for changes• Sets the groundwork for the site’s markup
  29. 29. Rapidlyprototypecolorswith CSS3
  31. 31. Show theimportantcontent,regardlessof device.
  32. 32. Chartbea highlight st tes t a
  33. 33. The answer: it depends • Coding has made me a more efficient, more well-rounded designer. • You’ll better understand the medium you’re designing for. • Collaboration is easier. • Either way, keep developers in the loop.
  34. 34. bePRINCIPLED
  35. 35. Dieter rams’ work
  36. 36. Dieter Rams’10 principlesfor good design1. Good design is innovative2. Good design makes a product useful3. Good design is aesthetic4. Good design makes a product understandable5. Good design is unobtrusive
  37. 37. Dieter Rams’10 principlesfor good design6. Good design is honest7. Good design is long-lasting8. Good design is thorough down to the last detail9. Good design is environmentally-friendly10.Good design is as little design as possible
  38. 38. 10 principles for good design Read them and see more work: about/good-design
  39. 39. Why have principles? • Helps to clarify your mission • Helps to frame your feedback • Helps us defend our designs • Have amazing conversations about design
  40. 40. Writing your principles• Make them specific to your team. What are your weaknesses?• Clarify your most important goals• Challenge everything, don’t just state the obvious• Steal from other designers and competitors• Share them with everyone
  41. 41. "To design is much more than simply to assemble, to order, or even to edit; it is to addvalue and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse." - Paul Rand
  42. 42. Chartbea t’s10 principlesfor good design1. Use as little design as possible2. Be delightful3. Data drives the design4. Make it fast5. Be modular and consistent
  43. 43. Chartbea t’s10 principlesfor good design6. Challenge dogma7. Keep it dynamic8. Be empathetic9. Build in forgiveness10. Be evaluative
  44. 44. Get betterat gettingCRITIQUED
  45. 45. Getting feedback• Encourage discussion rather than email feedback• Bring in people who are new to the project• Talk to team members with different specialties• Back up your decisions
  46. 46. When to get feedback?• Designers tend to want pixel- perfection before sharing designs• Get input early and often, include stakeholders and developers
  47. 47. Embracegrouppixelf*cking
  48. 48. giving feedback • Be less concerned with style than empathy. • Is the right content emphasized? • What detail work is left undone? • Are elements designed for the sake of decoration? • Giving feedback makes you more self-critical.
  49. 49. Workingwith otherdesigners• Bango is Mr. “50 Shades of Gray”• Meagan is Ms. “80 layers of textures + technicolor explosion”• Each style plays a valuable role
  50. 50. Working withother designers• Temper one another’s tendency to rely on the same old tricks• Challenge and be challenged• Don’t work somewhere if your styles are utterly in conflict and you’re not learning
  51. 51. hack yourASS OFF
  52. 52. Why hack?• Go out on a limb, try something new.• Break your process, refine it.• Collaborate with new people.• Fix a problem that’s bothering you.
  53. 53. Chartbea .com/labs tBig board Universe Sidebar widget Data mosaic Traffic Visitor map Real-time chess About page
  54. 54. Meet Vadim• Back-end engineer, Russian, creative drug user• Sends angry emails• Helped me redesign the about page
  55. 55. big board in the wildAl Jazeera CNN MOney Glenn Beck NBC Wall street journal IGN
  56. 56. HAVE FUN
  57. 57. WHYOWLS?
  58. 58. Why Chartbeat? • Real-time analytics? • Launching the redesign was the most fun I ever had at a job.
  59. 59. Thanks for’re awesome.• Fonts used: Trade Gothic, Proxima Nova, the rest from• Imagery: Courtesy of
  60. 60. Let’s chat• Website:• Email:• Twitter username: owltastic• Work: