Published on | Prototyping: From UX to Front End — Medium Ruchi Goel

Good design is about process, not product. — Jared Sinclair, Designer and Developer at Bloglovin

But what if the process is at fault? How can it lead to a great User experience? How can the outcome be a user delight?

Considering design and development as two different phases of product cycle, is where the problem lies. If designers and developers are in sync right from the beginning till shipment, then everything gets simpler and the process becomes transparent. Why only designers and developers, in fact the whole team should be on the same page from start to end.

As Aaron Levie (CEO at Box) mentions “Does it better” will always beat “Did it first”. It clearly advocates the fact that ‘Ease of use’ for users is the ultimate goal.

Thus discussing the facts/ ideas and collecting feedback at every stage is crucial. Although this structured and transparent process always reduces rework and wasted efforts/resources. But when we are starting with it, it may appear as a longer and complicated path but trust me, it’s actually not.

Now the next few questions that surround our mind include — What’s the right process to do it? How should designers communicate design to developers? How to make the process more effective?

Before answering this I would like to mention the pain points which are not addressed when designers and developers work as segregated entities.

Design is about senses and dimensions which designers understand the best. Developers have a completely different perspective to see things as compared to designers. But for creating a good user experience it’s necessary that the views of both parties should be aligned.
Usually we consider it enough if only designers understand the design intent as they are designing the product. But we forget it’s the developers who bring design to life. So it’s equally important for the developers too to understand the design intent.
Design is an iterative and evolving process. It’s not a static entity which can be perfected once and for all. There is always room to improve and refine.
Design is about elements. Each element has its own purpose.And each team member should be aware of this purpose in order to do justice with the design.
Due to lack of understanding of each other’s domain; it leads to unnecessary back and forth loops. This results in lot of wasted bandwidth and stretches the QA process to much longer than it should actually be.

How to resolve this?

Sharing design with developers is not limited to sharing specs, assets, mockups, interactions etc, it also includes understanding the design intent and behaviour for every segment of the application.Clarity of design is integral to each and every phase of the design cycle, be it ideation, wireframing, mockup or prototyping. Thus designers and developers should work as a team to find an optimum solution.

To create best user experiences designers and developers should be open to ideas and cross-collaboration.They should let themselves educate each other. Designers should try to evaluate the design in terms of coding efforts and developers should try to understand the basic design ideology. Cross functional knowledge and dynamic approach really helps.

‘Never stop learning’ is the key essence.

“I believe that tightly-knit, small, cross-functional teams have a much better chance of delivering value and delight to users.”- Matej Latin

Some good practices that put you a step closer include :

User Testing and Design Validation

While designing for any web project, design job does not end with finalizing the design. Until the design is shipped the team owns it and should strive for creating the best user experience. For improving user experience, user testing and design validation play an important role. You need to be sure about the usability of the design. Tools that can help you with this include — zipBoard, notable, usabilla etc.

“We invite our developers to sit in on user testing and hear user feedback and if they can’t make it to the actual test they have access to all the videos to watch when they have the time. We also send them clips of important feedback as well so that their time isn’t too consumed by unhelpful feedback”.- Ben Peck

Say no to assumptions and talk about processes

Designers and developers have their own assumptions about the product. To leave no room for any discrepancies they should start communicating as early as possible and nail the core of the problem right from the beginning. Also, if developers know the whole ideology behind the design; then while working in collaboration with designers, they can come up with a better solution. That does not compromise either the design efforts and/or the dev efforts. Designers create design but developer’s inputs while designing can result in a robust design which saves crucial time when creating the end product.Course correction at the initial stage helps mitigate later issues which require more time and effort.

Keep design consistent and progressive

Web development is not a one time thing. It’s never done. It keeps growing and evolving everyday. So final design should consider everything, be it different screen sizes, browsers, network speed, OS, geographical locations(lingo options), sets of prospective users etc.

Also, both designers and developers need to understand that they cannot control every pixel. There always exist some dynamic data and the application should be optimized for that. If few pixels of change break the design then it’s not a good design.Good design is not the good interface only, the code behind should also be clean and modular. Good code maintenance is a great boon in the long run.

Don’t push yourself for perfection rather stay committed to simplicity, reliability and scalability.

Design keeping development in mind

If design decisions aim at making the code modular, reusable and consistent then the design ought to have a clean and simple UI. Basic knowledge of HTML and CSS on the designers end can be really advantageous.Some standard practices designers should use include-

Reuse same components and views wherever possible.
Maintain consistent color palette, icons etc. or even better if you can build a design system right from beginning.
Use grids and have breakpoints keeping in mind the design responsiveness.
Design in 1x, so that much time is not wasted in computing and knowing margins, padding etc.

Developers should try to understand design intent and motivations

It’s not the designers only who need to make efforts to make the process effective. Developers too need to step out of their comfort zone. Few things developers can do in this direction are-

Read about latest design trends and if possible try to attend design conferences to understand how design impacts customers.
Have some basic knowledge about graphic design, so as participate actively in design discussions.
Get involved while brainstorming for design so that you can straightaway tell what can be developed and what can’t. Thus reducing wasted design efforts.
Try and evaluate the created HTML according to the customer needs.

Design handoff

Design handoff does not completely define sharing design with developers but is an integral part of it. Now when the design is finalized at designers end, every minute detail about each state/element of design needs to be transferred to the developers. Keeping in mind the iterative nature of design, sharing this huge amount of information for each iteration can be a tedious job. Designers find it difficult to compile all the info and developers fail to maintain it well. A better solution would be to use a dedicated tool for this purpose like Zeplin, Avocode, etc.

Conclusion

Having said that all, I’m not at all advocating that development takes priority over design. I just want to emphasize that, to create great user experiences design and development need to go hand in hand, not as isolated processes. As good design attracts users, good code at the backend hooks users to the application. Thus none can sustain without the other. Thus you need to work as a team and collaborate on the design. Don’t just share the assets and measurements pixel by pixel but share the design completely i.e. every aspect of design, right from the possible ideas and approaches to the final prototypes.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

How to collaborate on design with developers? was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to collaborate on design with developers?

Cool stuff, every week

More Articles