{"id":11580,"date":"2021-09-10T13:35:46","date_gmt":"2021-09-10T13:35:46","guid":{"rendered":"https:\/\/blog.tubikstudio.com\/?p=11580"},"modified":"2026-05-11T16:54:23","modified_gmt":"2026-05-11T16:54:23","slug":"annual-awwwards-website-design","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/","title":{"rendered":"Case Study: Annual Awwwards Website Design"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">There&#8217;s a particular kind of pressure that comes with designing for designers.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Not because they&#8217;re difficult clients\u2014in our experience, people who care deeply about craft make the best ones. But because the margin for the ordinary is zero. You&#8217;re making something for an audience that notices everything: the tracking on a headline, a transition that&#8217;s 80ms too slow, a grid that almost works.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When Awwwards asked us to design their Annual website for 2020\u2014the platform where the web design world gathers each year to vote for its best\u2014we understood the stakes immediately.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is the story of how we built it, and the one decision that changed everything.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Awwwards and Tubik Collaboration Annual Awards 2020 Website\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/WIjME5Veb20?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2>Client and Project<\/h2>\n<p><span style=\"font-weight: 400;\">Every year, <\/span><a href=\"https:\/\/www.awwwards.com\/\">Awwwards <\/a><span style=\"font-weight: 400;\">creates a dedicated website for their Annual awards: a place where the community votes across categories\u2014best websites, studios, developers, mobile projects, e-commerce. The brief is always the same in structure and always different in execution, because each year a different Awwwards resident team takes it on.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In 2020, that team was us.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The creative team\u2014Ernest Asanov, Kirill Erokhin, Andrey Drobovich, Alexander Petulko, and Polina Taran\u2014started where we always start: with conversations. What did Awwwards want people to feel when they landed on this site? What had previous Annual sites done well, and where was there room? We spent time in the archive, studying the lineage, understanding what the community expected before we thought about how to surprise them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The mood boards from this phase tell their own story\u2014a pull toward dark backgrounds and bold typography, a sense that this needed to feel like an event, not a utility.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11581\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-annual-website-design.png\" alt=\"awwwards annual website design\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-annual-website-design.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-annual-website-design-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-annual-website-design-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-annual-website-design-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-annual-website-design-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h2><strong>The Search for a Visual Language<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The first real design challenge was the pattern. Not the layout, not the typography\u2014the background pattern that would run through every page, every category, the connective tissue of the whole experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We tried illustration first. Tubik has always worked in a visual idiom where illustration and UI coexist\u2014it&#8217;s central to how we think about design. So we developed several illustration concepts: different styles, different tones, some abstract and geometric, some more figurative. Each had genuine appeal in isolation.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Then we put them into the actual layout, and something important became clear: they looked beautiful, but they looked like us. And this website wasn&#8217;t about us. It was about a community too large, too diverse, too creatively varied to be faithfully represented by any single illustration style. Whatever visual language we chose needed to contain multitudes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That realization is what led to the idea that made the project.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11589\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/moodboard.png\" alt=\"moodboard design\" width=\"1600\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/moodboard.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/moodboard-300x188.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/moodboard-768x480.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/moodboard-1024x640.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/moodboard-150x94.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11588 size-full\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/concept-exploration.png\" alt=\"concept exploration\" width=\"1600\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/concept-exploration.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/concept-exploration-300x188.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/concept-exploration-768x480.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/concept-exploration-1024x640.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/concept-exploration-150x94.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11587 size-full\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-3.png\" alt=\"awwwards website illustration exploration 3\" width=\"1600\" height=\"852\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-3.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-3-300x160.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-3-768x409.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-3-1024x545.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-3-150x80.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11586\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-2.png\" alt=\"awwwards website illustration exploration 2\" width=\"1600\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-2.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-2-300x188.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-2-768x480.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-2-1024x640.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-2-150x94.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11585\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-1.png\" alt=\"awwwards website illustration exploration 1\" width=\"1600\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-1.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-1-300x188.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-1-768x480.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-1-1024x640.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-website-illustration-exploration-1-150x94.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h2><strong>The Nominees Became the Design<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">One of our designers\u2014staring at the problem of what image could possibly represent the entire range of Awwwards work\u2014arrived at an answer that was obvious in retrospect and invisible until it wasn&#8217;t: use the work itself.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The background pattern was built from carefully extracted fragments of the actual projects nominated for 2020. Real screenshots. Real designs. Cropped, composed, and arranged into an abstract collage that, on first glance, reads as a rich, textured graphic system\u2014and on second glance, reveals itself as a mosaic of the community&#8217;s own output.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The effect was more than aesthetic. An Awwwards resident visiting the site could recognize a fragment of a project they submitted. Or one they&#8217;d admired on the platform. The pattern wasn&#8217;t decorating the voting website\u2014it was the voting website&#8217;s subject. Form and content collapsed into one thing. Every category page was built from fragments of work nominated in that category, personalizing the background for each section without any sense of arbitrariness.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11597 size-full\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/tubik_awwwards_annual_13.jpeg\" alt=\"tubik awwwards annual\" width=\"1900\" height=\"1900\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/tubik_awwwards_annual_13.jpeg 1900w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/tubik_awwwards_annual_13-150x150.jpeg 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/tubik_awwwards_annual_13-300x300.jpeg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/tubik_awwwards_annual_13-768x768.jpeg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/tubik_awwwards_annual_13-1024x1024.jpeg 1024w\" sizes=\"auto, (max-width: 1900px) 100vw, 1900px\" \/><\/p>\n<h2><strong>The Details That Made It Move<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The homepage opens with a loading animation\u2014a small circle capturing fragments of the pattern, expanding and resolving into the animated Vote button. It&#8217;s the kind of transition that people describe as &#8220;smooth&#8221; without knowing why, but what they&#8217;re responding to is narrative: the animation tells you something before you&#8217;ve read a word.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The torch effect on the homepage\u2014where cursor movement reveals portions of the pattern, as if you&#8217;re lighting a dark space with your own attention\u2014added a quality that the web rarely achieves: the feeling that a page is responding to you. Interaction design at its most literal and most effective.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The multilayered grid on the scroll, the category pages with their depth effect following the cursor, the typographic menu interactions that use scale and weight as theater\u2014these weren&#8217;t ornaments added to a finished design. They were the design. We were working on a canvas where the audience would be bored by anything less.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One addition distinguished this Annual from its predecessors: a Hall of Fame page for previous winners. Minimal, elegant, more archival than celebratory. It gave the website a sense of time\u2014a reminder that the community it represents has a history worth honoring.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mobile adaptation was treated with the same level of attention as desktop. On a project like this, it would be easy to rationalize mobile as secondary. It isn&#8217;t. The experience had to hold across every device without compromising the atmospheric quality of the design.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Annual awwwards website home page tubikstudio.mp4\" src=\"https:\/\/player.vimeo.com\/video\/594626936?h=03d536e1dc&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11608\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/creative-grid-awwwards-website-tubik.png\" alt=\"creative grid awwwards website tubik\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/creative-grid-awwwards-website-tubik.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/creative-grid-awwwards-website-tubik-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/creative-grid-awwwards-website-tubik-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/creative-grid-awwwards-website-tubik-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/creative-grid-awwwards-website-tubik-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h2><strong>What We Took From It<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Oscar P\u00e9rez, co-founder of Awwwards, said afterward that the team had pushed modern browsers to their limits while maintaining an experience that felt playful rather than labored. That balance\u2014technically ambitious, humanly legible\u2014is the goal in any project, and difficult in most. Here it was both necessary and achievable, because the subject matter and the audience demanded it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The thing we return to, designing for design&#8217;s own community, is that the problem solved itself once we stopped trying to represent the community from the outside. The pattern built from nominees&#8217; work wasn&#8217;t a clever concept. It was the honest answer to the honest question: whose work is this website actually about?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Theirs. It was always theirs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The best design often works that way\u2014not by imposing a voice, but by creating a space where the right voice is already there, waiting to be heard.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" title=\"Tubik studio awwwards collaboration website design\" src=\"https:\/\/player.vimeo.com\/video\/594658974?h=e43031ada8&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Awwwards website menu interaction tubik studio\" src=\"https:\/\/player.vimeo.com\/video\/594655337?h=45e2a058ee&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11607\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/hall-of-fame-awwwards-website-tubik.png\" alt=\"hall of fame awwwards website tubik\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/hall-of-fame-awwwards-website-tubik.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/hall-of-fame-awwwards-website-tubik-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/hall-of-fame-awwwards-website-tubik-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/hall-of-fame-awwwards-website-tubik-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/hall-of-fame-awwwards-website-tubik-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11584\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-mobile-website-design.png\" alt=\"awwwards mobile website design\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-mobile-website-design.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-mobile-website-design-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-mobile-website-design-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-mobile-website-design-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/awwwards-mobile-website-design-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11594\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-awwwards.png\" alt=\"mobile website awwwards\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-awwwards.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-awwwards-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-awwwards-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-awwwards-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-awwwards-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11596\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-nominee-page-awwwards-annual.png\" alt=\"mobile website nominee page awwwards annual\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-nominee-page-awwwards-annual.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-nominee-page-awwwards-annual-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-nominee-page-awwwards-annual-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-nominee-page-awwwards-annual-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/08\/mobile-website-nominee-page-awwwards-annual-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11609\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/annual-awwwards-website-design-tubik-studio.png\" alt=\"annual awwwards website design tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/annual-awwwards-website-design-tubik-studio.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/annual-awwwards-website-design-tubik-studio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/annual-awwwards-website-design-tubik-studio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/annual-awwwards-website-design-tubik-studio-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/annual-awwwards-website-design-tubik-studio-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h2>Recommended Reading<\/h2>\n<p>Enjoyed this read? Make sure you check other case studies by Tubik team:<\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/branding-design-health-app?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">Uplyfe. Identity Design for Health App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/hackathons-hero-illustrations?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">Devpost. Hero Illustrations for Hackathons Platform<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/identity-webdesign-shipping-service?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">ShipDaddy. Identity and Web Design for Shipping Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/credentially-webdesign-webflow-development?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">Credentially. Website Creation with Webflow<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-dicey-logo-and-mascot-design-for-party-game?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">Dicey. Logo and Mascot Design for Party Game<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/branding-design-process?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">Branding Design Process in Tubik: FAQ from Clients<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-huawei-icon-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">HUAWEI. Icon Design for EMUI 10<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-book-cover-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">ABUK. Custom Book Cover Design for Audiobook App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-educational-interactive-website?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">Illuminating Radioactivity. Interactive Web Design for Education<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-lumen-museum-website?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">Lumen. Website for Museum of Mountain Photography<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-gno-ecommerce-branding-webdesign?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=awwwards_design_case&amp;source=blog\">GNO Blankets. Branding and Web Design for Ecommerce<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A deep dive into the decision that turned nominees&#8217; own projects into the design\u2014and what that unlocked for the whole experience.<\/p>\n","protected":false},"author":10003,"featured_media":17524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,9],"tags":[256,440,463,467,468,479,482,485,487,491,502,57,504,100,515,138,533,147,536,212],"coauthors":[634],"class_list":["post-11580","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-ui_ux","tag-interaction-design","tag-tubik","tag-ui-design-article","tag-ui-design-practices","tag-ui-design-process","tag-usability","tag-user-experience","tag-user-experience-design","tag-user-experience-design-process","tag-user-interface","tag-ux","tag-case-study","tag-ux-design-article","tag-design","tag-uxui","tag-design-process","tag-web-design","tag-design-studio","tag-web-design-case-study","tag-graphic-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case Study: Annual Awwwards 2020 Website Design<\/title>\n<meta name=\"description\" content=\"How Tubik designed the Awwwards 2020 Annual site\u2014and why using nominees&#039; own work as the visual pattern made all the difference.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Annual Awwwards 2020 Website Design\" \/>\n<meta property=\"og:description\" content=\"How Tubik designed the Awwwards 2020 Annual site\u2014and why using nominees&#039; own work as the visual pattern made all the difference.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-10T13:35:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-11T16:54:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/Annual-Awwwards-Website-Design-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anastasiia Lutsenko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anastasiia Lutsenko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/\",\"name\":\"Case Study: Annual Awwwards 2020 Website Design\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/Annual-Awwwards-Website-Design-1.png\",\"datePublished\":\"2021-09-10T13:35:46+00:00\",\"dateModified\":\"2026-05-11T16:54:23+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1\"},\"description\":\"How Tubik designed the Awwwards 2020 Annual site\u2014and why using nominees' own work as the visual pattern made all the difference.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/Annual-Awwwards-Website-Design-1.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/Annual-Awwwards-Website-Design-1.png\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Annual Awwwards Website Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1\",\"name\":\"Anastasiia Lutsenko\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/d893c1e4578c8cd7a39f393978129a25\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g\",\"caption\":\"Anastasiia Lutsenko\"},\"description\":\"7+ years of writing content that speaks, sells, and sticks. Raised on legendary Apple commercials and allergic to mediocrity, Anastasiia writes for products, interfaces, and campaigns that refuse to be ignored.\",\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/alutsenko\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study: Annual Awwwards 2020 Website Design","description":"How Tubik designed the Awwwards 2020 Annual site\u2014and why using nominees' own work as the visual pattern made all the difference.","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:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Annual Awwwards 2020 Website Design","og_description":"How Tubik designed the Awwwards 2020 Annual site\u2014and why using nominees' own work as the visual pattern made all the difference.","og_url":"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2021-09-10T13:35:46+00:00","article_modified_time":"2026-05-11T16:54:23+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/Annual-Awwwards-Website-Design-1.png","type":"image\/png"}],"author":"Anastasiia Lutsenko","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anastasiia Lutsenko","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/","url":"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/","name":"Case Study: Annual Awwwards 2020 Website Design","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/Annual-Awwwards-Website-Design-1.png","datePublished":"2021-09-10T13:35:46+00:00","dateModified":"2026-05-11T16:54:23+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1"},"description":"How Tubik designed the Awwwards 2020 Annual site\u2014and why using nominees' own work as the visual pattern made all the difference.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/Annual-Awwwards-Website-Design-1.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/09\/Annual-Awwwards-Website-Design-1.png","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/annual-awwwards-website-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Annual Awwwards Website Design"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1","name":"Anastasiia Lutsenko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/d893c1e4578c8cd7a39f393978129a25","url":"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g","caption":"Anastasiia Lutsenko"},"description":"7+ years of writing content that speaks, sells, and sticks. Raised on legendary Apple commercials and allergic to mediocrity, Anastasiia writes for products, interfaces, and campaigns that refuse to be ignored.","url":"https:\/\/tubikstudio.com\/blog\/author\/alutsenko\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/11580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/10003"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=11580"}],"version-history":[{"count":17,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/11580\/revisions"}],"predecessor-version":[{"id":17526,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/11580\/revisions\/17526"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/17524"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=11580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=11580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=11580"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=11580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}