HELP ME HELP YOUPRACTICAL TIPS FOR DESIGNERS FROM A
WORDPRESS DEVELOPERWITH @DARASKOLNICK
HI, I'M DARA.NICE TO MEET YOU!
I'm @daraskolnick basically everywhere on the Internet.
A LITTLE ABOUT ME.I...
am from Torontoam both a web designer and front end developerrun my own (very) small businessdo lots of WordPress development work in partnershipwith designers who don't codehave been developing WP themes for 10 (!) years
THIS TALK IS FOR...Independent designers who don’t do their owndevelopment (or other designers who work remotely withdevelopers)Designers creating custom themes from scratch (not childthemes)Developers who want to help their designers make theirlives easier
THIS MIGHT NOT BE QUITE ASUSEFUL FOR...
Larger teams where designers and developers work side-by-side every dayDesigner/developer hybrids who always do everythingDesigners who design in the browser
WHY IS THIS IMPORTANT TOTALK ABOUT?
There’s often a lack of communication between designersand developersDesigners and developers are often frustrated with eachotherIt shouldn’t be this way. We’re on the same time! (Team awesome website, that is.)
THINGS (SOME) DESIGNERSTHINK ABOUT (SOME)
DEVELOPERSWhy does the finished website look different from mymockup?Why do they keep saying ‘no’ to things? Are they justgrumpy?
THINGS (SOME) DEVELOPERSTHINK ABOUT (SOME)
DESIGNERSThis is pretty, but have they actually thought about howthis 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 variablecontent.
WITH A LITTLE EDUCATION ONBOTH SIDES, WE CAN FIX THESE
PROBLEMS.
THIS TALK IS ORGANIZED INTOPARTS OF THE PROJECT LIFE
CYCLE1. Before design begins2. While you're designing3. After development is complete
PART ONE: BEFOREDESIGN BEGINS
1. CHOOSE A GOODDEVELOPER
DEVELOPMENT IS NOT A COMMODITY.WE'RE NOT ALL THE SAME!
WORDPRESS IS NOT INHERENTLY “EASY”OR “HARD” FOR CLIENTS TO USE. THE
DEVELOPER MAKES ALL THE DIFFERENCE.
� SITE ADMIN EXPERIENCES
� SITE ADMIN EXPERIENCE
SOLUTION: ASK YOUR POTENTIALDEVELOPER WHAT THEY DO TO MAKEWEBSITES EASY TO UPDATE FOR NON-
TECHNICAL CLIENTSASK TO SEE EXAMPLES!
SOME DEVELOPERS PAY MOREATTENTION TO DETAIL THAN
OTHERSSNOOP AROUND THEIR PORTFOLIO!
RESIZE YOUR BROWSERDO THEIR WEBSITES FALL APART AT ANY POINT?
DO YOU SEE HORIZONTAL SCROLLBARS?
IS THEIR TEXT ACTUALLY TEXT OR IS THERETEXT INSIDE IMAGES?
TEXT IN IMAGES IS BAD FOR PERFORMANCE, ACCESSIBILITY, ANDSEO. ALSO, HARD FOR CLIENT TO UPDATE
CHECK OUT THEIR SPACINGIS THERE ENOUGH PADDING AROUND THEIR SITES?ARE TEXT AND FORM ELEMENTS SPACED NICELY?
LOADING TIMEDO THEIR SITES TAKE FOREVER AND EVER TO LOAD?
NOTE!SOME OF THESE ISSUES MIGHT BE OUT OF
THE DEVELOPER'S CONTROL.BUT A GOOD DEVELOPER WILL OFTEN FIX THESE ISSUES AND THEY
SHOULDN'T BE ALL OVER THEIR PORTFOLIO.
ASK YOURSELF: IS THISDEVELOPER A NICE PERSON?
"SOFT SKILLS" MATTERDO THEY USE A LOT OF JARGON AND TALKAT YOU WITH A SUPERIORITY COMPLEX?
2. WHEN SHOULD YOU BRINGYOUR DEVELOPER ON BOARD?
�BRING THEM ON BOARD BEFORE DESIGN
HAS BEGUN
�DESIGNING WITHOUT A DEVELOPER IN
MIND AND ASSUMING THAT ANYONE CANDO THE JOB IS A RECIPE FOR DISASTER.
���EVEN WORSE: HANDING DESIGNS TO A
CLIENT AND THEN TELLING THEM TO FINDA DEVELOPER.� � � � �
THIS WILL MAKE YOU LOOKBAD TO YOUR CLIENT
THINGS I’VE SEEN IN DESIGNSTHAT WEREN’T PASSED BY A
DEVELOPER FIRST
OH, THE THINGS I'VE SEEN...Fonts that were all non-web fontsCompletely random element placement (positionabsolute all the things!) on a "responsive" site“Mobile designs” for a responsive site that bear very littleresemblance to the full-sized designGraphics that rely on Photoshop blending modesHuge images that would take forever to loadExtremely inconsistent page designs
THIS PUTS YOUR DEVELOPER INAN AWKWARD POSITION
THEY HAVE TO LET BOTH YOU AND YOURCLIENT DOWN.
GOOD COMMUNICATION IS AMUST.
ASK YOUR PROSPECTIVEDEVELOPER LOTS OF
QUESTIONS!
QUESTIONS TO ASK BEFORE THE PROJECTSTARTS
What browsers and devices do you test on?Who’s going to enter the content?Who’s responsible for creating mobile/tablet sizeddesigns?Does the client need training? If so, who’s responsible?
QUESTIONS TO ASK WHILE DESIGNINGWill [insert layout idea here] work in WordPress/on aresponsive site?Can I pass something by you before I send it to the client?
PART TWO: THE DESIGNPHASE
Q: WHAT SOFTWARE SHOULD IUSE?
A: WHATEVER YOU’RE COMFORTABLEWITH… WITHIN REASON.
POPULAR CHOICESPhotoshopIllustratorSketch
Good developers should be able to work in differentprograms. They’re just tools. Though if I find out your design
is in InDesign I might mark up your quote ;)
WHICHEVER APP YOUCHOOSE...
...USE VECTORS AS OFTEN AS POSSIBLE!
WHY VECTORS?We need to create Retina/HiDPI graphicsIt’s 2015 and SVGs are very well supportedDesign elements are crisp and clean at any sizeMakes your life and dev’s life easier
IF YOU'RE USING ILLUSTRATOROR SKETCH...
You're already designing with vector assets. High five!
IF YOU'RE USING PHOTOSHOP...Use shapesPaste in vector graphics from Illustrator as Smart Objects
KEEP YOUR DESIGN FILESORGANIZED
NAME, ORDER, AND GROUPYOUR LAYERS
�
�
DELETE LAYERS YOU'RE NOTUSING ANYMORE
USE LAYER COMPS (IF YOU'REUSING PHOTOSHOP)
LAYER COMPSA layer comps is a snapshot of the state of your layers aparticular pointLayer comps toggle different layer order and visibilityThis is perfect for different states (hover state, active state,nav menu opened, swapping out images in a carousel,etc.)
A COUPLE OF OTHER TIPSDon't put all your page designs in one big fileAlways use whole pixels numbers
USE A GRID!
WHY SHOULD I USE A GRID?Keeps your designs neat, tidy and balancedDevs can't make wrong assumptions about spacing andsizing if everything aligns to a gridGood devs should work with whatever grid you prefer orcan offer suggestions if you don’t have one
A FEW GRID RESOURCES
Or make your own!
A better Photoshop grid for responsive web design1200px grid systemguideguide.meGridset
BE CONSISTENT
DEVELOPERS ARE VERY LITERALIf your font styles, spacing, and sizing of elements is
inconsistent from one page to another, we’ll be confusedand might make incorrect assumptions.
IF YOUR DESIGNS AREN'T CONSISTENT,YOUR DEVELOPER’S IMPLEMENTATIONPROBABLY WON'T BE GREAT EITHER.
You and your client will be sad.
SOLUTION: STYLE GUIDES!Do this before you get too far into designing, for your own
sake.
STYLE GUIDES SHOULDCONTAIN
Typographic styles (paragraphs, unordered lists, orderedlists, headings 1-6, blockquotes)Colour paletteStates: hover, active, focusForm inputs (minimum: single line text input, multi linetext area, submit button)Any other styles repeated throughout your site
USE PARAGRAPH ANDCHARACTER STYLES
THINK IN TERMS OF TEMPLATESAND MODULES, NOT JUST
UNIQUE PAGES
THINGS DEVELOPERS LOVERe-usabilityPatternsConsistency
Further reading: Atomic web design
WORDPRESS SITES ARE ALLABOUT REPETITION
Page templatesCustom post typesVariations need to fit within a system
THINK ABOUT THE VARIATIONSIN A WORDPRESS SITE, TOO
THE SIMPLEST, STANDARD PAGE
THE 404 PAGE(Almost everyone forgets this!)
FALLBACKS FOR MISSING CONTENT(e.g. what if the client forgets to upload a featured image?)
HOVER/FOCUS/ACTIVE STATESTHROUGHOUT THE SITE
(Otherwise, your developer will leave it out or make it up.)
OTHER THINGS SOMEDESIGNERS HAVE FORGOTTEN
Blog commentsNavigation menu dropdown (submenu)Image with captionSearch resultsForm styling
WHAT ABOUT RESPONSIVEDESIGN?!
RESPONSIVE SITESDON’T JUST HAPPEN.
SOME NEWBIE DESIGNERS ANDCLIENTS THINK THAT
“WORDPRESS TAKES CARE OFMOBILE”. NOOOOOOO.
WHO SHOULD FIGURE OUTTHE RESPONSIVE WEBSITE?
If you leave it to your developer, make sure they’re okaywith that and that they’re good at design.
Resource: mediaqueri.es
RESPONSIVE DESIGNSHOULDN’T BE ANAFTERTHOUGHT
THINGS TO THINK ABOUTHow 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?
MOBILE FIRST?MOBILE LAST?
MY FAVOURITE:MOBILE CONCURRENT!
Keep the smallest version of the site in mind as you’redesigning the largest and vice versa. Switch back and forth.
RESPONSIVE SITE = SAMECONTENT AT ALL SIZES
Not hiding 3/4 of the contentPlease design responsibly!
BROWNIE POINTSThink about how your website will behave between the
largest and smallest sizes.
THINK ABOUT PERFORMANCE
MUCH OF THIS IS UP TO YOURDEVELOPER, BUT HERE’S WHAT
YOU CAN DO
PERFORMANCE TWEAKSLimit the number of web fontsLimit the number of huge (non-tiling) imagesDon’t just hide half the site in the mobile viewTeach your client about resizing and optimizing images(Resource: ImageOptim)
PART THREE: WHILEDEVELOPMENT IS
HAPPENING
PART FOUR: AFTERDEVELOPMENT IS
COMPLETE
LET YOUR DEVELOPER KNOW IFANYTHING IS BROKEN
Tell them what OS, browser and device you’re using! This isextremely helpful information for debugging.
TEST THE ADMIN SIDE OF THEWEBSITE
Add in content yourself, make sure the workflow makessenseTry variations in content (e.g. different lengths) to see howthe site stands up
GETTING INVOLVED IN USINGTHE STAGING SITE HELPS YOU
HELP YOUR CLIENTS
NOW, GO HELP YOURDEVELOPER HELP YOU MAKE
AWESOME WEBSITES!
QUESTIONS?
THANKS!@DARASKOLNICK
DARASKOLNICK.COMSLIDES:
DARASKOLNICK.GITHUB.IO/WCTO-DESIGNER-DEVELOPER