Design & innovation

Atome Design - Billet AUplaisir

Atomic Design… et mon cœur fait boum !

#ui #ux #brandexperience

Voici une expression que l’on voit rebondir un peu partout dans le microcosme design, l’Atomic Design…

 

De quoi s’agit-il ?

Il était une fois un livre, écrit par Brad Frost sobrement appelé « Atomic Design » où il expose la chose. Le constat: nos supports digitaux sont protéiformes, ça fait déjà longtemps grâce au responsive, mais cette tendance n’a fait que s’accentuer : le design (ux & ui) d’une solution doit être cohérent entre une app, un site, un objet connecté. La direction artistique doit également être en phase entre l’interactif et les supports statiques comme le film, print, signalétique, etc. : soit toutes les incarnations d’une marque ou d’un service, au sens large.

La page (web) est morte, vive la page !

L’idée maîtresse est de penser les éléments hors contexte, plus précisément hors support, grâce à un système à 5 niveaux : l’atome, les molécules, les organismes, les templates, puis enfin les pages :

1.L’atome :

Irréductible, sous peine de réaction en chaine incontrôlée, c’est la base qui impactera tout l’aspect visuel de l’expérience. On parle ici de couleurs, de typographies, de style de pictogrammes, etc.

2.La molécule :

Comme en vrai, c’est un ensemble d’atomes qui constitue un élément simple.
Il peut s’agir d’un menu, d’un diaporama. De quoi mettre en place un StyleGuide un peu poussé en somme.
Chose primordiale, on commence à penser responsive dès cette étape, et tout au long du process jusqu’à la création des pages.

3.Un organisme :

Il s’agit d’un groupe de molécules, une espèce d’être vivant, plus complexe que les simples molécules, et qui a sa propre logique. Par exemple, il s’agit d’un bloc header comportant un menu et un diaporama, ou d’un module de connexion-inscription, etc.

4.Les templates : 

Ni plus ni moins qu’une logique classique de gabarits, préfigurant l’assemblage de ces organismes en projetant bien les différences de comportements entre chaque support (desktop, smartphone…). C’est là que les choses se concrétisent, on peut alors tester les partis-pris fonctionnels, visuels.

5.Les pages (boum, les voici enfin !) :

Les pages sont le résultat final, intégrées avec le contenu et tous les éléments d’interface. Et c’est bien là qu’est la vraie différence entre une méthode classique qui ferait débuter la conception via un contexte, soit… une page par exemple.
Ces pages sont à prévisualiser en maquette pour les pages importantes, laissant les pages secondaires être générées directement en code.
 

Mon avis

Très intéressant, l’Atomic Design, digne successeur du Modular Design , est un process qui synthétise des pratiques que l’on avait tous plus ou moins expérimenté depuis un moment, mais le fait de le théoriser le rend visible, palpable. Il est ainsi compréhensible non seulement pour les designers, mais aussi pour les clients, dans une logique pédagogique, ces derniers pouvant être effrayés par ce type d’approche.
Pour moi le danger de cette méthode, si on se l’approprie de façon un peu trop brutale, est d’être trop concentré sur chaque étape, sans avoir en tête la big picture ; le résultat final sera alors une espèce de surprise… pour le meilleur ou le pire.
Avec ce process, la notion d’aller-retour entre le détail -l’atome donc- et la vue d’ensemble -qui se construit progressivement- est absolument capitale. Il ne faut pas y voir un process linéaire mais bien une trame sur laquelle on itère gaiement.
Exactement comme quand on dessine en somme.
 

En savoir plus :


Nous suivre  ?

NEWSLETTER  –  FACEBOOK   –  TWITTER

EnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrerEnregistrer

EnregistrerEnregistrerEnregistrerEnregistrer

