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

Question

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.?

Answer 1

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.

Answer 2

You might be using a monitor with higher resolution (retina) than what your clients or coders use. I assume that because reports on incorrect font sizes come from them, and is not something you identify yourself during internal review of site build in progress.

You have two options: one, aiming for lowest common denominator and designing with 72 dpi in mind, or asking your coders to create retina-specific styles in addition to standard resolution. The second option will require more work on their part and increased production budgets.

Also, make sure that designs are not reviewed by clients in PDF format, only bitmaps. PDF can be zoomed in and out, and we once had to rebuild all CSS for entire site because creatives sent designs in PDF and client approved it by zooming in to 77%.

Answer 3

Since you're using Photoshop CC 2017 you may want to try the 'Device Preview' tool. Adobe also has an app to sync design previews to your smart phone.

You might also try opening the image file with Chrome (make sure to zoom in so the design fills the screen) to get a general idea of how the design will look in a browser window. *This may also stretch the design depending on the resolution/dimensions you're designing for but it allows you to see the design in a realistic environment. Personally it helps me visualize how the final design will look.

Like others have stated, there is no 'standard' size for the web. It's definitely something you'll have to test over time. That being said it's always a good rule of thumb to design to the device with the most constraints (screen real estate, user context, performance, etc.). That may just be adjusting the designs for smaller desktop monitors in your case.

Lastly, because of the variability between screens and devices, the developer should be making subtle adjustments in the spirit of the original design as needed. Responsibilities between web designers and developers can sometimes be a gray area during implementation since the design acumen between two front-end developers can be drastically different (and vice versa with designers). Clear communication on how the design is being implemented should also help tighten up future work.

Answer 4

I recommend you to open your website on chrome. Chrome has really usefull tools.

1 - Open your website on Chrome then Right Click and "Inspect"

2 - Now be sure than you enter on device preview mode by clicking the second icon just underneath the maximize, close and minimize buttons. (The one with the blue outline)

3 - Finally choose either Laptop MDPI or HDPI to see how your website will look like.

Cheers!