{"id":20769,"date":"2017-04-09T02:21:45","date_gmt":"2017-04-09T02:21:45","guid":{"rendered":"https:\/\/codewebbarcelona.com\/diseno-web-ilustracion\/"},"modified":"2026-04-20T22:33:13","modified_gmt":"2026-04-20T22:33:13","slug":"web-design-illustration","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/","title":{"rendered":"Web Design and Illustration Examples"},"content":{"rendered":"<p><strong>Web design and illustration<\/strong>: we already covered this topic in a previous post (<a href=\"http:\/\/codewebbarcelona.com\/blog\/ilustracion-y-diseno-web\/\">See post<\/a>).<\/p>\n<p>It\u2019s a trend that\u2019s gaining momentum. Incorporating illustrated elements into a <strong>website<\/strong> can bring a more natural or \u201chandmade\u201d feel, helping us connect more deeply with users. In the often cold digital environment, these artistic touches add character to the overall <strong>web design<\/strong>. Since art is one of the most powerful ways to evoke emotion, you can be sure your audience will be captivated.<\/p>\n<p>Below are some outstanding examples of <strong>illustration in web design<\/strong> that we find truly inspiring.<\/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>Stunning <strong>illustrations<\/strong> combined with photography showcase luxury apartments in a beautifully restored building in Russia. The website tells the story of the property and features interior shots highlighting its elegant finishes. The <strong>watercolor illustrations<\/strong> blend seamlessly with animations created using jQuery and 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>This <strong>website<\/strong> raises awareness about elephant protection through four illustrated stories, making the reading experience much more engaging for visitors.<\/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>An animated infographic that unfolds as you scroll, explaining the practices of the Bank of England and their impact on society. The animated illustrations guide users throughout, making the interactive journey of the <strong>web design<\/strong> both informative and enjoyable.<\/p>\n<p>&nbsp;<\/p>\n<h2>4.\u00a0Pablo 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>A playful and original 3D experience built from a lively illustration. This charming <strong>web animation<\/strong> was developed using various JavaScript libraries that leverage canvas, such as Three.js.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web design and illustration: we already covered this topic in a previous post (See post). It\u2019s a trend that\u2019s gaining momentum. Incorporating illustrated elements into a website can bring a more natural or \u201chandmade\u201d feel, helping us connect more deeply with users. In the often cold digital environment, these artistic touches add character to the [&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":[208,210,134],"class_list":["post-20769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-desenvolupament-web","category-inspiracio","category-disseny-grafic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - 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\/en\/blog\/web-design-illustration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\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\/en\/blog\/web-design-illustration\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-09T02:21:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T22:33:13+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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Web Design and Illustration Examples\",\"datePublished\":\"2017-04-09T02:21:45+00:00\",\"dateModified\":\"2026-04-20T22:33:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/\"},\"wordCount\":251,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg\",\"articleSection\":[\"Disseny i desenvolupament web\",\"Inspiraci\u00f3\",\"Dise\u00f1o gr\u00e1fico\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/\",\"name\":\"Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-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-04-20T22:33:13+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/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\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-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\/en\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\/en\/blog\/web-design-illustration\/","og_locale":"en_US","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\/en\/blog\/web-design-illustration\/","og_site_name":"Code Barcelona","article_published_time":"2017-04-09T02:21:45+00:00","article_modified_time":"2026-04-20T22:33:13+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":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Web Design and Illustration Examples","datePublished":"2017-04-09T02:21:45+00:00","dateModified":"2026-04-20T22:33:13+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/"},"wordCount":251,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg","articleSection":["Disseny i desenvolupament web","Inspiraci\u00f3","Dise\u00f1o gr\u00e1fico"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/","url":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/","name":"Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-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-04-20T22:33:13+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/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":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/blog\/web-design-illustration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-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\/en\/#website","url":"https:\/\/codewebbarcelona.com\/en\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/wp-json\/wp\/v2\/posts\/20769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=20769"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20769\/revisions"}],"predecessor-version":[{"id":20780,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20769\/revisions\/20780"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/4272"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=20769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=20769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}