The Use of Grid Lines in Web Design: 33 Stunning Examples
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 Renaissance period, 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.
Fast forward to the present day, grid lines are used for the same purpose as ever – 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.
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:
Blumenkopf is an Austrian aesthetic studio that specializes in editorial and contemporary art. The first thing that catches users’ eyes is the large typography 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. There is a clear distinction between the smaller portion of the screen on the left, which contains the studio’s 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. 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 “Works” page, grid lines separate the studio’s 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.
Family Type 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’s typefaces. As you begin to scroll, you’ll 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’s 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. 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.
At Home Club is a terrific project that depicts how creatives around the world experience the Covid-19 pandemic and how they adapt to it. The website is devised as a catalog or a magazine that gives an insight into the artists’ world. 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 demonstrates how several simple straight lines can make a big difference in a site’s overall design and enable you to organize the content in a beautiful and immersive way.
Juxta Press 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. Incorporating grid lines into movie production, record and publishing companies’ 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. Juxta Press’ 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. These areas make the site easier to digest and allow viewers to focus equally on each work and the author. Had they been placed immediately one next to the other, users may have overlooked some of the works.
Sār Studio is a furniture design studio from India. The serene synthesis of grids and toned-down colors helped them craft a clean exhibition of their products. 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 hidden menu 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’ll 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’re interested in.
G!Theimagineers is a production studio that blends architecture, scenography, light, image, and sound in their work. The layout of their website is a bit unusual, characterized by the heavy use of geometric elements. 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 black background makes the white content and grid lines particularly prominent and eye-catching. Even though the overall design is quite minimal, once again, the smart use of simple lines and the ingenious way of arranging them have elevated the site’s appearance and made the presentation compelling and fun to browse.
Bruno Arizio’s 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’s creativity. The menu itself is hidden and presented as a “Summary”. 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 “summary” and the dominant horizontal navigation, 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. 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. The use of grid lines came especially handy to display the long list of Arizio’s 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’s skillset and his mastery of creating compelling websites using simple elements in an imaginative way.
NON is an Australian non-alcoholic wine alternative. The website is packed with vibrant visuals that immerse you in the brand’s 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. 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. 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’t for the grids, some sections of the site would probably be too overpowering. Instead, the horizontal and vertical lines make the blend of the uppercase, sans serif typefaces and animated images and videos appear cohesive and in perfect harmony, telling the story of the brand in a striking manner.
Female Faces is a project that addresses women’s issues using video portraits. The grid-based layouts ensure easy and clear navigation. The combination of the grids and the typographic simplicity evokes brutalist and Swiss Style vibes. The grids come especially in handy in the area that contains a collection of FF’s 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’re interested in quickly and easily.
New Themes
VIEW COLLECTION
Oto Nove Swiss is a contemporary music festival usually held in London’s café 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 – the upper section contains the name of the festival and the information when it was held, while the bottom area includes song previews. 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. 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.
Studio Almond 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. Both include the infinite loop effect so that the information about the company seems never-ending. 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. 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’s abilities and creativity.
Hudson Gavin Martin 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. 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, 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’ 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.
Sometimes Always 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’s 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’t feel overwhelmed for a second. 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. 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.
Cine365 Films 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’s name and the gradient background. The use of gradients and colors is a nice way of balancing out the roughness of the plain grids and subtly enlivening the site, 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.
Notter + Vigne 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, the white grid lines are almost imperceptible on a grey canvas, allowing the projects to capture all of the viewer’s attention. Most of the pages are divided into multiple columns and rows so that each of the studio’s 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’t include grids. Instead, projects are presented as parts of beautifully illustrated books, depicting the studio’s creativity in an irresistible and eye-pleasing way.
Mineral Health 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, grid lines don’t always show up straight from the get-go. 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. 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.
Honext 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. The precision of the lines, in combination with the warmth of the pastel color palette, creates an ideal environment for showcasing the company’s work. In some sections, e.g., on the “Projects” 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, the addition of the slider makes the content more attractive and mellows the stiffness of the grids.
Off Season is a design and photo studio that focuses on work with musicians. A striking combination of horizontal and vertical sections makes their website interesting to explore. 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’s 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’s 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’ll also see a small outlined circle. When you hover over it or open a page, it becomes black, signaling that the page is “in use”.
Years Months Days 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’ve worked on. Even though the entire page is packed with images from top to bottom, users don’t feel overwhelmed for a second. 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. 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, evoking strong brutalist vibes.
Salus Body is an Australia-based company that makes home spa products. Their website looks clean, appealing, with lots of white, grey, and pastel colors. 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. This is especially obvious on the homepage that contains product images, an excerpt from the studio’s 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.
Kazuki Noda 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, beige background. 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’s name are dispersed in the opening section of the site. They’re 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. Noda’s 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 we’ve mentioned earlier. The Works page contains an overview of all the projects Noda has participated in. The grids separate the project names on the left and preview pictures on the right, ensuring a streamlined browsing experience for the viewer. Throughout the site, some rectangles don’t even contain graphics or text – they’re split in two with a diagonal line, but as such, they help complete the site’s grid-based layout.
F.Miller 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 – 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 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.
Canopy Collections is a company that sells artwork created by living artists. They heavily use lines on their entire website. The layouts are divided into a plethora of sections, with every image, message, and announcement placed in a separate field. The sections vary in size. Sometimes, a row includes three identical fields. Other times, there’s one gigantic area along with another, far smaller, section. Those disparities and the unpredictability of the content organization make the browsing particularly exciting. 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 “Buy” the product appears on top of them and a black, thin frame surrounds them.
Totême 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. The design of their website mirrors the minimalism their pieces are known for and the precision they’re crafted with. And what better way to achieve such a look in web design than by adding grids. The entire content is compartmentalized, starting from the fixed menu. The menu links are separated with vertical lines, but that’s not all as far as the menu goes. When you hover over “Shop”, 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.
Ōmbia 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 the line splits into several vertical and horizontal lines, forming four sections and welcoming you to the studio’s geometrical universe. The mid-section is the largest one – it features a short, grainy, black-and-white video of one of the studio’s 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. The content is beautifully organized, with grid lines clearly marking where one element ends and the other begins. 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. Ōmbia’s 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’s versatility and creativity.
Museum of Peace & Quiet 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. The seriousness of the grid keeps the content in perfect order, enhancing the feeling of peacefulness on the site. 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’s philosophy, providing a terrific introduction to the brand.
The Mind Map 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 – “we get you”. On scroll, the middle and the right part move downward, and the word “got” 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, the designers created a clear distinction between different elements, ensuring they all get an equal amount of the spotlight and the viewers don’t miss out on something that could be of great importance and help to them.
Take a Ride with Me 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’s 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’s 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. Scroll-triggered animations 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, implementing the grid lines into the design was a smart decision as it helped create a streamlined user interface and a well-organized website.
Atolla is a skincare brand guided by the “less is more” 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’s 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. The disparity between the two styles – the sharpness on one and the softness on the other side – is attention-grabbing, gluing the visitors’ eyes to the screen. 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 “Ingredients” 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 – the list not only looks pretty, but it’s also easy to explore because of the grid layout.
Wireless Social is a provider of guest WiFi, analytics, as well as marketing and user engagement solutions. On their website, grid lines are used to create large, rectangular areas that include details about the brand, their services, as well as the accompanying photographs. The pages are filled with rectangles and squares with round edges, each containing a specific type of information about the company. The round edges soften the sharpness of straight lines and the precision of geometrical forms, making these elements easy on the viewer’s eyes. 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.
EDA is an architecture, interior design, and planning firm. Like some other brands on the list, they’ve also made the menu an integral part of their site’s design. The menu sections are vertically displayed at the right corner of the screen. 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’s professionals. The website relies on large imagery to showcase the projects the company has worked on, completely immersing you into EDA’s story.
Grainne Morton 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’s eye-appealing appearance and positive user experience. The images and texts are placed into rectangles and squares, with the precision of the lines contrasting the creativity of the depicted jewelry. Even though the pages contain a lot of photographs, the grids keep the jewelry pieces separated from one another, ensuring viewers don’t overlook any of the products.
Elam Artists 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’s 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’s name. There are a myriad of works glued to each other. Their colorfulness would appear too intense if it weren’t for the thick, black grid lines to balance out the vibrancy of imagery. Throughout the site, the grids are used to create contact forms and display search criteria to help users easily find what they’re interested in.
Closing Words
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.
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’t 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’s character and introduce the services you provide.
