Jean Louis David

We created a set of directions and tips for Jean Louis David team to ease their design process when preparing materials for various internet marketing campaings.

Layouts

Example layouts for banner design.

jld-image03-v01jld-image03-v01

Fonts

In order to stay consistant with the new website design we use two fonts: Playfair Display Regular for big (for example 80 pt) and medium (for example 30 pt) type. Lato Regular for small type like 16 pt and longer paragraphs.

Cursive is acceptable but it shouldn’t be overused. We use it in situations when clear distinction is needed from the main text. For instance a quote. Using only one style will help maintain typographic elegance and legibility.

jld-image04-v01jld-image04-v01

Colors

New visual identity has a strong sense of a clearly defined style. This is also thanks to a consequent usage of colors throughout the designs.

Type, backgrounds, borders.

Type, backgrounds, borders.

Backgrounds and type. Different shadesof gray are allowed.

Top priority elements. Use cautiously.

Other colors are allowed occasionallyand sensibly when needed.

jld-image11-v01jld-image11-v01

Example usage of a color which cannot be found within the standard color pallette. Pink corresponds with the graphic line of COLOR therapy products.

Call to Action

We have two kinds of CTAs. First one is a button and second is a colored fragment of text, just like the one below. It can be separated by some space.

jld-image12-v01jld-image12-v01

Borders and tints

Borders and tints look stylish and allow to place a big photo in the background at the same time.

Frames used in symmetrical layouts look very elegant. Thay can be used to fill most of the space or just a selectedpart. Frames are easily adjusted to fit the composition of a photograph. It is advisable that text is placed loosely within the frame. If a frame has to low contrast, the background can be darkend for the frame to stand out.

White (#ffffff) tint with 80% opacity. It can be placed in any corner so it can be easily modified to compliment the picture. It is 20px from two borders of the layout. Text inside the tint also has 20px of margin.

Other graphic elements

To enrich or make specific content stand out we use simple, even minimalistic graphic patterns. They should be used as backgrounds or thick borders.

Banner design examples

jld-image25-v01jld-image25-v01