Chatbots are the future of UX
February 16, 2017
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.
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.
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:
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:
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!
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.
Florent Cima, Lead Front-end Developer