Table of Contents
Most creative projects today ain’t a one person’s project. Truly innovative can only be a result of collaboration, because it requires a skill set that a single mind won’t possess. At Chop-Chop, we are dealing with web development as a part of larger projects and decided to write an article about web design for coding. Things are mostly described and designed beforehand – it’s our job to make it all work and shine! But, the deadline is near and the tension rises. How to make the development stage a smooth and rewarding experience?
When a web developer is dealing with thousands of PSDs, PNGs, JPGs, SKETCHs and many other kinds of web design files, what matters most is to get them rightly prepared.
The Designer and The Developer: Some Lust, No Trust?
To have each web development project successfully delivered on time, designers and programmers have to work together. Effective cooperation comes with empathy, smooth communication, and clear instructions. What helps on the way, is a set of certain actions the designer can perform on the files.
As I am working for a web agency that has been dealing with advanced web development for years, I have listed basic Web Design Principles that should be taken into account before the files are sent to programmers for coding. I hope they can summarize the importance of delivery process optimization. Which, in the end, will help everyone work more effectively on the web content.
Web Design for Coding: 7 steps checklist
1. Ordered and labeled layers
Imagine a pile of randomly scattered Layer_16_Copy_of_Layer_16_Copy_5’s, which the coders have to unravel. Have mercy on them, for project’s sake! Group your design layers, put them in order and label them clearly so that the programming specialist know where to look for every single element.
Tip: many designers and design teams these days use applications like InVision, Figma or Zeplinto collaborate on their work when making UI projects. These tools let you organize files, wireframes, and documentation and provide handoff features that simplify the process. If you haven’t started yet, consider starting using one of them, because they can save you a lot of time.
2. Separated design files
Do not just throw all pages to a single file. Heavy PSDs are a pain to work with on most machines. Loading a massive file just to get one icon? It’s a time-killing diversion, really.
To speed up a development process, it’s better to create a separate design for each subpage and for their mobile versions. Then label them clearly and try to structure file groups in subfolders (sorted by page or by breakpoint).
Tip: provide the developers with Layer Comps or even with flat JPG/PNG files for each subpage. They’re perfect as a quick point of reference for your web design for coding.
3. Element’s Behaviour
This is pretty straightforward: if an element is supposed to have a hover, focus or any other action to perform when the user interacts with it, design the behaviour step by step. It shows the developer exactly how should it be presented on the page.
Tip: When designing a page or an app with a multilevel menu, don’t forget to describe all its functions. Show the menu when it is expanded, collapsed, clicked, hovered. Present how it pops-in, what happens with the submenus, etc.
4. Style Guide
Whether you keep it in the design file itself or in a separate brief, a complete style guide for the web design for coding makes the coding process much easier. The developers don’t need to dig in the layers to find things like hover effects! With a style guide as an instruction, they can quickly create, let’s say – a typography cheatsheet. On top of this, creating the guide makes a good exercise for you, keeping your creative discipline fit.
Tip: Having all of the designed user interface elements within one document will help to reveal all inconsistencies and missing details. Use it as a checklist and your work’s summary.
5. Pixel-perfect design
Some developers will ask you if they can average the inconsistent pixel values in your web design for coding. Should they ever do that? Don’t take chances and don’t rely on the coders to interpret the design for you! Just before the hand-off, go through your files once again and make sure that font sizes, line heights, sizes and spacings of all elements are consistent.
Tip: if you use a grid, like the CSS Grid or Bootstrap, make sure your design meets the grid’s requirements. Luckily there are more and more designers using modules and symbols for web projects – they allow to keep changes coherent on each element or page, reducing the work and chances for inequalities.
6. Merge layers and layer groups to flat images
Blend modes can be somewhat unpleasant for web developers, so review your PSDs and other formats and make sure that the images used in layers are flattened. That will keep the file simpler and reduce its size.
Tip: Keeping in mind that you’re making web design for coding, think of what parts of the image should be isolated to make the website work better (e.g. background and title, patterns and icons). Save these parts as separate layers.
7. Fonts and extracted icons
To save the ever-precious time, be certain that the web developers have everything they need to start coding right away. Apart from the PSD files, have all the necessary assets ready in your file stack. Use folders to group your custom fonts, (if their use is required by your design), extracted icons (this is a true life-saver!), SVG etc.
Tip: If you want your design to look crispy on Retina screens, add the Retina version of all icons (it’s two times bigger than the regular one), or just export the icons as SVGs.
-> Also, check Best Web Design Of 2020
Fast web development matters
Now, your shiny web design for coding is ready! To see it turning into a fantastic, functional website, all it needs now is some coding. Whether you are going to do this yourself, hire a developer or a web development agency, make sure that the transition is as smooth as possible.
There are many simple projects out there that take much more time than they should be coded. Often because of poorly structured design files, making web developers struggle with. And, instead of rapid coding, you’re getting an exchange of back-and-forth emails about missing assets or unclear design ideas. I hope you agree that we should be all saved from that.
One Comment
Rachel Kieran
Biggest ease and art is consistency and management of data. If you compile things and end up mixing all the elements, you lose because it gets pretty hard to comprehend all data after things get mixed up. One should always keep focus toward keeping things simple and fast, I believe it is the best way to achieve real efficiencies to scale.