Transcript
Page 1: 5 Things Every Web Designer Should be Doing Right Now

RIGHT NOW

THINGS EVERY WEB DESIGNER SHOULD BE DOING

@PaulTrani5

T

Page 2: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani2

FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe

SLIDES: #FITCtoronto

Page 3: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani6

BE GOODHOW TO

Page 7: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani7

THE 5 THINGST

Page 8: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani8

(RESPONSIVE DESIGN)1 CREATE USING A GRID

Page 9: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani9

“GRIDS ORGANIZE CONTENT.”- CAPTAIN OBVIOUS

USE A GRID

Page 10: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani13

USE A GRID

GOLDEN RATIO

1 x 1.618

Page 14: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani16

TRY TO BE GRIDNOT BORING

USE A GRID

Page 17: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani

TRY TO BE GRIDNOT BORING

17

USE A GRID

Page 18: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani19

(WIREFRAME/PROTOTYPE)2MAKE MESTAKES EARLY

Page 20: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani20

Low-fidelity Wireframe High-fidelity Prototype

WIREFRAME/PROTOTYPE

Page 21: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani24

Low-fidelity Wireframe High-fidelity Prototype

WIREFRAME/PROTOTYPE

Page 25: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani26

(AND SPEND MORE TIME OUTSIDE)3USE A FRAMEWORK

Page 27: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani28

EVEN FOR ICONS4USE WEB FONTS

T

Page 29: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani31

WEB FONTS

WEB FONTST

Page 32: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani

RESPONSIVE TYPOGRAPHY

32

MEANS LEGIBILITY EVERYWHERE

WEB FONTST

Page 33: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani

USE FONTS

33

FOR IC NS

WEB FONTST

Page 34: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani35

RESPONSIVELY5USE IMAGERY

Page 36: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani

USE IMAGERY

36

WITH VISUAL INTERESTTO CONVEY INFORMATION

IMAGERY

Page 37: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani38

IMAGERY

CREATING IMAGERY

SKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATOR

Page 39: 5 Things Every Web Designer Should be Doing Right Now

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 Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani40

IMAGERY

ANIMATED SVG

SNAP.SVG

Page 41: 5 Things Every Web Designer Should be Doing Right Now

AND NOW…

Page 42: 5 Things Every Web Designer Should be Doing Right Now

PLEASE STOP

THINGS EVERY WEB DESIGNER SHOULDN’T BE DOING5

Page 43: 5 Things Every Web Designer Should be Doing Right Now
Page 44: 5 Things Every Web Designer Should be Doing Right Now

THINGS EVERY WEB DESIGNER SHOULD BE DOING5

@PaulTrani44

THANK YOU!

FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe

SLIDES: #FITCtoronto


Top Related