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

Responding to Responsive - BadCamp 2014

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.

Josh Riggs

November 09, 2014

More Decks by Josh Riggs

Other Decks in Design


  1. Greetings From Portland I BROUGHT SOME HOMEMADE PICKLES • Josh

    Riggs = Lead UX & visual designer @thinkshout • On the interwebs at @joshriggs
  2. • 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?
  3. Design is the creation of a plan or convention for

    the construction of an object or a system. WIKIPEDIA:
  4. 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.
  5. 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?"
  6. Design tools are always changing. If we focus on problem-solving

    instead, we will always have a constant.
  7. Success or failure of a responsive design has never depended

    on whether or not the designer used Photoshop.
  8. Design Is Design, Right? • Interaction Design is about creating

    a UI system • Visual Design is about creating a visual voice • Both are equally important
  9. 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
  10. 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
  11. 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
  12. 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
  13. • 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
  14. • 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.
  15. • 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
  16. 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!
  17. • 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?