Even when people are working on a common task, it is not always possible to properly organize their work. Today we are going to talk about the challenges and features in the designer's and a front-end developer's work over the same layout. We spoke with our team members and here's what we came up with - simple but working advice on how to understand each other better.
The designer is the person who always thinks about the end user. A good designer thinks about how to simplify life and solve all the life problems of your client. Usually it’s the person responsible for UX interface; sometimes he’s skilful in UI as well.
That’s the perfect case for the company as it may mean he has all chances to deliver a customer-friendly website or app: easy to use and demonstrating the right information to final client. In some companies UX designer may have one more team member - UI designer. But usually the one who develops the wireframe and logic of a web product is equally responsible for visual style and design.
12 times creativity plays face reality
Front-end’s screwing up the final idea of interaction flow described by Designer .
Front-end is too lazy to stick to any tech requirements like pixels from design.
Too many complaints with no grounds.
Zero communication skills and stubborn as hell when it comes to changing anything for the design’s sake.
Unable or too lazy to search for the solution on his own.
Photoshop-lamer. Nothing to add.
Front-end’s worships his framework and is ready to amputate and squeeze design/flow within it with no regrets.
Front-end doesn’t respect the details which are essential for impressing the customer.
Front-end simplifies it all: no gradient buttons, animation is excessive.
Front-end’s chaotically moving elements during page making.
Front-end fanatically follows his coding rules.
Front-end’s too scared to affect the performance of the product with no grounds whatsoever.
Front-end developer’s side
His role is to transcribe that entire fire working staff that the designer has produced into the real software or app. He’s the one to convert the violent fantasy and interaction flow of the Designer into decent codes. He cares of visual presentation and user experience as well. Yet his paramount focus is the code itself. He’s the fanatic thinking in colors, flexboxes, background images, etc.
The 12 main problems that arise when handing over the layouts
- Designer never cares about how his design will be implemented;
- Designer gives no detailed specifications about elements of the design;
- Too creative design ruins the applicability of the product itself;
- Designer does not take into account “error” or “empty” states;
- Designer’s a disaster with layers: never deletes irrelevant ones & never places them in folders
- Designer might be unaware of the grid and guiding;
- Designer doesn’t assign proper names neither to layers nor to files;
- If the element may possess several conditions, all of them must be outlined.
- Designer sends the wireframe full of effects made by means of several overlays without any notes for explanation
- Designer neither accompanies PSD file with any additional information nor the originals of the images used in the wireframe.
- Designer doesn’t send any non-standard fonts used in the design sketch.
- The designer rarely cares about future performance of the product, only about its layouts
Piece of advice on how to organize teamwork
Before your project delays all the deadlines for submitting the visual part, try applying some of the tips from this list
1. To keep designer and front-end developer in check you need a Project Manager from your side. Always go with the one who can clearly handle the two independent souls and save the balance
2. Divide the whole process in stages and make them discuss the project at each stage ad nauseam:
Designer creates a wireframe;
The team discusses it all and approves;
the Product Owner applauses;
the wireframe is shown to the Front-end and together with the Designer they discuss its animation;
then the Designer makes it vivid and shows again to the Front-end;
the Product-Owner takes a second look and approves;
the Front-end checks whether it’s Ok and approves;
3. Give out two above lists “Why I hate front-end (designer)” to each and make them memorize by heart.
4. The Designer must enumerate what is most important in this design for him, what elements are essential for influencing the customer and must be saved at any price. Front-end would better listen to him as it’s not just to exasperate him. Although it can be a hidden motif too. He must understand the Designer doesn’t make it out of the blue. It’s based on deep psychological analysis and all his special-effects aim at striking the customer at the very heart, making him plunge into design and thus love the product itself.
5. Front-end can outline all main points he’s expecting to be present in the Designer’s wireframe. The best way is to present a specification with all the technical details he needs like:
saved originals of images just in case;
all layers, overlays, fonts and any multi-conditional elements properly described;
hopefully no over-excessive animation. If it’s beyond the Designer’s control it needs to be dissected into tiniest details to make sure they’re on the same page;
2-3 alternatives of design that could be realized instead;
Grids, guides, other technical stuff;
Key goal is to make the Designer present the most detailed wireframe he can imagine with all specifications possible to the Front-end.
Next stage – Front-end steps in, evaluates all the titanic efforts of the Designer and cries out of happiness. Then he notices 30 more nuances and corrects them. The Designer sighs and starts meditating to take it steady. Together they start shaping the project they will be recalling for long winter evenings.
That’s how our team saves your web project. You’ll never think it’s done with a mouse-click if you devote yourself at each stage. Hard work must be evaluated accordingly that’s why the Product Owner must actively participate in it. Thus he will see that all the costs for creation of the design of each element and then its implementation in codes are justified.
We have such experts at hand and they can do their best to save your deadline project. They unite into one super-power, a dream-team nobody can defy. If you have any questions or concerns, please reach out to us at firstname.lastname@example.org