• 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?
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.
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?"
Design Is Design, Right? • Interaction Design is about creating a UI system • Visual Design is about creating a visual voice • Both are equally important
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
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
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
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
• 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
• 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.
• 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
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!
• 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?
joshriggs
meganerinmiller
uxaustralia
ohtristanart
.jpg){kind=avatar}
masayachonan
emmamsketches
ymrl
ryanm519
manuchat
chima
minma_curama
lynnandtonic
chriscoyier
dotmariusz
sachag
morganepeng
aarron
holman
malarkey
colly
kastner
lara
jcasabona