Download as KEY, PPTX
Uploaded byMeagan Fisher
Becoming a Web Design Champion
The document outlines essential guidance for aspiring web designers, including the skills and experiences necessary for success in the field. It emphasizes the importance of collaboration, understanding design principles, and the advantages of coding knowledge for efficient design execution. Additionally, it advocates for continuous learning, feedback, and creativity in the design process.
More Related Content
![Screw You Bullet Points! [Rest in Peace]](https://cdn.slidesharecdn.com/ss_thumbnails/screwyoubulletpoints-151208171941-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Becoming a Web Design Champion
![Driver Easy Pro Key 7.1.0.2641 Full Mac Crack Free Activated Download [2026]....](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207185324-b2fb71b4-thumbnail.jpg?width=640&height=640&fit=bounds)
![Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207184836-1d16ba16-thumbnail.jpg?width=640&height=640&fit=bounds)
![PowerISO 9.2 Mac Crack + Serial Key Free Download 2026 [Latest] Software.pptx](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207185653-5d5700e6-thumbnail.jpg?width=640&height=640&fit=bounds)
![CleanMyMac X v5.2.8 Crack for MacOS Full Version [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207194121-a81f0142-thumbnail.jpg?width=640&height=640&fit=bounds)
![iStat Menus 7.20 Crack for MacOS 2026 Full Version [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207191544-22b737dc-thumbnail.jpg?width=640&height=640&fit=bounds)
![Parallels Desktop v7.1.1.4366 Crack for macOS Activation Key [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207191237-21d186d4-thumbnail.jpg?width=640&height=640&fit=bounds)
![Chapter4_Initiation_of_Sediment_Motion_v2[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/chapter4initiationofsedimentmotionv21-251208223747-f94ef163-thumbnail.jpg?width=640&height=640&fit=bounds)
Becoming a Web Design Champion
- 1.
- 2. Two things onmy mind Highlight Olympics
- 4. Chartbeat Highlight • Lots of visibility • Fun, shareable, quirky • Clean, simple, and on brand • Works on multiple devices
- 5. “The only thingstanding between us and our Olympic dreams are that we’re out-of-shape, apathetic, and incapable of passing a drug test.”
- 6. Achieve yourdesign 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.
- 7. So you want to be a WEB DESIGNER
- 8. 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?
- 9. designers & degrees Jeffreyzeldman Ethan Marcotte Dan Cederholm fiction writing english literature music recording Kyle steed Aaron draplin Yours truly dropout dropout dropout
- 10. “One of thebest pieces of advice I can give to a designer is to be well-traveled. Design is really about people; the more you understand humans, the better you will be as a designer.” - Yaron Schoen, design lead at Twitter NY
- 11. start with agood book Head First Don’t Make Designing with Bulletproof XHTML & CSS Me Think Web Standards Web Design A Book Apart Series + 5 Simple Steps Series
- 12. start with agood book Posters for the Grid Systems The Elements Books about People: Art of in Graphic of Typographic designers in the WPA Design Style other fields
- 13. Just make things • Do band sites and “business” sites • Make terrible blogs • Do silly online tutorials • Be careful about free work
- 14. 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.
- 15. various inspiration UI Elements Textures Patterns Typefaces Fashion Street art illustration Fine art
- 16.
- 17. 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
- 18. Working at an agency • Full of better designers • Work on a variety of projects • Learn about process • Leave when you aren’t challenged
- 19. 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
- 20. work at aStartup • 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!
- 21. Should I specializeor DIVERSIFY?
- 22. Meet Tony • CEO, British, loves puns • Keeps a chaotic group of immature but brilliant people on track • Looks for specific qualities when hiring
- 23. Be “T” shaped Interests • 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
- 24. Chartbea t-shapes t Tom Germeau Yours truly Matt Bango Product 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
- 25. Design for different mediums • Keeps you from getting bored • Forces you to hone your instincts about a specific aspect of design.
- 26. Responsive shirt Enceladus app Night owl shirt Duet app Pictory mag Pandagram icon
- 27. Should designers learn howto CODE?
- 28. Reasons to develop • Better understand constraints • Design and execute seamlessly • Create interactive wireframes • Rapidly prototype • Build responsive designs
- 29. make an interactive wireframe • Showclients :hover behavior, animations and transitions • Make quick edits to CSS for changes • Sets the groundwork for the site’s markup
- 31.
- 34. RGBA! RGBA! RGBA! RGBA! RGBA! RGBA! RGBA! RGBA! RGBA! RGBA!
- 39.
- 42. Chartbea highlight sttes t a
- 43. The answer: itdepends • 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.
- 44.
- 45.
- 46. Dieter Rams’ 10 principles forgood design 1. Good design is innovative 2. Good design makes a product useful 3. Good design is aesthetic 4. Good design makes a product understandable 5. Good design is unobtrusive
- 47. Dieter Rams’ 10 principles forgood design 6. Good design is honest 7. Good design is long-lasting 8. Good design is thorough down to the last detail 9. Good design is environmentally-friendly 10.Good design is as little design as possible
- 48. 10 principles forgood design Read them and see more work: vitsoe.com/gb/ about/good-design
- 49. Why have principles? • Helps to clarify your mission • Helps to frame your feedback • Helps us defend our designs • Have amazing conversations about design
- 50. 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
- 51. "To design ismuch more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse." - Paul Rand
- 52. Chartbea t’s 10principles for good design 1. Use as little design as possible 2. Be delightful 3. Data drives the design 4. Make it fast 5. Be modular and consistent
- 53. Chartbea t’s 10principles for good design 6. Challenge dogma 7. Keep it dynamic 8. Be empathetic 9. Build in forgiveness 10. Be evaluative
- 54.
- 55. 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
- 56. When to getfeedback? • Designers tend to want pixel- perfection before sharing designs • Get input early and often, include stakeholders and developers
- 57.
- 58. 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.
- 59. Working with other designers • Bangois Mr. “50 Shades of Gray” • Meagan is Ms. “80 layers of textures + technicolor explosion” • Each style plays a valuable role
- 63. Working with other 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
- 64.
- 65. 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.
- 66. Chartbea .com/labs t Big board Universe Sidebar widget Data mosaic Traffic Visitor map Real-time chess About page
- 67. Meet Vadim • Back-end engineer, Russian, creative drug user • Sends angry emails • Helped me redesign the about page
- 70. big board inthe wild Al Jazeera CNN MOney Glenn Beck NBC Wall street journal IGN
- 72.
- 73.
- 74. Why Chartbeat? • Real-time analytics? • Launching the redesign was the most fun I ever had at a job.
- 75. Thanks for listening. you’reawesome. • Fonts used: Trade Gothic, Proxima Nova, the rest from LostType.com • Imagery: Courtesy of commons.wikipedia.org
- 76. Let’s chat • Website:owltastic.com • Email: [email protected] • Twitter username: owltastic • Work: chartbeat.com/jobs
Editor's Notes
- #2 - Hi, thank you so much for having me and coming out to hear me speak.\n- I’m Meagan Fisher, known on the internet as Owltastic. I’m the Art Director at a startup called Chartbeat.\n- Today I’m going to talk about [title]. It’s a corny title\n- Basically how to get better, some lessons learned along the way\n
- #3 - Project called chartbeat highlight\n- Watching the Olympics, particularly men’s swimming events\n
- #4 - CHartbeat: Real-time analytics; what’s happening on your site now in the simplest, most actionable way possible.\n
- #5 Considerations for Highlight\n- Very public feature, something lots of people would see\n- Needs to be quirky, have personality, can’t be too far from product\n- Working closely with a developer building out javascript, tying in with our API\n- Lots of rounds of feedback, many people invested\n- When these challenges were overwhelming I’d go watch the Olympics in a bar with my friends\n
- #6 This graphic sums up my feelings while watching the Olympics. These people trained incredibly hard for years, had amazing endurance and determination.\n
- #7 Even if we can’t be Olympic athletes, we can still be champions in our field. I’ll discuss some of the ways I’ve tried to do that, the things I’ve done that have made me better along the way.\n
- #8 Touch a little bit on the concerns of newbies; a few of the common questions I get from people just starting out, or thinking of moving from Graphic design to web design.\n
- #9 Here are some of those questions: people want to know if they need to study design at school, what resources to turn to, where to work to get their career going, and where to get ideas.\n
- #10 Here’s a selection of some of my favorite designers, myself included, who have no formal design education at all. \n\nObviously there are lots of great designers who did study design in college, but it’s not a prerequisite by any means. \n\nIn fact, I would argue studying other fields can sometimes make you a better designer than you would’ve been if you’d gone to school for it.\n
- #11 This is a quote by Yaron Schoen, who is the design lead at Twitter here in New York. I think it sums up what we should be focusing on early in our careers, which is less about technical skill and more about exposing yourself to different types of people, and trying to understand the challenges they face on the web.\n
- #12 As far as acquiring technical knowledge, all you really need is a great book. Here are the first four books I read when I first started learning how to build websites, I’ve also included the more recently published Book Apart series, as well as 5 simple steps. These are really comprehensive in getting you up to speed with the challenges in web design now.\n
- #13 Don’t limit your education to technical books, make sure you also read some Art History and graphic design principle books. Don’t worry about reading whatever’s in the “cannon”, focus instead on what interests you. I love the works of the WPA in the 30\n‘s, so I have an inspiration book about that which I regularly turn to when I’m stuck.\n
- #14 The best thing you can do is start making things. I designed a series of ridiculous Tumblr’s for my friends, as well as a site for a band and a magician. These projects were fun and low-risk, and they helped me build a portfolio so I could get a job. One other note; don’t let people take advantage of your inexperience when you start out. You can work for free if there’s a project you really want to do for a friend, but if a company is profiting from your work you should expect to be paid.\n
- #15 It’s okay to steal when you’re first starting out, as long as you never publish this work under your own name. You can blog about what you learned from the experience of mimicking other’s style, as long as you clearly credit the original artist.\n
- #16 Be sure to gather inspiration from multiple industries, not just web designers you admire. When I’m stuck I don’t just look at what my favorite web designers are doing; I look at photography blogs or go to a museum. This will ensure your work isn’t too heavily influenced by one person.\n
- #17 I’ve worked in a lot of job environments over the last 8 years or so, and I want to quickly touch on what I learned from each of them, and how I decided when to leave a company.\n
- #18 - First job was a large corporation, called Dynetech\n- Started as an intern, eventually became a full time designer. Usually looking for cheap labor.\n- Lots of obvious disadvantages: bureaucracy, office politics\n- Work with people from different backgroudns\n- Forced to use Visual Studio .net, once you do that everything else is a treat\n- Don’t spend your life in a corporation if you want to continue to grow creatively\n
- #19 - Most people at agencies are better than you, you learn so much\n- Crank out all kinds of projects very quickly\n- The agencies I work with have very segmented roles; designers work in photoshop, developers build markup, etc. It’s efficient, but I wanted to be able to focus on a variety of things; project management, code, and design.\n
- #20 - I spent the majority of my career doing solo work, which I think every designer should do\n- Challenges you more than any other role\n- Forced to work remotely and learn how to handle those challenges\n- Learn about project management, the business of design\n- It’s fun working in your pajamas, but eventually you’ll get burnt out\n
- #21 - Now I work at a startup, and I love it\n- Small team of people working very closely together\n- Very invested in your work if you have stake in your company\n- Chartbeat has no HR department so we can drink and curse at work\n
- #22 - Jack of all trades, or master of one skill?\n
- #23 - This is the CEO of Chartbeat, Tony\n- He asks people what they’re interested in, and he’s looking for a specific type of answer\n
- #24 - Tony talks a lot about being “T” shaped\n- Have one deep specialty, but be curious about many things\n\n
- #25 - Chartbeat designers\n- One focuses on Mobile Design\n- \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 German industrial designer\nBelieved in purposeful designs\nPushed for sustainable designs too\n
- #47 Came up with a set of principles to determine if a design was good or not\n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 - CHartbeat: Real-time analytics; what’s happening on your site now in the simplest, most actionable way possible.\n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n