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.

Help Me Help You: Practical Tips for Designers from A WordPress Developer

748 views

Published on

Slides for my presentation at WordCamp Toronto 2015

Published in: Design
  • Be the first to like this

Help Me Help You: Practical Tips for Designers from A WordPress Developer

  1. 1. HELPMEHELPYOU PRACTICALTIPSFORDESIGNERSFROMA WORDPRESSDEVELOPER WITH@DARASKOLNICK
  2. 2. HI,I'MDARA. NICETOMEETYOU! I'm @daraskolnick basically everywhere on the Internet.
  3. 3. ALITTLEABOUTME. I... am from Toronto am both a web designer and front end developer run my own (very) small business do lots of WordPress development work in partnership with designers who don't code have been developing WP themes for 10 (!) years
  4. 4. THISTALKISFOR... Independent designers who don’t do their own development (or other designers who work remotely with developers) Designers creating custom themes from scratch (not child themes) Developers who want to help their designers make their lives easier
  5. 5. THISMIGHTNOTBEQUITEAS USEFULFOR... Larger teams where designers and developers work side- by-side every day Designer/developer hybrids who always do everything Designers who design in the browser
  6. 6. WHYISTHISIMPORTANTTO TALKABOUT? There’s often a lack of communication between designers and developers Designers and developers are often frustrated with each other It shouldn’t be this way. We’re on the same time! (Team awesome website, that is.)
  7. 7. THINGS(SOME)DESIGNERS THINKABOUT(SOME) DEVELOPERS Why does the finished website look different from my mockup? Why do they keep saying ‘no’ to things? Are they just grumpy?
  8. 8. THINGS(SOME)DEVELOPERS THINKABOUT(SOME) DESIGNERS This is pretty, but have they actually thought about how this will work in a browser? Why isn’t this design more consistent and systematic? Uh oh, this design is totally going to fall apart with variable content.
  9. 9. WITHALITTLEEDUCATIONON BOTHSIDES,WECANFIXTHESE PROBLEMS.
  10. 10. THISTALKISORGANIZEDINTO PARTSOFTHEPROJECTLIFE CYCLE 1. Before design begins 2. While you're designing 3. After development is complete
  11. 11. PARTONE:BEFORE DESIGNBEGINS
  12. 12. 1.CHOOSEAGOOD DEVELOPER DEVELOPMENTISNOTACOMMODITY. WE'RENOTALLTHESAME!
  13. 13. WORDPRESSISNOTINHERENTLY“EASY” OR“HARD”FORCLIENTSTOUSE.THE DEVELOPERMAKESALLTHEDIFFERENCE.
  14. 14. SITEADMINEXPERIENCES
  15. 15. SITEADMINEXPERIENCE
  16. 16. SOLUTION:ASKYOURPOTENTIAL DEVELOPERWHATTHEYDOTOMAKE WEBSITESEASYTOUPDATEFORNON- TECHNICALCLIENTS ASKTOSEEEXAMPLES!
  17. 17. SOMEDEVELOPERSPAYMORE ATTENTIONTODETAILTHAN OTHERS SNOOPAROUNDTHEIRPORTFOLIO!
  18. 18. RESIZEYOURBROWSER DOTHEIRWEBSITESFALLAPARTATANYPOINT? DOYOUSEEHORIZONTALSCROLLBARS?
  19. 19. ISTHEIRTEXTACTUALLYTEXTORISTHERE TEXTINSIDEIMAGES? TEXTINIMAGESISBADFORPERFORMANCE,ACCESSIBILITY,AND SEO.ALSO,HARDFORCLIENTTOUPDATE
  20. 20. CHECKOUTTHEIRSPACING ISTHEREENOUGHPADDINGAROUNDTHEIRSITES? ARETEXTANDFORMELEMENTSSPACEDNICELY?
  21. 21. LOADINGTIME DOTHEIRSITESTAKEFOREVERANDEVERTOLOAD?
  22. 22. NOTE! SOMEOFTHESEISSUESMIGHTBEOUTOF THEDEVELOPER'SCONTROL. BUTAGOODDEVELOPERWILLOFTENFIXTHESEISSUESANDTHEY SHOULDN'TBEALLOVERTHEIRPORTFOLIO.
  23. 23. ASKYOURSELF:ISTHIS DEVELOPERANICEPERSON?
  24. 24. "SOFTSKILLS"MATTER DOTHEYUSEALOTOFJARGONANDTALK ATYOUWITHASUPERIORITYCOMPLEX?
  25. 25. 2.WHENSHOULDYOUBRING YOURDEVELOPERONBOARD?
  26. 26. BRINGTHEMONBOARDBEFOREDESIGN HASBEGUN
  27. 27. DESIGNINGWITHOUTADEVELOPERIN MINDANDASSUMINGTHATANYONECAN DOTHEJOBISARECIPEFORDISASTER.
  28. 28. EVENWORSE:HANDINGDESIGNSTOA CLIENTANDTHENTELLINGTHEMTOFIND ADEVELOPER.
  29. 29. THISWILLMAKEYOULOOK BADTOYOURCLIENT
  30. 30. THINGSI’VESEENINDESIGNS THATWEREN’TPASSEDBYA DEVELOPERFIRST
  31. 31. OH,THETHINGSI'VESEEN... Fonts that were all non-web fonts Completely random element placement (position absolute all the things!) on a "responsive" site “Mobile designs” for a responsive site that bear very little resemblance to the full-sized design Graphics that rely on Photoshop blending modes Huge images that would take forever to load Extremely inconsistent page designs
  32. 32. THISPUTSYOURDEVELOPERIN ANAWKWARDPOSITION THEYHAVETOLETBOTHYOUANDYOUR CLIENTDOWN.
  33. 33. GOODCOMMUNICATIONISA MUST. ASKYOURPROSPECTIVE DEVELOPERLOTSOF QUESTIONS!
  34. 34. QUESTIONSTOASKBEFORETHEPROJECT STARTS What browsers and devices do you test on? Who’s going to enter the content? Who’s responsible for creating mobile/tablet sized designs? Does the client need training? If so, who’s responsible?
  35. 35. QUESTIONSTOASKWHILEDESIGNING Will [insert layout idea here] work in WordPress/on a responsive site? Can I pass something by you before I send it to the client?
  36. 36. PARTTWO:THEDESIGN PHASE
  37. 37. Q:WHATSOFTWARESHOULDI USE? A:WHATEVERYOU’RECOMFORTABLE WITH…WITHINREASON.
  38. 38. POPULARCHOICES Photoshop Illustrator Sketch Good developers should be able to work in different programs. They’re just tools. Though if I find out your design is in InDesign I might mark up your quote ;)
  39. 39. WHICHEVERAPPYOU CHOOSE... ...USEVECTORSASOFTENASPOSSIBLE!
  40. 40. WHYVECTORS? We need to create Retina/HiDPI graphics It’s 2015 and SVGs are very well supported Design elements are crisp and clean at any size Makes your life and dev’s life easier
  41. 41. IFYOU'REUSINGILLUSTRATOR ORSKETCH... You're already designing with vector assets. High five!
  42. 42. IFYOU'REUSINGPHOTOSHOP... Use shapes Paste in vector graphics from Illustrator as Smart Objects
  43. 43. KEEPYOURDESIGNFILES ORGANIZED
  44. 44. NAME,ORDER,ANDGROUP YOURLAYERS
  45. 45. DELETELAYERSYOU'RENOT USINGANYMORE
  46. 46. USELAYERCOMPS(IFYOU'RE USINGPHOTOSHOP)
  47. 47. LAYERCOMPS A layer comps is a snapshot of the state of your layers a particular point Layer comps toggle different layer order and visibility This is perfect for different states (hover state, active state, nav menu opened, swapping out images in a carousel, etc.)
  48. 48. ACOUPLEOFOTHERTIPS Don't put all your page designs in one big file Always use whole pixels numbers
  49. 49. USEAGRID!
  50. 50. WHYSHOULDIUSEAGRID? Keeps your designs neat, tidy and balanced Devs can't make wrong assumptions about spacing and sizing if everything aligns to a grid Good devs should work with whatever grid you prefer or can offer suggestions if you don’t have one
  51. 51. AFEWGRIDRESOURCES Or make your own! A better Photoshop grid for responsive web design 1200px grid system guideguide.me Gridset
  52. 52. BECONSISTENT
  53. 53. DEVELOPERSAREVERYLITERAL If your font styles, spacing, and sizing of elements is inconsistent from one page to another, we’ll be confused and might make incorrect assumptions.
  54. 54. IFYOURDESIGNSAREN'TCONSISTENT, YOURDEVELOPER’SIMPLEMENTATION PROBABLYWON'TBEGREATEITHER. You and your client will be sad.
  55. 55. SOLUTION:STYLEGUIDES! Do this before you get too far into designing, for your own sake.
  56. 56. STYLEGUIDESSHOULD CONTAIN Typographic styles (paragraphs, unordered lists, ordered lists, headings 1-6, blockquotes) Colour palette States: hover, active, focus Form inputs (minimum: single line text input, multi line text area, submit button) Any other styles repeated throughout your site
  57. 57. USEPARAGRAPHAND CHARACTERSTYLES
  58. 58. THINKINTERMSOFTEMPLATES ANDMODULES,NOTJUST UNIQUEPAGES
  59. 59. THINGSDEVELOPERSLOVE Re-usability Patterns Consistency Further reading: Atomic web design
  60. 60. WORDPRESSSITESAREALL ABOUTREPETITION Page templates Custom post types Variations need to fit within a system
  61. 61. THINKABOUTTHEVARIATIONS INAWORDPRESSSITE,TOO
  62. 62. THESIMPLEST,STANDARDPAGE
  63. 63. THE404PAGE (Almost everyone forgets this!)
  64. 64. FALLBACKSFORMISSINGCONTENT (e.g. what if the client forgets to upload a featured image?)
  65. 65. HOVER/FOCUS/ACTIVESTATES THROUGHOUTTHESITE (Otherwise, your developer will leave it out or make it up.)
  66. 66. OTHERTHINGSSOME DESIGNERSHAVEFORGOTTEN Blog comments Navigation menu dropdown (submenu) Image with caption Search results Form styling
  67. 67. WHATABOUTRESPONSIVE DESIGN?!
  68. 68. RESPONSIVESITES DON’TJUSTHAPPEN.
  69. 69. SOMENEWBIEDESIGNERSAND CLIENTSTHINKTHAT “WORDPRESSTAKESCAREOF MOBILE”.NOOOOOOO.
  70. 70. WHOSHOULDFIGUREOUT THERESPONSIVEWEBSITE? If you leave it to your developer, make sure they’re okay with that and that they’re good at design. Resource: mediaqueri.es
  71. 71. RESPONSIVEDESIGN SHOULDN’TBEAN AFTERTHOUGHT
  72. 72. THINGSTOTHINKABOUT How should the site navigation work? Are buttons and links easily tappable? Should the font sizes and spacing change? Does the mobile browsing experience feel good?
  73. 73. MOBILEFIRST? MOBILELAST?
  74. 74. MYFAVOURITE: MOBILECONCURRENT! Keep the smallest version of the site in mind as you’re designing the largest and vice versa. Switch back and forth.
  75. 75. RESPONSIVESITE=SAME CONTENTATALLSIZES Not hiding 3/4 of the content Please design responsibly!
  76. 76. BROWNIEPOINTS Think about how your website will behave between the largest and smallest sizes.
  77. 77. THINKABOUTPERFORMANCE
  78. 78. MUCHOFTHISISUPTOYOUR DEVELOPER,BUTHERE’SWHAT YOUCANDO
  79. 79. PERFORMANCETWEAKS Limit the number of web fonts Limit the number of huge (non-tiling) images Don’t just hide half the site in the mobile view Teach your client about resizing and optimizing images (Resource: ImageOptim)
  80. 80. PARTTHREE:WHILE DEVELOPMENTIS HAPPENING
  81. 81. PARTFOUR:AFTER DEVELOPMENTIS COMPLETE
  82. 82. LETYOURDEVELOPERKNOWIF ANYTHINGISBROKEN Tell them what OS, browser and device you’re using! This is extremely helpful information for debugging.
  83. 83. TESTTHEADMINSIDEOFTHE WEBSITE Add in content yourself, make sure the workflow makes sense Try variations in content (e.g. different lengths) to see how the site stands up
  84. 84. GETTINGINVOLVEDINUSING THESTAGINGSITEHELPSYOU HELPYOURCLIENTS
  85. 85. NOW,GOHELPYOUR DEVELOPERHELPYOUMAKE AWESOMEWEBSITES!
  86. 86. QUESTIONS?
  87. 87. THANKS! @DARASKOLNICK DARASKOLNICK.COM SLIDES: DARASKOLNICK.GITHUB.IO/WCTO-DESIGNER-DEVELOPER

×