Becoming a Web Design Champion


of 76
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
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.
  • 1. becominga web designCHAMPION
  • 2. Two things on my mind Highlight Olympics
  • 3. Chartbeat Highlight • Lots of visibility • Fun, shareable, quirky • Clean, simple, and on brand • Works on multiple devices
  • 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. 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. So you want to be aWEB DESIGNER
  • 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. designers & degreesJeffrey zeldman Ethan Marcotte Dan Cederholmfiction writing english literature music recording Kyle steed Aaron draplin Yours truly dropout dropout dropout
  • 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. 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. 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. Just make things• Do band sites and “business” sites• Make terrible blogs• Do silly online tutorials• Be careful about free work
  • 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. various inspirationUI Elements Textures Patterns Typefaces Fashion Street art illustration Fine art
  • 15. Getting down toBUSINESS
  • 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. Working atan agency• Full of better designers• Work on a variety of projects• Learn about process• Leave when you aren’t challenged
  • 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. 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. Should I specialize orDIVERSIFY?
  • 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. 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. 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. Design for different mediums• Keeps you from getting bored• Forces you to hone your instincts about a specific aspect of design.
  • 25. Responsive shirt Enceladus app Night owl shirt Duet app Pictory mag Pandagram icon
  • 26. Should designerslearn how to CODE?
  • 27. Reasons to develop • Better understand constraints • Design and execute seamlessly • Create interactive wireframes • Rapidly prototype • Build responsive designs
  • 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. Rapidlyprototypecolorswith CSS3
  • 31. Show theimportantcontent,regardlessof device.
  • 32. Chartbea highlight st tes t a
  • 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. bePRINCIPLED
  • 35. Dieter rams’ work
  • 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. 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. 10 principles for good design Read them and see more work: about/good-design
  • 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. 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. "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. 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. Chartbea t’s10 principlesfor good design6. Challenge dogma7. Keep it dynamic8. Be empathetic9. Build in forgiveness10. Be evaluative
  • 44. Get betterat gettingCRITIQUED
  • 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. When to get feedback?• Designers tend to want pixel- perfection before sharing designs• Get input early and often, include stakeholders and developers
  • 47. Embracegrouppixelf*cking
  • 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. 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. 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. hack yourASS OFF
  • 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. Chartbea .com/labs tBig board Universe Sidebar widget Data mosaic Traffic Visitor map Real-time chess About page
  • 54. Meet Vadim• Back-end engineer, Russian, creative drug user• Sends angry emails• Helped me redesign the about page
  • 55. big board in the wildAl Jazeera CNN MOney Glenn Beck NBC Wall street journal IGN
  • 56. HAVE FUN
  • 57. WHYOWLS?
  • 58. Why Chartbeat? • Real-time analytics? • Launching the redesign was the most fun I ever had at a job.
  • 59. Thanks for’re awesome.• Fonts used: Trade Gothic, Proxima Nova, the rest from• Imagery: Courtesy of
  • 60. Let’s chat• Website:• Email:• Twitter username: owltastic• Work:
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks