Tips for Designers: Working with Front-end Developers

Graphic design is a cornerstone of many web projects and is mainly evaluated based on its impact on user experience. Today we’ll take a look at a different aspect of proper design — how designers can help front-end developers implement your design more efficiently, reduce frustration, save time on back-and-forth communication, and improve the final product.

Max Charuk, a front-end developer at Vertalab, has shared some handy tips on how to reach harmonic and efficient collaboration between designer and developer. These tips will be especially useful for designers working remotely.

It’s always challenging to communicate between disciplines. We hope designers will find these friendly tips useful, and won’t be offended at our attempts to facilitate smoother connections.

Take a course in HTML & CSS

Although coding is not a must-have skill for designers, you will definitely benefit from it. “Once you have at least a basic understanding of how front-end is done, it will be much easier for you to find a common language with the developer,” Max explained.

Use a style guide

A style guide helps establish good work relationships right from the start. Even a simple collection of elements for a future web page, such as buttons, inputs, blocks, and so on, helps a lot. Not only will it streamline communication, but it safeguards consistency across the entire project.

Rigorously follow the regularity of the elements

Pay attention to all recurring items, such as padding, headings, etc. They should all have the same style. Even small inconsistencies make it necessary to write extra code.

Think the project through

Designers should mentally walk through every moment of interaction the end user will have with the app. For instance, it’s important to have designed all the states of each button or menu item (hover, active, focused, etc.) right from the start. Front-end developer will ask for it anyway.

Test elements on your own where possible

Will that button look good when its text is 50% longer? Will it look good on mobile devices? Checking it beforehand won’t take you a lot of time, but will save time down the road.

Organize your work properly

Developers really appreciate it when you transfer your work structured into folders and give clear names to layers in Photoshop. Be sure to submit your work in a format a front-end developer can use.“It can be really hard to work with Adobe Illustrator files,” warns Max.

Be in touch during the development process

Predicting everything is hardly possible, and additional questions from front-end developers are all but inevitable. Stay available to help your colleague until the design is coded successfully.

We don’t consider this list to be either exhaustive nor mandatory, but we hope it will help both designers and front-end developers work together more happily and fruitfully!