Responding to Responsive - BadCamp 2014

A designer's guide to adapting to the demands of responsive web design, BadCamp 2014 edition.

Transcript

1. Greetings From Portland I BROUGHT SOME HOMEMADE PICKLES • Josh Riggs = Lead UX & visual designer @thinkshout • On the interwebs at @joshriggs
2. Responding To Responsive A DESIGNER’S GUIDE TO ADAPTING
3. Responsive Design Is Fucking Hard
4. • Focus on asking questions & solving problems • Solve those problems using the right tools in a logical progression • Communicate better with developers along the way How Have I Learned To Make It Easier?
5. “Gear Is Good, Vision Is Better” - DAVID DUCHEMIN
6. Design Is Problem Solving THE EXPERIENCE IS THE PRODUCT
7. Design is the creation of a plan or convention for the construction of an object or a system. WIKIPEDIA:
8. Design Is Problem Solving Our job as designers is to craft a great system of interactions all while telling a powerful visual story. We do that by thinking, answering, creating and iterating.
9. Designing In The Browser Will Solve All Your Problems. PRESENTATION OVER. LET’S GET SOME BEER.
10. When you're in Hollywood and you're a comedian, everybody wants you to do other things. All right, you're a stand-up comedian, can you write us a script? That's not fair. That's like if I worked hard to become a cook, and I'm a really good cook, they'd say, "OK, you're a cook. Can you farm?"
11. Design tools are always changing. If we focus on problem-solving instead, we will always have a constant.
12. Success or failure of a responsive design has never depended on whether or not the designer used Photoshop.
13. …And Now We Make Stuff A LOOK AT A PROCESS THAT WORKS FOR ME
14. Design Is Design, Right? • Interaction Design is about creating a UI system • Visual Design is about creating a visual voice • Both are equally important
15. Wireframe In The Browser. Create Visual Design In A Real Design Program.
16. HTML Wireframes Getting Started: • Starting with a complete Content Slice Diagram or component list makes this 100,000% easier. • Aim to create wireframes for each unique interaction • Sketch your ideas and iterations first, even if it’s just boxes and arrows • Don’t jump into code until you have some solid UI ideas • The more detailed your wireframes, the easier visual design will be
17. HTML Wireframes Thoughts on Code: • Opinion: Don’t shoot for code to be used in the final build • Code well, but don’t let correctness stifle your ideas • Try to code in a similar way to the final build
18. HTML Wireframes Thoughts on Code: • Ask your devs for help & advice • If using Sass, use partials • Be organized • Never underestimate the ability of a merge conflict to fuck up your mojo
19. HTML Wireframes My preferences: • Jekyll for templating, variables & front matter. • Sass for CSS pre-processing (duh) • Bourbon instead of Compass for mixin library • Bourbon Neat for Grid • Bourbon Bitters & Refills for extra zazz
20. Meet “Distillery” HTTPS://GITHUB.COM/THINKSHOUT/DISTILLERY
21. Visual Design THE COAT OF PAINT ON THE HOUSE
22. Ideation Vs. Production IDEATE IN A DESIGN PROGRAM. PRODUCE IN CODE.
23. Ideation ART 
 DIRECTION UI CONCEPTS VISUAL PROBLEM SOLVING EXPLORATION & SKETCHING
24. In Other Words… Design Apps Are Perfect For Ideation!
25. Production APPLYING DESIGN LANGUAGE BREAKING DOWN COMPONENTS TESTING & VALIDATION “FILLING IN THE GAPS”
26. Production Is Where I Switch To Code.* *If time and budget allows
27. Visual Design Deliverables HAPPY CLIENTS + HAPPY DEVELOPERS = HAPPY DESIGNER
28. Start Broad: Style Tiles
29. • I use Sketch or Photoshop. No Code. • This is where I experiment with multiple directions and styles • Lightweight and quick to make • NOT the same thing as a style guide Start Broad: Style Tiles
30. • 1-3 mocks. Desktop & Mobile. • Yep, still in Photoshop or Sketch • Purpose is to test out visual design system • Closely (really, really closely) follow wireframes • I can do this about 300% faster in Photoshop / Sketch • Makes Clients Happy! Get More Granular: Full Page Mocks.
32. • If time and budget permits, I jump into code. • If not, I use Photoshop / Sketch • Create enough mocks and components so developers don’t have to guess • Depending on budget / timeline, create HTML style guide Get In The Weeds: Design Components, Patterns & Style Guides
34. Now you have responsive wireframes + all the visual designs you need to make your developers happy, and your clients think you’re a doll. Congratulations!
35. Bring Down The Wall CREATING BETTER COMMUNICATION BETWEEN DESIGNERS AND DEVELOPERS
38. • Don’t try to be a hero if it’s a high pressure project. • Find out who will be developing your work. Get in contact with them. • Be very thorough. • Explain why you’ve created every element in your designs. • Give context. • Present people with problems instead of solutions. What If I’m Stuck Behind A Wall?
39. “If there is no struggle, there is no progress.” - FREDERICK DOUGLASS
40. Word. @JOSHRIGGS EVERYWHERE / LETS GET A BEER.