Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responding to Responsive - BadCamp 2014

3da2285e3aff61848ae49c2b3aa3063f?s=47 Josh Riggs
November 09, 2014

Responding to Responsive - BadCamp 2014

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

3da2285e3aff61848ae49c2b3aa3063f?s=128

Josh Riggs

November 09, 2014
Tweet

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.
  31. None
  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
  33. None
  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
  36. None
  37. None
  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.