Default resolution

Before we start designing we need to choose a resolution. I usually start my work on a 1440x1080 frame and it's my personal preference. Why? You'll see in the next slides.

The grid

I used to work a lot with Elementor and Webflow (visual page builders) and what I noticed is that the most common box-width to design at was 1240 (or 1200)px. Besides, it's much easier to design on smaller frames and scale the design up than scale it down. So, let's set up our grid to reflect that.

Containers

This is important especially for development. When designing your pages think about how your content will be coded. Imagine everything in containers. Don't go too crazy with your layout because devs will hate you for that

Scaling up

This is very often skipped by beginner designers. When we design for small screens let's think what would happen if we go over 1920x1080 resolution. How would our design remain responsive? Let's take this page as an example

Higher resolution

Having the same box-width on higher resolution might look weird, especially when we're moving closer to 4k screens. This is how our design would look like on 2k res. It's not bad, but what can we do to make it better? Let's see

Min-max width

There's this thing called max-width. When going over 1920x1080p we can choose to use maximum width as our boundary. Let's say we want to stop at 1920 px. We can always design a screen for our dev to visualize this better.

Design hand-off

When preparing a hand-off make sure to have your grid documentation prepared and a set of designs on different resolutions. If you're experienced - use auto-layout and constraints, but your devs should have enough information to build this out live as it is.

Let's sum up

You should also include a typescale and grid documentation for, a style guide, links to website references and codepens, vector files, visual assets, etc. And don't forget to name your assets and layers accordingly!

I cover everything you need to know about design handoff for desktop in my new eBook - "Ultimate Guide to Web Design"