I’ve always heard there’s a bridge between and .

Something like these scenarios: [designer’s frustation] when the designer see the implementation of the interface (which one the developer did) get disappointed ‘cause it never looks like what he/her did.

credits for meme generator

Or the other point of view: [dev’s frustation] developers complaining that they never know (or can’t find easily) information about spacing, colors, grid, which version is the right one (final-version-8.psd) or how all of these details are so boring.


So I decided write some tips that maybe can help y’all.

I started my career in development but nowadays I’m trying out UI Design and these tips are based on my experience on both sides, so don’t forget:

Teachings from Yoda

Simple style guide

🎨 Designers: If devs in your project complain about things like: they never know how much padding need to put between cards, a simple style guide can solve this. It don’t need to be the best guide ever, remember that it’s just to ensure interfaces consistent and help them.

  • Typography: font-family, font-size, color, what use in some situations: title, subtitle, paragrapher, small info, etc. And it would be nice if you talk about visual writing: capitalize or uppercase? bold or italic?
  • Colors: primary, secondary, accent, danger, success, warning, info, white, black and the hex of them.
  • Basic componentes: button, checkbox, radio, select, cards, etc.
  • Buttons again: principal action, secondary action, icon only, links and some states of them such as: hover, active, focus, etc.
  • Grid and spacing: I think one example can be enough (a general template showing margins, paddings and max-width of the content).

Of course there are several others components that would be nice be documented. To figure out the most important components you can:

  • Print the main screens
  • Cut out all components
  • Take off repeated ones
  • Document the survivors

If you’re following a specific guideline (Material Design Typography for example) you can refer the link of it in the doc too.

Adobe XD has a feature called Design Spec where you can inspect design styles. It can be really useful:

Adobe Blog

Ps.: Sketch and Figma has too.

I’ll let two examples of Design System I like most (you don’t need to do something huge like these, it’s just for you get ideas):

And if you don’t have time to document a style guide, or don’t use any tools that offer a “spec” feature, you can print some screens and write above them some properties of the components and put in a visible place for the devs.

Ask for help

💻Developers: If you can’t find the button that you need or if you don’t know wich button use in some situation, ask the designer. Ask how many times you need.

They can be user-centered

🎨 Designers: Some people brace the ideia that all devs just want to think in code, but don’t. Some of them like to think in the users, too.

Give some space to they know the users and to participate in the product growth. You’ll surprise how they can contribute on user experience.

I don’t know about you, but I really get excited when a dev want to help and give suggestion on the interface. They can have great ideas.

Give ideas

💻 Developers: If you think that designers always suggest crazy interfaces that you can’t to do, or it would affect the product performance, or you just can’t to do it, don’t be afraid to give your ideas.

If the designer did an insane Carousel, suggest a simple one, show examples of success products using it, discuss about what the product will suffer using the other one. Sometimes, the designer just don’t know about the “APIs response time”.

Talk about plugins, libs and other stuffs that you prefer to use, that you think will be better for the product. If you prefer web fonts in files intead of load from Google Fonts, say it.

Pattern Library

🎨 Designers: Provide basic files to devs such as: fonts, icons, illustration and images. If you’re using online services like Google Fonts, Freepik or Icon Finder, help them to find the right style of icon, or to import the right font weights, or the right sizes of images.

If you do layout

💻 Developers: If you do layouts (html & css), involve designers to think about name of colors (if you use color variables), structure of pages, name of components (to pattern simple things like: navbar vs. toolbar vs. taskbar). The workflow will be better if you guys speak the same language.

If you do layout

🎨 Designers: If you do layouts (html & css), involve developers to think about project structure and the best way to do layouts. Remember they’ll use this later to do the final implementation.

  • Is it better if I do each component separate in different files?
  • Is it better if I use fake content?
  • How can I make it easier for you?

If you understanding a little more about code, take a look at database structure, API responses, how components will be implemented on Vue.js/React/Angular and information that you can predict and anticipate in the layout.

Designer’s job

💻 Developers: Just ‘cause you guys do the logical work don’t mean that designers do the easy part. Most of designers need to think about: users, business, tendencies, solve all problems in a “clean way”, testing, measure, try to innovate (but not to do something really different what users already know) and dealing with the customer.


🎨 Designers: Think about different experiences such as: error pages, empty states, onboarding welcome. You’re going to forget some and the devs will need that one.

Wrap up

Designers and Developers: To resume: work together, be humble [on everything in your life], respect all kind of jobs and drink water.

I’ll be glad if I help someone and even more if I get some feedback (good or not). Tchau 🤗

Designers and developers: go far together 🚀 was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source link https://blog.prototypr.io/designers-and-developers-go-far-together-13104b7a4986?source=rss—-eb297ea1161a—4


Please enter your comment!
Please enter your name here