DEV Community

Discussion on: Why don't end products match exact UX design?

Collapse
shaijut profile image
Shaiju T • Edited on

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 ?

Collapse
svaani profile image
Vani Shivanand Author • Edited on

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!

Collapse
kr4idle profile image
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.