Revolutionizing the design of web pages with Atomic Design

Create web within the web

The web is a fluid, interactive and interdependent world. Consequently, the effort to build a website depends on the features and components of the pages and not on the quantity of pages. Modularity reigns on the web, and especially so as the number of devices and resolutions multiplies.

Since the number of devices and resolutions is imperative, it gets distinctly hard to stick to static mockups of the considerable number of pages of a site. The target of the Atomic Design procedure is to make a style guide to describe a design that is independent to the content that will be on the pages.

The style guide is intended to show on a single page all the realistic components used to outline a website page. This goes from the essential HTML component (our atoms) for example, links, buttons, and titles, to graphic components (our Molecules and Organisms) forming substances and relations between a few atoms. Contextualization with the final content is done in the outline of layouts and pages.

The case of the instagram application beneath represents how atoms can together construct molecules that shape life forms, sticking together to form the templates that can receive the content.

 

Atomic Design par Brad Frost

Breaking down the Instagram interface to understand the Atomic Design – source: http://atomicdesign.bradfrost.com/

The style guide resembles a page listing all the fundamental components (atoms) and the graphic components (atoms and life forms) that will be found in all formats of the site. The style guide is accessible by both our designers and our Customers, which makes it a reference of decision for any web project.

 

From the abstract to the concrete

One of the best benefits of atomic design is the capacity to move rapidly from the dynamic to the solid by taking a shot at interfaces disintegrated into their atomic components. Here are alternate advantages that will persuade you:

Guide De Style - Exemple

An example of an Atomic Design Style Guide created by Human Equation.

  • Web style guides put consistency over user interface. The latter benefits both the people who make these interfaces and their users.
  • Giving names to reusable graphical components builds up an intelligent and shared vocabulary among every one of those included in a project, favoring collaboration between disciplines and diminishing communication disappointments.
  • The style guide goes about as a model library that conveys the outline dialect in an extremely unmistakable manner, which explains how a hidden framework determines the final interface.
  • Developers are compelled to consider how their choices influence the more extensive design framework, favoring empathic choices.
  • Decomposition of the interface into independent unit elements makes the QA test tasks much easier. The style guide allows you to view the interface templates in isolation, allowing developers to focus on what causes errors, browser inconsistencies, or performance issues.
  • The style guide is scalable and can be modified or completed at any stage of development, allowing you to automatically modify all the pages in which the modified components are used.
  • It is also a structural basis for future refinements. Lessons learned from analysis, user testing, A / B testing and experience can be incorporated into the Style Guide, making it a powerful crossroads of knowledge and best practices for your project.

 

By installing the design in the browser as quickly as possible, we confront the stakeholders with the realities of the final media much earlier in the process. Working directly with graphic elements in a web browser allows teams not only to create aesthetically beautiful designs, but also to demonstrate exclusively digital design considerations such as:

  • Responsive design
  • Impact of the network
  • Interaction with the mouse and touch screens
  • Animations
  • Ergonomics
  • Color and text rendering
  • Pixel density
  • Scrolling performance
  • User preferences

These technical considerations could not be taken into account in a static model. Moreover, the wireframe presenting the interactions between the pages and the layout can be conceptualized in parallel and independently of the style guide, making shorter the waiting time before the first deliverable!

 

A collaboration with our clients

Collaboration and communication are key.

For new projects, a first customer appointment allows to do the 20 SECONDS GUT TEST: it is necessary to make note quickly between 1 and 10 sites representative of your industry by the decision makers of the project. Justifications such as typography, colors, density, layout, style of illustration will be requested in order to understand your tastes.

A second encounter will present the Style Tiles: it is to explore the colors, typography and atmosphere without worrying about an arrangement or tweaking. Samples will be presented to guide our design work on the style guide adapted to your company’s image.

In parallel to the graphic research, a Wireframe desktop and / or mobile will present the interactions and the layout of the elements of your site in relation to the content that you wish to put forward on this platform. This document allows our teams to design complex reusable graphics components as much as possible.

The complete design of the style guide is a tedious step for our teams, and our clients are involved as often as necessary in order to give their opinion on the graphic elements that will make up the final interface. On the other hand, the efforts to create new templates during the project or the adjustments will be less thanks to the design iterations of the style guide and the associated documentation.

We know that seeing loose pieces of an interface can be difficult for some of our customers to make decisions, so content embedded in static models can be presented on request. Once the visual direction is decided, they allow you to paint a complete picture of what a piece of interface might look like, so that you can get involved in decisions impacting elements that can be modified directly in the style guide.

 

Author

Florent Cima, Lead Front-end Developer