Directeur de création / DIGITAL, co-fondateur d'AUplaisir.
  • Les designers, les marques… et l’éthique

    Les designers, les marques… et l’éthique

    Conflit d’intérêts dirons certains ? Évitons la caricature… Pour faire suite à mon précédent billet « Designer, la rébellion s’organise ! »  faisons un point sur ce difficile exercice de funambule qui consiste à proposer les services […]

  • Designers, la rébellion s’organise…

    Designers, la rébellion s’organise…

    C’est la Grande question qui agite la planète design : l’éthique. #ethique #ux #design. Course à l’attention ? Hijacking ! L’attention est la valeur bankable pour les marques. Les écosystèmes digitaux sont régulièrement pensés pour capter notre […]

  • Design-Friction : appuyer où ça fait mal…

    Design-Friction : appuyer où ça fait mal…

    Dessine-moi un… scénario catastrophe ? #Jargon #Design #OuvertureChacras. Pirates du design… De temps en temps, je note dans mon calepin des notions qui m’intéressent, entendues à droite à gauche, à creuser un jour… Il y a quelques […]

  • Les 1000 pouvoirs du Chatbot…

    Les 1000 pouvoirs du Chatbot…

    Chatbot ? Dans notre série « point jargon », découvrons aujourd’hui une très forte tendance 2016 qui va s’installer concrètement en 2017. Pourquoi faire ? Comment ? Ca veut dire quoi Chatbot ? «Messagerie instantanée de robots» […]

  • Des typos intelligentes : enfin !

    Des typos intelligentes : enfin !

    Intelligence artificielle ? du tout ! Voici un nouveau format qui peut sérieusement changer la donne côté design.   Apple, Adobe, Microsoft et Google sont… d’accord ? Sur presque rien en général mais il y a […]

  • Phallaina : bravo.

    Phallaina : bravo.

    Il n’est jamais trop tard pour le sublime. Vous l’avez peut-être déjà vue, voilà plusieurs mois que je voulais vous parler d’un travail hors du commun. Je crois que c’est une des plus belles […]

  • Un menu du jour, svp !

    Un menu du jour, svp !

    #DesignThinking L’interface, ce n’est pas une science, c’est une mode, avec ses changements, ses cycles et ses allers/retours. Et comme la mode, ce n’est ni superficiel ni le produit d’une préoccupation futile, mais le […]

  • Point jargon : aujourd’hui… « Data Mining »

    Point jargon : aujourd’hui… « Data Mining »

    Décomposons… – Mining ? On fouille, on fore, ça sent à la fois la boue, le pétrole, un peu de There will be blood en somme. – Data ? …on connait.   Nous parlons donc d’exploration des […]

  • Eatizz : dévorons ou jetons ?

    Eatizz : dévorons ou jetons ?

    #GâchiAlimentaire #TransformationNumérique #App Dévorer ou jeter… posée comme ça, la question semble facile ! Personne n’a envie de jeter la nourriture : ni vous, ni moi. Et certainement pas le commerçant, pour qui, en […]

  • Vidéo : l’immersif déboule (enfin)

    Vidéo : l’immersif déboule (enfin)

    « Expérience », « immersion »… des mots à la mode, déjà presque usés, souvent galvaudés aussi. Dans notre série Point jargon, je vous propose de découvrir de quoi il s’agit : après en avoir […]

  • Uber : nouveau logo !

    Uber : nouveau logo !

    #identiteVisuelle  Il était là, …il est parti. Pourquoi, comment. Je voudrais vous parler aujourd’hui d’un micro-événement du monde la communication : le nouveau logo Uber. Vous avez probablement vu fleurir ces dernières heures le […]

  • Point jargon : aujourd’hui… « Blockchain »

    Point jargon : aujourd’hui… « Blockchain »

    #innovation #bitcoin #financemaispasque  Blockchain : Qu’est-ce que c’est ? Qu’est-ce ça peut changer ? Vous avez probablement entendu parler du Bitcoin, cette monnaie virtuelle qui sécurise de façon inégalée une transaction. Elle est apparue en 2009, elle représente […]

  • Débusquer le pertinent ou l’alternatif ?

    Débusquer le pertinent ou l’alternatif ?

    # Veille. Internet est un puits sans fond de connaissances (entre autres). Profitons-en ? Filtrons ! Tamis n°1 : les moteurs de recherche Cookie nature, choco ? Bien sur, les moteurs de recherche sont […]

  • Inutile, moi ?

    Inutile, moi ?

    # Nouveaux Usages. Les inventions sont tout autour de nous. Une écrasante majorité ne sera jamais utilisée, malheureux n’est-il pas ? Qu’est-ce qui fait l’innovation ? Le design, la qualité de l’expérience utilisateur ? […]

  • Le design est un tord boyaux. J’adore.

    Le design est un tord boyaux. J’adore.

    #DESIGN THINKING Par essence, notre activité nous demande d’imaginer des interfaces, des usages, des objets o-ri-gi-naux. Originaux… oui, bon, évidemment nous nageons en pleine évidence…mais cette exigence d’innovation nous tord les boyaux à chaque […]

  • L’habitude, oh le vilain mot !

    L’habitude, oh le vilain mot !

    L’habitude, oh le vilain mot ! Et pourtant n’est-ce pas elle que nous guettons, appelons de nos vœux chaque seconde ?  Non ? en fait si, je m’explique… Imaginons nous dans le Grand Canyon, des plumes […]

  • Le designer est un tueur d’idées

    Le designer est un tueur d’idées

    « Il faut toujours avoir deux idées, l’une pour tuer l’autre » (George Braque) Qui n’a pas connu le galop du jeune créatif : « j’ai une idée ça y est je fonce ! » Ou […]

  • Veille : pour nous d’abord !

    Veille : pour nous d’abord !

    1.30mn de lecture sur l’actualité de la création en communication.    Notre regard : culture, luxe et innovation Pour notre activité, nous réalisons quotidiennement un travail de veille sur l’actualité de la création en […]

  • Application du Monde : « La Matinale »

    Application du Monde : « La Matinale »

    8h35, Paris. J’attends sur le quai. Mon trajet quotidien est sous-terrain, ce monde où la connection au Dieu Internet est tout à fait aléatoire.    Comme beaucoup de mes voisins, je lance mes applis […]

  • Futur en seine : humain & innovation numérique ?

    Futur en seine : humain & innovation numérique ?

    Vite vite vite… à vos agendas : un beau festival sur l’innovation numérique! Paris. 11 au 21 juin. Vous aviez rêvé vous rendre au SXSW mais le prix du billet pour Austin vous a fait […]

  • Designers : réfléchissez, et tout ira bien ?

    Designers : réfléchissez, et tout ira bien ?

    Un plan ne se déroule jamais sans accroc, n’en déplaise à John Hannibal Smith. Le monde des idées, même s’il est propulsé par les esprits le plus brillants n’est pas réel. Ces idées vivent […]