{"id":47815,"date":"2017-04-09T02:21:45","date_gmt":"2017-04-09T02:21:45","guid":{"rendered":"https:\/\/codewebbarcelona.com\/diseno-web-ilustracion\/"},"modified":"2026-06-10T10:43:37","modified_gmt":"2026-06-10T10:43:37","slug":"exemples-design-web-illustration","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/","title":{"rendered":"Exemples de design web et d\u2019illustration"},"content":{"rendered":"<p><strong>Web design et illustration<\/strong> : nous en avions d\u00e9j\u00e0 parl\u00e9 dans un pr\u00e9c\u00e9dent article (<a href=\"http:\/\/codewebbarcelona.com\/blog\/ilustracion-y-diseno-web\/\">Voir l\u2019article<\/a>).<\/p>\n<p>Cette approche prend de plus en plus d\u2019ampleur et s\u2019impose aujourd\u2019hui comme une v\u00e9ritable tendance. Elle permet de ramener une touche de naturel ou de \u00ab fait main \u00bb et de cr\u00e9er une connexion plus authentique avec l\u2019utilisateur. Sur un support digital, parfois per\u00e7u comme froid, comme peut l\u2019\u00eatre une <strong>page web<\/strong>, l\u2019int\u00e9gration d\u2019\u00e9l\u00e9ments illustr\u00e9s insuffle une dimension artistique \u00e0 l\u2019ensemble du <strong>web design<\/strong>. Puisque l\u2019art est un vecteur d\u2019\u00e9motions par excellence, vous pouvez \u00eatre certain que votre audience sera captiv\u00e9e.<\/p>\n<p>Voici quelques exemples d\u2019<strong>illustrations int\u00e9gr\u00e9es au web design<\/strong> qui nous ont particuli\u00e8rement inspir\u00e9s et qui constituent une belle source d\u2019id\u00e9es.<\/p>\n<p>&nbsp;<\/p>\n<h2>1. House at Khlebny<\/h2>\n<p><a href=\"http:\/\/hleb-dom.ru\/en\/\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" class=\"alignnone wp-image-617 size-large\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-ilustracion-1024x595-2.jpg\" alt=\"dise\u00f1o web e ilustraci\u00f3n\" width=\"1024\" height=\"595\" \/><\/a><\/p>\n<p>Des <strong>illustrations<\/strong> remarquables associ\u00e9es \u00e0 la photographie pour promouvoir la vente d\u2019appartements de luxe dans un immeuble soigneusement restaur\u00e9, situ\u00e9 en Russie. Le site raconte l\u2019histoire du b\u00e2timent tout en d\u00e9voilant des vues int\u00e9rieures et des finitions haut de gamme. L\u2019<strong>illustration \u00e0 l\u2019aquarelle<\/strong> s\u2019accorde parfaitement avec les animations r\u00e9alis\u00e9es en jquery et css.<\/p>\n<p>&nbsp;<\/p>\n<h2>2. The Grey Tales<\/h2>\n<p><a href=\"http:\/\/thegreytales.net\/en\/\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" class=\"alignnone wp-image-618 size-large\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-ilustracion-2-1024x504-2.jpg\" alt=\"dise\u00f1o web e ilustraci\u00f3n 2\" width=\"1024\" height=\"504\" \/><\/a><\/p>\n<p>Ce <strong>site web<\/strong> sensibilise \u00e0 la protection des \u00e9l\u00e9phants \u00e0 travers quatre histoires illustr\u00e9es, rendant la lecture bien plus agr\u00e9able et engageante pour l\u2019utilisateur.<\/p>\n<p>&nbsp;<\/p>\n<h2>3. What Does the Bank do?<\/h2>\n<p><a href=\"http:\/\/edu.bankofengland.co.uk\/knowledgebank\/interactive\/what-the-bank-does\/\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" class=\"alignnone size-full wp-image-619\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-ilustracion-3-1.jpg\" alt=\"dise\u00f1o web e ilustraci\u00f3n 3\" width=\"918\" height=\"656\" \/><\/a><\/p>\n<p>Une infographie anim\u00e9e au fil du scroll qui explique le fonctionnement de la Banque d\u2019Angleterre et son impact sur la soci\u00e9t\u00e9. Les illustrations dynamiques accompagnent et guident l\u2019utilisateur tout au long de l\u2019exp\u00e9rience, rendant la navigation plus fluide et interactive dans l\u2019ensemble du <strong>web design<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<h2>4. Pablo the flamingo<\/h2>\n<p><a href=\"http:\/\/pablotheflamingo.com\/\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" class=\"alignnone size-large wp-image-620\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseC3B1o-web-ilustracion-4-1024x502-2.png\" alt=\"dise\u00f1o web e ilustraci\u00f3n 4\" width=\"1024\" height=\"502\" \/><\/a><\/p>\n<p>Une exp\u00e9rience 3D originale et ludique, con\u00e7ue \u00e0 partir d\u2019une illustration pleine de dynamisme. Cette <strong>animation web<\/strong> attachante a \u00e9t\u00e9 d\u00e9velopp\u00e9e \u00e0 l\u2019aide de diff\u00e9rentes biblioth\u00e8ques javascript exploitant le canvas, telles que Three.js.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web design et illustration : nous en avions d\u00e9j\u00e0 parl\u00e9 dans un pr\u00e9c\u00e9dent article (Voir l\u2019article). Cette approche prend de plus en plus d\u2019ampleur et s\u2019impose aujourd\u2019hui comme une v\u00e9ritable tendance. Elle permet de ramener une touche de naturel ou de \u00ab fait main \u00bb et de cr\u00e9er une connexion plus authentique avec l\u2019utilisateur. Sur [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4272,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[494,495,497],"class_list":["post-47815","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-graphique","category-conception-developpement-web","category-inspiration"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.<\/title>\n<meta name=\"description\" content=\"Una selecci\u00f3n de dise\u00f1os web apoyados de elementos ilustrados. Haciendo uso de animaciones, se consigue un dise\u00f1o web mucho m\u00e1s interactivo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.\" \/>\n<meta property=\"og:description\" content=\"Una selecci\u00f3n de dise\u00f1os web apoyados de elementos ilustrados. Haciendo uso de animaciones, se consigue un dise\u00f1o web mucho m\u00e1s interactivo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/\" \/>\n<meta property=\"og:site_name\" content=\"CODE\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-09T02:21:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-10T10:43:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1290\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Exemples de design web et d\u2019illustration\",\"datePublished\":\"2017-04-09T02:21:45+00:00\",\"dateModified\":\"2026-06-10T10:43:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/\"},\"wordCount\":348,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg\",\"articleSection\":[\"Design graphique\",\"Conception et d\u00e9veloppement web\",\"Inspiration\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/\",\"name\":\"Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg\",\"datePublished\":\"2017-04-09T02:21:45+00:00\",\"dateModified\":\"2026-06-10T10:43:37+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Una selecci\u00f3n de dise\u00f1os web apoyados de elementos ilustrados. Haciendo uso de animaciones, se consigue un dise\u00f1o web mucho m\u00e1s interactivo.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/exemples-design-web-illustration\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg\",\"contentUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg\",\"width\":1290,\"height\":750},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/\",\"name\":\"CODE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/fr\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\\\/\\\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.","description":"Una selecci\u00f3n de dise\u00f1os web apoyados de elementos ilustrados. Haciendo uso de animaciones, se consigue un dise\u00f1o web mucho m\u00e1s interactivo.","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:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/","og_locale":"fr_FR","og_type":"article","og_title":"Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.","og_description":"Una selecci\u00f3n de dise\u00f1os web apoyados de elementos ilustrados. Haciendo uso de animaciones, se consigue un dise\u00f1o web mucho m\u00e1s interactivo.","og_url":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/","og_site_name":"CODE","article_published_time":"2017-04-09T02:21:45+00:00","article_modified_time":"2026-06-10T10:43:37+00:00","og_image":[{"width":1290,"height":750,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/fr\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Exemples de design web et d\u2019illustration","datePublished":"2017-04-09T02:21:45+00:00","dateModified":"2026-06-10T10:43:37+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/"},"wordCount":348,"image":{"@id":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg","articleSection":["Design graphique","Conception et d\u00e9veloppement web","Inspiration"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/","url":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/","name":"Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg","datePublished":"2017-04-09T02:21:45+00:00","dateModified":"2026-06-10T10:43:37+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/fr\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Una selecci\u00f3n de dise\u00f1os web apoyados de elementos ilustrados. Haciendo uso de animaciones, se consigue un dise\u00f1o web mucho m\u00e1s interactivo.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/codewebbarcelona.com\/fr\/exemples-design-web-illustration\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg","width":1290,"height":750},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/fr\/#website","url":"https:\/\/codewebbarcelona.com\/fr\/","name":"CODE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/fr\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/posts\/47815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/comments?post=47815"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/posts\/47815\/revisions"}],"predecessor-version":[{"id":47826,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/posts\/47815\/revisions\/47826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/media\/4272"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/media?parent=47815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/fr\/wp-json\/wp\/v2\/categories?post=47815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}