A Designers Guide to Web Development
Here’s a familiar story…
You slaved over a design for weeks. Went through multiple rounds of intense client feedback. Finally reached that compromise of incorporating your client’s “great ideas” while maintaining some sense of artistic integrity. You ship your precious design baby to development, cross your fingers and hope for the best…
Now dev has done their part. Sound the trumpets, drum roll please … uh … this is NOT what I designed. You review your design, you check it twice. Yup, this is definitely not what I designed.
So, what happened? How did I design “house” and end up with “shack”?
Bare with me here, imagine humming a tune to a group of classically trained musicians. They might be able to play you something back, but without sheet music, the song won’t sound the way you’ve envisioned in your head.
What you need to do then as a composer, is start to learn the musician’s language. So instead of saying, “the notes should go Doh, Reh, Me” you can specifically say “the line is C, D, E” and the music will sound the way you dreamed it up (possibly better!).
While I don’t expect any of us designers to become the next Bach of writing code, there are a few steps you can do to bridge the language gap between your design file and the developed product.
Learn some basic “sheet music”
While there are too many codebases to keep track of, the foundation of many of them are HTML5 & CSS. Every designer therefore should know the A, B, C’s of these languages, so you can:
a) Understand what’s possible to develop in the given timeline (i.e. avoid scope-creep)
b) Organize your design file in terms developers can easily comprehend and execute against
To some designers, the above might look like a bunch of gibberish, right? Well, to developers that’s a beautiful symphony.
Conversely — “Circle, Rectangle, Combined shape mask, line, Text: the start of some long thing than ends abrup…” — on the layers tab of your design file is, well, sort of gibberish to developers. They will likely be so engaged with complex the code above, that they’ll simply make their best guess as to what you meant by “Circle, Rectangle, Combined shape…”
To take the guessing game out of the equation then, let’s, as designers, meet developers halfway and learn to speak some of the language they’re familiar with.
Once you have a basic understanding, put those lessons into practice by naming groups, layers, and assets appropriately.
Here are a couple courses on Udemy you can usually find for $10:
Know Your Instruments
While you’re free to use whatever design software you prefer, I suggest Sketch due to their plethora of plugin options.
Specifically, the Craft Plugin that syncs your files directly to Invision, an online prototyping software. This is where the naming structure mentioned above really comes into play.
If your Sketch layers are named appropriately based on what you’ve learned from your HTML & CSS lessons your developers can use the “Inspect” page to solve for a lot of the guesswork.
Pro-tip: you can save your Text styles in Sketch. This will help your developer quickly create a style sheet.
Some other plugins and tools we love
Think about how will your audience hear your work
We can get carried away with big, sexy designs on giant canvases, but often the first thing a developer will do is design a mobile version (not to mention it most users will view the site on mobile). If you haven’t prepared these looks, the developer is going to do that word we don’t like — all together now.. Guess!
Take the time to make sure your design is beautiful and functional on all three common screen sizes: Desktop, Tablet, and Mobile.
The Grid System Library is a great resource for designers to make sure their screens have proper spacing and layout for all devices.
Schedule Band Practice
You should involve your dev team early and often. This is beneficial on many levels. It will bring your teams closer together, they will have the full picture and understand why you made certain design choices, and you will understand what features may be too complex for the MVP or altogether unnecessary!
- Schedule syncs before client meetings
- Create a Slack channel to share thoughts and progress updates throughout the process
Make Gold Records
Now that you have a better understanding of the Developer’s side of the equations, wake up, put your pants on one leg at a time and go make gold records.
Check out some of King Tide’s work on our website and Behance. Comment below with other Desing to Dev handoff tips!
