Beyond Photoshop
Designing for the Modern Web
A little About Me
What tools Should We use?
Photoshop / Fireworks / Illustrator
Adobe Edge Reflow
Macaw
Sketch
Webflow
Axure
Basalmiq
Marvel App
Invision
?
Old School
Let's Backup a little.
Client Role?
Client ROle?
What often matters most isn’t the way we design but the ways we communicate it.
~Andrew Clarke
What Do We NEed From Client?
Basic understanding of the web.
What does the Website Need to do?
Content.
How Can we Help the Client?
Communication and client buy-in early
Framing the conversation
Curiosity
Worse than any deficiency
is the frequent absence of communication when we hand a visual to someone and ask them to judge it. Instead of using visuals as aids to communication, we let the visuals speak for us. This happens especially when we email them or upload them to Basecamp, along with some vague request for “thoughts.”
~Andrew Clarke
No Photoshop?
Are there other design tools?
Process
UX document
Content Wireframe
Sketch, Sketch, Sketch
Layout Wireframe
Style Tiles / Style Prototype
Maybe a PSD or Two
Build
UX Document
Page Description Diagram
Priority Guide
Page Description Diagram
Priority Guide
Content skeleton
Sketch
(A Lot)
Wireframe
Style Tiles
Style Tiles
Style Tiles
Build a Style Prototype
Finally. Build out the site
Designer's Roles
What about Developers?
What is a modern designer’s canvas?
It’s not Photoshop or Sketch. It’s not pattern libraries or style guides. It’s not breakpoints or media queries. It’s none of these things. It’s up here. It’s our minds, our ideas. But it’s also out there, in the people we inspire. And that really
is the best, most important and longest-lasting work we can do.
~Andrew Clarke
Thanks to These fine folks. They all said it better than I can:
The Tomorrow Lab What do we need from client?
Colin Butler & Andrew Wirtanen Page Description Diagram
Drew Clemens Priority Guide
Image Credits
Cover Photo By Galymzhan Abdugalimov
View This Presentation