When you go to a website or look at a restaurant menu, they are organized in a way that balances out the experience for the viewer and the aesthetic that it provides. These are generally built around grids. Grids are a way to organize and structure a website, building, and many other objects or interfaces. They have been used in art, design, and architecture for centuries and it creates an easy way to present and visualize information or create beauty. At one point in life, you too may have even used grid design, whether it be inadvertently or on purpose.
Looking at Grid Designs
There are many ways you can use the grid design method to create art, interfaces, or websites. Through the grid method, we will be taking a look at one design that was executed successfully, one that went above and beyond with creativity, and one that (in my opinion) did not achieve a good design. To me, a successful grid design holds good spacing between items rather than each item fighting over space.
Rainbow Six Siege (Ubisoft)
In the Game Rainbow Six Siege, there is a shop menu where you can go and purchase cosmetics that you can customize your characters and their respective loadouts with. Compared to the old interface that it used to have, this is more appealing and easier to traverse. Each item shown takes up its own space and appeals visually to the consumer, dropping its usual darker background for a lighter and abstract one. This lets the consumer know they are welcome and this is a place where they can relax and not worry about their next game. The negative space between each item is used well and allows for the subject to show itself. Each item in the menu takes up its own space and allows the user to traverse from one screen to another easily. While they could do a few things to improve the interface like clearly saying that these items are featured or on sale, or even keeping the lighter themed background in all the menus, it does an excellent job of presenting a calming yet exciting experience for the players.
Liquipedia
Liquipedia is a community-driven website where the people who love the competitive esports scene. It contains an archive of past, present, and future events for multiple competitive games and allows its users to update the final scores and records for each team following a match or event. Each game on the site has a color code to it, so that why you will see this reddish color as the main focus. I love the thought that went into the website. However, I believe when it comes down to the execution, it does not present itself that well.
Looking at the main page, it can look very overwhelming at first. There is a lot of information and options that take up space and make it feel cluttered. What makes it feel even weirder is the fact they didn’t make use of the blank space that appears on the left side of the page. It makes the experience feel a little off for new people visiting the page for the first time especially since it is already pretty hard to navigate the page if what you want is not already on the home page. The main focus of the page should be on the active games and tournaments. However, the clutter drags the attention away from that and has us looking at the events shown on the right side of the screen.
When you look at the other pages on the website, the spacing between items is used beautifully and allows for the viewer to breathe and actually analyze the information they came to obtain. The images they use are striking and set it apart from the rest and the headings effectively separate each section of the page (although they could be a little bit bigger) because of the spacing allowed. However, looking at the main page, the site is end-loaded on the right side while as you traverse to the left it is open. While the grid layout does make sense (when you get used to it), the lack of space between items does not prove it. If they find a way to balance out the site in terms of content. I believe the designer here was trying to make it so you could keep track of upcoming events easier, and to promote as many tournaments as possible, but it ended up backfiring and cluttering up the page. In my opinion, instead of promoting multiple matches, they could on the landing page, promote the top 5 matches they believe will bring in attention, or even promote matches they feel should get more viewership, and then dedicate a page to upcoming/ongoing/completed matches (each owning their own respective page). They could even separate the completed tournaments by year.
Evil Geniuses
Evil Geniuses is a professional esports organization that competes in multiple different game titles and has a large group of content creators to help drive and connect with their fanbase. The website is very abstract and breaks off from the traditional styles of grid design. At the top of the page, the logo fading into the background adds depth to the page and makes it seem as if the text above it is almost floating or detached from the page. While it does incorporate some styles of grid design, the montage style of images that are collected on the page alongside text design that blends with the background in some cases helps to offset and make it almost unnoticeable.
The images in the montage style are also added at different sizes and overlap one another as well. Because of the overlap, variable sizing, and the lack of space between the images, the grid that you would normally notice becomes invisible and creates a sense of unity between them. It makes sense because the images are supposed to represent the different groups (teams, sponsors, and content creators) they work with.
Conclusion
Grid Design can be a challenging topic to handle, especially if you are new to the field. How you handle it can either separate you from other brands or organizations making the user experience simple relaxing, or it can make a troubling experience for the viewer and make them expend more effort than needed to understand it. Make sure when you handle grid design you handle spacing and color in a way that fits your brand. Evil Geniuses used the lack of space in their images to create unity while the Rainbow Six: Siege in-game store used spacing and color to make everything stand out in its own way and create a relaxing atmosphere. In the end, how you use spacing and color is up to you—it can make a big difference.