Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Help Me Help You: Practical Tips for Designers from A WordPress Developer
Similar to Help Me Help You: Practical Tips for Designers from A WordPress Developer (20)
Recently uploaded
Recently uploaded (20)
Help Me Help You: Practical Tips for Designers from A WordPress Developer
- 2. HI,I'MDARA. NICETOMEETYOU! I'm @daraskolnick basically everywhere on the Internet.
- 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. 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. 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. 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. 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. 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.
- 11. THISTALKISORGANIZEDINTO PARTSOFTHEPROJECTLIFE CYCLE 1. Before design begins 2. While you're designing 3. After development is complete
- 45. 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
- 49. 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?
- 50. 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?
- 53. 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 ;)
- 55. 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
- 56. IFYOU'REUSINGILLUSTRATOR ORSKETCH... You're already designing with vector assets. High five!
- 57. IFYOU'REUSINGPHOTOSHOP... Use shapes Paste in vector graphics from Illustrator as Smart Objects
- 64. 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.)
- 66. ACOUPLEOFOTHERTIPS Don't put all your page designs in one big file Always use whole pixels numbers
- 67. USEAGRID!
- 69. 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
- 70. AFEWGRIDRESOURCES Or make your own! A better Photoshop grid for responsive web design 1200px grid system guideguide.me Gridset
- 71. BECONSISTENT
- 72. 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.
- 73. IFYOURDESIGNSAREN'TCONSISTENT, YOURDEVELOPER’SIMPLEMENTATION PROBABLYWON'TBEGREATEITHER. You and your client will be sad.
- 74. SOLUTION:STYLEGUIDES! Do this before you get too far into designing, for your own sake.
- 76. 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
- 82. WORDPRESSSITESAREALL ABOUTREPETITION Page templates Custom post types Variations need to fit within a system
- 85. THE404PAGE (Almost everyone forgets this!)
- 86. FALLBACKSFORMISSINGCONTENT (e.g. what if the client forgets to upload a featured image?)
- 87. HOVER/FOCUS/ACTIVESTATES THROUGHOUTTHESITE (Otherwise, your developer will leave it out or make it up.)
- 88. OTHERTHINGSSOME DESIGNERSHAVEFORGOTTEN Blog comments Navigation menu dropdown (submenu) Image with caption Search results Form styling
- 92. 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
- 94. 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?
- 96. MYFAVOURITE: MOBILECONCURRENT! Keep the smallest version of the site in mind as you’re designing the largest and vice versa. Switch back and forth.
- 97. RESPONSIVESITE=SAME CONTENTATALLSIZES Not hiding 3/4 of the content Please design responsibly!
- 98. BROWNIEPOINTS Think about how your website will behave between the largest and smallest sizes.
- 101. 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)
- 105. LETYOURDEVELOPERKNOWIF ANYTHINGISBROKEN Tell them what OS, browser and device you’re using! This is extremely helpful information for debugging.
- 106. 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
- 109. QUESTIONS?