As you begin to set up your design files, it’s important to consider two things at this stage: breakpoint sizes and artboard sizes. In this post, we’ll go over what those two things are, and also provide recommendations that will help ensure a seamless transition from design to development.

Breakpoints are responsive points where content adapts based on the screen size of the user.

This decision is made in the code, and will most likely be a different pixel width than the artboard sizes your designs are in. The numbers below indicate where we start the break on different layouts. For example, once a browser reaches between 320px – 768px wide, we will begin using the mobile layout design. These breakpoints indicate when design changes occur, such as the navigation menu swaps to a mobile/hamburger menu, font, and image sizes adjust, and column structure decreases.

Breakpoints we suggest:

Desktop breakpoint: 1024px to 1440px wide
Tablet breakpoint: 768px to 1024px wide
Mobile Breakpoint: 320px to 768px wide

We try to steer clear of desktop breakpoints above 1440px as there is a lot of movement that can happen in the site between desktop and mobile breakpoints. This can cause the design to break or look bad when desktop design starts out too big. We always recommend a mobile-first design approach.

We typically don’t receive too many tablet designs, so you can expect your mobile breakpoint to be larger if that’s the case.

Artboards represent each screen (desktop, tablet, mobile) for which you are designing a website or app.

They are quite literally the screen dimensions of a device, but usually longer to allow for scrolling. Whether you’re designing in Figma, Sketch, Adobe XD or Photoshop, these artboards will be what you handoff to developers. While it is important to know the breakpoints developers are using, choosing artboard sizes that reflect the most commonly used devices for your website/app is crucial. We recommend looking at what the most current common devices are.

Most common device sizes in 2020:

Desktop: 1366px by 768px
Tablet: 768px by 1024px
Mobile: 360px by 640px

Artboard max-width: The largest assets can be at the given breakpoint. If files are larger than this, assets may be sent back to the design team to adjust. If you’re using a grid, consider this your grid width. Annotate your desired side padding so content doesn’t butt up with the side of the screens.

We are here to help! If you need a little more guidance before you begin to design, our team of experts can offer recommendations for your particular website or application needs.