{"id":15910,"date":"2012-12-27T21:01:51","date_gmt":"2012-12-27T13:01:51","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15910"},"modified":"2023-06-29T14:32:14","modified_gmt":"2023-06-29T06:32:14","slug":"illustration-in-web-design-30-inspirational-examples","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/","title":{"rendered":"30 Inspirational Examples of Illustration in Web Design"},"content":{"rendered":"<p>There are many ways to give a website a unique look, but none is more effective than creating some awesome illustrated elements for it. <strong>Illustrations can give a lot of personality to the layout of your website<\/strong>, provided that you know how to use them properly.<\/p>\n<p>It doesn\u2019t matter if it\u2019s a completely illustrated background, a <a href=\"https:\/\/www.hongkiat.com\/blog\/hand-drawn-fonts\/\">sketched font<\/a> or a hand-drawn <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/free-social-media-icon-sets-best-of\/\" rel=\"noopener\">icon<\/a>, it will provide your design with a unique feel as long as your approach towards inserting these elements in your design is correct.<\/p>\n<p>Today, we\u2019ll be sharing with you <strong>some awesome examples of illustrated elements in web design<\/strong>. Hopefully, they will inspire you in creating something unique for your own website or projects.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/60-beautiful-hand-drawn-web-design\/\" class=\"ref-block__link\" title=\"Read More: 50 Beautiful Hand-Drawn Web Design\" rel=\"bookmark\"><span class=\"screen-reader-text\">50 Beautiful Hand-Drawn Web Design<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/60-beautiful-hand-drawn-web-design.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-4423 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/60-beautiful-hand-drawn-web-design.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">50 Beautiful Hand-Drawn Web Design<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThis article was published on: Jun 3, 2009. Journeying back to the roots of design, many a web...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h3>Duct Tape & Glitter<\/h3>\n<p>It\u2019s a design studio so naturally these designers will want to create something unique to show off their skills. And usage of illustrated elements has surely helped their cause.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Duct-Tape-Glitter.jpg\" alt=\"Duct Tape & Glitter illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3>O3<\/h3>\n<p>Another design studio that uses illustrated backgrounds to increase the visual appeal of their website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/O3.jpg\" alt=\"03-illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/trentwalton.com\/2011\/07\/14\/content-choreography\/\">Trent Walton<\/a><\/h3>\n<p>Trent Walton uses both the illustrated background and hand-drawn icons to create a unique feel for its layout.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Trent-Walton.jpg\" alt=\"Trent Walton illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.postable.com\/\">Postable<\/a><\/h3>\n<p>Postable\u2019s hand drawn icons and stylish fonts are really binding together the layout of this website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Postable.jpg\" alt=\"Postable illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3>AppGear<\/h3>\n<p>The usage of some great illustrated graphics from their games is helping AppGear create a unique website for themselves.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/AppGear.jpg\" alt=\"illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3>Aggregift<\/h3>\n<p>Large illustrated graphics and hand-drawn icons make Aggregift an attractive website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Aggregift.jpg\" alt=\"Aggregift illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3>Sir John a Day<\/h3>\n<p>Top-notch illustrations and the fact that they are interactive makes visiting Sir John a Day an enjoyable experience.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Sir-John-a-Day.jpg\" alt=\"Sir John a Day illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/babeltheking.com\/eng\">Babel<\/a><\/h3>\n<p>Created for a young audience, Babel needed the illustrated elements to catch their imagination.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Babel.jpg\" alt=\"Babel illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.laika.com\/our-films\/paranorman\">ParaNorman<\/a><\/h3>\n<p>You will need illustrated elements in your website if you are trying to promote an animated movie, and that\u2019s exactly what ParaNorman did.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/ParaNorman.jpg\" alt=\"ParaNorman illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3>Impress A Penguin<\/h3>\n<p>An example of just how much can be achieved through proper usage and placement of illustrated elements.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Impress-A-Penguin.jpg\" alt=\"illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3>SoleilNoir<\/h3>\n<p>An excellent website with some great illustrated elements and a sketched font.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/SoleilNoir.jpg\" alt=\"SoleilNoir illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3>Luhse Tea<\/h3>\n<p>Custom font and illustrated elements make Luhse Tea a real eye candy.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Luhse-Tea.jpg\" alt=\"Luhse Tea illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3>inTacto 10 Years<\/h3>\n<p>With the help of its illustrated graphic, this website makes it easy for the user to know the achievements of inTact in the past decade.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/inTacto-10-Years.jpg\" alt=\"inTacto 10 Years illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3>Inspire Conference<\/h3>\n<p>This fully illustrated website is doing a great job in promoting the inspiring conference which will be held next month in Leiden, Netherlands.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Inspire-Conference.jpg\" alt=\"Inspire Conference illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3>Spokes<\/h3>\n<p>This one has everything you can ask for, illustrated background, a hand-drawn icon and custom font, but what makes it special is the proper placement of these elements.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Spokes.jpg\" alt=\"Spokes illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.evoenergy.co.uk\/solar-pv-carbon-offset-calculator\/\">UK Energy Consumption Guide<\/a><\/h3>\n<p>Illustrated elements makes explaining difficult statistics to an average user a lot easier, and this website is a perfect example of it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/UK-Energy-Consumption-Guide.jpg\" alt=\"UK Energy Consumption Guide illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3>Somos La Pera Limonera<\/h3>\n<p>This design studio uses some nice illustrations to create a fresh look for their website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Somos-La-Pera-Limonera.jpg\" alt=\"Somos La Pera Limonera illustration\" width=\"550\" height=\"350\"><\/figure>\n<h3>Muffi<\/h3>\n<p>The quality of the illustrated elements used in this website tells a lot about just how good this design studio is.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Muffi.jpg\" alt=\"Muffi illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.madebyshape.co.uk\/\">Shape<\/a><\/h3>\n<p>I guess design studios just love illustrations.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Shape.jpg\" alt=\"illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3>ConvergeSE<\/h3>\n<p>Another design conference promotion website using illustrated elements to attract the user\u2019s attention.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/ConvergeSE.jpg\" alt=\"ConvergeSE illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.wwf.org.uk\/custom\/foodstory\/\">WWF<\/a><\/h3>\n<p>Let\u2019s face it, most of us are not great readers. And guys at WWF understand that, so they used illustrated elements to convey their message.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/WWF.jpg\" alt=\"WWF illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3>The Great Bearded Reef<\/h3>\n<p>Josh Wilis surely knows how to promote himself.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/thegreatbeardedreef.jpg\" alt=\"The Great Bearded Reef illustration\" width=\"550\" height=\"313\"><\/figure>\n<h3>Boks Quiz<\/h3>\n<p>Illustrated elements can be a great asset for a website dealing with a young audience, take a look at Boks Quiz for proof of this statement.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Boks-Quiz.jpg\" alt=\"Boks Quiz illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3>The Hybrid4 Graphic Novel<\/h3>\n<p>This website has some of the most detailed illustrated graphics.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/The-Hybrid4-Graphic-Novel.jpg\" alt=\"The Hybrid4 Graphic Novel illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thesearethings.com\/\">These are Things<\/a><\/h3>\n<p>Awesome illustrations really, and they needed them as well, because they are selling their illustrated \u201cTHINGS\u201d through this website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/These-are-Things.jpg\" alt=\"These are Things illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/diy.org\/\">DIY<\/a><\/h3>\n<p>Illustrated backgrounds, hand drawn icons plus a nice approach towards the placement of these elements and you get a winner like DIY.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/DIY.jpg\" alt=\"DIY illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.alexbuga.is\/\" title=\"Alex Buga\">Alex Buga<\/a><\/h3>\n<p>By looking at the illustrated elements of his website, one can instantly know how good a designer Alex is.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/alexbuga.jpg\" alt=\"Alex Buga illustration\" width=\"550\" height=\"309\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.explanimate.com.au\/\">Explanimate<\/a><\/h3>\n<p>Another nearly completely illustrated website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Explanimate.jpg\" alt=\"Explanimate illustration\" width=\"550\" height=\"436\"><\/figure>\n<h3>More than Twenty<\/h3>\n<p>The illustrated background and the custom font creates a nice harmony in the layout of More than Twenty.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/More-than-Twenty.jpg\" alt=\"More than Twenty illustration\" width=\"550\" height=\"417\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pieoneers.com\/\" title=\"Pieoneers\">Pieoneers<\/a><\/h3>\n<p>Development studios are often not into illustrated elements, but when they do decide to use them the result can be as awesome as Pioneers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Pieoneers.jpg\" alt=\"Pieoneers illustration\" width=\"550\" height=\"345\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Discover 30 inspiring examples of how illustrations can enhance web design. Transform your website&#8217;s look and feel with these creative ideas.<\/p>\n","protected":false},"author":511,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2512],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>30 Inspirational Examples of Illustration in Web Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"Discover 30 inspiring examples of how illustrations can enhance web design. Transform your website&#039;s look and feel with these creative ideas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"30 Inspirational Examples of Illustration in Web Design\" \/>\n<meta property=\"og:description\" content=\"Discover 30 inspiring examples of how illustrations can enhance web design. Transform your website&#039;s look and feel with these creative ideas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-12-27T13:01:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-29T06:32:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Duct-Tape-Glitter.jpg\" \/>\n<meta name=\"author\" content=\"Babar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Babar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/\"},\"author\":{\"name\":\"Babar\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/9c298c8723e329e744a6a3dfc640cdcd\"},\"headline\":\"30 Inspirational Examples of Illustration in Web Design\",\"datePublished\":\"2012-12-27T13:01:51+00:00\",\"dateModified\":\"2023-06-29T06:32:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/\"},\"wordCount\":723,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/illustration-in-web-design\\\/Duct-Tape-Glitter.jpg\",\"keywords\":[\"Website Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/\",\"name\":\"30 Inspirational Examples of Illustration in Web Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/illustration-in-web-design\\\/Duct-Tape-Glitter.jpg\",\"datePublished\":\"2012-12-27T13:01:51+00:00\",\"dateModified\":\"2023-06-29T06:32:14+00:00\",\"description\":\"Discover 30 inspiring examples of how illustrations can enhance web design. Transform your website's look and feel with these creative ideas.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/illustration-in-web-design\\\/Duct-Tape-Glitter.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/illustration-in-web-design\\\/Duct-Tape-Glitter.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/illustration-in-web-design-30-inspirational-examples\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"30 Inspirational Examples of Illustration in Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/9c298c8723e329e744a6a3dfc640cdcd\",\"name\":\"Babar\",\"description\":\"Babar is a freelance designer from Pakistan who specializes in Website and Interface design.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/babar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"30 Inspirational Examples of Illustration in Web Design - Hongkiat","description":"Discover 30 inspiring examples of how illustrations can enhance web design. Transform your website's look and feel with these creative ideas.","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:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/","og_locale":"en_US","og_type":"article","og_title":"30 Inspirational Examples of Illustration in Web Design","og_description":"Discover 30 inspiring examples of how illustrations can enhance web design. Transform your website's look and feel with these creative ideas.","og_url":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-12-27T13:01:51+00:00","article_modified_time":"2023-06-29T06:32:14+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Duct-Tape-Glitter.jpg","type":"","width":"","height":""}],"author":"Babar","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Babar","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/"},"author":{"name":"Babar","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/9c298c8723e329e744a6a3dfc640cdcd"},"headline":"30 Inspirational Examples of Illustration in Web Design","datePublished":"2012-12-27T13:01:51+00:00","dateModified":"2023-06-29T06:32:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/"},"wordCount":723,"commentCount":20,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Duct-Tape-Glitter.jpg","keywords":["Website Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/","url":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/","name":"30 Inspirational Examples of Illustration in Web Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Duct-Tape-Glitter.jpg","datePublished":"2012-12-27T13:01:51+00:00","dateModified":"2023-06-29T06:32:14+00:00","description":"Discover 30 inspiring examples of how illustrations can enhance web design. Transform your website's look and feel with these creative ideas.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Duct-Tape-Glitter.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/illustration-in-web-design\/Duct-Tape-Glitter.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/illustration-in-web-design-30-inspirational-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"30 Inspirational Examples of Illustration in Web Design"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/9c298c8723e329e744a6a3dfc640cdcd","name":"Babar","description":"Babar is a freelance designer from Pakistan who specializes in Website and Interface design.","url":"https:\/\/www.hongkiat.com\/blog\/author\/babar\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-48C","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/511"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15910"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15910\/revisions"}],"predecessor-version":[{"id":67885,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15910\/revisions\/67885"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15910"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}