Tweet
Tweet

Slide 1

Slide 1 text

Greetings From Portland I BROUGHT SOME HOMEMADE PICKLES • Josh Riggs = Lead UX & visual designer @thinkshout • On the interwebs at @joshriggs

Slide 2

Slide 2 text

Responding To Responsive A DESIGNER’S GUIDE TO ADAPTING

Slide 3

Slide 3 text

Responsive Design Is Fucking Hard

Slide 4

Slide 4 text

• 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?

Slide 5

Slide 5 text

“Gear Is Good, Vision Is Better” - DAVID DUCHEMIN

Slide 6

Slide 6 text

Design Is Problem Solving THE EXPERIENCE IS THE PRODUCT

Slide 7

Slide 7 text

Design is the creation of a plan or convention for the construction of an object or a system. WIKIPEDIA:

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

Designing In The Browser Will Solve All Your Problems. PRESENTATION OVER. LET’S GET SOME BEER.

Slide 10

Slide 10 text

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?"

Slide 11

Slide 11 text

Design tools are always changing. If we focus on problem-solving instead, we will always have a constant.

Slide 12

Slide 12 text

Success or failure of a responsive design has never depended on whether or not the designer used Photoshop.

Slide 13

Slide 13 text

…And Now We Make Stuff A LOOK AT A PROCESS THAT WORKS FOR ME

Slide 14

Slide 14 text

Design Is Design, Right? • Interaction Design is about creating a UI system • Visual Design is about creating a visual voice • Both are equally important

Slide 15

Slide 15 text

Wireframe In The Browser. Create Visual Design In A Real Design Program.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Meet “Distillery” HTTPS://GITHUB.COM/THINKSHOUT/DISTILLERY

Slide 21

Slide 21 text

Visual Design THE COAT OF PAINT ON THE HOUSE

Slide 22

Slide 22 text

Ideation Vs. Production IDEATE IN A DESIGN PROGRAM. PRODUCE IN CODE.

Slide 23

Slide 23 text

Ideation ART 
 DIRECTION UI CONCEPTS VISUAL PROBLEM SOLVING EXPLORATION & SKETCHING

Slide 24

Slide 24 text

In Other Words… Design Apps Are Perfect For Ideation!

Slide 25

Slide 25 text

Production APPLYING DESIGN LANGUAGE BREAKING DOWN COMPONENTS TESTING & VALIDATION “FILLING IN THE GAPS”

Slide 26

Slide 26 text

Production Is Where I Switch To Code.* *If time and budget allows

Slide 27

Slide 27 text

Visual Design Deliverables HAPPY CLIENTS + HAPPY DEVELOPERS = HAPPY DESIGNER

Slide 28

Slide 28 text

Start Broad: Style Tiles

Slide 29

Slide 29 text

• 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

Slide 30

Slide 30 text

• 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.

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

• 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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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!

Slide 35

Slide 35 text

Bring Down The Wall CREATING BETTER COMMUNICATION BETWEEN DESIGNERS AND DEVELOPERS

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

• 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?

Slide 39

Slide 39 text

“If there is no struggle, there is no progress.” - FREDERICK DOUGLASS

Slide 40

Slide 40 text

Word. @JOSHRIGGS EVERYWHERE / LETS GET A BEER.