Why don't end products match exact UX design?

After being in UI development for a couple of years, recently I got to explore a designing tool. There by I got to know the reason end products don't match the exact UX.

There is a process that UX designers follow. Starting with developing a component mock-up collections, defining definite set of colors/gradients, constraint alignments, resolutions and more. The UI developers also have to follow the same procedure from developing UI component library(or customizing the existing library according to design), create color constants and respectively.

Second, we should be able to read a design which means some of the css properties are not mapped with the same name in the design. For example, in figma - border is named as stroke with the properties "inside & outside" which we need to map as padding & margin. Though figma gives a css translations to these, some times they need to be re-verified and also we might not use the exact styles. For example, left, top properties are rarely used in development when we are using column layout.

Third, careful observations. Designers take a good amount of time in details. For example, just to see if the shadow settings are looking good. If we just copy the shadow color and ignore the opacity of the shadow, then it may give a totally different look.

Four, analysis of deviation from the CSS library. Design tools are very handy as we all know. Some text might have totally different style applied(may be font), Or may be a random color button has pitched in between. In any such cases, we should discuss again with the designers. May be, it was placed by mistake or may be it was not thought in terms of development constraints. When we discuss with the designers, they have better suggestions or they may even alter the design. So, it is good to not ignore the deviations and to settle with a random alternative. It will be visible in the end product.

Fifth, to focus on view part separately from logic The moment design is provided & there is a demand for estimation, we totally get into implementation details. Divide the estimations into view part(html/css/android look & feel) and logic part. If possible, develop it as two different phases. That convinces the entire team about the progress, also providing a good quality.

This is all I got to share for today. Thanks for reading

Comments

[Shaiju T]

Nice, 😄 I am web developer, but not that good creating nice looking UI , So how can I start learning ? Or What is the process to convert a PSD or figma design to actual HTML template ? Also How can I get design ideas and inspirations ?

[Vani Shivanand]

As far as I know, there is no short cut. We need to carefully write HTML & CSS. But I can say, divide the work into different phases. Something like this,

• Customise the component library according to design and import the same wherever needed.
• Identify the color/gradient patterns and extract them as constants.
• Check with the designer if he/she has used 12 or 6 column layout.
• Learning a design tool superficially also might be helpful to walk in their foot steps. This shouldn't take more than 3 hours according to me.
• Map the design tool properties to css nomenclature. This is important.
• And most of them I have listed in the above post.

For the design ideas, though I am not a designer, there are sites like figmaresources.com. iOS also provides the basic templates for the design on their site.

Hope that gave a bit more detail. Thanks for the comment!

[Pete Steven]

Indeed there is no shortcut to just import your design file somewhere and then perfect html/css comes out. This is mostly because they are different stacks. The design stack and the web stack are not that compatible.

There are tools, though, for example Desech Studio, where you import the figma, adobexd or sketch file, and then you do some adjustments and you will have proper working html/css. Then you can focus on the responsiveness of the website.

But my advice is to first learn a bit of html/css to understand the web stack better. There are a lot of free html/css tutorials on youtube.