{"id":33296,"date":"2022-01-07T15:00:21","date_gmt":"2022-01-07T14:00:21","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=33296"},"modified":"2022-01-05T20:11:52","modified_gmt":"2022-01-05T19:11:52","slug":"websites-inspired-by-poster-aesthetics","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/websites-inspired-by-poster-aesthetics\/","title":{"rendered":"10 Examples of Websites Inspired by Poster Aesthetics"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Experimentation with the paper form in web design has been around for quite some time. From grainy or noise texture to hand-written text and calligraphic forms, more and more web layouts resemble actual, physical designs on paper, often so much so they make us want to touch the screen to feel the paper between our fingers. These designs sometimes resemble greeting cards or notes, sometimes watercolor paper or a page from a book, and sometimes they are crafted to resemble posters &#8211; which is the style we\u2019re going to investigate today.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The poster technique emerged in the early 19th century and quickly became a widespread advertising and marketing channel. Visual representation was always just as important as the message, so graphic artists, painters and typographers soon started creating elaborate, high-quality poster designs, many of which have become art history classics &#8211; just remember the famous posters by <strong>Henri de Toulouse-Lautrec, Jules Cheret and Alphons Mucha<\/strong>, for example. <strong>Art Nouveau, Secession and early Modernism<\/strong> gave some of the most incredible examples of poster art, and the technique continued to develop throughout the century, giving birth to notable styles like <strong>Constructivism, Art Deco, Object Poster style and the International Typographic style<\/strong>, just to name a few. Then came the <strong>Psychedelic style, Postmodernism, the Memphis Group<\/strong> and, of course, the 1980\u2019s and computer graphics.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, where are we today when it comes to posters? First of all, it\u2019s vital to remember that<strong> the original purpose of the poster &#8211; to inform, advertise and propagate &#8211; has moved from the physical to the digital form.<\/strong> Today, we hardly even need actual paper posters. We have LED marquees, digital billboards and the internet instead. Poster art moved, to a large extent, to the web. And there isn\u2019t a particular new style to speak of. Instead, what we are witnessing today is a glorious conglomerate, a melting pot of poster styles that reference the celebrated styles from the past, giving it a fresh polish in line with the times. Historical recontextualization of styles is present throughout all visual art forms, and the poster is no exception. More or less direct references, inspirational points and homages, combined with new design techniques and contemporary styles &#8211; this is the gist of the poster style in web design today.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So let\u2019s take a look at some of the websites that incorporate the poster style in one way or another. We will be visiting:<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=\"#niccolo-miranda\">Niccol\u00f2 Miranda<\/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=\"#mamma-joyce-peppa-sauce\">Mamma Joyce 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=\"#waka-waka\">Waka-Waka<\/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=\"#nathan-taylor\">Nathan Taylor<\/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=\"#lamanna-bakery\">Lamanna Bakery<\/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=\"#cevitxef-bilbao\">Cevitxef Bilbao<\/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=\"#kikk-festival-2021\">Kikk Festival 2021<\/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=\"#kazuki-noda\">Kazuki Noda<\/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=\"#lions-good-news-2020\">Lions Good News 2020<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-creative-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=\"niccolo-miranda\"><\/a>Niccol\u00f2 Miranda<\/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=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Niccolo-Miranda.jpg\" class=\"attachment-full size-full\" alt=\"Niccol\u00f2 Miranda\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Niccolo-Miranda.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Niccolo-Miranda-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Niccolo-Miranda-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Niccolo-Miranda-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.niccolomiranda.com\/\" target=\"_blank\" rel=\"noopener\">Niccol\u00f2 Miranda<\/a> is an Amsterdam-based Italian designer and developer working in art direction, branding and motion design. He has received numerous accolades for his work and has worked with high-profile clients like Prada, AKQA and Awwwards. His portfolio website is an impressive display of design innovation, skill and imagination, and also a wonderful step out of the contemporary trends in web design. Conceived as<strong> a \u201cpaper portfolio\u201d in digital form<\/strong>, the website looks and feels like a newspaper, with a distinct paper texture, newspaper-like columns and typography, and a lot of illustrations bearing a distinct poster quality. The style is a nod to fictional newspapers, most notably<em> The Daily Prophet<\/em> from the Harry Potter movies and<em> The Daily Planet<\/em> from Superman, a choice which dictated the sort of grid he used, as well as the typography. Miranda opted for<strong> illustrations rather than for photography in order to maintain the old newspaper aesthetic<\/strong>. The <em>Work<\/em> section explores the potential of <a href=\"https:\/\/qodeinteractive.com\/magazine\/tab-based-navigation-examples\/\">tab based navigation<\/a> and features reversed UI in a bookshelf style. The items are listed vertically and open sideways, allowing for <a href=\"https:\/\/qodeinteractive.com\/magazine\/horizontal-scrolling-websites\/\">horizontal scrolling<\/a>, and the transition animations feature a torn paper effect.[\/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=\"mamma-joyce-peppa-sauce\"><\/a>Mamma Joyce 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=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Mamma-Joyce-Peppa-Sauce.jpg\" class=\"attachment-full size-full\" alt=\"Mamma Joyce Peppa Sauce\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Mamma-Joyce-Peppa-Sauce.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Mamma-Joyce-Peppa-Sauce-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Mamma-Joyce-Peppa-Sauce-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Mamma-Joyce-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]Hot sauces have been all the rage for the last decade or so, and sauce brands are literally impossible to count. With all that competition, it is vital to stand out, which is precisely what <a href=\"https:\/\/www.peppasauce.love\/\" target=\"_blank\" rel=\"noopener\">Peppa Sauce<\/a> from Guyana set out to do with a fun, loud website that promotes a single product &#8211; Mamma Joyce Peppa Sauce. The dark blue background coupled with a very light pink for typography makes an excellent base for<strong> bold, almost flamboyant design that resembles old-fashioned posters for circuses and fairs<\/strong>, or perhaps, more fittingly, cure-all tonics that were sold door-to-door. To contribute to the poster quality of the page, the designer opted for <strong>oversized lettering, large icons, sections with text boxes with round edges and, most of all, the portrait of the originator of the sauce, the famous Mama Joyce, in a stencyl style<\/strong>, winking playfully and lovingly at the visitor. The website has a lot of movement going on, with different marquee sections scrolling in different directions, and it\u2019s all topped with a photograph of the Mamma Joyce Peppa Sauce bottle just moving in and out of view.[\/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=\"waka-waka\"><\/a>Waka-Waka<\/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\/2022\/01\/Waka-Waka.jpg\" class=\"attachment-full size-full\" alt=\"Waka-Waka\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Waka-Waka.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Waka-Waka-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Waka-Waka-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Waka-Waka-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are websites that only hint quite discretely some of the elements of the poster style, which, in itself, is quite diverse as it is. For instance, the Los Angeles-based wood furniture studio <a href=\"https:\/\/wakawaka.world\/\" target=\"_blank\" rel=\"noopener\">Waka-Waka<\/a> opted for a layout dominated by a logo in the custom-made Waka Sans typeface reminiscent of the International Typographic Style, aka. the Swiss design. The website opens with<strong> a loading animation that features poster-like design, or perhaps the first page of a newspaper or a catalog, which then zooms in and takes up the entire page<\/strong>. To contribute to the style, the designer opted for a highly reduced grayscale palette, interrupted only by the colors of the featured furniture. Inner pages, of course, are more conventionally designed and more practical, although those, too, feature certain poster features, such as flat, geometric color surfaces.[\/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=\"nathan-taylor\"><\/a>Nathan Taylor<\/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\/2022\/01\/Nathan-Taylor.jpg\" class=\"attachment-full size-full\" alt=\"Nathan Taylor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Nathan-Taylor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Nathan-Taylor-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Nathan-Taylor-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Nathan-Taylor-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In another excellent example of the diversity of poster aesthetics, the interactive designer and developer <a href=\"https:\/\/nathan.tokyo\/\" target=\"_blank\" rel=\"noopener\">Nathan Taylor aka Nathan Tokyo<\/a> created a wonderful, heavily referential portfolio website inspired by modernism in web design, with hints of the brutalist aesthetics. <strong>The muted color palette with noise texture makes one think of paper posters from the modernist era<\/strong>, and the Syne typeface, in bold style, which we discussed in our <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-google-fonts\/\">review of the best Google Fonts for 2022<\/a>, also contributes to that character. The page is replete with little interactive sections, densely arranged in a geometric fashion, ranging from on-hover animations, to text reveal (also upon hover), objects that follow the cursor, and so on. Speaking of cursor, it\u2019s one of the decisively brutalist elements in this design &#8211; a slightly oversized arrow with bold outline turns into a Mickey Mouse hand when it touches certain sections, and in some it even turns into the playful surfer \u201cRight on!\u201d hand gesture. The vintage quality of the design is based not just on the palette and the lettering, but also in details hinting to iconic objects from pop culture\u2019s past, such as analog synths.[\/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\/2022\/01\/Sea-Harvest.jpg\" class=\"attachment-full size-full\" alt=\"Sea Harvest\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Sea-Harvest.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Sea-Harvest-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Sea-Harvest-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/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]Fishing is one of the oldest trades in the world, and one that has often been associated with hardship, impoverished oceanside communities and simplicity. These days, however, fishing is far from a poor man\u2019s industry. Still, a lot of the aesthetics associated with the trade have been maintained, as we can see in the brilliantly designed website for the Australian fresh seafood market, <a href=\"https:\/\/www.seaharvest.net.au\/\" target=\"_blank\" rel=\"noopener\">Sea Harvest<\/a>. The homepage is designed <strong>in a minimalist manner, with thin lines dividing the layout into geometric sections, bold, headline-like typography, hand-drawn illustrations of fish and a light background with a paper texture.<\/strong> The entire layout feels like a simple paper poster taped to a telegraph pole in a remote seafront village, or, better yet, like a paper newsletter handed out in ports, as the paragraphs invite the user to \u201cRead more on page 3.\u201d This is subtly contrasted with certain modern interventions &#8211; for instance, the typography changes color from black to blue upon hover, and a marker-style drawing animation circles the menu items, also upon hover. It\u2019s a masterfully executed, simple yet striking design that successfully unites hints to the trade particularities with modern web design demands.[\/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=\"lamanna-bakery\"><\/a>Lamanna Bakery<\/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\/2022\/01\/Lamanna-Bakery.jpg\" class=\"attachment-full size-full\" alt=\"Lamanna Bakery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lamanna-Bakery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lamanna-Bakery-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lamanna-Bakery-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lamanna-Bakery-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, let\u2019s revisit one of our old acquaintances which we discussed in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/innovative-typography-hero-trends\/\">innovative hero typography<\/a>. Toronto\u2019s famous <a href=\"https:\/\/www.lamannabakery.com\/\" target=\"_blank\" rel=\"noopener\">Lamanna Bakery<\/a> is known for extravagant menu items, such as the Big Slice (which is an euphemism as the slice is not big but ginormous), as well as an array of decadent, indulgent desserts that combine Italian and North American culinary traditions. But enough with the munchies &#8211; let\u2019s take a look at the inspiration behind the Lamanna website. Resembling a poster announcing a big game or perhaps even a circus, the design bears<strong> a playful, fun character imbued in humor and exaggeration<\/strong>. Huge yellow typography on the bright red background references the colors of the basic pizza ingredients &#8211; tomato and cheese, and an array of icons and illustrations reference that fun, exciting period of the late 1980\u2019s and early 1990\u2019s, bringing in mind some of Spike Lee\u2019s visual iconography. Some of the sections feature a background in<strong> two shades of pink in wavy, psychedelic forms, which may be a hint to the classic psychedelia posters, and also a reference to cake frosting or ice cream<\/strong>. The poster-like design is occasionally broken with fullscreen photographs of food, just to remind the visitors exactly what sort of indulgence they\u2019re in for.[\/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=\"cevitxef-bilbao\"><\/a>Cevitxef Bilbao<\/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\/2022\/01\/Cevitxef-Bilbao.jpg\" class=\"attachment-full size-full\" alt=\"Cevitxef Bilbao\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Cevitxef-Bilbao.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Cevitxef-Bilbao-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Cevitxef-Bilbao-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Cevitxef-Bilbao-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.cevitxef.com\/\" target=\"_blank\" rel=\"noopener\">Cevitzef Bilbao<\/a> is a true mix of Hispanic and Latin cultures in one pot &#8211; a team of Venezuelan chefs preparing seafood Peru-style, in Bilbao, with the name and a lot of identity in the Basque language. Their main focus is ceviche but they also offer superbly cooked scallops, shrimp, fish and soups. The website is a <strong>poster-like celebration of typography and images, with fonts in an array of different styles and sizes<\/strong>. The Univers Light Condensed and Warnock Bold typefaces are used in both filled and outlined versions, in small, medium and large styles, occasionally in marquee, or with hover animations. This bold combination of fonts brings to mind <strong>design created for print, not web<\/strong>, which adds a distinct poster-like quality to the page. Motion and layout design with a variety of densely stacked sections, on the other hand, contribute to a supremely contemporary character of this website, which received the Awwwards SOTD recognition in 2021.[\/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=\"kikk-festival-2021\"><\/a>Kikk Festival 2021<\/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\/2022\/01\/Kikk-Festival-2021.jpg\" class=\"attachment-full size-full\" alt=\"Kikk Festival 2021\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Kikk-Festival-2021.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Kikk-Festival-2021-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Kikk-Festival-2021-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Kikk-Festival-2021-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Using poster design for websites promoting events, particularly festivals, has been a huge trend for the last ten or 15 years. Smaller indie festivals first started tapping into the 1970\u2019s psychedelic poster aesthetics, and major festivals and event organizers soon jumped on the bandwagon. Today, we can see this sort of design for events of any kind, from food to tech gatherings. The website for the <a href=\"https:\/\/www.kikk.be\/2021\/en\/home\" target=\"_blank\" rel=\"noopener\">2021 edition of the Kikk Festival<\/a>, an annual event focusing on digital creativity and taking place in Wallonia, Belgium, also features a layout in a poster style, but without resorting to direct references or derivative visual elements. Instead, it is an imaginative, inspired and witty <strong>exploration of surrealist and vintage motifs scattered around on a grainy, paper-like background.<\/strong> The mood it sets is simultaneously retro and contemporary, and the main motif, a stairway that leads through the festival\u2019s 10-year mark and beyond, to the future, communicates progress and a sense of optimism for what the future has to bring.[\/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=\"kazuki-noda\"><\/a>Kazuki Noda<\/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\/2022\/01\/Kazuki-Noda.jpg\" class=\"attachment-full size-full\" alt=\"Kazuki Noda\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Kazuki-Noda.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Kazuki-Noda-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Kazuki-Noda-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Kazuki-Noda-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:\/\/kazukinoda.com\/\" target=\"_blank\" rel=\"noopener\">Kazuki Noda<\/a> is a Japanese visual designer and art director, whose portfolio website is one of the shining examples of <a href=\"https:\/\/qodeinteractive.com\/magazine\/web-design-grid-lines\">grid-based web design<\/a>. And it\u2019s precisely the grid lines that lend the layout a particularly poster-like quality. Drawing inspiration partly from the Swiss design style, Kazuki created a beautiful, meticulously designed website full of innovative, delightful details and interactions, from the round cursor and animated typography to the color switcher that changes the two main colors of the layout. The background features <strong>a grainy effect that resembles both the television static and the texture of a quality paper<\/strong>. Subtle moving shadows give the design a realistic, physical feel, and the Lato typography, sometimes hollow, sometimes vertical, along with sections with rasterized or hachure patterns contribute to the poster quality of the page.[\/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=\"lions-good-news-2020\"><\/a>Lions Good News 2020<\/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\/2022\/01\/Lions-Good-News-2020.jpg\" class=\"attachment-full size-full\" alt=\"Lions Good News 2020\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lions-Good-News-2020.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lions-Good-News-2020-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lions-Good-News-2020-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lions-Good-News-2020-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The poster inspiration for a web design sometimes comes in the form of subtle visual hints or select details, and sometimes it takes up the form itself &#8211; like in case of the <a href=\"https:\/\/cannesprlions.com\/en\/lionsnews\/\" target=\"_blank\" rel=\"noopener\">Lions Good News 2020<\/a>, a website created in order to celebrate 10 years of Cannes Lions, the prominent PR and digital marketing festival. The designers wanted to place a particular focus on the past, the history and the time itself, which dictated the choice of <strong>a nostalgic, vintage tone, achieved using monochrome contrasting and colors typical of flyers and newspapers from the 1950\u2019s.<\/strong> The showcased projects are presented in the paper form, with noise and even folds and wrinkles, animated to mimic a wind effect. Whether they\u2019re posters or newspaper pages flying across a cityscape, these elements carry a strong nostalgic quality, which was the initial concept behind this project.[\/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\">Wrapping It Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]One of the biggest appeals of the poster style is that its mimicking of the physical quality of paper and paint, as well as design that is typical of print, rather than web layouts, basically transcends the medium &#8211; it reaches from one realm into another. For some, this transcending brings nostalgia for the past and simpler times. For others (typically younger audiences) it reflects the playfulness and the style experimentation typical of contemporary pop culture. And then there are all the references and familiar motifs that not only serve as visual cues but also spark delight that comes out of recognition of cultural and historic commonplaces. Finally, poster style in web design is also a testament to the designer\u2019s good taste and knowledge of design history, which contributes to the appeal of the entire website and, by extension, the reputation of the brand.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We hope that this little trip to some of the best examples of poster style in web design has inspired you to dig deeper into this trend and perhaps explore its visual potential in your next project. If you do, let us know how it turned out!<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Once the foremost means of advertising, informing and engaging the audience, the poster has long been replaced by modern media. Still, the poster aesthetics have since found their place both in graphic and in web design, giving us some truly exquisite results. <\/p>\n","protected":false},"author":3,"featured_media":33323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,43],"class_list":["post-33296","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/33296","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=33296"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/33296\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/33323"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=33296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=33296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=33296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}