8 Tips for UX designer on how to coexist with developers
By: Daniel Danielyan
Tags: UX, UI, Teamwork, Development, Design

8 Tips for UX designer on how to coexist with developers

The developer is your friend, try not to be his enemy

image from Spider-man 3

In this article, I’m going to speak about the relationships between engineers and UX designers. Mostly I will write from the designer’s point of view and give you 8 tips on how to find a common tongue with them, engineers.

1. Be nice

Image from movie Nice Guys

It’s maybe the most important tip. Often in companies, especially in small ones, where UX designers communicate with engineers directly, discussions can take a bad turn. Sometimes developers with little experience say that something is impossible to code. In those cases, never be rude. If you’re 100% positive that the problem has a solution, show examples. Find another platform/website/app where there are similar problems and show them the solutions. Especially if your UX is ‘good’ then most probably the solution was already made by others. Of course, there are some extraordinary cases, but most often, User Experience, as its name suggests, is already used. When you know they are wrong explain nicely, bring arguments, show examples, and speak respectfully. If there is something they should do — ask them, don’t tell. And overall, it’s a project manager’s job to tell, not UX designer’s. Try asking them nicely.

2. Understand their needs

Photo by Tim Gouw on Unsplash

Front-end developer is your friend, yet you can be his/her enemy. Front end developers are closest to you in the project. They implement what you have designed. Guide them through the process. Learn what tools they use. Is it some framework of JavaScript like React JS, or Angular? Or is it just CSS, HTML?. In some startups, engineers use Bootstrap or WordPress. I’m not saying lose all your day to learn everything about it, just enough knowledge to help them by designing components (if they suit your design) that are already in a library. It’s a win-win.

Extra tip: Learn everything you can about Google’s Material UI and Apple’s HID. Not just guidelines, also development logic. Where some components are better to use on the coding level? Personally, I don’t know anything about coding, I just communicate with developers, and they help me a lot. And thanks to that I can help them.

3. Don’t go lazy on things you’ll have to change in the future

Photo by Holger Link on Unsplash

In some cases, after finishing the project, you can notice small mistakes or issues that tomorrow can become a headache for developers. Don’t go lazy. Fix them. Be nice to the job you do. Even if it is a freelance job and you won’t have another cooperation with that project, still fix the issues. That will bring a positive vibe towards you, and people will trust you.

I believe that the best Marketing is the quality of the product and the customer’s satisfaction. If stakeholders (customer) are happy with you (product), the probability of them contacting you again and/or suggesting to other people increases.

4. Be consistent and pixel perfect

Image from Dinosaur Game Launcher

If your design is pixel perfect, especially in apps with complex UX, it makes work easier for everybody. Learn grid systems. Personally, I like the 8 point grid system (as many other designers). Speak with developers about those systems. If they don’t know already.

Staying consistent is not just good UX, it also helps with the development process. Engineers will thank you if your elements are perfectly aligned, chosen styles stay similar, the number of font families is small, etc.

5. Use the right tools

image by https://journal.missiondata.com/ui-designers-toolbox-part-i-comparing-sketch-figma-and-adobe-xd-58470412ab4b

Before going on, I want to apologize to Sketch. I love the Sketch. It’s the Mercedes-Benz of UI design tools, but the thing is about it, that you have to use 3rd party tool like Zeplin for developers to see CSS. I think it is just outdated. Some people prefer Adobe XD, which is a great tool, but the absence of inner shadow really bugs me. I think I’m too subjective here, but I just loooove Figma. For me, it’s the best thing since sliced bread. Developers will thank you for having always updated CSS in one link. There are also many plugins in Figma, that also give HTML, though many developers say it’s not working perfectly. All in one link. Nothing more. Nothing to be updated, saved as file, copied, etc. Just one link. Above all — it is browser-based. Doesn’t matter what platform you use: Mac, Linux, Windows.

Unrelated info: when you leave feedback for the Figma team, they email you back after some time and no robots, real people send the emails. And email subject is “Yes, we do read these!”

I know I’ve got carried away, I just looooove Figma too much.

6. Try designing a Style Guide for each project

image by https://www.pinterest.com/pin/63894888447865893/

Sometimes, in small companies, UX designers don’t create style guides. In some places, they verbally tell developers how each component interacts. There is a too big chance of making mistakes. Design a Style Guide for even the smallest project. Include there as many things as you have time to. Typography, components with all their states: hover, pressed, disabled, and default. If in the UI some component doesn’t have the disabled state, design it anyway; maybe in the future, after some update, it might be needed. Include paddings of text fields. Put icons used in UI. Make the Style Guide as professional as you can.

It is the identity of the app/website. Like a brand book for a brand. It guides you, developers, even stakeholders. It helps you to keep consistency, to keep everything clean, and be professional.

If you work in a bigger and more advanced company, speak with developers and stakeholders about creating a Design System. I know the process is too big, but if you create a design system, it will add professionalism to your product, to a developer, and to you. Design system is a thing worth working on.

7. Speak with developers before starting the design

Photo by John Schnobrich on Unsplash

I suggest before even starting the project or during the mockup-stage speaks with developers. Tell them everything about the flow. Especially for cases when the project manager has little technical knowledge. If they learn about the flow many problems in the future will be avoided.

Front-ends will know the approximate scope of the project. It will help them with the estimation of deadlines, resources, and what to expect.

will know the approximate scope of the project. It will help them with the estimation of deadlines, resources, and what to expect. In complicated apps/websites, for example, eCommerce with complicated admin panel, back-ends should know the flow, to organize better back-end architecture.

8. Admit when you are wrong

Often developers (or any other team member) suggest a better solution than one that UX designer suggested. Many UX designers don’t like to confess that their way was worse, or they think that it can damage their reputation. That’s nonsense. If you admit that you were wrong — you earn respect. And it’s good for both you and the project.

But if the designer pushes his/her ‘wrong’ further, it can someday become a disaster, and he/she will be the responsible one. Above that, if the designer will do such a thing constantly, people will learn that, and nobody would want to work with the designer again. Admitting that you are wrong is a great soft skill that many people ignore.

Thank you very much for reading. I hope you liked the article. If you have any questions feel free to write in the comments or contact me directly. I’m always available on Facebook, Linked, or Twitter.

Wish everything the best.