5 things every web designer should be doing right now
TRANSCRIPT
RIGHT NOW
THINGS EVERY WEB DESIGNER SHOULD BE DOING
@PaulTrani5
T
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani2
FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe
SLIDES: #FITCtoronto
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani3
DIFFERENT TYPES OF DESIGNERS
3
The Artist Designer CSS DesignerUI/UX The Deseloper
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani4
GETS SH*T DONE
THE RIGHT WAY TO DESIGN
IS THE ONE THAT
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
“DON’T TRY TO BE ORIGINAL
5
JUST TRY TO BE GOOD.PAUL RAND
”
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani6
BE GOODHOW TO
…
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani7
THE 5 THINGST
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani8
(RESPONSIVE DESIGN)1 CREATE USING A GRID
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani9
“GRIDS ORGANIZE CONTENT.”- CAPTAIN OBVIOUS
USE A GRID
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
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
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
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani13
USE A GRID
GOLDEN RATIO
1 x 1.618
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
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
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani16
TRY TO BE GRIDNOT BORING
USE A GRID
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
TRY TO BE GRIDNOT BORING
17
USE A GRID
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
DESIGNING WITH A GRID
18
USE A GRID
LAYOUT GUIDES SMART GUIDES LINKED ASSETS
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani19
(WIREFRAME/PROTOTYPE)2MAKE MESTAKES EARLY
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani20
Low-fidelity Wireframe High-fidelity Prototype
WIREFRAME/PROTOTYPE
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
Cha
nges
Mad
e
06
121824303642485460667278849096
Web Design
With a Wireframe
21
WIREFRAME/PROTOTYPE
Minimal Changes
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
Without a Wireframe
22
Cha
nges
Mad
e
06
121824303642485460667278849096
Web Design
WIREFRAME/PROTOTYPE
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.”
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani24
Low-fidelity Wireframe High-fidelity Prototype
WIREFRAME/PROTOTYPE
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
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani26
(AND SPEND MORE TIME OUTSIDE)3USE A FRAMEWORK
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani27
USE A FRAMEWORK
Google Web Starter Kit Zurb Foundation v5+ UIkit Semantic UI Gumby FrameworkBootstrap
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani28
EVEN FOR ICONS4USE WEB FONTS
T
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
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
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani31
WEB FONTS
WEB FONTST
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
RESPONSIVE TYPOGRAPHY
32
MEANS LEGIBILITY EVERYWHERE
WEB FONTST
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
USE FONTS
33
FOR IC NS
WEB FONTST
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani34
ICON FONTS
WEB FONTST
FONTAWESOME ICOMOON scalable vector icons that can instantly be customized
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani35
RESPONSIVELY5USE IMAGERY
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani
USE IMAGERY
36
WITH VISUAL INTERESTTO CONVEY INFORMATION
IMAGERY
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
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani38
IMAGERY
CREATING IMAGERY
SKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATOR
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
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani40
IMAGERY
ANIMATED SVG
SNAP.SVG
AND NOW…
PLEASE STOP
THINGS EVERY WEB DESIGNER SHOULDN’T BE DOING5
THINGS EVERY WEB DESIGNER SHOULD BE DOING5
@PaulTrani44
THANK YOU!
FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe
SLIDES: #FITCtoronto