loading...

re: Why don't end products match exact UX design? VIEW POST

FULL DISCUSSION
 

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 ?

 

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!

Code of Conduct Report abuse