: 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,

@Sims5801359

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.

Vote Up Vote Down

@Ravi4787994

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!

Vote Up Vote Down

@Karen819

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

Vote Up Vote Down

@Shakeerah625

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.

Vote Up Vote Down