Web design: How to make sure all web design elements doesn’t look too big before coding it?

When making web designs and UI designs in Photoshop CC 2017, after being approved by the customer, then the website is being coded. During the coding process, website becomes available on some domain name for testing purposes and sometimes I get a report from coder or client, that all elements that are on the site looks too big, not much, but definitely needs to be made smaller.

I am trying to understand, why this happens and one of the versions is that maybe during the design process I forget to fit artboard to 100%. Text size is the main problem in most cases.

I want to know, is there some tricks to learn and know to be sure that all these web elements looks like it should be every time I design for web? Is there some mandatory specifications that I always need to keep in mind, like smallest and biggest font size for header menu, website main text etc.?


There is no trick to it, try to be consistent in the way you preview your work and actually open your designs in your browser to get a feel of what it looks like ‘in real life’.

Take a good look at websites you think are designed well and inspect the code to see what font sizes they are using in combination with their fonts and how this looks.

You can create a sort of styleguide, this helps create consistency as well. Set font sizes for all headers, paragraphs, quotes, etc etc.

It’s a trial and error process, you need to get a feel for it and test it before you send it off to your developer, he shouldn’t have to fix the mistakes you make.

Source : Link , Question Author : istoby , Answer Author : Summer

Leave a Comment