{"id":22052,"date":"2021-03-26T15:00:44","date_gmt":"2021-03-26T14:00:44","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=22052"},"modified":"2022-10-25T16:00:10","modified_gmt":"2022-10-25T14:00:10","slug":"best-pink-websites","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/best-pink-websites\/","title":{"rendered":"18 Stunning Examples of Pink Websites"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Pink &#8211; that\u2019s a girly color, right? Wrong. Well, there was a time, not so long ago, when pink was strictly associated with all things feminine, with the \u201cweaker sex,\u201d with baby girls, teens and young ladies who were expected to dress their gender and conform to society\u2019s norms of style. Fortunately, those times are behind us and we\u2019re now living in <strong>an era that questions every norm, standard and expectation<\/strong> &#8211; including colors, their meaning, and the stereotypes related to them. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Traditionally, color psychology teaches us that pink is a color of love, harmony, tenderness, affection and friendship. It is also a color representing peace and nurturing. It is the ultimate romantic color. And yes, it is one of the colors associated with womanhood.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, in design, things are not as simple. <strong>Strict divisions such as \u201cblue is for boys, pink is for girls\u201d no longer apply<\/strong> and any designer who\u2019s been paying any attention knows that pink packs so much more potential and meaning than that. In web design, pink can be soothing, calming and neutral, but it can also be electrifying, passionate and strong. It all depends on how it\u2019s used and, even more so, how it\u2019s combined. We\u2019ve been witnessing a rise of <a href=\"https:\/\/qodeinteractive.com\/magazine\/color-combinations\/\">color combinations<\/a> featuring pink over the last years and designers are becoming more daring when it comes to matching pink with tones that were previously considered a design no-no. Thanks to this, we can now enjoy a number of exciting combinations bringing forth complex meanings and creating astonishing effects.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Today, we are going to visit some of the websites that made particularly good use of this complex, powerful color:<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=\"#design-embraced\">Design Embraced<\/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-bond-conference\">The Bond Conference<\/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=\"#square\">Square<\/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=\"#basic-agency\">Basic Agency<\/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=\"#castor-et-pollux\">Castor et Pollux<\/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=\"#stuuudio\">Stuuudio<\/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=\"#femme-and-fierce\">Femme and Fierce<\/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=\"#fwa-100-jam3\">FWA 100 Jam3<\/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=\"#carol-anne-ward\">Carol Anne Ward<\/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=\"#collage-crafting\">Collage Crafting<\/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=\"#alessandra-zanghi\">Alessandra Zanghi<\/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=\"#miu-miu-twist\">Miu Miu Twist<\/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\">Kikk Festival<\/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=\"#badass-films\">Badass Films<\/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=\"#chateau-boll\">Chateau Boll<\/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=\"#studio-regale\">Studio Regale<\/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=\"#fremtidens-uddannelser\">Fremtidens Uddannelser<\/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=\"#cowboy\">Cowboy<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019re looking for ways to make your website more pink, here are examples from our Qi Theme for Elementor:[\/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=\"https:\/\/qi75.qodeinteractive.com\/\">Skincare<\/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=\"https:\/\/qi114.qodeinteractive.com\/\">Creative Interactive Scroll Portfolio<\/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=\"https:\/\/qi128.qodeinteractive.com\/\">Creative Portfolio<\/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=\"design-embraced\"><\/a>Design Embraced<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/designembraced.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Design-Embraced.jpg\" class=\"attachment-full size-full\" alt=\"Design Embraced\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Design-Embraced.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Design-Embraced-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Design-Embraced-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Design-Embraced-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/designembraced.com\/\" target=\"_blank\" rel=\"noopener\">Design Embraced<\/a> is the portfolio website of the UK-based designer, creative and art director Anthony Goodwin, whose work has been recognized through a number of important industry awards, from Awwwards to Cannes Lions and FWA. Goodwin\u2019s done a remarkable job with his website, an interactive showcase of his most significant works. He decided to open lightly, with a minimalistic red preloader on an empty background in a beautiful, soft pink hue. A delightful <strong>combination of red and pink<\/strong> serves as an introduction to his playful approach to design, of which we are ascertained right upon entering the homepage. The pink and red combination remains in the background through a list of interactive links, while a big featured image appears across it, lying sideways, inviting us to explore the designer\u2019s work. As we \u201cflip\u201d the featured images, they appear to make a circle and come back as a new image, like on some user-activated carousel. These interactions are rendered even more exciting by <strong>a liquid effect that follows the cursor<\/strong> transforming (or even deforming) the images. As the user is engaged in interacting with the artist\u2019s striking work, the pink background remains a calming constant that keeps the entire composition from going overboard.[\/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-bond-conference\"><\/a>The Bond Conference<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"http:\/\/bond.backerkit.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/The-Bond-Conference.jpg\" class=\"attachment-full size-full\" alt=\"The Bond Conference\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/The-Bond-Conference.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/The-Bond-Conference-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/The-Bond-Conference-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/The-Bond-Conference-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/bond.backerkit.com\/\" target=\"_blank\" rel=\"noopener\">The Bond 2018 Conference<\/a> in San Francisco, USA, took an in-depth look at the way creators today make a living through the internet. Considering it was announced as an \u201cintimate conference,\u201d the choice of pink for the conference BackerKit page made perfect sense. The soothing light pink is complemented by red, blue and white, creating <strong>a tight color scheme that remains consistent throughout the website<\/strong>. The delightful vector illustrations maintain the color scheme and build <strong>an atmosphere of community, support and cooperation<\/strong>. Although abundant, these illustrations don\u2019t clutter the page and actually help the information stand out. The Chap typeface brings a slightly retro air to the design and adds to its <strong>warm and relaxed character<\/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=\"square\"><\/a>Square<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/square.geex-arts.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Square.jpg\" class=\"attachment-full size-full\" alt=\"Square\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Square.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Square-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Square-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Square-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Where to start with <a href=\"https:\/\/square.geex-arts.com\/\" target=\"_blank\" rel=\"noopener\">Square<\/a>? For one, how to define it? It\u2019s a website, sure, but it\u2019s also an interface game. On top of all that &#8211; and most importantly &#8211; it is a platform. The creators label Square as an <strong>open platform for designers to share their work in full liberty<\/strong>, without the unnecessary limitations and conditions posed by the mainstream design platforms. The interactive website is designed to work both on desktops and on hand-held devices, but perhaps the best experience is achieved on mobile. It opens with a massive red preloader on pink background, counting well over 100% (the first of many <strong>delightful curiosities sprinkled around this web creation<\/strong>), after which the users are invited to \u201cpull\u201d a square and enter the psychedelic world of, well, Square. Inside, the red-on-pink motif (featured in the favicon too) is repeated again as a backdrop for <strong>floating projects that are controlled and brought in and out of the viewport by the movement of the mouse<\/strong>. It would be hard to list all the interesting, delightful and quirky interactions that Square showers its website visitors with, and we sure don\u2019t want to spoil the fun, so take a deep breath, dive in and perhaps even submit your own design.[\/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=\"basic-agency\"><\/a>Basic Agency<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/moves.basicagency.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Basic-Agency.jpg\" class=\"attachment-full size-full\" alt=\"Basic Agency\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Basic-Agency.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Basic-Agency-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Basic-Agency-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Basic-Agency-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Basic is a California-based digital branding and experience design agency that is part of the larger Dept agency. A couple of years back, Basic moved into new headquarters in San Diego, after two years of careful planning, designing and developing what was to become much more than a simple company HQ. To celebrate the move, <a href=\"https:\/\/moves.basicagency.com\/\" target=\"_blank\" rel=\"noopener\">Basic<\/a> launched a website that tracks that journey, introduces the architecture and the community that the agency is so proud of. The website opens with a video that is more about the community than the HQ building itself, which is indicative of the approach that the agency takes within and in relation to its San Diego environment. <strong>Pink neo-grotesque typography<\/strong> on a black background invites the visitors into Basics carefully crafted story &#8211; further down the page, a parallax pink-hued image of the building appears, opening the first chapter of the story. The website is generally <strong>uncluttered and clean<\/strong>, but the designers did allow themselves a bit of extravagance &#8211; the pink dot-shaped cursor, for instance, turns into a larger \u201cclick and hold\u201d circle. Upon this action, the hollow typography fills out to let us know we\u2019re entering one of the five chapters. Parallax images change, but their pink overtones pertain. In fact, the entire interface is reduced to black and pink, while the galleries are allowed to maintain their original colors. <strong>The effect that is achieved this way is at the same time minimalistic and rich<\/strong>, as the black and pink pack more nuanced meaning than the simple monochromatic palette.[\/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=\"castor-et-pollux\"><\/a>Castor et Pollux<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/rse.castoretpollux.com\/en\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Castor-et-Pollux.jpg\" class=\"attachment-full size-full\" alt=\"Castor et Pollux\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Castor-et-Pollux.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Castor-et-Pollux-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Castor-et-Pollux-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Castor-et-Pollux-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/rse.castoretpollux.com\/en\/\" target=\"_blank\" rel=\"noopener\">Groupe Castor &amp; Pollux<\/a> is an independent digital communication and certification agency based in France with progressive employee and corporate responsibility policies, and a progressive design to match. Their English language website bears a somewhat <strong>retro vibe, with soft pink background, \u201880\u2019s style typography and distinct grid lines marked with ISO demarcations<\/strong>, hinting at the agency\u2019s certification and patent-related activities. The pink background is contrasted by a fuzzy blue dot that follows the cursor and grows larger as the user hovers over interactive interface elements, such as arrows and buttons. Interactivity is sustained across other parts of the homepage as well, for instance in black typography that assumes a pink and blue gradient when hovered upon. The retro aesthetics are skillfully combined with industry hints, creating an unique and contemporary result.[\/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=\"stuuudio\"><\/a>Stuuudio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/stuuudio.co\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Stuuudio.jpg\" class=\"attachment-full size-full\" alt=\"Stuuudio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Stuuudio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Stuuudio-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Stuuudio-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Stuuudio-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/stuuudio.co\/\" target=\"_blank\" rel=\"noopener\">Stuuudio<\/a> is a full-service creative agency based out of San Francisco and Los Angeles, providing multi-disciplinary services with a focus on photography and design. The agency made sure to craft a website that would convey their mission and vision in a striking and clear manner through a well-rounded aesthetic. Upon entering the website, the visitor is welcomed by a youthful, charming pink background and a similarly-hued featured project. These colors immediately set the tone of the website, conveying the studio\u2019s <strong>unconventionality and its drive to question and reimagine the standards of design<\/strong>. This orientation can also be noticed in the choice of typography &#8211; the remarkable Ogg font with skewed I\u2019s is <strong>a combination of calligraphic and typographic forms<\/strong> and perfectly conveys the agency\u2019s tendency to dazzle &#8211; with measure. Project images in different sizes are arranged across the page almost haphazardly &#8211; or at least it seems so. In fact, their placement is the result of <strong>careful consideration of the empty space and relations between objects on the page<\/strong>. The result is light and unobtrusive, yet substantial and rich.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;pink-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=\"femme-and-fierce\"><\/a>Femme and Fierce<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/femmeandfierce.nl\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Femme-and-Fierce.jpg\" class=\"attachment-full size-full\" alt=\"Femme and Fierce\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Femme-and-Fierce.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Femme-and-Fierce-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Femme-and-Fierce-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Femme-and-Fierce-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/femmeandfierce.nl\/\" target=\"_blank\" rel=\"noopener\">Femme and Fierce<\/a> is a Dutch online fashion shop that offers a curated collection of apparel and accessories from selected indie brands. The shop is aimed at strong, independent women who want their style to reflect their disposition, and the shop reflects it, too. The palette consists of two main colors &#8211; a soft, gentle pink and a bright, bold red. The combination stands for <strong>two main feminine traits &#8211; tenderness and charm on one hand, and passion and fire on the other<\/strong>. It\u2019s a simple design concept but it works extraordinarily well, both visually and psychologically. Proxima Nova and Young Serif typefaces <strong>add an extra flair to the layouts<\/strong> and make a particularly good match with animated icons appearing sporadically across the pages. Red-hot lips, red lipstick, cartoon-like eyes and animated red arrows make a cool contrast with the soft pink background, balancing it with its vibe of fierce womanhood. As for the functionality and UX, the webshop is actually rather conventionally and intuitively structured, <strong>allowing for a smooth browsing and shopping experience<\/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=\"fwa-100-jam3\"><\/a>FWA 100 Jam3<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/fwa100.jam3.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/FWA-100-Jam3.jpg\" class=\"attachment-full size-full\" alt=\"FWA 100 Jam3\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/FWA-100-Jam3.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/FWA-100-Jam3-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/FWA-100-Jam3-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/FWA-100-Jam3-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Jam3 is a Canadian design and experience agency that won its 100th FWA award in 2020 and decided to celebrate it with <a href=\"https:\/\/fwa100.jam3.com\/\" target=\"_blank\" rel=\"noopener\">a very special website<\/a>. The agency opted for <strong>a gentle, modern color gradient of pinks, violets and blues<\/strong>, with fine white lines for the preloader and interface elements like icons, menus, buttons and progress bars. The website is, in fact, <strong>an immersive storytelling endeavor<\/strong> that takes the visitor through the past, present and future of the company using a series of interactive animations and gentle yet suggestive music. Soft, fluid and airy, the website is <strong>a remarkable testament to web, UX, 3D and graphic design, as well as art direction<\/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=\"carol-anne-ward\"><\/a>Carol Anne Ward<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/carolanneward.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Carol-Anne-Ward.jpg\" class=\"attachment-full size-full\" alt=\"Carol Anne Ward\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Carol-Anne-Ward.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Carol-Anne-Ward-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Carol-Anne-Ward-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Carol-Anne-Ward-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/carolanneward.com\/\" target=\"_blank\" rel=\"noopener\">Carol Anne Ward<\/a> is an independent stylist and art director with a simple, unpretentious, and yet <strong>strangely striking website<\/strong>. This one-page website is so simple it\u2019s almost rudimentary, or at least it would be if it weren\u2019t for the floating project images that gently appear from the bottom and make their way upwards out of the screen, allowing new ones to take their place. That way, <strong>the sole focus is on the images as the minimalist layout allows them plenty of breathing room<\/strong>. The soft pink makes for a perfect backdrop that doesn\u2019t blind the viewer with its brightness, hijack the attention of the viewer or clash with the colors in the imagery.[\/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=\"collage-crafting\"><\/a>Collage Crafting<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/collagecrafting.com\/en\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Collage-Crafting.jpg\" class=\"attachment-full size-full\" alt=\"Collage Crafting\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Collage-Crafting.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Collage-Crafting-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Collage-Crafting-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Collage-Crafting-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/collagecrafting.com\/en\" target=\"_blank\" rel=\"noopener\">Collage<\/a> is a Canada-based product design boutique specializing in contemporary hand-crafted objects, from jewelry to practical everyday items. Their focus being on a <strong>design-savvy clientele<\/strong>, Collage made sure to create a website that will strike and impress with contemporary design solutions and unique aesthetics. <strong>The color pink is used here not as a dominant, but as an accent color<\/strong>, and rather successfully so. The homepage features a dark blue background laced with large pink Neue Montreal typography, and the color is repeated strategically in almost every single interface element &#8211; the menu opener, links and the cart button. Upon entering the shop pages, the background changes to a more neutral white one, with products dominating the layouts and other elements scaling down discreetly. <strong>Hover effects<\/strong> are introduced to keep things exciting &#8211; when hovered upon, a product assumes a black background while the price, category and product name turn from black to white to accommodate the change.[\/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=\"alessandra-zanghi\"><\/a>Alessandra Zanghi<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/alessandrazanghi.studio\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Alessandra-Zanghi.jpg\" class=\"attachment-full size-full\" alt=\"Alessandra Zanghi\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Alessandra-Zanghi.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Alessandra-Zanghi-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Alessandra-Zanghi-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Alessandra-Zanghi-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]\u201cI am in the business of love,\u201d says <a href=\"https:\/\/alessandrazanghi.studio\/\" target=\"_blank\" rel=\"noopener\">Alessandra Zanghi<\/a> to the visitors entering her website. And it\u2019s a fitting opening, considering Alessandra is a destination wedding consultant. This simple yet powerful concept finds visual support in the design of the website, most notably in the gorgeous palette of <strong>lilac and lavender<\/strong>. After a short introduction, Alessandra invites us to find out more <strong>in the most traditional of storytelling ways &#8211; through chapters<\/strong>. As a <strong>fluid, abstract 3D shape<\/strong> undergoes a gentle transformation throughout the chapters conceived as \u201cImagine,\u201d \u201cYour Dream\u201d and \u201cCome True,\u201d we are drawn into an ethereal, dreamlike state of imagination and fairy-tale endings. For those preferring a more conventional user experience, there are navigational elements, albeit uniquely and somewhat cryptically designed, taking us to Alessandra\u2019s contact page, back to the homepage or to a practical uncovering footer.[\/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=\"miu-miu-twist\"><\/a>Miu Miu Twist<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.miumiu.com\/miumiu-twist\/en\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Miu-Miu-Twist.jpg\" class=\"attachment-full size-full\" alt=\"Miu Miu Twist\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Miu-Miu-Twist.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Miu-Miu-Twist-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Miu-Miu-Twist-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Miu-Miu-Twist-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In 2019, Miu Miu launched a new line of fragrances &#8211; <a href=\"https:\/\/www.miumiu.com\/miumiu-twist\/en\/\" target=\"_blank\" rel=\"noopener\">Miu Miu Twist<\/a>. While the fragrance and its bottle design didn\u2019t necessarily break any new ground, the online game that was launched as part of the promo campaign sure was a step in the new direction. Opting for <strong>old school pixel art<\/strong> and extremely straightforward gameplay, Miu Miu obviously decided to play <strong>the nostalgia card &#8211; with a classy twist<\/strong>, of course. The game opens with an intro featuring a pixelated lady dancing on the moon (the \u201cMiun\u201d) floating on a pink background. The goal is extremely simple &#8211; you are supposed to jump on perfume bottles and stack them on top of each other. When you get tired of the game, you can simply click on the pink hamburger icon that will offer to take you to the Miu Miu fragrances page or give you a chance to play again.[\/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\"><\/a>Kikk Festival<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.kikk.be\/2019\/en\/home\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Kikk-Festival.jpg\" class=\"attachment-full size-full\" alt=\"Kikk Festival\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Kikk-Festival.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Kikk-Festival-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Kikk-Festival-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Kikk-Festival-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.kikk.be\/2019\/en\/home\" target=\"_blank\" rel=\"noopener\">Kikk Festival<\/a> is an annual international conference organized by the Belgian non-profit organization Kikk, working on promoting digital and creative cultures. The website for the 2019 festival edition brings us a lovely combination of light blue and vivid pink, <strong>playing on the contrast between different color intensities and saturations<\/strong>. The homepage starts with large white typography and an animation representing ocean water, adding an extra touch of lightness and liveliness to the design. <strong>The motif of the ocean is referenced in the isolines across the background<\/strong> and the overall fluidity is maintained in the recurring use of the circle throughout the layout. Blue and pink remain predominant colors for interface elements, simultaneously contrasting and complementing the background.[\/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=\"badass-films\"><\/a>Badass Films<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/badassfilms.tv\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Badass-Films.jpg\" class=\"attachment-full size-full\" alt=\"Badass Films\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Badass-Films.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Badass-Films-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Badass-Films-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Badass-Films-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/badassfilms.tv\/\" target=\"_blank\" rel=\"noopener\">Badass Films<\/a> is an independent French production company specializing in music videos and commercials, with some 15+ directors on their roster. The website is <strong>as cinematic as one might expect<\/strong>, and then some. It opens with a fullscreen video from one of the company\u2019s productions, and a wide transparent strip in neon pink and blue, creating a faux-inverted color effect. When the strip fully loads, it brings up a side area where users can switch between different movies from a featured author. The rest of the directors from the roster are listed in large hollow typography that turns pink when hovered upon. It is also a great example of <strong>how Times New Roman can look fresh and new<\/strong>, as long as it is given the right treatment. With the <strong>fullscreen videos, vibrant, bold lettering that references cult action movies from the 1990s and an electrifying color scheme<\/strong>, Badass Films offers an immersive cinematic experience to its visitors.[\/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=\"chateau-boll\"><\/a>Chateau Boll<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/chateauboll.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Chateau-Boll.jpg\" class=\"attachment-full size-full\" alt=\"Chateau Boll\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Chateau-Boll.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Chateau-Boll-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Chateau-Boll-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Chateau-Boll-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/chateauboll.com\/\" target=\"_blank\" rel=\"noopener\">Chateau Boll<\/a> is a private residence in Reims, France, located in the heart of the Champagne region. The residence offers various hospitality services, from accommodation to programs like cooking, spa and wine cellar tours. The website is just as striking as you\u2019d imagine from such an establishment &#8211; <strong>the logo, simultaneously classy and charming, dominates over the title image<\/strong>, followed by a simple, clean booking form. The color that dominates the interface is the same one we saw in the logo &#8211; <strong>a bright, passionate red that assumes a gentler, sophisticated character<\/strong> when juxtaposed to the background colors that go from dusky, pale pink to a regal, deep violet and a plain, evergreen white. Aside from this gorgeous color palette, what\u2019s striking on the Chateau Boll website is its typography, consisting mainly of the Domaine Text typeface combined with Carlton Std and Trio Grotesk.[\/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=\"studio-regale\"><\/a>Studio Regale<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/studioregale.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Studio-Regale.jpg\" class=\"attachment-full size-full\" alt=\"Studio Regale\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Studio-Regale.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Studio-Regale-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Studio-Regale-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Studio-Regale-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/studioregale.com\/\" target=\"_blank\" rel=\"noopener\">Studio Regale<\/a> is an Amsterdam-based digital solutions agency that delivers personalized design, concept and production solutions. Upon entering the website, we\u2019re welcomed by the studio\u2019s main brand color (or, better, one of their brand colors, as we\u2019ll see in a bit) &#8211; <strong>a pleasant blue splash with a subtle wavy preloader<\/strong>. The background then assumes a delightful light pink tone &#8211; the other principal color featured on the website, combined with fine blue details and hollow animated typography. As we explore the website further, starting from the hexagonal animated menu opener in the same blue tone we saw before, we find our <strong>cursor transforming from a white circle to a hand holding out one, two or three fingers<\/strong> &#8211; depending on what we\u2019re hovering over. The site structure is simple, divided into three main sections: Home, Work and Studio. While the Work section is diverse, <strong>catering to the sensibilities and aesthetics of the works presented<\/strong>, the Studio page is highly curated and styled in the vein of the agency\u2019s established look.[\/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=\"fremtidens-uddannelser\"><\/a>Fremtidens Uddannelser<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/fremtidensuddannelser.dk\/en\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Fremtidens-Uddannelser.jpg\" class=\"attachment-full size-full\" alt=\"Fremtidens Uddannelser\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Fremtidens-Uddannelser.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Fremtidens-Uddannelser-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Fremtidens-Uddannelser-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Fremtidens-Uddannelser-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/fremtidensuddannelser.dk\/en\" target=\"_blank\" rel=\"noopener\">Future Education<\/a> is a project created by the University of Southern Denmark (SDU) with the goal of exploring new ways of studying and providing life-long learning programmes. This ambitious project is backed by an even more ambitious website &#8211; an exciting, immersive presentation featuring no less than a <strong>flying nano ship<\/strong>. After an intro featuring 3D animation, providing a quick overview of the project and its goals, the visitors are invited to <strong>fly the nano ship across the three-dimensional landscape<\/strong> representing various day-to-day situations and ways to overcome scheduling and other obstacles to effective learning. Each situation features a nano-module: a podcast, a video or an article, to be used as learning material. We start our journey from a powder-pink background (one of the <a href=\"https:\/\/www.sdu.dk\/en\" target=\"_blank\" rel=\"noopener\">SDU<\/a> brand colors) that changes as we progress through different situations, remaining within a well-defined palette of pastels. <strong>Although quite complex, the website is actually easy (and fun!) to navigate<\/strong> using keyboard arrows on desktops and laptops, or fingers on mobile devices. The most conventional part of the interface is the sidebar with information about the SDU project and vision.[\/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=\"cowboy\"><\/a>Cowboy<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/cowboy.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Cowboy.jpg\" class=\"attachment-full size-full\" alt=\"Cowboy\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Cowboy.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Cowboy-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Cowboy-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Cowboy-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/cowboy.com\/\" target=\"_blank\" rel=\"noopener\">Cowboy<\/a> is a Brussels-based startup that has shaken the biking world some time ago with its e-bike designed from scratch, with smoothly integrated components, high connectivity and smart features. The e-bike itself is a piece of art when it comes to design, so the company made sure to craft a website to match. <strong>Unpretentious, clean and intuitive<\/strong>, the startup\u2019s web presentation is an example of web design done right. Ample white space is interrupted only by the essentials &#8211; navigation links, buttons, product images and copy that\u2019s straight and to the point. The website is basically black and white, with occasional <strong>pink details that add a vibrant spark to the layouts<\/strong>. The background color changes from white to pink to black as the user scrolls through the site, but the palette is well balanced throughout and gives the layout its unique character. In short &#8211; the Cowboy e-bike website is just as sleek, functional and practical as the product it promotes.[\/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\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]Fucsia, flamingo, ruby, coral, rose, salmon, blush, powder, lilac, bubblegum, strawberry\u2026 <strong>each shade of pink bears its own meaning, atmosphere and character<\/strong>. And when it\u2019s juxtaposed to another color, it assumes new meanings and brings forth a vast gamut of emotions. As such, pink can be used for just about anything in web design: from backgrounds to interface elements, from typography to icons, becoming fresh, new and original every time. As we saw in the gorgeous examples of web design in this article, <strong>this color can be used successfully and strikingly in all sorts of niches<\/strong> &#8211; not just fashion and cosmetics. Pink is the ultimate proof that great design never submits to stereotypes. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Pink is a color with a quite complex character &#8211; soothing and electrifying, tender and fierce. It is a color that&#8217;s been gaining momentum in web design, which is why we decided to select some of the most striking pink websites that explore its rich potential<\/p>\n","protected":false},"author":3,"featured_media":22084,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,43],"class_list":["post-22052","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\/22052","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=22052"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/22052\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/22084"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=22052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=22052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=22052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}