0

I am a newbie designer and I'm working for a friend who wanted me to do the UI for their desktop web application. This is a B2B product wherein the customer will use the app to manage their storage spaces. Also, this is a desktop-first app since that's the main endpoint and a mobile app as separate, good to have feature.

The issue stems from the fact that when I had designed the screens, I used the full page size of 1920 x 1080(which I think is a safe size that accounts for most monitors out there). I did not account for the average usable area( area left after removing the Chrome/Firefox/Safari browser navbar and bookmarks bar) since that would keep changing depending on what the user uses. And post-development, when viewing the developed screens, most of the areas have a scroll bar on account for not fitting in the screen. I'm not sure on how to proceed from here other than doing a full rework of the designs since that is not an option at this moment and the product has to be released in a few months

I hope I have summarized the problem P.S. I have tried looking everywhere for this problem on how UI designers design their web app and couldn't find any material for it. Even when I see the designs online, its just the design and no navbars as such.

Edit 1: My concern is actually not about the resolution but how to design the page with respect to the available usable area. So my main concern is whether do you take the browser height into consideration while designing or do you just design for the whole resolution( 1920 x 1080) and let the front end dev take care of scaling it to fit the browser. When I spoke with the Front End guy yesterday, he told me the usable area is only 921px. So should I have designed my pages keeping that height as fixed? But that does not make sense since different browsers may have different heights? So how should I proceed in solving this?

Improve this question
3
  • Hi Vivek, have a look at this question for common screen resolutions.
    – Nash
    Commented Aug 31, 2020 at 10:39
  • Hi Nash, thanks for the comment, I have updated the question with the Edit 1. Please have a look.
    – Vivek Sreekumar
    Commented Aug 31, 2020 at 14:27
  • If you did give some examples of the layout of the screens or some details about the nature of your content or features you are designing it would help us answer your question better.
    – Blue Ocean
    Commented Aug 31, 2020 at 14:58

1 Answer 1

Reset to default
1

Designers don't get away with a single design these days. When a designer comes up with a design for a page, the first question he/she gets is "how does it scale on mobile?".

As a front-end developer, I want to implement designs in a "mobile-first" way. This means that the default is always accounting for small screen resolutions and adaptions are made for larger screen resolutions. For a designer, it can also be helpful to design for mobile first as you only have to focus on the most essential parts in a mostly vertical space. It forces you to think about the essence of the app and its user experience.

Also when designing the page for larger screens the question is rather "what will fit where and when" than "what to hide or show to wrap content".

My advice is to focus on responsive and adaptive design. If you don't want your screens to scroll, it is possible to make use of 100% viewport height instead of relying on a fixed amount of pixels. A front-end developer should know how to make it respond to different viewport sizes.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.