{"id":28624,"date":"2021-08-20T15:00:22","date_gmt":"2021-08-20T13:00:22","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=28624"},"modified":"2023-08-21T10:12:00","modified_gmt":"2023-08-21T08:12:00","slug":"examples-of-websites-with-illustrations","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/examples-of-websites-with-illustrations\/","title":{"rendered":"19 Websites that Flawlessly Integrate Illustrations into Their Design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]We humans are hardwired to love visuals. In fact, scientists say that more than half of our brain is devoted to processing visual information. This is something that many brands try to monetize. That\u2019s why they rely so heavily on beautiful visuals to present themselves, capture the viewer\u2019s attention, and turn visitors into customers.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When it comes to crafting a unique visual identity for a brand, many companies choose illustrations over photographs. They prefer sharing their story and presenting their services as well as the personality of their business through customized drawings that allow them to offer a fresh and one-of-a-kind visual experience to the viewer.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Brands also rely on illustrations when they wish to add a bit of fun to their websites, clarify concepts, express abstract ideas, create immersive storytelling experiences, and visualize data. To do all that in a particularly engaging fashion and increase the appeal of their illustrations, designers often combine drawings with terrific animations. Just check out some of the <a href=\"https:\/\/qodeinteractive.com\/theme-tag\/illustration-wordpress-themes\">best illustration WordPress themes<\/a>, for example, and you&#8217;ll get the idea. A clever combination of beautiful illustrations and great effects is a surefire way of capturing the users\u2019 attention and enticing them to spend more time on a site. And if you don&#8217;t have your own, there are tons of <a href=\"https:\/\/qodeinteractive.com\/magazine\/websites-for-downloading-illustrations\/\">websites you can download illustrations from<\/a>. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we would like to show you how powerful illustrations can be and how they can help brands become more recognizable and easier to distinguish from competitors. The websites we will introduce you to are unique, endlessly imaginative and memorable, presenting their respective brands in the finest light. The sites we will talk about include:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#brandstudio\">BrandStudio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#who-cares\">Who Cares?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#mama-joyces-peppa-sauce\">Mama Joyce\u2019s Peppa Sauce<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#genesis\">Genesis<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#samuel-day\">Samuel Day<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#tarot-o-bot\">Tarot-o-Bot<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#meplace-nursery\">MEplace Nursery<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#crazy-about-eggs\">Crazy About Eggs<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#teatr-lalka\">Teatr Lalka<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#airshifumi\">AIRSHIFUMI<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#useless\">Useless<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#sea-harvest\">Sea Harvest<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#prometheus-fuels\">Prometheus Fuels<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#post-familiar-wine\">Post Familiar Wine<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#highcourt-leisure-club\">Highcourt Leisure Club<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#alto-pharmacy\">Alto Pharmacy<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-metropolitan-enigma-salvatore-ferragamo\">The Metropolitan Enigma \u2013 Salvatore Ferragamo<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#cash-app\">Cash App<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#rollie\">Rollie<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"brandstudio\"><\/a>BrandStudio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/BrandStudio.jpg\" class=\"attachment-full size-full\" alt=\"BrandStudio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/BrandStudio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/BrandStudio-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/BrandStudio-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/BrandStudio-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/bstd.ru\/en\/\" target=\"_blank\" rel=\"noopener\">BrandStudio<\/a>\u2019s interactive website is an astounding testament to the creativity of their team. Before you access the main content, four illustrated blinking eyes briefly show up on the black screen. Then, they disappear and four clocks take their place. The design of the clock that represents Moscow differs from others. It also changes when you reload the site \u2013 sometimes it looks like a sleeping half-moon, with a sleeping hat on, other times it\u2019s in the form of a smiley face with teeth braces and a cute little hat. When you click on one of the clocks, you access the main content. To discover information about the studio, their team, and projects, you can either use the <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-fullscreen-navigation-menus\/\">fullscreen menu<\/a> and directly access a specific section, or roam <strong>the colorful, interactive, artistic terrain using a cursor in the shape of a hand. The illustrations are nothing short of astounding<\/strong>. Some of them look very realistic, especially the ones of the studio\u2019s team. They are presented in a myriad of imaginative ways, so you can see their heads on a selfie stick, slides, tied to a rocket, etc. On hover, most illustrations come to life. If the element is clickable, the hand becomes either grabby or starts touching the illustration with the pointer finger. All the while, the Sims-like music plays in the background, enhancing the site\u2019s appeal.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"who-cares\"><\/a>Who Cares?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Who-Cares.jpg\" class=\"attachment-full size-full\" alt=\"Who Cares\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Who-Cares.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Who-Cares-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Who-Cares-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Who-Cares-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/whocares.bigbump.fr\/\" target=\"_blank\" rel=\"noopener\">Who Cares?<\/a> is an educational project devised as an <a href=\"https:\/\/qodeinteractive.com\/magazine\/interactive-maps-in-web-design\">interactive map<\/a> that takes you through the African savanna. Your mission is to explore the map of an African village, find 10 animals on it, and photograph them. The animals are, in fact, endangered species classified as vulnerable, in danger, or critically endangered. When you do find and photograph them, a popup window appears on the screen, revealing information about the species. <strong>Colorful illustrations and subtle effects bring the African village to life, adding to the project\u2019s appeal. Stylistically, the drawings look like something you might see in an illustrated children\u2019s book, but the message behind their beauty is unfortunately quite gloomy.<\/strong> Hopefully, the team behind the project will manage to raise people\u2019s awareness about how endangered these animals are and prevent entire species from going extinct.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"mama-joyces-peppa-sauce\"><\/a>Mama Joyce\u2019s Peppa Sauce<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Mama-Joyces-Peppa-Sauce.jpg\" class=\"attachment-full size-full\" alt=\"Mama Joyce\u2019s Peppa Sauce\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Mama-Joyces-Peppa-Sauce.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Mama-Joyces-Peppa-Sauce-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Mama-Joyces-Peppa-Sauce-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Mama-Joyces-Peppa-Sauce-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The website created for <a href=\"https:\/\/www.peppasauce.love\/\" target=\"_blank\" rel=\"noopener\">Mama Joyce\u2019s Peppa Sauce<\/a> makes you want to press the \u201cBuy Now\u201d button so hard. From the moment you see the loading animation of a flame and the displayed temperature reach 1000\u00b0F, it\u2019s clear something hot is coming your way. An explosion then occurs and a bottle of Mama Joyce\u2019s Peppa Sauce appears at the center of the screen. The bottle is surrounded by <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large typefaces<\/a> and a plethora of illustrated elements, introducing you to the story behind the sauce. The combination of <a href=\"https:\/\/qodeinteractive.com\/magazine\/uppercase-sans-serif-typography-in-modern-web-design\/\">uppercase sans-serif<\/a> typography and thick serif fonts makes texts particularly appealing to the eye. In some sections, the cursor is shaped like a circle with the \u201cBuy Now\u201d text placed inside of it. In others, it goes back to the default arrow shape. As you explore this impressive one-page product presentation, you will come across a myriad of illustrations including Mama Joyce herself as well as chickens, tauruses, peppers, some herbs, and more. <strong>These cool elements accompany the text, informing the user in a fun way how to best use the sauce. Scroll-triggered animations make the entire website come to life.<\/strong> For instance, in the section where you learn about Guyana (the country where the sauce is made), text appears when you hover forward but it disappears from the view as you go backward. The copy is quirky and amusing, perfectly complementing the site\u2019s aesthetic.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"genesis\"><\/a>Genesis<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Genesis.jpg\" class=\"attachment-full size-full\" alt=\"Genesis\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Genesis.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Genesis-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Genesis-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Genesis-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/eatgenesis.com\" target=\"_blank\" rel=\"noopener\">Genesis<\/a> is a plant-based alchemy restaurant concept. The design of their <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-black-and-white-websites\/\">black-and-white website<\/a> beautifully complements the brand\u2019s name. <strong>The story of the restaurant is told through a series of biblical connotations, connecting the brand\u2019s name with the Book of Genesis.<\/strong> The opening slide depicts the Garden of Eden, <strong>delivering a true artistic punch to the viewer<\/strong>. The three-eyed Jesus and Eve are sitting among flowers under the snake\u2019s watchful eye. An open box with a burger inside stands at the center of the screen, as a reminder that this is not just a contemporary take on a religious story but, in fact, an imaginative restaurant website, inviting you to continue exploring it. The cursor behaves like some sort of a flashlight, shining a light on the sections you hover over. The light guides you through the five chapters of this one page website, each packed with animated illustrations and stunning typography. With each new scroll, you learn more about the restaurant. The design of the final, \u201cJoin the Team\u201d section, references Michelangelo\u2019s \u201cCreation of Adam\u201d, with two outstretched hands that never quite touch, providing a memorable closure to the story of Genesis.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"samuel-day\"><\/a>Samuel Day<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Samuel-Day.jpg\" class=\"attachment-full size-full\" alt=\"Samuel Day\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Samuel-Day.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Samuel-Day-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Samuel-Day-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Samuel-Day-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.samuelday.de\/\" target=\"_blank\" rel=\"noopener\">Samuel Day<\/a>\u2019s imaginative website provides an astonishing showcase of this designer\u2019s creativity. The loading screen looks like a theater curtain that slowly disappears from view, welcoming you to Samuel\u2019s show. It reveals an illustration of a man, i.e., Sam holding his head between his hands. The cursor is shaped like a blinking eye with \u201cScroll\u201d written around it, telling you what you should do next. And once you start scrolling, the real adventure begins. <strong>The scroll-triggered animation causes the illustrated Sam to split his head in two and pull you into his universe. You then go through a series of fullscreen, illustrated presentations, each revealing more about how Sam\u2019s creative mind works.<\/strong> Every chapter is marked by a specific illustration that on scroll becomes bigger until it swallows you whole, taking you to the next section. For instance, the slide where he says that he\u2019s an award-winning designer contains an animated trophy with some snakes coming out of it. Once the Medusa-like trophy engulfs you, it transports you to a moving U-Bahn train. <strong>The passengers are clients Sam has worked with, all personified as quirky, idiosyncratic characters.<\/strong> You can click on them to explore each project in depth. As your journey comes to an end and you leave Sam\u2019s head, he puts it back together. But that\u2019s not all. If you pull the curtain rope, the curtain will close and a bunch of smiley faces will fall from the top to the bottom of the screen. They hypnotically follow the movement of the cursor, closing the site in a fun and striking way.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"tarot-o-bot\"><\/a>Tarot-o-Bot<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Tarot-o-Bot.jpg\" class=\"attachment-full size-full\" alt=\"Tarot-o-Bot\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Tarot-o-Bot.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Tarot-o-Bot-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Tarot-o-Bot-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Tarot-o-Bot-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/tarotobot.illo.tv\/\" target=\"_blank\" rel=\"noopener\">Tarot-o-Bot<\/a> project was devised to mark the 7th anniversary of the design studio Illo. For the special occasion, the studio created an online tarot generator that predicts the future of the creative industry.<strong> The site is entertaining and engaging, and it encourages user interaction.<\/strong> In terms of graphics, the homepage is bustling with vivid, animated illustrations, including a key, an eye, a half-moon, the lucky number 7, and many others. <strong>The vibrant introduction awakens your desire to play and discover more about this amusing project, luring you into using the generator.<\/strong> When you press \u201cEnter\u201d on the keyboard (or click the button with your mouse), an illustrated loading animation appears. It consists of several connected, colorful parts that slowly narrow from the corners of the screen towards the center, revealing an eye in the middle. Soon, the eye disappears from the screen, leaving you with three illustrated cards to play with. When you finish flipping them, a humorous prediction for the future appears.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;illustration-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"meplace-nursery\"><\/a>MEplace Nursery<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/MEplace-Nursery.jpg\" class=\"attachment-full size-full\" alt=\"MEplace Nursery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/MEplace-Nursery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/MEplace-Nursery-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/MEplace-Nursery-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/MEplace-Nursery-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Illustrations look particularly effective on websites that offer services and products for children.<\/strong> Just take a look at <a href=\"https:\/\/meplace.co\/\" target=\"_blank\" rel=\"noopener\">MEplace<\/a>\u2019s online presentation. This holistic nursery implemented some playful animated illustrations to their site, beautifully complementing the displayed photos of children. <strong>The smiling, illustrated characters and animated objects are scattered throughout the site, spreading happiness everywhere you look.<\/strong> The designers used illustrations to share the agency\u2019s motto in a fun and somewhat unusual way, by animating it and placing it inside of a thick, swirly, shape. The colors on the site are subtle, predominantly pastel, making the content pleasant to look at. And while this entire website is undoubtedly stunning, the design of the \u201cAbout Us\u201d page stands out. <strong>The combination of delicate illustrations and vertically placed accordions reveals the story about the nursery and their values in a particularly engaging manner.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"crazy-about-eggs\"><\/a>Crazy About Eggs<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Crazy-About-Eggs.jpg\" class=\"attachment-full size-full\" alt=\"Crazy About Eggs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Crazy-About-Eggs.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Crazy-About-Eggs-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Crazy-About-Eggs-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Crazy-About-Eggs-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/crazyabouteggs.com\/en\/\" target=\"_blank\" rel=\"noopener\">Crazy About Eggs<\/a> is an egg brand that makes bio-circular eggs. The site\u2019s design beautifully reflects the company\u2019s purpose. The loading screen shows an animated illustration of a hen hatching an egg. As soon as the egg comes out, the site\u2019s content loads. <strong>The one-page website is filled with illustrations of roosters and hens driving bicycles, wearing chef\u2019s hats, lifting weights, etc.<\/strong> Most of the illustrations are animated, so you will see hens and roosters blinking and moving their heads around. Everything is in black and blue, placed on a <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-beige-websites\/\">beige background<\/a> that matches the design of CAE\u2019s packaging. As you scroll down the page, you will come across immersive product showcases that combine illustrations with imagery and terrific effects. In some sections, there are pictures of CAE products that on scroll rotate, and as they spin, illustrated details about the brand appear on either side. The website combines vertical and horizontal navigation, stunning animations, and immersive effects, resulting in a one-of-a-kind presentation of an egg brand.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"teatr-lalka\"><\/a>Teatr Lalka<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Teatr-Lalka.jpg\" class=\"attachment-full size-full\" alt=\"Teatr Lalka\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Teatr-Lalka.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Teatr-Lalka-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Teatr-Lalka-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Teatr-Lalka-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/teatrlalka.pl\/en\" target=\"_blank\" rel=\"noopener\">Teatr Lalka<\/a> is Warsaw\u2019s oldest puppet theater. Their website is packed with illustrations of puppets that represent the plays the theater is known for. <strong>The drawings look adorable, as if they belong in a children\u2019s illustrated book.<\/strong> On the homepage, the puppets are placed on some kind of a puppet stick but they\u2019re not static. The \u201ccarabiniere\u201d will occasionally flash a smile at you while \u201cthe horned beast\u201d will bleat. When you click on them, they also make a short sound. They move in the opposite direction of your mouse, and the faster you move the cursor the quicker their movement is. In the fullscreen menu, pages are illustrated with appropriate drawings, e.g., the Contact page is illustrated with a director\u2019s megaphone, the Plays page with a theater backdrop, etc. Throughout the site, the designers have blended photographs and illustrations, creating an eye-catching visual experience for the viewer.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"airshifumi\"><\/a>AIRSHIFUMI<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"542\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/AIRSHIFUMI.jpg\" class=\"attachment-full size-full\" alt=\"AIRSHIFUMI\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/AIRSHIFUMI.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/AIRSHIFUMI-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/AIRSHIFUMI-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/AIRSHIFUMI-620x347.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/airshifumi.hands.agency\/\" target=\"_blank\" rel=\"noopener\">AirShifumi<\/a> is a virtual game of shifumi (rock-paper-scissors) created to help people overcome the feeling of loneliness they may have experienced during the pandemic. In an idyllic environment, with blooming flora, tranquil waters, and a stunning sunrise\/sunset, you can play the game online with someone else. Hands are presented as gigantesque, levitating 3D objects. <strong>The scenery often changes, starting among the vibrant flora and tranquil waters of planet Earth and reaching all the way to the cosmos.<\/strong> Even though the hands are the stars of the site, the environment in which the games are played is breathtakingly illustrated. <strong>Gorgeous, easy-on-the colors, with lots of green, soft pink, and soft yellow tones make you feel at ease.<\/strong> The background music is serene, enhancing the feeling of calmness. Considering how stressful life can be in the midst of a pandemic, AirShifumi\u2019s project is a cool way of connecting with someone else and having a bit of fun.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"useless\"><\/a>Useless<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Useless.jpg\" class=\"attachment-full size-full\" alt=\"Useless\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Useless.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Useless-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Useless-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Useless-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/useless.london\/?ref=uijarcom\" target=\"_blank\" rel=\"noopener\">Useless<\/a> is a great digital platform that helps Londoners find the closest zero-waste shops. The website starts off strong, taking a playful take on the directory\u2019s name. The word Useless is plastered over the center of the screen in gigantic, bold letters. Every so often, a gap appears between the letters \u201ce\u201d and \u201cl\u201d, leaving \u201cUse Less\u201d on the screen, sending a message to users to minimize the use of plastics. At the same time, illustrated plastic bottles, bags, and coffee cups fall from the top of the screen, only to disappear from it when they reach the bottom. However, by pressing the \u201cLet\u2019s go!\u201d button, tons of plastic items flood the screen, while some shocking facts about the use of plastics appear on the page. <strong>The wasted plastic is obstructing your view, but you can try to get rid of it by moving your mouse around. It\u2019s hard to do it, just like getting rid of plastics in real life is, which is why it\u2019s important people learn about platforms like Useless and start using zero-waste products.<\/strong> The website features an interactive map that allows you to click on a region or use your postcode to find the nearest shop. The visuals on the site are entirely illustrated, including shop showcases as well as the handy \u201cSurvival Kit\u201d that teaches you about plastic-free alternatives to the most common products. <strong>The illustrations are simple, yet vibrant and striking, sending their important message in a loud and immersive way.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"sea-harvest\"><\/a>Sea Harvest<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Sea-Harvest.jpg\" class=\"attachment-full size-full\" alt=\"Sea Harvest\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Sea-Harvest.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Sea-Harvest-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Sea-Harvest-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Sea-Harvest-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.seaharvest.net.au\" target=\"_blank\" rel=\"noopener\">Sea Harvest<\/a> is a seafood market in Canberra, Australia. Their <strong>website looks like an old newspaper<\/strong>, with details about the market presented as individual articles. The layout is divided into multiple sections and is <strong>rich with illustrations of the seafood<\/strong> sold at the market. <strong>When you hover on any of the black and white illustrations, they become blue, matching the color of the water.<\/strong> Product inner pages contain images in color, but it\u2019s the drawings that leave a strong impression on the viewer, <strong>making the site seem as if hand-drawn<\/strong>. This impression is further amplified by hover effects \u2013 e.g., when users move the mouse over the menu, the links become encircled by what looks like a hand-drawn sharpie line. Moreover, the location of the market is marked on a map with an \u201cx\u201d that, again, seems as if hand-drawn. The preference for illustrations is evident on the Contact page as well, where visitors can enjoy a snippet from the comic strip Garfield. Typography throughout the site is interesting as well, with headings and section titles written using bold, big, all-caps serif and sans serif fonts. For body text, the designers used a monospace, typewriter-like font that further amplifies the site\u2019s newspaper vibe. Overall, <strong>the site\u2019s design is perhaps a bit unusual for a seafood market, but it undoubtedly helps set them apart from competitors and makes their business more memorable.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"prometheus-fuels\"><\/a>Prometheus Fuels<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Prometheus-Fuels.jpg\" class=\"attachment-full size-full\" alt=\"Prometheus Fuels\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Prometheus-Fuels.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Prometheus-Fuels-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Prometheus-Fuels-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Prometheus-Fuels-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.prometheusfuels.com\/\" target=\"_blank\" rel=\"noopener\">Prometheus Fuels<\/a> is a company that filters atmospheric CO2 and turns it into gasoline and jet fuel. They masterfully tell their story by taking you to an illustrated, 3D, game-like universe. To explore it, you just need to use your mouse scroll. It all begins with a Ford old-timer speeding through a sandy terrain hugged by mountains. There\u2019s also Mars in the background. On scroll, <strong>camera angles change, maintaining users\u2019 excitement.<\/strong> At one point, you rise above the clouds, only to end up in Prometheus\u2019 factory, i.e., their fuel forge. Then they explain how the fuel is made by stripping the air of CO2 and water. Using animated illustrations, they depict floating molecules that you can \u201cenergize\u201d by using the space bar on your keyboard. After that, the story shows how the fuel ends up in trucks that then deliver it to gas stations. Then, the mustang from the beginning of the story fills up its tank with this planet-friendly fuel and finds itself on the road. The net scroll reveals an airplane that flies on 100% carbon-neutral gas, while the closing slide depicts people by the fire, watching a rocket launch. <strong>This presentation is an offbeat work of art that owes its distinct visual character to masterclass illustrations and animations. There is a cinematic quality to the entire work, and not just because of the grainy effect but also because of the way you feel completely immersed in the story, like the main protagonist.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"post-familiar-wine\"><\/a>Post Familiar Wine<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Post-Familiar-Wine.jpg\" class=\"attachment-full size-full\" alt=\"Post Familiar Wine\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Post-Familiar-Wine.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Post-Familiar-Wine-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Post-Familiar-Wine-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Post-Familiar-Wine-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/postfamiliar.com\/\" target=\"_blank\" rel=\"noopener\">Post Familiar<\/a> is a Portland-based wine company. <strong>To create a distinct visual identity for the brand, the designers blended unusual black-and-white illustrations with large typography and beautiful photographs in color.<\/strong> It all begins with a loading animation of a wine-filled cup that moves left and right, shaking the liquid inside of it. Then the homepage appears, where gigantic letters announce the name of the brand. What makes this introduction special are the peculiar illustrations of an eye and an amoeba-like shape. On hover, the eye blinks and follows the cursor while the amoeba grows in size. Several scrolls later, a drawing of a hand appears in the viewport. When you place your pointer on it, the fingers snap. If you were to observe these illustrations separately from the rest of the content, you\u2019d probably think they make little sense. But when you take a look at the entire website, they are a perfect fit with all the other elements. <strong>Their specific style as well as the duotone and grainy imagery give this site an artistic vibe, making it look like an alternative magazine dedicated to wines rather than a wine company website.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"highcourt-leisure-club\"><\/a>Highcourt Leisure Club<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Highcourt-Leisure-Club.jpg\" class=\"attachment-full size-full\" alt=\"Highcourt Leisure Club\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Highcourt-Leisure-Club.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Highcourt-Leisure-Club-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Highcourt-Leisure-Club-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Highcourt-Leisure-Club-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/highcourt.co\/\" target=\"_blank\" rel=\"noopener\">Highcourt Leisure Club<\/a> is a membership club located in New York City. The website takes viewers through the 5 story Grosvenor Building the club is located in, introducing them to the amenities and services available on each floor. The most striking illustration of the building and its features is displayed at the top of the homepage, providing a warm welcome to all visitors. Some of its elements are even animated, so users can enjoy the depicted flora gently swaying and the water droplets twinkling in the shower. The opening illustration provides a cool overview of the experiences the Highcourt Leisure Club provides, with each floor presented in great detail further down the page. Aside from displaying photographs that demonstrate what the club looks like on the inside, the designers have <strong>combined each floor showcase with complementing illustrations. Drawings contain floor plans and illustrations of the elements one can find on every floor.<\/strong> The user\u2019s progress from one floor to the next is followed by the backdrop color changes, with each new chapter marked with specific <a href=\"https:\/\/qodeinteractive.com\/magazine\/beautiful-gradient-websites\/\">gradient colors<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"alto-pharmacy\"><\/a>Alto Pharmacy<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Alto-Pharmacy.jpg\" class=\"attachment-full size-full\" alt=\"Alto Pharmacy\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Alto-Pharmacy.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Alto-Pharmacy-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Alto-Pharmacy-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Alto-Pharmacy-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/alto.com\/?ref=land-book.com\" target=\"_blank\" rel=\"noopener\">Alto<\/a> is a US-based <a href=\"https:\/\/empeek.com\/telemedicine\/\" target=\"_blank\" rel=\"noopener\">telehealth<\/a> pharmacy that offers same-day deliveries of prescription drugs to patients. Their website is imaginative, with lovely illustrations providing a warm introduction to Alto. It all starts with a fullscreen drawing on the homepage, depicting a woman by the door with a bag of medicines in front of her and an Alto employee that delivered the package. <strong>The style of the illustration and the colors are soft and warm, setting a friendly tone for the rest of the site.<\/strong> The <a href=\"https:\/\/qodeinteractive.com\/magazine\/web-design-hidden-menus\/\">hidden menu<\/a> is also adorned with a drawing of a patient and a pharmacist. And as you move the mouse from one menu link to the other, background colors in the menu change. On almost every page, the designers have combined photographs and videos with sweet illustrations that look as if hand-drawn, creating an effective, unusual, and aesthetically appealing presentation of this on-demand pharmacy.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-metropolitan-enigma-salvatore-ferragamo\"><\/a>The Metropolitan Enigma \u2013 Salvatore Ferragamo<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Salvatore-Ferragamo-\u2013-The-Metropolitan-Enigma.jpg\" class=\"attachment-full size-full\" alt=\"Salvatore Ferragamo \u2013 The Metropolitan Enigma\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Salvatore-Ferragamo-\u2013-The-Metropolitan-Enigma.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Salvatore-Ferragamo-\u2013-The-Metropolitan-Enigma-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Salvatore-Ferragamo-\u2013-The-Metropolitan-Enigma-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Salvatore-Ferragamo-\u2013-The-Metropolitan-Enigma-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/enigma.ferragamo.com\/en\/galleria-strasburgo\" target=\"_blank\" rel=\"noopener\">The Metropolitan Enigma<\/a> is an illustrated interactive digital experience presented in the form of a video game and devised to showcase Salvatore Ferragamo\u2019s Spring\/Summer 2021 \u201cLife in Technicolor\u201d collection. Enigma accompanies the SS21 fashion movie directed by Luca Guadagnino, taking you through Milan and some of the locations featured in the film. The collection itself was inspired by Hitchcock\u2019s movies, and that influence is evident in both the movie and the game. <strong>Enigma puts you in the role of a detective and challenges your memory, attentiveness, and logical thinking.<\/strong> For instance, in the first game, you need to find a way to connect two hooks that, together, form \u201cgancini\u201d i.e., the brand\u2019s logo. After you successfully complete the task, next comes the word finder game, where you have to search for \u201cbeauty\u201d, \u201ctechnicolor\u201d, and other terms related to the collection. There\u2019s also the memory game that features shoes, bags, and watches from the collection. <strong>The Hitchcock-tinged atmosphere and artistic, fullscreen illustrations make the adventure suspenseful, amplifying its investigative character.<\/strong> To access the final stage of the game, you need to sign up with your email address. This is a great marketing technique that will undoubtedly increase the company\u2019s list of subscribers, but it will also allow you to finally resolve the metropolitan enigma.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"cash-app\"><\/a>Cash App<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Cash-App.jpg\" class=\"attachment-full size-full\" alt=\"Cash App\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Cash-App.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Cash-App-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Cash-App-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Cash-App-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/cash.app\/\" target=\"_blank\" rel=\"noopener\">Cash App<\/a> is a mobile payment service that enables users to transfer money from one phone to another via an app. <strong>The look of their website is so striking that visitors will want to explore every single page to see all the featured drawings. The designers mixed some graphic elements that don\u2019t have too much in common, creating an unusual and eye-catching visual experience for the viewer.<\/strong> Aside from the illustrated dollar logo, the homepage contains drawings of several staircases, resembling M. C. Escher\u2019s \u201cRelativity\u201d lithograph. Along the stairs, there is a mockup of a phone and drawings of a hamburger, a hand, a Visa card, and a sneaker. Elsewhere on the site, you will come across classical orders of ancient Greek and Roman architecture, alien life forms, a man riding a pipe as if it were a bull while money pours out from the pipe\u2019s opening, and a plethora of illustrated icons that strikingly showcase the benefits of using the app and working for the company. The page that particularly stands out from others is the \u201cBitcoin\u201d page. It tells the story of how bitcoins came to be and what they are, using cute, colorful, cartoon-like illustrations. The drawings on this page are placed at the center of the screen, and exploring the content feels like reading a terrific comic.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"rollie\"><\/a>Rollie<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Rollie.jpg\" class=\"attachment-full size-full\" alt=\"Rollie\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Rollie.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Rollie-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Rollie-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Rollie-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/rollie.co\/\" target=\"_blank\" rel=\"noopener\">Rollie<\/a> is an iOS app that helps you track your transactions. This one-page site is mostly textual, with just a few sleek phone mockups located at the top of the page. To break the seriousness of the website, the designers relied on illustrations. <strong>Animated drawings of the stars, the moon, and the clouds add a touch of playfulness to the site, but they don\u2019t make it look any less professional.<\/strong> Instead, the illustrated content simply helps <strong>create a softer aesthetic that\u2019s more appealing to the users\u2019 eyes.<\/strong> In some sections, drawings enhance the importance of an element and their movement captures viewers\u2019 attention. This is evident at the bottom of the page, with pulsating arrows pointing toward the call-to-action button, encouraging users to download the app.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Closing Words<\/h2>\n<p>[\/vc_column_text][vc_column_text]Adding illustrations to your site is an effective way of creating an authentic showcase of your brand and introducing its character. You can use them as a hero image, add them to your logo, sprinkle them throughout the site or base the visual identity of your brand entirely on illustrations &#8211; no matter the scenario, they can help you stand out from the competition and spark emotional engagement with your audience. Animated illustrations are especially attractive. As you can see, some brands love including scroll-triggered or hover animation effects, which helps make the user interface particularly immersive and the overall website more memorable.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you decide to add illustrations to your site, you can try different characters, color schemes, and styles until you create an environment that best reflects your values and transfers your message. You can fine-tune them however you like until they match your requirements but also the preferences of your target audience. Whether you use them on their own or combine them with photographs, it doesn\u2019t matter much \u2013 either way, they will help amplify the visual and emotional appeal of your presentation and make your website distinctive.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>If you\u2019re trying to think of ways to make your site easier to distinguish from competitors, adding illustrations to it might be the answer. Take a look at this collection of websites with illustrations and see for yourself how drawings can help you craft a unique visual identity for your brand<\/p>\n","protected":false},"author":4,"featured_media":28668,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,134,40,43],"class_list":["post-28624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-illustrations","tag-inspiration","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=28624"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28624\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/28668"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=28624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=28624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=28624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}