Why digital design without front-end experience is mediocre?

What do you know about modern front-end developers? The days of simply making up the layouts are gone. Nowadays, front-end developers should think over the product logic to be sure that users can interact with a website or any application in the most comfortable way. Therefore, knowledge of engineering, computer science, and UX design is essential. If a literate engineer with such knowledge cooperates with a designer, the final product becomes almost flawless.

This is confirmed by our experience. In Artkai design includes everything from research to frontend logic. Such an approach gives obvious benefits to the business:

• Time to market shrinks without any bad consequences for the product quality.
• Fewer edits.
• Convenient and pleasant working format for clients.
• The ability to make money faster.
• But a lot of companies separate design from the front-end. It gives rise to some problems, which can be avoided.    

Problems, which are provoked by the separate realization of the design and front-end

Design and front-end implementation can be assigned to different teams. These teams have various internal processes, standards, and approaches to project realization. It provokes difficulties. An amazing design is spoiled by coders, who perceive it as difficult and look for alternatives in its realization. Sometimes coders look for design alternatives to spend less time implementing code. As a result, time on project transition between UX phases and front is wasted and the end result that users will receive is qualitatively different from what UX designers have conceived who tried to focus on the user

Also, when front-end developers and designers work independently in different teams, it leads to additional difficulties. For example, the complicated navigation, the lack of emphasis on important elements of the site or application, incorrect work of the motion UI design, lots of revisions, and slow project pace.  

When designers and front-end engineers are from the same team, united by a joint approach and communication process, it gives incredible advantages. In such a case they have a superficial knowledge of each other’s job, can make quick edits, and use common tools. It can be Figma, Framer, Sketch, etc.     

Is it a good idea to sit between two chairs?

A designer should know the basics of making layouts to understand what could be done and what couldn’t. But any attempts to become a professional in both areas, as a rule, are unfortunate because it’s too complicated to receive a massive volume of knowledge. 

Anyway, competent product design engineers need to know about basic mistakes and try to avoid them:

1. Uncoordinated layout. It’s a good idea to use a grid, remember about golden ratio rules, and write explanatory notes for the front-end developer. 

2. Inconvenient navigation. The most important items must be located at the beginning and at the end of the list. Horizontal navigation should be located at the top (sometimes at the bottom). The best choice for a few items is a pull-down menu.

3. Inconsistency of the design for different pages. It concerns colors, vertical and horizontal distances, the size of the headers, the navigation position, and link formatting. 

4. No relevant names for lays and their groups. 

5. The lack of knowledge in atomic design development and BEM methodology.

Typical front-ender errors

Frankly speaking, the situation in the front-end resonates with the situation in design. Front-ender should know the basics of the design for efficient work. For example, Photoshop’s functionality, problem points in UI design, and motion design can add some actions to the page. First of all, the front-ender must understand the use case, which is possible due to communication with the product manager and designer. It gives a unique possibility – the front-ender realizes the purpose of building each element and can make corrections under the present circumstances. 

Among typical front-ender errors you can find:

1. Half-baked responsive web design.

In the first three months of 2020, almost 52% of web traffic is connected to the usage of mobile devices (source: statista.com). Therefore, responsive web design is quite important and should be convenient for users. There is even such a technique, which is called “Mobile-first” and implies the mobile product design building firstly. Considering all the information, which is written above, the front-ender needs to pay enough attention to web design. 

2. Problems related to cross-browser compatibility.

Support in different browsers can become a veritable challenge. If the front-ender forgets about cross-browser compatibility during making layouts, lots of users just leave the website. It affects the user interface and search results for key queries badly, meanwhile, pages look broken.          

3. The complicated design process, and the lack of usability.

One page can consist of different colors, fonts, flash-animations, etc. Therefore, users have problems with navigation, and often they just close such pages. Front-enders should understand design peculiarities and not overload pages to preserve usability.   

4. The compatibility of the text, images, and indents is broken. 

Any mistakes connected to the broken compatibility of the text, images, and indents provoke bad readability of the page. This leads to the violation of user expectations. That’s why the front-ender should know basic design postulates or work with a literate designer.

5. Structure.

Convenient connections between different pages make surfing through the website simple and comfortable, but lots of front-end software engineers infringe on this requirement. It’s a bad influence on SEO. Therefore, front-enders should take the structure into account. Also, they must inform designers about all pages and their connections. It’s fruitful for the final product.

Our experience with startups and enterprise development proves the importance of cooperation and our teams and clients get many advantages of this synergy:

• Standardization of processes and common tools.
• Effective teamwork.
• No time wasted on transitions between UX and front.
• Working time is reduced due to fewer edits.
• The minimization of risks, and rework of financial costs.  

Conclusion

Any productive team should work hand-in-hand, which helps to achieve the best result and meets user expectations. We can compare this process with the building of the house. It must be correct from two points of view: aesthetic and functional. Aesthetics belongs to the area of designer responsibility. Functionality is more connected to the front end. But both of them are closely related. We hold this approach and perceive design as UX/UI+Front-end in Artkai.