This includes information on: Bootstrap grids for desktop and
mobile design, and breakpoint information for all devices.
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.
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