{"id":6213,"date":"2018-05-02T10:30:14","date_gmt":"2018-05-02T08:30:14","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=6213"},"modified":"2025-08-20T17:22:40","modified_gmt":"2025-08-20T15:22:40","slug":"utiliser-atomic-design","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/","title":{"rendered":"Atomic Design : 8 bonnes raisons de l’utiliser"},"content":{"rendered":"

Pour l’article d’aujourd’hui, nous allons parler chimie.<\/p>\n

Non, non, ne vous enfuyez pas pour relire votre tableau des \u00e9l\u00e9ments. Il s’agit de chimie appliqu\u00e9e \u00e0 la construction de site internet. Et vous allez voir : il n’y a rien de plus simple.<\/p>\n

Qu’est-ce que l’atomic design ?<\/h2>\n

Dans ” atomic “, comme vous le soup\u00e7onnez, il va \u00eatre un peu question des atomes. C’est-\u00e0-dire d’un d\u00e9coupage du design d’une page web<\/a> en le plus petit \u00e9l\u00e9ment possible.<\/p>\n

Par exemple, prenons une couleur. Ou une typographie. Ce sera l’atome. Difficile en effet de r\u00e9duire encore ces \u00e9l\u00e9ments. Reliez plusieurs atomes entre eux, et vous obtenez une mol\u00e9cule.<\/p>\n

Par exemple : la mol\u00e9cule ” champ de recherche ” comprendra les atomes : label + champ de saisie + picto loupe.<\/p>\n

\"Exemple<\/p>\n

L’assemblage de plusieurs mol\u00e9cules (ou de celles-ci avec des atomes) cr\u00e9e un organisme. Ainsi, un cadre d’inscription \u00e0 une newsletter contiendrait un champ de saisie + un CTA + du contenu \u00e9ditorial.<\/p>\n

Revenez au design en pr\u00e9sentant ces organismes sous forme de templates, sans contenus, qui ont pour objectif de v\u00e9rifier l’organisation et la hi\u00e9rarchie des organismes et de tester leur aspect responsive.<\/p>\n

L’\u00e9tape suivante est la page, o\u00f9 les templates sont remplis de contenus.<\/p>\n

Maintenant que vous connaissez un peu mieux ce concept, cr\u00e9\u00e9 par Brad Frost, vous vous demandez certainement pourquoi nous vous en parlons.<\/p>\n

\"Processus
Source : Justinmind.com<\/a><\/figcaption><\/figure>\n

1. La combinaison des diff\u00e9rents \u00e9l\u00e9ments est facilit\u00e9e<\/h3>\n

En partant du plus simple \u00e9l\u00e9ment, et en d\u00e9finissant d\u00e8s le d\u00e9part que vos images, par exemple, seront syst\u00e9matiquement de format carr\u00e9 (un atome), il est beaucoup plus rapide de pr\u00e9parer vos templates<\/a> en reproduisant syst\u00e9matiquement ces \u00e9l\u00e9ments partout o\u00f9 vous en aurez besoin.<\/p>\n

2. Vous obtiendrez imm\u00e9diatement un cahier des charges<\/h3>\n

Ces atomes, ces mol\u00e9cules, qui sont destin\u00e9s \u00e0 \u00eatre int\u00e9gr\u00e9s sur tout le site, constituent presque une charte graphique.<\/p>\n

Vous n’aurez qu’\u00e0 les reprendre pour cr\u00e9er de nouvelles pages tout en respectant la pr\u00e9sentation initiale.<\/p>\n

3. Le codage est facilit\u00e9<\/h3>\n

La documentation initiale, qui pr\u00e9c\u00e8de la cr\u00e9ation du site, permet d’obtenir des r\u00e9f\u00e9rences simples \u00e0 retrouver, et \u00e0 appliquer, \u00e0 toutes les pages.<\/p>\n

Les lignes de codage sont donc r\u00e9duites et plus lisibles, parce qu’il y a moins de recherches pour chacune d’entre elles.<\/p>\n

Vous pouvez m\u00eame utiliser Pattern Lab<\/a> pour cr\u00e9er votre biblioth\u00e8que de codage, pour gagner encore du temps pour la suite (visionnez la d\u00e9mo pour mieux comprendre le d\u00e9coupage).<\/p>\n

\"Atomic<\/p>\n

4. Des mises \u00e0 jour et transformation facilit\u00e9es<\/h3>\n

Si vous avez int\u00e9gr\u00e9 le m\u00eame code source pour des blocs identiques, puisant dans votre biblioth\u00e8que d’atomes, il suffit de modifier une fois ce dernier pour que la transformation s’effectue sur l’ensemble des pages du site. Un gain de temps certain !<\/p>\n

D’ailleurs, les atomes doivent pouvoir changer en fonction du contexte et des tendances<\/a>. C’est ainsi que votre site sera vivant.<\/p>\n

5. Moins de composants = plus de constances<\/h3>\n

En s’appuyant sur les atomes existants, et en cr\u00e9ant uniquement ceux qui sont r\u00e9ellement n\u00e9cessaires, le site pr\u00e9sentera plus d’uniformit\u00e9.<\/p>\n

Le r\u00e9sultat sera plus clair, plus r\u00e9gulier\u2026 et donc plus professionnel.<\/p>\n

6. Des interfaces qui s’adaptent encore mieux \u00e0 tous les \u00e9crans<\/h3>\n

L’atomic design permet de pr\u00e9voir beaucoup plus rapidement des sites responsive<\/a>, aussi efficaces sur des murs interactifs utilis\u00e9s lors d’\u00e9v\u00e9nements que sur les plus petits \u00e9crans de smartphones.<\/p>\n

7. Le travail collaboratif est favoris\u00e9<\/h3>\n

Ces atomes et ces mol\u00e9cules sont nettement plus faciles \u00e0 partager entre les diff\u00e9rentes personnes qui peuvent travailler sur un site, du designer au d\u00e9veloppeur front. Tout le monde parle le m\u00eame langage et utilise la m\u00eame base.<\/p>\n

Le plug-in Craft<\/a> vous permet de partager votre librairie d’atomes avec leurs caract\u00e9ristiques CSS.<\/p>\n

\n

Craft Official<\/a> from InVision<\/a> on Vimeo<\/a>.<\/p>\n

8. Vous avez toutes les pi\u00e8ces en main pour cr\u00e9er votre puzzle<\/h3>\n

Plut\u00f4t que de concevoir votre site comme un puzzle, page apr\u00e8s page, vous n’avez plus qu’\u00e0 associer des \u00e9l\u00e9ments entre eux. En ayant toutes les pi\u00e8ces en main, bien rang\u00e9es par couleur et par formes, d\u00e8s le d\u00e9part.<\/p>\n

L’atomic design est \u00e9videmment plus facile \u00e0 utiliser s’il est appliqu\u00e9 d\u00e8s la phase de cr\u00e9ation d’un site.<\/p>\n

Mais rien ne vous interdit de transformer petit \u00e0 petit un site existant en cr\u00e9ant cette banque d’atomes au fur et \u00e0 mesure.<\/p>\n

Au final, vous y gagnerez toujours du temps.<\/p>\n","protected":false},"excerpt":{"rendered":"

Pour l’article d’aujourd’hui, nous allons parler chimie. Non, non, ne vous enfuyez pas pour relire votre tableau des \u00e9l\u00e9ments. Il s’agit de chimie appliqu\u00e9e \u00e0 la construction de site internet. Et vous allez voir : il n’y a rien de plus simple. Qu’est-ce que l’atomic design ? Dans ” atomic “, comme vous le soup\u00e7onnez, il va […]<\/p>\n","protected":false},"author":5,"featured_media":6216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-6213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"acf":[],"yoast_head":"\nAtomic Design : 8 bonnes raisons de l'utiliser - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Pour l'article d'aujourd'hui, nous allons parler chimie. Non, non, ne vous enfuyez pas pour relire votre tableau des \u00e9l\u00e9ments. Il s'agit de chimie\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Atomic Design : 8 bonnes raisons de l'utiliser - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Pour l'article d'aujourd'hui, nous allons parler chimie. Non, non, ne vous enfuyez pas pour relire votre tableau des \u00e9l\u00e9ments. Il s'agit de chimie\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-02T08:30:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:22:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/04\/graphiste-atomic-design-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#\\\/schema\\\/person\\\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"Atomic Design : 8 bonnes raisons de l’utiliser\",\"datePublished\":\"2018-05-02T08:30:14+00:00\",\"dateModified\":\"2025-08-20T15:22:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/\"},\"wordCount\":801,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2018\\\/04\\\/graphiste-atomic-design-1.png\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/\",\"name\":\"Atomic Design : 8 bonnes raisons de l'utiliser - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2018\\\/04\\\/graphiste-atomic-design-1.png\",\"datePublished\":\"2018-05-02T08:30:14+00:00\",\"dateModified\":\"2025-08-20T15:22:40+00:00\",\"description\":\"Pour l'article d'aujourd'hui, nous allons parler chimie. Non, non, ne vous enfuyez pas pour relire votre tableau des \u00e9l\u00e9ments. Il s'agit de chimie\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2018\\\/04\\\/graphiste-atomic-design-1.png\",\"contentUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2018\\\/04\\\/graphiste-atomic-design-1.png\",\"width\":850,\"height\":423,\"caption\":\"Atomic Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/utiliser-atomic-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/webdesign\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Atomic Design : 8 bonnes raisons de l’utiliser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2022\\\/07\\\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2022\\\/07\\\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/graphistesfreelances\",\"https:\\\/\\\/x.com\\\/Graphistecom\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/graphiste-com\\\/\",\"https:\\\/\\\/fr.pinterest.com\\\/Graphiste_Com\",\"https:\\\/\\\/www.instagram.com\\\/graphiste_com\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/#\\\/schema\\\/person\\\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/thomaslazzaroni\\\/\",\"https:\\\/\\\/x.com\\\/totolazza\"],\"url\":\"https:\\\/\\\/graphiste.com\\\/blog\\\/author\\\/thomas\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Atomic Design : 8 bonnes raisons de l'utiliser - Graphiste Blog","description":"Pour l'article d'aujourd'hui, nous allons parler chimie. Non, non, ne vous enfuyez pas pour relire votre tableau des \u00e9l\u00e9ments. Il s'agit de chimie","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/","og_locale":"fr_FR","og_type":"article","og_title":"Atomic Design : 8 bonnes raisons de l'utiliser - Graphiste Blog","og_description":"Pour l'article d'aujourd'hui, nous allons parler chimie. Non, non, ne vous enfuyez pas pour relire votre tableau des \u00e9l\u00e9ments. Il s'agit de chimie","og_url":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2018-05-02T08:30:14+00:00","article_modified_time":"2025-08-20T15:22:40+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/04\/graphiste-atomic-design-1.png","type":"image\/png"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"Atomic Design : 8 bonnes raisons de l’utiliser","datePublished":"2018-05-02T08:30:14+00:00","dateModified":"2025-08-20T15:22:40+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/"},"wordCount":801,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/04\/graphiste-atomic-design-1.png","articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/","url":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/","name":"Atomic Design : 8 bonnes raisons de l'utiliser - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/04\/graphiste-atomic-design-1.png","datePublished":"2018-05-02T08:30:14+00:00","dateModified":"2025-08-20T15:22:40+00:00","description":"Pour l'article d'aujourd'hui, nous allons parler chimie. Non, non, ne vous enfuyez pas pour relire votre tableau des \u00e9l\u00e9ments. Il s'agit de chimie","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/04\/graphiste-atomic-design-1.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/04\/graphiste-atomic-design-1.png","width":850,"height":423,"caption":"Atomic Design"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/utiliser-atomic-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"Atomic Design : 8 bonnes raisons de l’utiliser"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/6213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=6213"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/6213\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/6216"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=6213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=6213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=6213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}