5 Things Every Designer Should be Doing Right Now with Paul Trani Presented at FITC Toronto 2015 More info at www.fitc.ca OVERVIEW Ever wonder if there’s an easier way to design effectively and work with CSS and HTML? How to get assets out of a PSD an in a meaningful web format? How to collaborate with others and make sure everyone is on the same page? What about design trends? In this talk, you’ll learn the five things every designer should be doing. From HTML, to CSS to images to just keeping your sanity. The end result is less time redoing and more time creating. OBJECTIVE Learn the five things that every successful web designer should be doing. TARGET AUDIENCE Web designers FIVE THINGS AUDIENCE MEMBERS WILL LEARN Understand design trends. How to use Photoshop for web design. Reusing assets without recreating. Intelligent use of type. Creating for mobile and high DPI devices.

1. RIGHT
NOW
THINGS EVERY WEB DESIGNER
SHOULD BE DOING
@PaulTrani
5
T

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

41. AND NOW…

42. PLEASE
STOP
THINGS EVERY WEB DESIGNER
SHOULDN’T BE DOING5

44. THINGS EVERY WEB DESIGNER
SHOULD BE DOING5
@PaulTrani44
THANK YOU!
FOLLOW ME: @PAULTRANI
Sr. Creative Cloud Evangelist, Adobe
SLIDES: #FITCtoronto