Version 0.40.0

Brand Design

Our Language for Illustrations

Pictures on Saagie website are organized according to their functions. We can distinguish 5 main families:

Hero images

1. What function?

Hero image is the large banner image prominently placed on the web page. It is the first visual a visitor encounters at the opening of each page of the site. Therefore, its purpose is to attract visitor's attention and set the content of the page in context.

2. What Design process:

Saagie's hero image consists of 2 elements:

  • a product image in the foreground.
  • a background image in the background.

The visual style of the whole composition is realistic, understandable and fanciful. Both images shouldn't look over-processed.

a. Hero product image

Saagie's Hero product image is a realistic and analogical sample of our product. It's used to showcase what the user will see in the real world. An app, for instance, should be displayed in a photo-realistic representation of a laptop screen.

b. Hero background image

Hero background image is context-relevant and immersive. According to the content of the page, the imagery can either communicate the concept of generality or specificity.

  • We employ the concept of Generality when the topic of the page has to do with general info about Saagie (what we do, who we are, how to contact us etc.). We highly recommend using Metonymic imagery (a part of something which refers to the whole of something) relative to company world. We preferably use photos of company infrastructures (such as a head office building or a warehouse for instance) to evoke their occupants, in other words, the staff.

Also, remember that human being always remains at the center of Saagie's concerns, and therefore ensure that the picture chosen conveys a sense of humanity by showing people in its composition.

  • We employ the concept of Specificity when the content of the page tackles one the different Saagie's use-case. We use pictures showing staff operating in their workplace environments such as board room or warehouse, for instance, to illustrate how saagie can help in solving specific issues.

Bare in mind that the scene should convey a sense of cheerfulness and professionalism and that all the protagonists posing on the picture should look serene and cheerful.

3. What Technical process:

a. Hero product image

As seen above, we only integrate hero product image in a realistic representation of screen device. Few samples are available on this file located on the Saagie's Creative Cloud:
Saagie/Website/illustrations/hero-images.psd.

Please make sure that the mock-ups come with the right licence (free for private and commercial projects).

b. Hero background image

Saagie's Hero banner image is composed of a photograph with an "Overlay" blending mode at a low level of transparency fading out on both sides and placed on a blue banner( Hex Color Code:#283D5C). An iconic point of focus materialized with a stroke of light is added in the imagery of each banner. We make it with a simple white brush (opacity %) on the overlay mode layer.

Lastly, to optimize the website performance and to adapt the different device screen resolutions, each background image should be issued in 6 different sizes.

All the information concerning the different sizes and the general design are in the PSD file named Hero-images.psd and can be found on the Saagie's Creative Cloud:
Saagie/Website/illustrations/hero-images.psd.

Spot images

1. What function?

Spot image appears within or accompanying a text section. It is used to illustrate and answer each section title. Nevertheless, Spot illustration can also be used as a stand-alone object that can help to promote a specific event, place or product on our website.

2. What Design process:

Three types of Spot illustration are used according to the context:

  • Product ideations
  • Explanatory diagrams
  • Explanatory visuals

a. Product Ideations

Product Ideation image can be seen as a simplistic representation of the product. It should only focus on its key features. This type of image showcases the product interface in whole or in part. Its role is to help users to quickly process the most relevant information about our product by minimizing their cognitive load.

b. Explanatory Diagrams and Visuals

Explanatory diagram is used to literally explain or define concepts at the first sight. It strengthens users' understanding by explaining the different processes of a complex idea. Explanatory visual explains and answers the problematic raised in its corresponding headline. It should be conceptually strong and original in approach and can sometimes draw upon the use of visual metaphors.

3. What Technical process:

a. Product Ideations

Product ideation representation is mainly based on a flat design aesthetic. The colors used belong to the Saagie's color palette. No relevant text parts can be replaced by light gray rectangles.

b. Explanatory Diagrams / Visuals

Explanatory Diagram respects Saagie's color palette as well. based on a flat design aesthetic. The colors in use belong to the Saagie's color palette.

All the information concerning the different sizes and the general design are in the AI file named spot-images.ai and can be found on the Saagie's Creative Cloud:
Saagie/Website/illustrations/spot-images.ai .

Scene images

1. What function?

Background image only has an aesthetic function. It is a decorative image which takes the form of an arrangement or composition, acts as a frame or rule, breaks up an area and provides ‘light relief’ to texts or typography.

2. What Design process

Scene image is based on the hero image's blue banner design. Scene illustration should display a photograph (no irrealistic photo editing). However, the imagery shouldn't disrupt the user's reading (it shouldn't contain any readable text for instance). It should illustrate the section and provide some texture.

3. What Technical process

Scene image in use the blue banner design used for hero images and therefore should be photo realistic. Lastly, in order to optimize the website performance, Saagie's Scene images must be issued in 6 different sizes in order to adapt the different device screen resolutions.

All the information concerning the different sizes and the general design are in the PSD file named scene-images.ai and can be found on the Saagie's Creative Cloud:
Saagie/Website/illustrations/scene-images.psd .