Design and Implementation Symbiotically

Published Jun 16, 2020, 11:30 AM
Written by Amir Sarkis

We approach design and implementation symbiotically and like all great relationships communication is key.

Challenge

In a perfect world user interface and experience designers would have full creative freedom to craft whatever they desire and front end developers would implement these designs without a hitch. The result would be a polished UI and a seamless UX. 

Unfortunately, this is the real world and it very rarely works out this way. The result is usually jarring user experiences and inconsistent user interfaces as well as  a slew of headaches for both designers and developers.

Circle smudge large

User Expectations

As end users have become more discerning the line between an acceptable user experience and unusable mess has grown increasingly thin. “Almost perfect” is now not quite good enough for the average end user. With the golden age of smartphones we have been spoilt with increasingly intuitive user interfaces and perfectly curated user experiences. Gone are the days where a poor experience can be overlooked.

Arrow L

Solution

So how do we at Symbiote respond to this challenge? How do we ensure that we are producing consistently high quality user experiences? And how do we avoid the common pain points that can occur between design and development?

Our approach has been relatively simple. Get our designers to think like developers and get our developers to think like designers. Easier said than done you may say. 

Wondering how we do it? Well, like in all great relationships communication is key.

Outcome

So what does this mean for you? It means that when we work together you can be assured that our designers understand the technical aspects of our products and our developers are aware of the subtleties that our designers have put in place in their designs. It also means that we are able to more efficiently produce higher quality user experiences for you. Our transparency between design and development also allows us to streamline continual development projects where UIs and UX are continually tweaked.

Process

communication

Communication

Our approach has been to allow the technical frameworks used by our developers to influence our designers. As well as having our designers explain their ideas to our developers. We encourage as much communication as possible between our design and development teams.

pixelperfect

Pixel perfect design

Another aspect of these templates has been pixel perfect design. This means that our developers are not left second guessing the sizes of elements such as buttons and text. Instead our developers can rely on the pixel sizes specified by our designers, knowing that because they have been designed within the context of their front end frameworks that all elements will fit without having to re-jig anything. We even take into account modern hi-DPI displays to ensure that our products look stunning on every device.

codesigned

Co-designed templates

A practical way of doing this has been to get our designers to work with our developers to create re-usable design templates which take into account how user interfaces are built by the developers. What this essentially means is that our designers can now design within the practical limitations of front end frameworks like Bootstrap. Our designers focus on designing well thought out user experiences that are easily built by our developers. Aspects such as grid sizes, mobile breakpoints, paddings and margins and text sizing and justification are all taken into account by our designers.

Hi, I'm Amir!

"I love being a front end developer at Symbiote. I get so many opportunities to flex my creative muscles and to provide solutions that benefit our clients.

Working as a member of such a hard working team that really cares about providing innovative and robust results is a truly challenging and rewarding experience."

Amir Sarkis - Front End Developer - Lover of arcade machines

Team member

A motif of six squares arranged in a grid pattern with three squares on top and three squares on the bottom