Designer’s Guide

This includes information on: Bootstrap grids for desktop and
mobile design, and breakpoint information for all devices.

Mobile design

Always design in these pixel
dimensions for mobile:

Width: 375 px
Height: 667 px

Always use 30 px margin on each side.

Desktop design Bootstrap Grid

We are using the CSS Framework called “Bootstrap” in our platform. Here you can see how the grid looks in Bootstrap. This is just to give you an idea of how we work with that grid. Below this grid we have shown you how we would like you, as a designer, to work with this grid. It’s a simplified version showing the column widths, and the total content area you should work with. We have called this grid “Designer’s Grid”. You can download the Sketch and Adobe XD file here to the right.

Desktop design Designer’s Grid

All your content should be inside the content area on desktop:
Content area: 1140 px

The content area on 1140 px consists of 12 columns. When you want to produce any kind of graphics (ex: Image, illustration, headline, body copy etc.) you have to decide how many columns you want it to be. One column is 95 px wide each So if you want an image to fill half the width size of your site, it should be 6 times a column size: 6 x 95 px = 570 px.

The height of your graphics is optional. Though you should strive for your graphics not being higher than 600 px. If higher, the user will not be able to see the whole graphic on a conventional desktop.

Here you have the table over the different coloumn widths that you can use:

1 column = 95 px

2 column = 190 px

3 column = 285 px

4 column = 380 px

6 column = 570 px

12 column = 1140 px

If you want your design to go outside the content area (1140 px) it should be a solid color, a tileable pattern or an image large enough to scale on even the biggest screens/displays.

Breakpoints

Allways design for these 4 breakpoints in order to make your design work on all device sizes

Large screens 1140 px

Tablet landscape 960 px

Tablet portrait 720 px

Smartphones 375 px

This is what you need to design in order to make a full LeadFamly campaign

1. Landing/Presentation page

2. Registration page

3. Game page

4. Winner page

5. Loser page

Sign up for LeadFamly FREE

  • Build unlimited game campaigns.
  • Engage your audience.
  • Capture new leads.
  • No credit card required.