Graphic design

General principles

This website's graphical architecture is inspired by the principles of Brad Frost's Atomic Design. This method distinguishes five levels of graphic organisation:

Page

The “highest” graphical organisation level is the “page”, which corresponds to the conjunction of every other organizational elements to form a whole unit on which user experience can be measured.

Example: In this website, a “page” typically corresponds to an HTML document associated to a specific route.

Note:

At a “higher” organizational level, we could for instance consider the “website”, just as we could talk about the organization of pages inside a book. However, I consider that these organizational levels “above” that of the “page” are not “graphical”, but require other analytical frameworks.

Template

The “template” prescribes how the different elements are composed in each page.

Example: In our case, the “templates” describe principles such as the position of a navbar on top of the viewport, the presence of links in the footer, and so on. Technically, the “templates” are made possible thanks to Twig's concept of blocks, built with the {extends} instruction.

Organism

An “organism” is a graphical unit of the user interface which gathers multiple functional elements into one coherent group.

Example: the navbar on top of the page, the footer, or the “cards” design.

Molecule

A “molecule” corresponds to one functional unit of the graphical interface, which answers one specific use case.

Example: a line of a form, a button, etc.

Atom

Finally, “atoms” correspond to elementary units of the language (ie. made of a sole HTML element with no children, or with only text nodes), which can be articulated together to form “molecules”.

Example: an <input> field, which can form a molecule when combined with a <label> in a form row.

Templates

Every template for this website are divided in at least 4 main parts:

Navbar

The main navigation is fixed on top of the viewport, in order to always be accessible (except for specific clients such as printers).

Header

The page header contains three graphical organisms:

1. a breadcrumb to locate the page in relation to the larger architecture of the site
2. a banner with the title of the page and a short, optional description
3. the outline linking to the main sections of the page.

Main content

The body of the page is made of multiple <article> elements. They must be identified by a <h2>–<h6> element. They can also be <section> elements. The template for each page adapts the form and content of these elements to fit the page's requirements.

Footer

The footer contains useful links and legal obligations.

These elements form a basis, from which the template of each page can be built. Titles of each article composing the page are automatically added to the outline with JavaScript.

Organisms

Banner

A banner displays an image below some content, with a semi-transparent background to give some contrast in order to keep the content legible.

Example:

doloribus ut incidunt

Adipisci assumenda incidunt aut omnis molestiae sint. Et nihil atque aliquid sed laboriosam velit et. Et alias voluptatum saepe ipsa odit ab.

Sed inventore itaque enim dolorum dolor accusantium nihil consequuntur. Et eius dolores qui velit reprehenderit. Doloribus dolores dolorem delectus necessitatibus. Quos ut dolor velit nesciunt.

Cards

A card is an element with a header, a main content, and sometimes a section listing actions, which takes the form of small cards which can be placed next to each other.

Example:

Ea debitis iure

Praesentium sunt et accusamus debitis ullam. Est porro facere totam et nostrum. Velit nihil suscipit perferendis quia dolor repellendus magnam. Doloremque ex deserunt explicabo optio iure qui reprehenderit. Fuga aliquam blanditiis totam qui porro illum iste.

qui voluptates in voluptatem

Sed sint dignissimos omnis occaecati facere repellendus

Blanditiis atque dolore repellat.

Ullam enim nostrum doloribus ullam quod est qui. Consequuntur aliquid veniam mollitia.

Repudiandae vitae minus qui explicabo. Rerum maxime neque perspiciatis voluptatem est exercitationem. Ex qui quo asperiores voluptate. Excepturi tenetur fuga repudiandae hic repudiandae minus dicta aliquid. Qui sit maxime est doloremque et blanditiis et quam.

Velit et ex perferendis et sapiente dolorem. Aut ratione vero ipsum sed odit occaecati magni. Nihil voluptatem quaerat voluptatum voluptatem blanditiis consequuntur officia debitis. Occaecati eum ab omnis consectetur.

eius sit

Molecules

Atoms