{"id":88495,"date":"2017-04-09T02:21:45","date_gmt":"2017-04-09T02:21:45","guid":{"rendered":"https:\/\/codewebbarcelona.com\/diseno-web-ilustracion\/"},"modified":"2026-06-11T07:45:11","modified_gmt":"2026-06-11T07:45:11","slug":"webdesign-illustration","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/de\/webdesign-illustration\/","title":{"rendered":"Beispiele f\u00fcr Webdesign und Illustration"},"content":{"rendered":"<p><strong>Webdesign und Illustration<\/strong>:\u00a0Dar\u00fcber haben wir bereits vor einigen Monaten in einem anderen Beitrag gesprochen (<a href=\"http:\/\/codewebbarcelona.com\/blog\/ilustracion-y-diseno-web\/\">Beitrag ansehen<\/a>).<\/p>\n<p>Das Thema gewinnt zunehmend an Bedeutung und ist inzwischen zu einem echten Trend geworden. Vielleicht ist es eine M\u00f6glichkeit, digitalen Auftritten mehr Nat\u00fcrlichkeit oder einen \u201ehandmade\u201c-Charakter zu verleihen und so eine tiefere Verbindung zum Nutzer aufzubauen. Denn in einem digitalen Medium, das mitunter etwas k\u00fchl wirken kann \u2013 wie eine <strong>Website<\/strong> \u2013, verleihen illustrierte Elemente dem gesamten <strong>Webdesign<\/strong> eine k\u00fcnstlerische Note. Und da Kunst seit jeher eines der wirkungsvollsten Mittel ist, um Emotionen zu erzeugen, k\u00f6nnt ihr sicher sein, dass wir damit unser Publikum fesseln.<\/p>\n<p>Im Folgenden zeigen wir einige Beispiele f\u00fcr <strong>Illustrationen im Webdesign<\/strong>, die uns besonders begeistert haben und eine wertvolle Inspirationsquelle darstellen.<\/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>Beeindruckende <strong>Illustrationen<\/strong>, kombiniert mit Fotografie, f\u00fcr die Vermarktung von Luxusapartments in einem sorgf\u00e4ltig restaurierten Geb\u00e4udekomplex in Russland. Daf\u00fcr wird die Geschichte des Geb\u00e4udes erz\u00e4hlt und durch verschiedene Innenaufnahmen mit hochwertigen Ausstattungsdetails erg\u00e4nzt. Die <strong>in Aquarelltechnik umgesetzte Illustration<\/strong> harmoniert perfekt mit den Animationen, die mit jQuery und CSS realisiert wurden.<\/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>Auf dieser <strong>Website<\/strong> wird anhand von vier erz\u00e4hlten und durch <strong>Illustrationen<\/strong> unterst\u00fctzten Geschichten auf die Bedeutung des Schutzes von Elefanten aufmerksam gemacht. Das macht die Lekt\u00fcre f\u00fcr die Nutzer deutlich angenehmer und zug\u00e4nglicher.<\/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>Eine beim Herunterscrollen animierte Infografik, die in diesem Fall die Aufgaben der Bank of England und deren Auswirkungen auf die Gesellschaft erkl\u00e4rt. Die animierten Illustrationen unterst\u00fctzen und f\u00fchren den Betrachter w\u00e4hrend des gesamten Ablaufs und machen die interaktive Reise innerhalb des <strong>Webdesigns<\/strong> deutlich kurzweiliger.<\/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>Ein originelles und unterhaltsames 3D-Erlebnis, das aus einer schwungvollen Illustration entstanden ist. Diese sympathische <strong>Webanimation<\/strong> wurde mit verschiedenen JavaScript-Bibliotheken entwickelt, die Canvas nutzen, darunter Three.js.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Webdesign und Illustration:\u00a0Dar\u00fcber haben wir bereits vor einigen Monaten in einem anderen Beitrag gesprochen (Beitrag ansehen). Das Thema gewinnt zunehmend an Bedeutung und ist inzwischen zu einem echten Trend geworden. Vielleicht ist es eine M\u00f6glichkeit, digitalen Auftritten mehr Nat\u00fcrlichkeit oder einen \u201ehandmade\u201c-Charakter zu verleihen und so eine tiefere Verbindung zum Nutzer aufzubauen. Denn in einem [&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":[686,651,658],"class_list":["post-88495","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration","category-grafikdesign","category-webdesign-webentwicklung"],"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\/de\/webdesign-illustration\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/webdesign-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-11T07:45:11+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\\\/de\\\/webdesign-illustration\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-illustration\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Beispiele f\u00fcr Webdesign und Illustration\",\"datePublished\":\"2017-04-09T02:21:45+00:00\",\"dateModified\":\"2026-06-11T07:45:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-illustration\\\/\"},\"wordCount\":322,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-illustration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg\",\"articleSection\":[\"Inspiration\",\"Grafikdesign\",\"Webdesign und -entwicklung\"],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-illustration\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-illustration\\\/\",\"name\":\"Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-illustration\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-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-11T07:45:11+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/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\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-illustration\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-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\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/\",\"name\":\"CODE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@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\/de\/webdesign-illustration\/","og_locale":"de_DE","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\/de\/webdesign-illustration\/","og_site_name":"CODE","article_published_time":"2017-04-09T02:21:45+00:00","article_modified_time":"2026-06-11T07:45:11+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\/de\/webdesign-illustration\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-illustration\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Beispiele f\u00fcr Webdesign und Illustration","datePublished":"2017-04-09T02:21:45+00:00","dateModified":"2026-06-11T07:45:11+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-illustration\/"},"wordCount":322,"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-illustration\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/ejemplos-de-diseno-web-e-ilustracion-featured.jpg","articleSection":["Inspiration","Grafikdesign","Webdesign und -entwicklung"],"inLanguage":"de-DE"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-illustration\/","url":"https:\/\/codewebbarcelona.com\/de\/webdesign-illustration\/","name":"Dise\u00f1o web e ilustraci\u00f3n. Inspiraci\u00f3n. Code dise\u00f1o web Barcelona.","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-illustration\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-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-11T07:45:11+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/de\/#\/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":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/de\/webdesign-illustration\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-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\/de\/#website","url":"https:\/\/codewebbarcelona.com\/de\/","name":"CODE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"de-DE","@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\/de\/wp-json\/wp\/v2\/posts\/88495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/comments?post=88495"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/88495\/revisions"}],"predecessor-version":[{"id":88513,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/88495\/revisions\/88513"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media\/4272"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media?parent=88495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/categories?post=88495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}