5 Things Every Web Designer Should be Doing Right Now

Download 5 Things Every Web Designer Should be Doing Right Now

Post on 15-Jul-2015

112 views

Category:

Design

7 download

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

    DONT 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

    @PaulTrani13USE 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

    Chan

    ges M

    ade

    06

    121824303642485460667278849096

    Web Design

    With a Wireframe

    21

    WIREFRAME/PROTOTYPE

    Minimal Changes

  • THINGS EVERY WEB DESIGNER SHOULD BE DOING5

    @PaulTrani

    Without a Wireframe

    22

    Chan

    ges M

    ade

    06

    121824303642485460667278849096

    Web Design

    WIREFRAME/PROTOTYPE

  • THINGS EVERY WEB DESIGNER SHOULD BE DOING5

    @PaulTrani

    Chan

    ges M

    ade

    06

    121824303642485460667278849096

    Web Design

    Without a Wireframe

    23

    Buttload of Changes

    WIREFRAME/PROTOTYPE

    I didnt 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.

    Were talking too much about ourselves and not enough about our customer.

    Our most important product photos are below the fold: nobodys going to see them.

    We really dont know what were 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

    @PaulTrani27USE 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 FONTST

  • THINGS EVERY WEB DESIGNER SHOULD BE DOING5

    @PaulTrani

    TYPOGRAPHY

    29

    CONVEY INFORMATION IN WRITINGHAS ONE PLAIN DUTY BEFORE IT AND THATS TO

    EMIL RUDER

    WEB FONTST

  • THINGS EVERY WEB DESIGNER SHOULD BE DOING5

    @PaulTrani30WEB 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

    @PaulTrani38IMAGERY

    CREATING IMAGERY

    SKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATOR

  • THINGS EVERY WEB DESIGNER SHOULD BE DOING5

    @PaulTrani39IMAGERY

    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

    @PaulTrani40IMAGERY

    ANIMATED SVG

    SNAP.SVG

  • AND NOW

  • PLEASE STOP

    THINGS EVERY WEB DESIGNER SHOULDNT BE DOING5

  • THINGS EVERY WEB DESIGNER SHOULD BE DOING5

    @PaulTrani44

    THANK YOU!

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

    SLIDES: #FITCtoronto