5 Things Every Designer Should be Doing Right Now
Transcript of 5 Things Every Designer Should be Doing Right Now
![Page 1: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/1.jpg)
RIGHT NOW
THINGS EVERY WEB DESIGNER SHOULD BE DOING
@PaulTrani5
T
![Page 2: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/2.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani2
FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe
SLIDES: #FITCtoronto
![Page 3: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/3.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani3
DIFFERENT TYPES OF DESIGNERS
3
The Artist Designer CSS DesignerUI/UX The Deseloper
![Page 4: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/4.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani4
GETS SH*T DONE
THE RIGHT WAY TO DESIGN
IS THE ONE THAT
![Page 5: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/5.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
“DON’T TRY TO BE ORIGINAL
5
JUST TRY TO BE GOOD.PAUL RAND
”
![Page 6: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/6.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani6
BE GOODHOW TO
…
![Page 7: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/7.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani7
THE 5 THINGST
![Page 8: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/8.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani8
(RESPONSIVE DESIGN)1 CREATE USING A GRID
![Page 9: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/9.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani9
“GRIDS ORGANIZE CONTENT.”- CAPTAIN OBVIOUS
USE A GRID
![Page 10: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/10.jpg)
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
![Page 11: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/11.jpg)
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
![Page 12: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/12.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
Responsive Grid
System
Unsemantic
Golden Grid
System
1200 Grid System
960 Grid System
Photoshop
GRID-BASED DESIGN
12
USE A GRIDWirify
![Page 13: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/13.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani13
USE A GRID
GOLDEN RATIO
1 x 1.618
![Page 14: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/14.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
Responsive Grid
System
Unsemantic
Golden Grid
System
1200 Grid System
960 Grid System
Photoshop
GOLDEN RATIO
14
USE A GRID1 x 1.618
![Page 15: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/15.jpg)
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
![Page 16: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/16.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani16
TRY TO BE GRIDNOT BORING
USE A GRID
![Page 17: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/17.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
TRY TO BE GRIDNOT BORING
17
USE A GRID
![Page 18: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/18.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
DESIGNING WITH A GRID
18
USE A GRID
LAYOUT GUIDES SMART GUIDES LINKED ASSETS
![Page 19: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/19.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani19
(WIREFRAME/PROTOTYPE)2MAKE MESTAKES EARLY
![Page 20: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/20.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani20
Low-fidelity Wireframe High-fidelity Prototype
WIREFRAME/PROTOTYPE
![Page 21: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/21.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
Cha
nges
Mad
e
06
121824303642485460667278849096
Web Design
With a Wireframe
21
WIREFRAME/PROTOTYPE
Minimal Changes
![Page 22: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/22.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
Without a Wireframe
22
Cha
nges
Mad
e
06
121824303642485460667278849096
Web Design
WIREFRAME/PROTOTYPE
![Page 23: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/23.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
Cha
nges
Mad
e
06
121824303642485460667278849096
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.”
![Page 24: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/24.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani24
Low-fidelity Wireframe High-fidelity Prototype
WIREFRAME/PROTOTYPE
![Page 25: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/25.jpg)
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
![Page 26: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/26.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani26
(AND SPEND MORE TIME OUTSIDE)3USE A FRAMEWORK
![Page 27: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/27.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani27
USE A FRAMEWORK
Google Web Starter Kit Zurb Foundation v5+ UIkit Semantic UI Gumby FrameworkBootstrap
![Page 28: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/28.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani28
EVEN FOR ICONS4USE WEB FONTS
T
![Page 29: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/29.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
TYPOGRAPHY
29
CONVEY INFORMATION IN WRITINGHAS ONE PLAIN DUTY BEFORE IT AND THAT’S TO
”
“
EMIL RUDER
WEB FONTST
![Page 30: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/30.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani30
WEB FONTST
(roll your own)
Typekit Sky Fonts
DESKTOP USE
WEB FONTS
HOSTED SERVICES
Typekit Google Fonts
Font Squirrel
![Page 31: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/31.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani31
WEB FONTS
WEB FONTST
![Page 32: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/32.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
RESPONSIVE TYPOGRAPHY
32
MEANS LEGIBILITY EVERYWHERE
WEB FONTST
![Page 33: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/33.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
USE FONTS
33
FOR IC NS
WEB FONTST
![Page 34: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/34.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani34
ICON FONTS
WEB FONTST
FONTAWESOME ICOMOON scalable vector icons that can instantly be customized
![Page 35: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/35.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani35
RESPONSIVELY5USE IMAGERY
![Page 36: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/36.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
USE IMAGERY
36
WITH VISUAL INTERESTTO CONVEY INFORMATION
IMAGERY
![Page 37: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/37.jpg)
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
![Page 38: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/38.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani38
IMAGERY
CREATING IMAGERY
SKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATOR
![Page 39: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/39.jpg)
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
![Page 40: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/40.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani40
IMAGERY
ANIMATED SVG
SNAP.SVG
![Page 41: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/41.jpg)
AND NOW…
![Page 42: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/42.jpg)
PLEASE STOP
THINGS EVERY WEB DESIGNER SHOULDN’T BE DOING5
![Page 43: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/43.jpg)
![Page 44: 5 Things Every Designer Should be Doing Right Now](https://reader031.fdocuments.us/reader031/viewer/2022020918/55a6681b1a28abca668b4605/html5/thumbnails/44.jpg)
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani44
THANK YOU!
FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe
SLIDES: #FITCtoronto