Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2

Share

Download to read offline

5 Things Every Web Designer Should be Doing Right Now

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

5 Things Every Web Designer Should be Doing Right Now

  1. 1. RIGHT NOW THINGS EVERY WEB DESIGNER SHOULD BE DOING @PaulTrani 5 T
  2. 2. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani2 FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe SLIDES: #FITCtoronto
  3. 3. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani3 DIFFERENT TYPES OF DESIGNERS 3 The Artist Designer CSS DesignerUI/UX The Deseloper
  4. 4. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani4 GETS SH*T DONE THE RIGHT WAY TO DESIGN IS THE ONE THAT
  5. 5. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani “DON’T TRY TO BE ORIGINAL 5 JUST TRY TO BE GOOD. PAUL RAND ”
  6. 6. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani6 BE GOOD HOW TO …
  7. 7. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani7 THE 5 THINGS T
  8. 8. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani8 (RESPONSIVE DESIGN)1CREATE USING A GRID
  9. 9. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani9 “GRIDS ORGANIZE CONTENT.” - CAPTAIN OBVIOUS USE A GRID
  10. 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. 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. 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. 13. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani13 USE A GRID GOLDEN RATIO 1 x 1.618
  14. 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. 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. 16. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani16 TRY TO BE GRID NOT BORING USE A GRID
  17. 17. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani TRY TO BE GRID NOT BORING 17 USE A GRID
  18. 18. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani DESIGNING WITH A GRID 18 USE A GRID LAYOUT GUIDES SMART GUIDES LINKED ASSETS
  19. 19. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani19 (WIREFRAME/PROTOTYPE)2MAKE MESTAKES EARLY
  20. 20. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani20 Low-fidelity Wireframe High-fidelity Prototype WIREFRAME/PROTOTYPE
  21. 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. 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. 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. 24. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani24 Low-fidelity Wireframe High-fidelity Prototype WIREFRAME/PROTOTYPE
  25. 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. 26. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani26 (AND SPEND MORE TIME OUTSIDE)3USE A FRAMEWORK
  27. 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. 28. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani28 EVEN FOR ICONS4USE WEB FONTS T
  29. 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. 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. 31. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani31 WEB FONTS WEB FONTST
  32. 32. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani RESPONSIVE TYPOGRAPHY 32 MEANS LEGIBILITY EVERYWHERE WEB FONTST
  33. 33. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani USE FONTS 33 FOR IC NS WEB FONTST
  34. 34. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani34 ICON FONTS WEB FONTST FONTAWESOME ICOMOON scalable vector icons that can instantly be customized
  35. 35. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani35 RESPONSIVELY5USE IMAGERY
  36. 36. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani USE IMAGERY 36 WITH VISUAL INTEREST TO CONVEY INFORMATION IMAGERY
  37. 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. 38. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani38 IMAGERY CREATING IMAGERY SKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATOR
  39. 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. 40. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani40 IMAGERY ANIMATED SVG SNAP.SVG
  41. 41. AND NOW…
  42. 42. PLEASE STOP THINGS EVERY WEB DESIGNER SHOULDN’T BE DOING5
  43. 43. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani44 THANK YOU! FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe SLIDES: #FITCtoronto
  • RoyMargasa1

    Apr. 26, 2016
  • kenguashi

    May. 1, 2015

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.

Views

Total views

967

On Slideshare

0

From embeds

0

Number of embeds

12

Actions

Downloads

22

Shares

0

Comments

0

Likes

2

×