Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Tools & Techniques for Print Designers – HO...
Search
jeremyloyd
May 02, 2017
Design
0
77
Web Tools & Techniques for Print Designers – HOW Live 2017
jeremyloyd
May 02, 2017
Tweet
Share
More Decks by jeremyloyd
See All by jeremyloyd
Desigining Today's Web
jeremyloyd
2
230
The Responsive Design Process
jeremyloyd
3
300
Other Decks in Design
See All in Design
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
230
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
460
AI時代に淘汰されないデザインのしごと
akinen
1
150
#Dubois Challenge 2025: Economics
ajstarks
0
140
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.8k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.1k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
550
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
390
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
520
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
410
Kid Cowboy 103
marilutwin
0
270
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Invisible Side of Design
smashingmag
301
51k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
Jeremy Loyd Ben Callahan WEB DESIGN TOOLS & TECHNIQUES
FOR PRINT DESIGNERS
BRANDING PRINT PACKAGING WEB
WEB
Uncertainty Doubt Pressure Fear
DESIGN DEVELOPMENT
DESIGN DEVELOPMENT
DESIGN DEVELOPMENT
DESIGN DEVELOPMENT AND
DESIGN DEVELOPMENT
DESIGN DEVELOPMENT
DESIGN DEVELOPMENT
Sharing things we’ve learned THERE IS NO ONE WAY
Collaborative Notes bit.ly/how2017
Questions? @bencallahan @jeremyloyd
WEB TOOLS & TECHNIQUES FOR PRINT DESIGNERS BEFORE DESIGN BEGINS
Visual Direction BEFORE DESIGN BEGINS
Dissecting Design Style Comparisons Light vs Dark
Dissecting Design Flat vs Textured Style Comparisons
Dissecting Design Illustration vs Photography Style Comparisons
20 Second Gut Check
B
A
C
H
Y
None
None
None
Visual Vocabulary
Kevin Hoffman www.goodkickoffmeetings.com
Project Brief
Architecture Content Priority User Experience (UX) BEFORE DESIGN BEGINS
WEB TOOLS & TECHNIQUES FOR PRINT DESIGNERS DISSECTING WEB
DESIGN
Dissecting Web Design PRODUCTIVITY TIME
Establish the Aesthetic PRODUCTIVITY TIME
Solve Design Problems PRODUCTIVITY TIME
Refine PRODUCTIVITY TIME
Establish the Aesthetic DISSECTING WEB DESIGN
Do just enough to get good feedback on a design
concept
None
None
None
None
Style Tiles
Style Prototypes
Style Prototypes
Element Collage
None
Page Comps
Sketch
Solve Design Problems DISSECTING WEB DESIGN
Do just enough to get good feedback and inform development
Identify Page Templates/ Design Key Modules SOLVE DESIGN PROBLEMS
Dribbble Example
What key template could I design that would knock out
the most reused modules and text styles?
None
None
None
None
None
None
None
None
Thinking Modularly
None
None
None
None
None
None
Module Deliverables ➡ Pattern Libraries ➡ Style Guides ➡ Design
Systems
Reuse, Reuse, Reuse
How Things Respond
None
CREATIVE DIRECTOR & ADVISOR Dan Mall
CREATIVE DIRECTOR & ADVISOR Dan Mall “Let’s not design in
the browser, let’s decide in the browser.”
None
None
Dealing with Variable Content
None
None
Design with real content if possible
Unique Pages SOLVE DESIGN PROBLEMS
None
None
None
None
Navigation SOLVE DESIGN PROBLEMS
None
None
None
None
Interaction SOLVE DESIGN PROBLEMS
Motion Comps
None
Prototyping/Animation Tools ➡ Principle ➡ Origami Studio ➡ Proto.io ➡
Framer ➡ Atomic ➡ Adobe Animate
None
Sketch
Refine DISSECTING WEB DESIGN
Design Pairing REFINE
Demo
Value of Design Pairing ➡ Fosters environment of collaboration ➡
Allows for periodic refinement while the product is built ➡ Helps both designer and developer level up
When to Pair ➡ When there’s questions, challenges, or snags
➡ When creating new pages from existing modules ➡ When it’s more efficient
Sometimes static explorations are needed
Hammer/Chisel SHIFT IN MINDSET
CONTENT DIRECTOR Emily Gray
“The hammer and chisel pairing allows designers to add tremendous
value directly in code.” CONTENT DIRECTOR Emily Gray
Getting into the code REFINE
None
WEB TOOLS & TECHNIQUES FOR PRINT DESIGNERS FINAL THOUGHTS
Think Iteratively SHIFT IN MINDSET
CONTENT UX FRONT-END DESIGN BACK-END
Think about Performance SHIFT IN MINDSET
Think about Accessibility SHIFT IN MINDSET
None
None
Think about Your Co-workers SHIFT IN MINDSET
None
None
You can use the design skills you have for the
web FINAL THOUGHTS
Document your Learning FINAL THOUGHTS
THANKS! @jeremyloyd @bencallahan
None