Designers vs. Developers: 5 Tips to Give Peace a Chance
Developers vs. Designers: Fight!
Just kidding! We actually want you guys to give peace a chance. You can do it; we believe in you! We know that the interaction between designers and developers isn’t always the smoothest, but we want to propose a set of processes and tools that’ll make your lives easier.
Without further ado, here are 5 tips to make designers and developers a group of happy campers:
1. Bridge the Gap
Development teams nowadays are mostly agile. However, there is generally a detachment between development and design teams…which is not very agile-like.
You really need to avoid the static, one-way deliverables, which lack the iterations that will eventually give the end result a much higher quality. So, get in there! Join the discussion, get into the scrums, receive and provide feedback, try to speak their language and teach them some of yours.
Agile is all about the back-and-forth, with smaller and constant deliverables. And by now you should know that OutSystems Platform enables much faster iteration, speeding up development and keeping the creative juices flowing without hiccups.
2. Keep it Real
This process starts with an inter-team collaboration. In a nutshell, UX clarifies the business and specific user needs, identifies the user flows and develops wireframes accordingly.
The UI team creates a high-fidelity representation on these wireframes and then development works its magic on all of it.
Therefore, UX and UI need to walk hand-in-hand. At OutSystems we do work very closely; we sit together; we have design reviews where we trade ideas — and sometimes even blows! You grow with constructive feedback. Not a single day goes by that we’re not speaking constantly, feeding and bouncing ideas off each other.
Developers do their wizardry, but we try to make their lives as easy as possible by doing all this prep work beforehand.
My colleague and UX Master Ricardo Luiz’s webinar — video and slideshare — is great in clarifying our process; you should check these out.
3. Pick your Battles
This one rings particularly true when you’re designing for B2E (business to enterprise for those of you who are new) instead of B2C — which is a whole different ball game, in terms of design. In B2C, you can go crazier, designing every detail, because you’re trying to woo users with your application. Every screen matters.
With B2E, you need to focus on the main use cases, so you need to get ready to win some, and lose some. You should focus on the fights you really need to win, as those will define the rest of the project. Don’t bicker over things that are not so important, focus on the critical stuff.
Imagine this iceberg is your project.
You’re designing for the tip of the iceberg — the main use cases. But you can do it so it positively affects the part of the iceberg that’s under the water.
Does this seem too much like common sense? (That’s because it is.)
If you set foundations, in the form of a style guide for instance, that developers can work on when they’re usually left alone, their love for you will grow accordingly.
4. Think of Design as a Whole
”We’re not designing pages, we’re designing systems of components.” — Stephen Hay.
What does Stephen mean by this?
You’re not just designing standalone pages to beautify portfolios.
You’re designing components that belong to an overall design system. They have to speak the same design language and fit well together.
They should be modular, reusable and scalable.
You already have frameworks that help you attain this.
They accelerate the design and development processes and ensure consistency while using a shared vocabulary.
Silk UI is the OutSystems framework of choice for design. It started out as a component that you install on the Platform, but it evolved and became so good that it’s now set to become an integral part of it.
These are the advantages of using Silk:
- Perfect fit with OutSystems Platform.
- Good development experience.
- Codeless UI framework.
My colleague, Samuel Jesus, delivered a webinar on this subject, covering everything you need to know about Silk UI, all the way from the basics to its advanced use.
5. Hand Over Something Usable
One of the complaints we keep registering is that translating a designer’s vision into something developers can work with is usually a chore. The toolsets they use are very different from one another and aren’t usually integrated well.
It’s a game of give-and-take, but you don’t have to limit yourselves or compromise too much of your vision.
To ease the transition and provide guidance, we use InVision to map the user flow. With InVision you can also establish a simple two-way communication with developers and customers — you can leave or reply comments on any given element that is on screen.
What’s the magic step that turns a design into something developers can actually use?
This is what apps like Avocode, Zeplin or Adobe Assets do. You feed them a design and they “translate” that design into something developers can use.
You can pick every single style that is present on screen and get the corresponding CSS. Which is just absolutely amazing!
These very simple tips can have a great outcome and impact on your work.
Transforming that design vision into something that is consistent and reusable by developers in a project is made that much easier by following this very simple set of guidelines.
João Guerra | UI Expert at OutSystems
Last May, OutSystems announced a Revolution. Right before we kicked off NextStep 2016 in Lisbon, where that presentation took place, we had an event called Developers Morning at the OutSystems offices.
During that event, we had a couple of AMA (Ask Me Anything) sessions, where developers asked many questions about Silk UI, our front-end framework for creating beautiful designs with the least possible effort, and how they could enable designers to use it to its full potential.
We created a webinar specifically with that mind. You can check the slides and view the recorded video session.
