The document discusses five things that every web designer should be doing:
1. Create websites using a grid system for layout and organization.
2. Make mistakes early by creating wireframes and prototypes to test designs before development.
3. Use frameworks to simplify development and create responsive websites.
4. Use web fonts for responsive typography and icons.
5. Include imagery responsively to convey information visually.
2. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani2
FOLLOW ME: @PAULTRANI
Sr. Creative Cloud Evangelist, Adobe
SLIDES: #FITCtoronto
3. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani3
DIFFERENT TYPES OF DESIGNERS
3
The Artist Designer CSS DesignerUI/UX The Deseloper
4. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani4
GETS SH*T DONE
THE RIGHT WAY TO DESIGN
IS THE ONE THAT
5. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
“DON’T TRY TO BE ORIGINAL
5
JUST TRY TO BE GOOD.
PAUL RAND
”
6. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani6
BE GOOD
HOW TO
…
7. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani7
THE 5 THINGS
T
8. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani8
(RESPONSIVE DESIGN)1CREATE USING A GRID
9. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani9
“GRIDS ORGANIZE CONTENT.”
- CAPTAIN OBVIOUS
USE A GRID
10. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
FOUNDATION OF DESIGN
10
Design as we know it
was born partly in
response to the
Industrial Revolution.
English Illustrated Magazine, 1884 shows designs were suddenly competing for attention.
USE A GRID
11. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
FOUNDATION OF DESIGN
11
Design as we know it
was born partly in
response to the
Industrial Revolution.
English Illustrated Magazine, 1884 shows designs were suddenly competing for attention.
USE A GRID
12. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
Responsiv
e Grid
System
Unsemant
ic
Golden
Grid
System
1200 Grid
System
960 Grid
System
Photosho
p
GRID-BASED DESIGN
12
USE A GRID
Wirify
13. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani13
USE A GRID
GOLDEN RATIO
1 x 1.618
14. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
Responsiv
e Grid
System
Unsemant
ic
Golden
Grid
System
1200 Grid
System
960 Grid
System
Photosho
p
GOLDEN RATIO
14
USE A GRID
1 x 1.618
15. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
GRID SYSTEMS
15
Photoshop Unsemantic Golden Grid System 1200 Grid System 960 Grid System Responsive Grid System
USE A GRID
16. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani16
TRY TO BE GRID
NOT BORING
USE A GRID
17. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
TRY TO BE GRID
NOT BORING
17
USE A GRID
18. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
DESIGNING WITH A GRID
18
USE A GRID
LAYOUT GUIDES
SMART GUIDES
LINKED ASSETS
19. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani19
(WIREFRAME/PROTOTYPE)2MAKE MESTAKES EARLY
20. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani20
Low-fidelity Wireframe High-fidelity Prototype
WIREFRAME/PROTOTYPE
21. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
ChangesMade
0
6
12
18
24
30
36
42
48
54
60
66
72
78
84
90
96
Web Design
With a Wireframe
21
WIREFRAME/PROTOTYPE
Minimal Changes
22. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
Without a Wireframe
22
ChangesMade
0
6
12
18
24
30
36
42
48
54
60
66
72
78
84
90
96
Web Design
WIREFRAME/PROTOTYPE
23. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
ChangesMade
0
6
12
18
24
30
36
42
48
54
60
66
72
78
84
90
96
Web Design
Without a Wireframe
23
Buttload of Changes
WIREFRAME/PROTOTYPE
“I didn’t realize our product line was this confusing.”
“We have too many options in our navigation: our key
pages are getting lost.”
“Our call to action is weak.”
“Our Contact form takes too long to fill out.”
“We’re talking too much about ourselves and not enough
about our customer.”
“Our most important product photos are below the fold:
nobody’s going to see them.”
“We really don’t know what we’re doing.”
24. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani24
Low-fidelity Wireframe High-fidelity Prototype
WIREFRAME/PROTOTYPE
25. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani25
Low-fidelity Wireframe High-fidelity Prototype
WIREFRAME/PROTOTYPE
http://www.axure http://muse.adobe.comAdobe Comp CC https://marvelapp.comhttp://www.invisionapp.com
26. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani26
(AND SPEND MORE TIME OUTSIDE)3USE A FRAMEWORK
27. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani27
USE A FRAMEWORK
Google Web Starter Kit Zurb Foundation v5+ UIkit Semantic UI Gumby FrameworkBootstrap
28. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani28
EVEN FOR ICONS4USE WEB FONTS
T
29. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
TYPOGRAPHY
29
CONVEY INFORMATION IN WRITING
HAS ONE PLAIN DUTY BEFORE IT AND THAT’S TO
”
“
EMIL RUDER
WEB FONTST
30. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani30
WEB FONTST
(roll your own)
Typekit
SkyFonts
DESKTOP USE
WEB FONTS
HOSTED SERVICES
Typekit
Google Fonts
Font Squirrel
31. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani31
WEB FONTS
WEB FONTST
32. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
RESPONSIVE TYPOGRAPHY
32
MEANS LEGIBILITY EVERYWHERE
WEB FONTST
33. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
USE FONTS
33
FOR IC NS
WEB FONTST
34. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani34
ICON FONTS
WEB FONTST
FONTAWESOME ICOMOON
scalable vector icons that can instantly be customized
35. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani35
RESPONSIVELY5USE IMAGERY
36. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
USE IMAGERY
36
WITH VISUAL INTEREST
TO CONVEY INFORMATION
IMAGERY
37. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani
RASTER/BITMAP: GIF, JPG, PNG, SVG
VECTOR: SVG, ICON FONTS, HTML CANVAS
37
IMAGERY
CREATING IMAGERY
SKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATOR
38. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani38
IMAGERY
CREATING IMAGERY
SKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATOR
39. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani39
IMAGERY
CREATING IMAGERY
PHOTOSHOPILLUSTRATOR
ALIGN TO PIXEL GRID
SAVE AS SVG
CSS PROPERTIES
EXTRACT ASSETS
EXTRACT IN BROWSER
COPY CSS
MARKET
40. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani40
IMAGERY
ANIMATED SVG
SNAP.SVG