{"id":29523,"date":"2021-09-10T15:00:12","date_gmt":"2021-09-10T13:00:12","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=29523"},"modified":"2023-10-03T16:09:16","modified_gmt":"2023-10-03T14:09:16","slug":"web-design-grid-lines","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/web-design-grid-lines\/","title":{"rendered":"The Use of Grid Lines in Web Design: 33 Stunning Examples"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Grid lines have always been used to structure content. Even the earliest handwritings and manuscripts were organized in a way that made it easier for readers to follow the storyline and understand the text. The <a href=\"https:\/\/qodeinteractive.com\/magazine\/renaissance-web-design-trend\/\">Renaissance period<\/a>, in particular, was significant for the popularization of the grid system. Thirteenth-century artists strived to achieve the perfect symmetry in their works, and the French architect Villard de Honnecourt came up with a solution. He created a diagram in which he combined the grid system with the golden ratio. That led to the creation of layouts with margins of fixed ratios, which are even today applied to magazines and books. The Industrial Revolution and the development of print led to the use of grids in newspapers and posters, but it was the Swiss Style that made the grid system an indispensable part of the design. The ideal was to achieve clarity and order, and grids have rendered that possible.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Fast forward to the present day, grid lines are used for the same purpose as ever \u2013 to create clean, easy-to-absorb content. When it comes to web design, grids can act as the backbone of a site. Even though they separate elements, they also connect them in structurally harmonious units, ensuring a great user experience. But thanks to their history and long-standing use in book and magazine design, grid lines also serve as a powerful aesthetic device that can evoke nostalgia and create a distinct sense of tactility.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To better understand how effective grids can be, we encourage you to explore the following websites that have mastered the use of grids. The brands and creatives we will talk about include:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#blumenkopf\">Blumenkopf<\/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=\"#family-type\">Family Type<\/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=\"#at-home-club\">At Home Club<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#juxta-press\">Juxta Press<\/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=\"#sar-studio\">S\u0101r Studio<\/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=\"#g-theimagineers\">G!theimagineers<\/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=\"#bruno-arizio\">Bruno Arizio<\/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=\"#non\">NON<\/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=\"#female-faces\">Female Faces<\/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=\"#oto-nove-swiss-paris\">Oto Nove Swiss &#8211; Paris<\/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-almond\">Studio Almond<\/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=\"#hudson-gavin-martin\">Hudson Gavin Martin<\/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=\"#sometimes-always\">Sometimes Always<\/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=\"#cine365-films\">Cine365 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=\"#notter-vigne\">Notter + Vigne<\/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=\"#mineral-health\">Mineral Health<\/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=\"#honext\">Honext<\/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=\"#off-season\">Off Season<\/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=\"#years-months-days\">Years Months Days<\/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=\"#salus-body\">Salus Body<\/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=\"#f-miller-skincare\">F.Miller 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=\"#canopy-collections\">Canopy Collections<\/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=\"#toteme\">Tot\u00eame<\/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=\"#ombia\">\u014cmbia<\/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=\"#museum-of-peace-quiet\">Museum of Peace &amp; Quiet<\/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-mind-map\">The Mind Map<\/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=\"#take-a-ride-with-me\">Take a Ride with Me<\/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=\"#atolla-skin-care\">Atolla Skin Care<\/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=\"#wireless-social\">Wireless Social<\/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=\"#eda\">EDA<\/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=\"#grainne-morton\">Grainne Morton<\/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=\"#elam-artists\">Elam Artists<\/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=\"blumenkopf\"><\/a>Blumenkopf<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Blumenkopf.jpg\" class=\"attachment-full size-full\" alt=\"Blumenkopf\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Blumenkopf.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Blumenkopf-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Blumenkopf-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Blumenkopf-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:\/\/blumenkopf.spatzek.studio\/home\/\" target=\"_blank\" rel=\"noopener\">Blumenkopf<\/a> is an Austrian aesthetic studio that specializes in editorial and contemporary art. The first thing that catches users\u2019 eyes is the <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large typography<\/a> that greets them on the loading screen and then again as soon as the site opens. The vertical and horizontal lines adorn the entire homepage, with the majority of the photos and copy organized into squares and rectangles. <strong>There is a clear distinction between the smaller portion of the screen on the left, which contains the studio\u2019s contact details, and the larger area on the right, with the rest of the content. In between those two parts, there is a free-floating, animated text in the background, and its movement out of the confines clashes with the rigidness of the lines, resulting in an eye-appealing show for the viewer.<\/strong> As users go from one page to the other, the vertical lines separating the two parts of the screen drift further away only to disappear from view for a few seconds. Then, the name of the selected page appears in large letters, with the grids taking their place once again, featuring new content. On the \u201cWorks\u201d page, grid lines separate the studio\u2019s works. There are seemingly no animation effects, but when users hover over displayed project previews, text bars appear around images like some sort of bold frames, containing the name of the selected work in animated letters. This is a small detail that makes a big difference, making the page more interesting and slightly edgier.[\/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=\"family-type\"><\/a>Family Type<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Family-Type.jpg\" class=\"attachment-full size-full\" alt=\"Family Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Family-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Family-Type-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Family-Type-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Family-Type-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:\/\/familytype.co\/#typefaces\" target=\"_blank\" rel=\"noopener\">Family Type<\/a> is a digital type foundry based in London and Sydney. Even though the entire homepage is ornated with grid lines, the first thing you spot is an animated, hypnotizing black-and-white ball at the top right corner of the page. Then you start to notice that each section on the homepage contains information about the foundry\u2019s typefaces. As you begin to scroll, you\u2019ll realize that the homepage includes the infinite loop effect, making the site fun to browse. Aside from the ball at the top, the site also features animated letters that move in all directions and rotate, further adding to the site\u2019s dynamicity. The menu is vertical and glued to the right-hand side of the screen, separated from the rest of the content, facilitating navigation at all times. Grid lines are applied to the inner page templates as well, creating separate sections for different types of content. <strong>The blend of the playful navigation and grids allowed the foundry to present their works in an unusual and engaging fashion that is guaranteed to leave a strong impression on viewers.<\/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=\"at-home-club\"><\/a>At Home Club<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/At-Home-Club.jpg\" class=\"attachment-full size-full\" alt=\"At Home Club\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/At-Home-Club.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/At-Home-Club-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/At-Home-Club-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/At-Home-Club-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/at-home.club\" target=\"_blank\" rel=\"noopener\">At Home Club<\/a> is a terrific project that depicts how creatives around the world experience the Covid-19 pandemic and how they adapt to it. <strong>The website is devised as a catalog or a magazine that gives an insight into the artists\u2019 world.<\/strong> The creatives are grouped based on the city in which they live. The name of each town is featured on the right-hand side of the screen and displayed as a vertical tab. You can jump to any city you like or scroll to explore them all. This website is a terrific example that <strong>demonstrates how several simple straight lines can make a big difference in a site\u2019s overall design and enable you to organize the content in a beautiful and immersive way.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"juxta-press\"><\/a>Juxta Press<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Juxta-Press.jpg\" class=\"attachment-full size-full\" alt=\"Juxta Press\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Juxta-Press.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Juxta-Press-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Juxta-Press-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Juxta-Press-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:\/\/juxtapress.it\/\" target=\"_blank\" rel=\"noopener\">Juxta Press<\/a> is an art publisher based in Milan. The first thing that catches your eye on the site is the deep blue color. Then you notice the grids and realize that the entire website is divided into squares and rectangles. <strong>Incorporating grid lines into movie production, record and publishing companies\u2019 websites is a good choice because it allows brands to display a lot of information about their artists in a visually attractive and neat way.<\/strong> Juxta Press\u2019 website is no exception. They relied on grids to create the perfect environment for exhibiting the works they published and presenting the authors they work with. Aside from the fields that include imagery and text, there are also a lot of sections with nothing but two diagonal lines in them. <strong>These areas make the site easier to digest and allow viewers to focus equally on each work and the author.<\/strong> Had they been placed immediately one next to the other, users may have overlooked some of the works.[\/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=\"sar-studio\"><\/a>S\u0101r Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sar-Studio.jpg\" class=\"attachment-full size-full\" alt=\"S\u0101r Studio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sar-Studio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sar-Studio-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sar-Studio-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sar-Studio-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:\/\/sar-studio.com\/\" target=\"_blank\" rel=\"noopener\">S\u0101r Studio<\/a> is a furniture design studio from India. <strong>The serene synthesis of grids and toned-down colors helped them craft a clean exhibition of their products.<\/strong> Every item has a space all for itself, enabling viewers to stay fully focused on one piece at a time. Some sections are completely blank, which, in addition to an abundance of white space, allows for a streamlined user experience. The <a href=\"https:\/\/qodeinteractive.com\/magazine\/web-design-hidden-menus\/\">hidden menu<\/a> is completely separated from the rest of the content in a fixed, vertical, full-height area. Its design is minimal, consisting of grid lines separating one menu link from the other. Dropdown menus open as separate full-height, grid-packed sections, taking up a significant portion of the screen. If you select a page that opens a dropdown menu that, again, leads to another dropdown menu, you\u2019ll end up having the grid-heavy menu usurp more than three quarters of the screen. But even when that happens, the clarity of the menu and the pure color scheme ensure the change is gentle on your eyes, allowing you to quickly find what you\u2019re interested in.[\/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=\"g-theimagineers\"><\/a>G!theimagineers<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Gtheimagineers.jpg\" class=\"attachment-full size-full\" alt=\"G!theimagineers\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Gtheimagineers.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Gtheimagineers-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Gtheimagineers-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Gtheimagineers-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.gtheimagineers.com\/en.html\" target=\"_blank\" rel=\"noopener\">G!Theimagineers<\/a> is a production studio that blends architecture, scenography, light, image, and sound in their work. <strong>The layout of their website is a bit unusual, characterized by the heavy use of geometric elements.<\/strong> The homepage is non-scrollable. It is split into horizontal and vertical sections, some of which are filled with outlined circles while others contain a list of the things this studio does. The right side of the screen includes the vertically placed menu. The pages are presented as tabs that, on click, expand and reveal the content of the selected section. Inner pages are split in half, with one half of the layout containing a circle (which is also divided with lines in several parts) or some other, often animated, geometric shapes, while the other includes information about the company. The <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-black-websites\/\">black background<\/a> makes the white content and grid lines particularly prominent and eye-catching. Even though the overall design is quite minimal, once again, <strong>the smart use of simple lines and the ingenious way of arranging them have elevated the site\u2019s appearance and made the presentation compelling and fun to browse.<\/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=\"bruno-arizio\"><\/a>Bruno Arizio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Bruno-Arizio.jpg\" class=\"attachment-full size-full\" alt=\"Bruno Arizio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Bruno-Arizio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Bruno-Arizio-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Bruno-Arizio-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Bruno-Arizio-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:\/\/brunoarizio.com\/\" target=\"_blank\" rel=\"noopener\">Bruno Arizio<\/a>\u2019s website opens with a string of vertical lines assembling in the middle of the screen. They slowly begin to contract, making room for a line at the top that separates the menu from the rest of the content. At the same time, animated circles appear in the viewport, running from one side of the screen to the other, ensuring an adrenalin-fueled introduction to Arizio\u2019s creativity. The menu itself is hidden and presented as a \u201cSummary\u201d. The menu links are divided with grid lines, and next to every page title there is a number. This seemingly small detail, in combination with \u201csummary\u201d and the dominant <a href=\"https:\/\/qodeinteractive.com\/magazine\/horizontal-scrolling-websites\/\">horizontal navigation<\/a>, gives the site a catalog or a book-like vibe. As you scroll further, you will notice that the name of each section is displayed vertically and separated from the rest of the content using grids. <strong>Arizio also used lines to split the collection of his selected projects. However, on scroll, work titles and details rise upward, revealing featured imagery that illustrates what projects are like.<\/strong> The use of grid lines came especially handy to display the long list of Arizio\u2019s awards. In this section, he combined vertical navigation with animated, horizontally scrolling award names. He also ensured that on hover, only the selected award remains in bold white color while the others go grey, so you can stay focused on a particular award only. The well-thought-out application of lines throughout the site, the clever combination of effects, as well as the use of vertical and horizontal navigation, demonstrate the designer\u2019s skillset and his mastery of creating compelling websites using simple elements in an imaginative way.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"non\"><\/a>NON<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/NON.jpg\" class=\"attachment-full size-full\" alt=\"NON\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/NON.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/NON-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/NON-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/NON-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=\"http:\/\/www.non.world\/\" target=\"_blank\" rel=\"noopener\">NON<\/a> is an Australian non-alcoholic wine alternative. The website is packed with vibrant visuals that immerse you in the brand\u2019s story. Background videos are especially engaging, but the grid lines also help make the site appear more appealing to the viewer. In fact, the grids allowed the designers to elegantly add the scrolling text and neatly list all of their products, seamlessly blending them in with energetic visuals. <strong>When you hover over project names, the black all-caps letters become neon green, which, in combination with grids and serifless typography, gives off brutalist vibes.<\/strong> Moreover, on hover, full-height product images appear in the viewport, covering up the content behind them and stealing all of your attention. If it weren\u2019t for the grids, some sections of the site would probably be too overpowering. Instead, the horizontal and vertical lines make the blend of the <a href=\"https:\/\/qodeinteractive.com\/magazine\/uppercase-sans-serif-typography-in-modern-web-design\/\">uppercase, sans serif typefaces<\/a> and animated images and videos appear cohesive and in perfect harmony, telling the story of the brand in a striking manner.[\/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=\"female-faces\"><\/a>Female Faces<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Female-Faces.jpg\" class=\"attachment-full size-full\" alt=\"Female Faces\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Female-Faces.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Female-Faces-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Female-Faces-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Female-Faces-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=\"http:\/\/www.femalefaces.org\/\" target=\"_blank\" rel=\"noopener\">Female Faces<\/a> is a project that addresses women\u2019s issues using video portraits. The grid-based layouts ensure easy and clear navigation.<strong> The combination of the grids and the typographic simplicity evokes brutalist and Swiss Style vibes.<\/strong> The grids come especially in handy in the area that contains a collection of FF\u2019s movies. Each feature has its own designated section. By default, you can see only the name of the movie, its duration, and the name of the director. But on hover, movie previews appear on the screen, inciting you to watch the featured films. The inertia of the grids on the homepage is interrupted by a rotating spherical shape resembling a movie reel, inviting you to call the company for entries. The website is mostly monochromatic, however, both the footer and the menu contain a gradient, with black slowly transforming into a solid red color. The color change is surprising and intense, making the site particularly interesting for viewers. Grid lines helped the company create sharp and user-friendly layouts, ensuring anyone can find what they\u2019re interested in quickly and easily.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;latest-themes&#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=\"oto-nove-swiss-paris\"><\/a>Oto Nove Swiss \u2013 Paris<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Oto-Nove-Swiss-Paris.jpg\" class=\"attachment-full size-full\" alt=\"Oto Nove Swiss - Paris\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Oto-Nove-Swiss-Paris.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Oto-Nove-Swiss-Paris-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Oto-Nove-Swiss-Paris-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Oto-Nove-Swiss-Paris-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.otonoveswiss.com\/\" target=\"_blank\" rel=\"noopener\">Oto Nove Swiss<\/a> is a contemporary music festival usually held in London\u2019s caf\u00e9 Oto. The 2020 edition took place in Paris, and the website designed for the occasion caught our eye because of its great design and the majestic use of grids. The homepage is halved with a straight vertical line \u2013 the upper section contains the name of the festival and the information when it was held, while the bottom area includes song previews. <strong>The menu is vertically placed on the screen and presented as an integral part of every page. Grid lines divide the sections that on click expand across the screen.<\/strong> There is a large, black play button next to the name of every artist. Its robustness contrasts the frailty of the thin lines, with the bold black color immediately calling for your attention, inciting you to listen to the featured songs. If you press the play button on the homepage, a vertical line appears, symbolizing the progress indicator, and splitting the screen further in four. As the song progresses, the line moves from left to right. If the song contains drums, all four parts of the homepage vibrate, mirroring the rhythm of the song.[\/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-almond\"><\/a>Studio Almond<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Studio-Almond.jpg\" class=\"attachment-full size-full\" alt=\"Studio Almond\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Studio-Almond.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Studio-Almond-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Studio-Almond-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Studio-Almond-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.almond.studio\/\" target=\"_blank\" rel=\"noopener\">Studio Almond<\/a> is a digital studio with a terrific, grid-based website. The homepage is divided into two large columns and a significantly smaller area on the far left, occupied by the vertical menu. The column on the left includes information about the brand while the one on the right features their projects. <strong>Both include the infinite loop effect so that the information about the company seems never-ending.<\/strong> The two large columns are split into several smaller parts, each containing one piece of information or a project name. As you move the mouse over works, animated previews fill-up the selected area, giving you a taste of what the projects are like. Aside from the details about the studio, the column on the left also contains interesting geometrical details which alternate with the informative copy. Some parts contain a diagonal line with an animated ball rolling down, following the direction of the line. In others, you will come across two circles, one of which is outlined and the other in 3D, with both following the movement of your mouse. The design of single project pages follows the same pattern seen on the homepage, with all layouts divided into two columns, which helps establish a cohesive aesthetic on the entire website. <strong>The designers found a beautiful way to distribute and present the content without swamping the users with too much of anything. Again, the credo that less is more proves to be true, and this website represents a great showcase of the studio\u2019s abilities and creativity.<\/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=\"hudson-gavin-martin\"><\/a>Hudson Gavin Martin<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Hudson-Gavin-Martin.jpg\" class=\"attachment-full size-full\" alt=\"Hudson Gavin Martin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Hudson-Gavin-Martin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Hudson-Gavin-Martin-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Hudson-Gavin-Martin-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Hudson-Gavin-Martin-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:\/\/hgmlegal.com\/\" target=\"_blank\" rel=\"noopener\">Hudson Gavin Martin<\/a> is a corporate and commercial law firm specializing in technology, media, and intellectual property. The design of their website is not a typical law firm presentation. <strong>The bold, black grid lines divide the layout into a plethora of sections, each containing some new information about the company, an article written by their employees<\/strong>, etc. White and pastel colors are dominant on the site, but on hover, most blocks become green, red, blue, or dark grey, contrasting the calmness of the surroundings. That way, the users\u2019 eyes stay glued to the selected element. In some sections, the titles are written sideways, and this detail, in combination with the grids and interesting color changes, makes the website look contemporary and helps this law firm stand out from the competition.[\/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=\"sometimes-always\"><\/a>Sometimes Always<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sometimes-Always.jpg\" class=\"attachment-full size-full\" alt=\"Sometimes Always\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sometimes-Always.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sometimes-Always-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sometimes-Always-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Sometimes-Always-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:\/\/sometimesalways.com.au\/\" target=\"_blank\" rel=\"noopener\">Sometimes Always<\/a> is an online wine shop. Their website is aesthetically pleasing, with warm yellow as well as soft orange and brown dominating the color palette. Given the large number of products they had to showcase on the site, implementing the grid lines into the design was a logical choice. Just take a look at the homepage. There\u2019s a myriad of photographs and a lot of text, amusing typographic choices with bold, italic, and regular styles combined in one sentence, but you don\u2019t feel overwhelmed for a second. <strong>The seriousness of the grid lines helps tone down the vibrancy of the pages, ensuring no element overpowers the other and allowing users to focus on all sections equally.<\/strong> The same principle is applied to inner pages, where each bottle has its own place, and each gets an equal amount of attention from the user. Aside from keeping the wine bottles away from each other, the grids also help keep the menu organized. As viewers hover over some menu links, a mega menu appears, with grid lines parting the menu sections from images, allowing users to quickly jump to the page that interests them the most.[\/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=\"cine365-films\"><\/a>Cine365 Films<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cine365-Films.jpg\" class=\"attachment-full size-full\" alt=\"Cine365 Films\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cine365-Films.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cine365-Films-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cine365-Films-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cine365-Films-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:\/\/cine365films.com\/en\/\" target=\"_blank\" rel=\"noopener\">Cine365 Films<\/a> is a Spanish movie production company. Their website has an interesting, predominantly black-and-white design with colorful gradients on the menu. However, when you jump back to the homepage from any other section on the site, the loading screen briefly shows the homepage layout with no text on it. There is only the studio\u2019s name and the <a href=\"https:\/\/qodeinteractive.com\/magazine\/beautiful-gradient-websites\/\">gradient background<\/a>. <strong>The use of gradients and colors is a nice way of balancing out the roughness of the plain grids and subtly enlivening the site<\/strong>, especially the homepage that includes no graphics. When you hover over movie names, only then will the movie previews appear in the designated field, inviting you to learn more about the selected work. Project single pages mirror the design of the homepage, except that they include a lot more imagery and details about the movie in question. Everything is clean and the overall design is quite simple, allowing the featured movies to steal the spotlight.[\/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=\"notter-vigne\"><\/a>Notter + Vigne<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Notter-Vigne.jpg\" class=\"attachment-full size-full\" alt=\"Notter + Vigne\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Notter-Vigne.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Notter-Vigne-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Notter-Vigne-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Notter-Vigne-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=\"http:\/\/www.notter-vigne.ch\/\" target=\"_blank\" rel=\"noopener\">Notter + Vigne<\/a> is a graphic studio based in Switzerland. Their website looks minimalist and refined. The grey background is the perfect backdrop for the colorful portfolio previews displayed on it. Moreover,<strong> the white grid lines are almost imperceptible on a grey canvas, allowing the projects to capture all of the viewer\u2019s attention<\/strong>. Most of the pages are divided into multiple columns and rows so that each of the studio\u2019s projects has a section for itself. Imagery is the star of the website and the previews look like posters or book covers. When you hover over them, only then do you see the name of the work in question and some basic details about it. Project single pages don\u2019t include grids. Instead, projects are presented as parts of beautifully illustrated books, depicting the studio&#8217;s creativity in an irresistible and eye-pleasing way.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"mineral-health\"><\/a>Mineral Health<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Mineral-Health.jpg\" class=\"attachment-full size-full\" alt=\"Mineral Health\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Mineral-Health.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Mineral-Health-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Mineral-Health-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Mineral-Health-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:\/\/mineralhealth.co\/\" target=\"_blank\" rel=\"noopener\">Mineral Health<\/a> is a company that makes products from hemp that relieve anxiety and pain, help with sleep, and can be used in skincare, too. The website includes lots of large images, but the palette is quite subdued. Grid lines can be seen on layouts but also in the menu, where they separate one menu link from the other. On pages, <strong>grid lines don\u2019t always show up straight from the get-go<\/strong>. Sometimes they appear only when you hover over a specific section, as seen on the homepage. In some areas, there seem to be no borders between product images. However, as soon as you put the pointer on them, the photos become transparent and grids appear along with the details about the product in question. <strong>The overall passivity of the content on some pages is broken with the horizontally scrolling text. Its movement clashes with the rigidness of the grids, making the layouts more eye-catching.<\/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=\"honext\"><\/a>Honext<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Honext.jpg\" class=\"attachment-full size-full\" alt=\"Honext\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Honext.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Honext-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Honext-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Honext-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:\/\/honextmaterial.com\" target=\"_blank\" rel=\"noopener\">Honext<\/a> is a company that makes sustainable construction materials. Considering the niche this brand belongs to, the use of grids and geometrical shapes on the site comes as no surprise. Precision is one of the key elements in the building industry, and grid lines help Honext achieve the same accuracy and stability on the website. <strong>The precision of the lines, in combination with the warmth of the pastel color palette, creates an ideal environment for showcasing the company\u2019s work.<\/strong> In some sections, e.g., on the \u201cProjects\u201d page, the content is placed in a horizontal slider. And while the site is fun to explore even without any in-your-face animation effects,<strong> the addition of the slider makes the content more attractive and mellows the stiffness of the grids.<\/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=\"off-season\"><\/a>Off Season<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Off-Season.jpg\" class=\"attachment-full size-full\" alt=\"Off Season\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Off-Season.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Off-Season-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Off-Season-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Off-Season-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:\/\/offseasoncreative.com\/studio\/\" target=\"_blank\" rel=\"noopener\">Off Season<\/a> is a design and photo studio that focuses on work with musicians. <strong>A striking combination of horizontal and vertical sections makes their website interesting to explore.<\/strong> The menu items are presented as vertical folders with perpendicular page titles. On click, each folder unveils its rich, colorful content. At the bottom of the page, there\u2019s a pastel blue area with contact details and a stamp that makes this section look like a postcard. Aside from the unusual navigation and engaging layout, this website contains some more elements that make it fun to explore. For instance, on the left, just below the studio\u2019s short bio, there is a section with two outlined squares that intersect. They react to the movement of your cursors and, depending on the direction you move it in, the squares get closer together or drift further apart. Next to the name of each page, you\u2019ll also see a small outlined circle. When you hover over it or open a page, it becomes black, signaling that the page is \u201cin use\u201d.[\/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=\"years-months-days\"><\/a>Years Months Days<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Years-Months-Days.jpg\" class=\"attachment-full size-full\" alt=\"Years Months Days\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Years-Months-Days.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Years-Months-Days-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Years-Months-Days-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Years-Months-Days-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:\/\/y-m-d.com\/\" target=\"_blank\" rel=\"noopener\">Years Months Days<\/a> is a creative direction and design studio with offices in Melbourne, Berlin, and Munich. The homepage of their portfolio website includes colorful previews of the projects they\u2019ve worked on. Even though the entire page is packed with images from top to bottom, users don\u2019t feel overwhelmed for a second. <strong>By adding grid lines to the layout, the YMD studio has separated the projects so that each work has its own space and gets an equal amount of attention from viewers.<\/strong> Some project previews include only static images but there are also works presented as animated photos, setting the page into motion. Throughout the page, there are several horizontally scrolling sections showing the time and date in the three cities in which YMD has offices. Inner pages are hidden from the immediate view. When you open them, they slide into the viewport from either side of the screen. Their design is very minimal, containing nothing but text and grids, <strong>evoking strong brutalist vibes.<\/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=\"salus-body\"><\/a>Salus Body<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Salus-Body-1.jpg\" class=\"attachment-full size-full\" alt=\"Salus Body\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Salus-Body-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Salus-Body-1-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Salus-Body-1-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Salus-Body-1-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:\/\/salusbody.com.au\/\" target=\"_blank\" rel=\"noopener\">Salus Body<\/a> is an Australia-based company that makes home spa products. Their website looks clean, appealing, with lots of white, grey, and <a href=\"https:\/\/qodeinteractive.com\/magazine\/beautiful-pastel-websites\/\">pastel colors<\/a>. <strong>The pages are content-rich. However, by implementing grid lines into the layouts, Salus ensured users can easily distinguish one type of content or product category from the other.<\/strong> This is especially obvious on the homepage that contains product images, an excerpt from the studio\u2019s bio, a quote that explains what spa means to them, and much more. Grid lines help create a clear distinction between different categories, keeping the interface clear and intuitive. While there are no crazy animation effects on the site, interesting layouts make up for the inertia of the images and grids. For instance, the top section of the homepage includes a black-and-white photo of a herb that takes up one half of the screen. On scroll, that image stays fixed. However, the menu links and the complementing images that take up the other half of the page change, revealing new product categories with each new scroll. The same type of navigation is applied to inner pages, increasing their appeal.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"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\/2021\/09\/Kazuki-Noda.jpg\" class=\"attachment-full size-full\" alt=\"Kazuki Noda\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Kazuki-Noda.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Kazuki-Noda-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Kazuki-Noda-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/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 Tokyo-based visual designer and art director. His portfolio website is a terrific testament to his skillset. The first thing you see is a grainy, cinematic, <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-beige-websites\/\">beige background<\/a>. Then, a blue rectangle appears on the screen, containing some short introductory text. Before you access the main content, you can decide if you wish to play the background music while you explore the site. Once you make your choice, an airy blue matter appears on the screen, stretching from the center of the screen toward the edges, revealing the homepage. The website is imaginative, with enrapturing hover and animation effects. The letters of Noda\u2019s name are dispersed in the opening section of the site. They\u2019re rotated in all directions, seemingly disconnected from one another. When you move the cursor over them, they follow the movement of your mouse. All the while, short information about Noda appears next to the letters. This introductory part of the homepage is visually different from other sections because it contains what appears to be an animated shadow of the tree. While you get to learn more about the designer, the leaves move in the wind, adding a gentle, artistic touch to the page. The site is by default in beige and blue, but you can choose a different palette and go for a beige backdrop in combination with blue, yellow, black, and several other hues. <strong>Noda\u2019s projects are placed each in its separate section. When you hover over their names, video previews appear in the viewport. They stretch from the center of the screen toward the edges of the designated box in the same style as the loading animation<\/strong> we\u2019ve mentioned earlier. The Works page contains an overview of all the projects Noda has participated in. <strong>The grids separate the project names on the left and preview pictures on the right, ensuring a streamlined browsing experience for the viewer.<\/strong> Throughout the site, some rectangles don\u2019t even contain graphics or text \u2013 they\u2019re split in two with a diagonal line, but as such, they help complete the site\u2019s grid-based layout.[\/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=\"f-miller-skincare\"><\/a>F.Miller Skincare<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/F.Miller-Skincare.jpg\" class=\"attachment-full size-full\" alt=\"F.Miller Skincare\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/F.Miller-Skincare.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/F.Miller-Skincare-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/F.Miller-Skincare-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/F.Miller-Skincare-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:\/\/fmillerskincare.com\" target=\"_blank\" rel=\"noopener\">F.Miller<\/a> is a clean skincare brand. Their website beautifully complements their packaging design and looks just as minimal as their bottles do. This is especially evident on pages with product images \u2013 the background is white with minimal black typography, mirroring the look of simple, white product labels. On hover, product photos start to undulate, as if they suddenly turn to liquid. This animation is a gorgeous contrast on an otherwise <strong>tranquil terrain where grids keep the content in place. Pages also include lots of white space, which, in combination with grid lines, makes up for an uncluttered and easy-to-explore interface.<\/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=\"canopy-collections\"><\/a>Canopy Collections<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Canopy-Collections.jpg\" class=\"attachment-full size-full\" alt=\"Canopy Collections\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Canopy-Collections.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Canopy-Collections-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Canopy-Collections-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Canopy-Collections-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:\/\/canopy-collections.com\/\" target=\"_blank\" rel=\"noopener\">Canopy Collections<\/a> is a company that sells artwork created by living artists. They heavily use lines on their entire website. <strong>The layouts are divided into a plethora of sections, with every image, message, and announcement placed in a separate field.<\/strong> The sections vary in size. Sometimes, a row includes three identical fields. Other times, there\u2019s one gigantic area along with another, far smaller, section. <strong>Those disparities and the unpredictability of the content organization make the browsing particularly exciting.<\/strong> The online shop is the only page with the modest use of grids. Product images are displayed in the metro style with no lines dividing them, making the layout resemble a gallery wall. On hover, though, photos fade out as the invitation to \u201cBuy\u201d the product appears on top of them and a black, thin frame surrounds them.[\/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=\"toteme\"><\/a>Tot\u00eame<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Toteme-1.jpg\" class=\"attachment-full size-full\" alt=\"Tot\u00eame\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Toteme-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Toteme-1-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Toteme-1-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Toteme-1-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:\/\/int.toteme-studio.com\/?geo=updated\" target=\"_blank\" rel=\"noopener\">Tot\u00eame<\/a> is a Swedish womenswear brand. They say their goal is to explore the appeal of uniforms, which is why their pieces are precise and perfectly cut. <strong>The design of their website mirrors the minimalism their pieces are known for and the precision they\u2019re crafted with.<\/strong> And what better way to achieve such a look in web design than by adding grids.<strong> The entire content is compartmentalized<\/strong>, starting from the fixed menu. The menu links are separated with vertical lines, but that\u2019s not all as far as the menu goes. When you hover over \u201cShop\u201d, a mega menu appears, with grids separating categories from one another. In the footer, the displayed sections are encircled with a rounded rectangle, adding a touch of softness to the page and making it more interesting to the eye.[\/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=\"ombia\"><\/a>\u014cmbia<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Ombia.jpg\" class=\"attachment-full size-full\" alt=\"\u014cmbia\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Ombia.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Ombia-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Ombia-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Ombia-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:\/\/ombiastudio.com\/\" target=\"_blank\" rel=\"noopener\">\u014cmbia<\/a> is a ceramic sculpture and design studio located in Los Angeles. While you wait for the content to load, a horizontal line appears on the screen, dividing it into two parts. Then <strong>the line splits into several vertical and horizontal lines<\/strong>, forming four sections and welcoming you to the studio\u2019s <strong>geometrical universe<\/strong>. The mid-section is the largest one \u2013 it features a short, grainy, black-and-white video of one of the studio\u2019s lamps. The name of the studio is displayed vertically, with each of the two words placed in separate sections on the left and the right of the video. The top sticky rectangle features the menu. As you continue to explore the website, you will notice that every page contains grids. <strong>The content is beautifully organized, with grid lines clearly marking where one element ends and the other begins.<\/strong> Before the images load, you will first catch a glimpse of a rectangle divided in two with a diagonal line. Once the photo appears, the diagonal line vanishes but the rectangular frame remains. \u014cmbia\u2019s website blends art and geometry, as well as the coarseness of their products with the precision of the grid lines, creating a captivating presentation that reflects the studio\u2019s versatility and creativity.[\/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=\"museum-of-peace-quiet\"><\/a>Museum of Peace &amp; Quiet<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Museum-of-Peace-Quiet.jpg\" class=\"attachment-full size-full\" alt=\"Museum of Peace &amp; Quiet\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Museum-of-Peace-Quiet.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Museum-of-Peace-Quiet-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Museum-of-Peace-Quiet-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Museum-of-Peace-Quiet-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:\/\/museumofpeaceandquiet.us\/\" target=\"_blank\" rel=\"noopener\">Museum of Peace &amp; Quiet<\/a> is a fashion label committed to designing simplistic clothes and accessories that evoke tranquility and peace, much as nature does. They even have an app that includes calming sounds of nature to help you unwind and find peace away from the noise. Exploring their website is a calming experience in itself. Its neutral, muted, and washed-out colors are easy on the eyes. <strong>The seriousness of the grid keeps the content in perfect order, enhancing the feeling of peacefulness on the site.<\/strong> Animation effects are subtle, with images slowly appearing on scroll within the spaces framed by grids. The overall look of the site is in sync with the brand\u2019s philosophy, providing a terrific introduction to the brand.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-mind-map\"><\/a>The Mind Map<\/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=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/The-Mind-Map.jpg\" class=\"attachment-full size-full\" alt=\"The Mind Map\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/The-Mind-Map.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/The-Mind-Map-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/The-Mind-Map-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/The-Mind-Map-620x350.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:\/\/themindmap.co.uk\/\" target=\"_blank\" rel=\"noopener\">The Mind Map<\/a> is a group of counselors and mental health experts offering help to those in need. The homepage opens with a section divided into three parts, each containing one word \u2013 \u201cwe get you\u201d. On scroll, the middle and the right part move downward, and the word \u201cgot\u201d appears on the screen, informing audiences that these experts not only get them but they also got them. This is an imaginative way of presenting the company to viewers, ensuring a great first impression. Grid lines dominate the layouts, with each new detail about the company, their services, and the helpful content they provide put in its own small section on the screen. That way, <strong>the designers created a clear distinction between different elements, ensuring they all get an equal amount of the spotlight and the viewers don\u2019t miss out on something that could be of great importance and help to them.<\/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=\"take-a-ride-with-me\"><\/a>Take a Ride with Me<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Take-a-Ride-with-Me.jpg\" class=\"attachment-full size-full\" alt=\"Take a Ride with Me\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Take-a-Ride-with-Me.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Take-a-Ride-with-Me-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Take-a-Ride-with-Me-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Take-a-Ride-with-Me-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=\"http:\/\/www.takearidewith.me\/\" target=\"_blank\" rel=\"noopener\">Take a Ride with Me<\/a> is a POV video website by Nikolaj Juhlsen. He is a Danish videographer that takes you on exciting adventures on his bike. All you have to do to join him is press the play button. As you move past the opening section of the site, the cursor morphs into two circles that occasionally even blink, symbolizing the protagonist\u2019s eyes. Through them, you can see video previews and glimpses of gorgeous terrain explored on a bike. Further down the page, the details about Nikolaj and featured trips are organized into sections divided by grid lines, which helps you get a clear and complete picture of the site\u2019s content. Video previews are presented inside of circles that, just like the cursor, sometimes blink, again, mirroring the movement of the eyes. The emphasis is on the POV experience Nikolaj provides, hence the designers imbuing the site with eye-like details. <a href=\"https:\/\/qodeinteractive.com\/magazine\/scroll-triggered-animations\/\">Scroll-triggered animations<\/a> are stunning, with some copy moving diagonally on scroll and a CD rolling from one side of the screen to the other, leaving a trail behind. Given the number of featured rides Nikolaj takes you on, <strong>implementing the grid lines into the design was a smart decision as it helped create a streamlined user interface and a well-organized website.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"atolla-skin-care\"><\/a>Atolla Skin Care<\/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=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Atolla-Skin-Care.jpg\" class=\"attachment-full size-full\" alt=\"Atolla Skin Care\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Atolla-Skin-Care.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Atolla-Skin-Care-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Atolla-Skin-Care-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Atolla-Skin-Care-620x350.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:\/\/atolla.com\/\" target=\"_blank\" rel=\"noopener\">Atolla<\/a> is a skincare brand guided by the \u201cless is more\u201d principle. The same approach is applied to the design of their website. The entire content is in grids, with elegant, thin lines separating photographs of Atolla\u2019s products from the accompanying copy. To contrast the straightness of the lines, the designers displayed the call-to-action buttons and some short information in rectangles with rounded edges. <strong>The disparity between the two styles \u2013 the sharpness on one and the softness on the other side &#8211; is attention-grabbing, gluing the visitors\u2019 eyes to the screen.<\/strong> Every layout contains grid lines, which helps users find information about the brand and their products with the utmost ease. This is especially obvious on the \u201cIngredients\u201d page. The long list of ingredients is presented using gorgeous charts, with photos and the name of each ingredient displayed in a separate section. This is a smart way of sharing data that to some people might appear dull &#8211; the list not only looks pretty, but it\u2019s also easy to explore because of the grid layout.[\/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=\"wireless-social\"><\/a>Wireless Social<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Wireless-Social.jpg\" class=\"attachment-full size-full\" alt=\"Wireless Social\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Wireless-Social.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Wireless-Social-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Wireless-Social-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Wireless-Social-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:\/\/wireless-social.com\/\" target=\"_blank\" rel=\"noopener\">Wireless Social<\/a> is a provider of guest WiFi, analytics, as well as marketing and user engagement solutions. On their website, <strong>grid lines are used to create large, rectangular areas that include details about the brand, their services, as well as the accompanying photographs<\/strong>. The pages are filled with rectangles and squares with round edges, each containing a specific type of information about the company. <strong>The round edges soften the sharpness of straight lines and the precision of geometrical forms, making these elements easy on the viewer\u2019s eyes.<\/strong> Every layout starts off with a gorgeous gradient that, after the grand introduction and several scrolls, melts into a white background. The footer is in dark grey, contrasting the rest of the content and making useful links and social media icons noticeable.[\/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=\"eda\"><\/a>EDA<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/EDA.jpg\" class=\"attachment-full size-full\" alt=\"EDA\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/EDA.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/EDA-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/EDA-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/EDA-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:\/\/edaarch.com\/\" target=\"_blank\" rel=\"noopener\">EDA<\/a> is an architecture, interior design, and planning firm. Like some other brands on the list, they\u2019ve also made the menu an integral part of their site\u2019s design. <strong>The menu sections are vertically displayed at the right corner of the screen.<\/strong> When you hover over one of them, the selected link increases in size, encouraging you to click on it. And when you do click on a tab, you will see some stunning content that illustrates the skillset of EDA\u2019s professionals. The website relies on large imagery to showcase the projects the company has worked on, completely immersing you into EDA\u2019s story.[\/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=\"grainne-morton\"><\/a>Grainne Morton<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grainne-Morton.jpg\" class=\"attachment-full size-full\" alt=\"Grainne Morton\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grainne-Morton.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grainne-Morton-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grainne-Morton-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Grainne-Morton-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.grainnemorton.co.uk\/\" target=\"_blank\" rel=\"noopener\">Grainne Morton<\/a> is an Edinburgh-based jewelry designer and maker. The website is a true feast for the eyes, not just because of the authentic jewelry, but also because of the beautiful, soft pastel color scheme. Moreover, the skillful use of grid lines is critical to the site\u2019s eye-appealing appearance and positive user experience.<strong> The images and texts are placed into rectangles and squares, with the precision of the lines contrasting the creativity of the depicted jewelry.<\/strong> Even though the pages contain a lot of photographs, <strong>the grids keep the jewelry pieces separated from one another, ensuring viewers don\u2019t overlook any of the products.<\/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=\"elam-artists\"><\/a>Elam Artists<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Elam-Artists.jpg\" class=\"attachment-full size-full\" alt=\"Elam Artists\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Elam-Artists.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Elam-Artists-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Elam-Artists-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Elam-Artists-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:\/\/elamartists.ac.nz\/\" target=\"_blank\" rel=\"noopener\">Elam Artists<\/a> is a platform devised for the students of the Elam School of Fine Arts at the University of Auckland. The website opens with a cinematic video presentation that provides an overview of some of Elam\u2019s art projects. The use of grids is most obvious on the homepage. Every project is placed in its own box, containing a preview image and the author\u2019s name. There are a myriad of works glued to each other.<strong> Their colorfulness would appear too intense if it weren\u2019t for the thick, black grid lines to balance out the vibrancy of imagery.<\/strong> Throughout the site, the grids are used to create contact forms and display search criteria to help users easily find what they\u2019re interested in.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Closing Words<\/h2>\n<p>[\/vc_column_text][vc_column_text]Grid lines create clarity and order on a website. They help ensure every element on the website gets equal amounts of attention and they make intricate presentations more subtle and easier to consume. Grids also allow for an excellent user experience by making the layouts cleaner and better organized, and therefore, more intuitive and easier to explore.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you question whether adding grids to your design would be a good decision, think of the ways a grid system could benefit your website and your users. As you can see, some brands use grid lines only for the menu or they go all the way and apply them to entire layouts. Even if you do add them to an entire website, you don\u2019t have to fill up all of the spaces with content. Instead, you can play with some geometric or abstract shapes, animate them in a fun way,and then add them somewhere between the grids. You can also add only simple lines, just to avoid creating too intense visual experiences. Play with colors and hover effects until you create a grid system that will help you highlight your brand\u2019s character and introduce the services you provide.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Besides structuring content, grid lines can also be a powerful aesthetic device. In this article, we explore their use in contemporary web design by showcasing some of the best sites that have mastered the grid<\/p>\n","protected":false},"author":4,"featured_media":29597,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,150,40,43],"class_list":["post-29523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-grid","tag-inspiration","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=29523"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29523\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/29597"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=29523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=29523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=29523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}