{"id":8316,"date":"2023-04-11T15:50:09","date_gmt":"2023-04-11T15:50:09","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=8316"},"modified":"2023-11-07T16:46:21","modified_gmt":"2023-11-07T16:46:21","slug":"how-to-use-grids-in-web-design","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/how-to-use-grids-in-web-design\/","title":{"rendered":"How to use grids in web design: 5 golden rules"},"content":{"rendered":"

Grid systems are the foundation of well-designed websites. By using grids, web designers can ensure that their websites have a clear hierarchy, are easy to navigate, and look aesthetically pleasing. What\u2019s more, grids facilitate the web design process by providing a guiding structure (and helping designers out of blank-page paralysis mode).\u00a0<\/span><\/p>\n

Unsure of how to use grids in web design? In this blog post, we’ll look at the role grids play in a seamless user experience, and discuss five golden rules for incorporating grids into your next project.\u00a0<\/span><\/p>\n

Here\u2019s what we\u2019ll cover:<\/span><\/p>\n

    \n
  1. What is a grid?<\/span><\/a><\/li>\n
  2. Why are grids important in web design?<\/span><\/a><\/li>\n
  3. What are the different types of grids?<\/span><\/a><\/li>\n
  4. How to create a website grid<\/span><\/a><\/li>\n
  5. 5 golden rules to follow when creating website grids<\/span><\/a><\/li>\n
  6. Final thoughts<\/span><\/a><\/li>\n<\/ol>\n

    Ready to get started? Let’s dive in!<\/span><\/p>\n

    \n\t
    \n\t\t
    \n\t\t\t
    \n \n

    [GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

    <\/a>1. What is a grid?<\/strong><\/h2>\n

    No matter the subject or style, you\u2019ll notice that many websites follow similar web design conventions. For example, most websites have invisible margins on either side of the page\u2014and the content will fall on certain lines, rather than being placed sporadically around the page. This is because most websites are designed using grids.\u00a0<\/span><\/p>\n

    \u200b\u200bA grid system is an underlying structure that helps organise elements on a page. It combines various columns and rows, allowing designers to arrange UI elements in a consistent pattern or format. This makes it easier for users to navigate through the page or app without getting confused or frustrated.\u00a0<\/span><\/p>\n

    Think of grids as <\/span>the skeleton of a website or app<\/span><\/a>.\u00a0<\/span><\/p>\n

    \"skeleton<\/p>\n

    [Via <\/span>Muzli<\/span><\/a>]<\/span><\/p>\n

    A well-designed grid system creates balance, symmetry, and uniformity throughout the design. It’s essentially a virtual map that any website designer will use to design the page layout. Attempting to design a digital interface without one would be like trying to build a house without a blueprint.\u00a0<\/span><\/p>\n

    <\/a>2. Why are grids important in web design?<\/strong><\/h2>\n

    One of the most <\/span>important pillars of web design is <\/span>usability<\/b><\/a>. If users can\u2019t find what they\u2019re looking for quickly and easily, they\u2019ll likely leave your website without a second thought.\u00a0<\/span><\/p>\n

    Grids make it easier for users to find what they need by providing visual cues about where things are on the page. They also help create a more consistent experience by ensuring all page elements line up correctly, even when viewed from different devices or browsers. This means that no matter how someone views your website, they\u2019ll have a friction-free experience navigating it\u2014instead of getting frustrated due to misaligned elements or confusing layouts.\u00a0 <\/span><\/p>\n

    In addition to helping users, grids help facilitate a smooth web design process. Rather than having to design each page from scratch, designers use grids to help break down a webpage into individual elements that they can easily place within the existing structure (kind of like a game of Tetris!). <\/span> \u00a0\u00a0<\/span><\/p>\n

    \n\t
    \n\t\t
    \n\t\t\t
    \n \n

    [GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

    <\/a>3. What are the different types of grids?<\/strong><\/h2>\n

    Now that we\u2019ve got a handle on what grids are, and their role in the web design process, let\u2019s look at five of the most common grid systems you\u2019ll find in everyday digital products.\u00a0<\/span><\/p>\n

    Column grid<\/strong><\/h3>\n

    Columns are vertical page divisions that organise content into sections. Each column should have consistent widths throughout the page to allow the layout components to fit proportionally within each row. Websites can have anything from two to 16 columns that span the width of a landing page.<\/span><\/p>\n

    The horizontal dividers between columns are called gutters, and should be as uniform in width as the columns. They provide white space between elements on the page, making it easier for users to distinguish between different components.\u00a0<\/span><\/p>\n

    \"Column<\/p>\n

    [Via <\/span>Muzli<\/span><\/a>]<\/span><\/p>\n

    Hierarchical grid<\/strong><\/h3>\n

    Hierarchical grids are a little more flexible, and help designers arrange content in order of importance. Hierarchical grids divide a page into columns and rows. But unlike column grids, it also introduces a clear hierarchy to the page by emphasising certain elements over others.\u00a0<\/span><\/p>\n

    Hierarchical grids are especially popular on text-heavy websites, like blogs or news sites, where they\u2019re used to feature the latest content.\u00a0<\/span><\/p>\n

    \"hierarchical<\/p>\n

    [Via <\/span>UX Collective<\/span><\/a>]<\/span><\/p>\n

    Manuscript grid<\/strong><\/h3>\n

    Like hierarchical grids, you\u2019ll find manuscript grids on text-heavy websites like blogs\u2014as well as offline resources like newspapers and magazines. It consists of large, single columns designed to accommodate large amounts of text without overwhelming readers. Manuscript grids also allow for plenty of white space around text blocks so readers can quickly scan through content without experiencing \u2018information overload.\u2019\u00a0\u00a0<\/span><\/p>\n

    \"manuscript<\/p>\n

    [Via <\/span>Visme<\/span><\/a>]<\/span><\/p>\n

    Baseline grid<\/strong><\/h3>\n

    A baseline grid uses horizontal lines rather than boxes or columns. These lines are crucial for ensuring consistent spacing between each textual element, and help make your webpage readable and accessible. Baseline grids are particularly useful for re-scaling content, while maintaining set conventions for spacing and leading between elements.\u00a0<\/span><\/p>\n

    \"baseline<\/p>\n

    [Via <\/span>InVision<\/span><\/a>]<\/span><\/p>\n

    Modular grid<\/strong><\/h3>\n

    The modular grid combines all four previous types\u2014columns, hierarchy, baselines, and manuscripts\u2014in one unified structure. Modular grids are made up of square or rectangle content blocks that can be arranged according to their size and importance, to achieve maximum visual impact. <\/span><\/p>\n

    \"modular<\/p>\n

    [Via <\/span>UX Planet<\/span><\/a>]<\/span><\/p>\n

    <\/a>4. How to create a website grid<\/strong><\/h2>\n

    Now for the fun part: Creating your very first website grid! For beginner designers, creating basic website grids has never been easier. Most best-in-class design tools like <\/span>Sketch<\/span><\/a> and <\/span>Figma<\/span><\/a> have built-in grid layouts you can use (and customise).\u00a0<\/span><\/p>\n

    Let\u2019s take a quick look at how to get set up with a website grid in Figma.\u00a0<\/span><\/p>\n

    Once you\u2019ve chosen your screen size, the first step to creating a grid system in Figma is to <\/span>enable the layout grid option<\/b>. To do this, click on \u201cview\u201d on the top menu bar and select \u201clayout grids\u201d from the drop-down menu. This will display a column of numbers that represent different breakpoints.\u00a0<\/span><\/p>\n

    Breakpoints refer to different device sizes and orientations. If you\u2019re designing a website for desktop screens, for example, you might want to set your breakpoints at 1280px or 1440px instead of 1024px. It\u2019s key to decide which breakpoints work best for your project before you set your grid dimensions.\u00a0<\/span><\/p>\n

    Once you\u2019ve decided on your breakpoints, it\u2019s time to adjust your dimensions accordingly. You can do this by selecting \u201clayout settings\u201d on the right-hand side of the screen. There, you can play around with the grid properties\u2014and even change the kind of grid you\u2019re using.\u00a0<\/span><\/p>\n

    Then, you can start designing your elements according to your grid! To learn more, check out <\/span>Figma\u2019s own guide to implementing and editing grid layouts<\/span><\/a>.\u00a0<\/span><\/p>\n

    <\/a>5. 5 golden rules to follow when using grids in web design<\/strong><\/h2>\n

    Grids might seem straightforward enough\u2014but when misused, they could make your site more complex. To help guide you, we\u2019ve rounded up some <\/span>essential rules to follow for an optimal website layout<\/span><\/a>.\u00a0<\/span><\/p>\n

    Choose the right grid \u00a0\u00a0<\/strong><\/h3>\n

    When getting started with a new web design project, it might be tempting to populate the page with the most common grid (i.e., Column or modular) and go from there. But that might not be the best way forward.\u00a0<\/span><\/p>\n

    To create an effective grid layout for your website, you need to choose one that best fits with its intended purpose. For example, if you want to create a simple blog or portfolio site, a basic 12-column grid might work fine. But if you need a grid for a more complex project, like an e-commerce site, then it may be worth looking into more dynamic grid systems that allow for maximum flexibility.\u00a0<\/span><\/p>\n

    Use responsive grids<\/strong><\/h3>\n

    A cardinal rule of web design is ensuring your website is responsive across all devices. In other words, your website needs to work on various screens and devices. Enter: Responsive grids.\u00a0<\/span><\/p>\n

    Unlike regular static grids, responsive grids use percentages to distribute the content uniformly regardless of screen size. They\u2019re key for adapting your layout for various screens without distorting the content or dimensions.\u00a0<\/span><\/p>\n

    Incorporate enough white space<\/strong><\/h3>\n

    White space (also known as negative space) should always be considered when creating grid layouts for websites. White space provides a visual break between different elements on the page, which helps make them stand out more clearly\u2014and makes navigation easier for users. White space can also help bring focus to certain elements on the page, while still keeping everything organised and neat.\u00a0\u00a0<\/span><\/p>\n

    Grids are a valuable tool for ensuring \u2018repetition of space\u2019 between your elements\u2014but it\u2019s up to you to ensure the dimensions of your grid allow for enough white space around the page.<\/span><\/p>\n

    Honour the Rule of Thirds\u00a0<\/strong><\/h3>\n

    The rule of thirds is a web design concept based on the principles of visual perception. According to the rule of thirds, designers should divide webpages into nine equal parts with two vertical and two horizontal lines. By placing the most important elements on the \u2018thirds\u2019 of the grid, users’ eyes will be naturally more drawn to them\u2014which will influence how they navigate the site.\u00a0<\/span><\/p>\n

    Considering the rule of thirds will influence which type of grid you use, and where on the grid you\u2019ll place important elements. <\/span> \u00a0 <\/span> \u00a0 <\/span> \u00a0 <\/span> \u00a0 <\/span> \u00a0 \u00a0 <\/span> \u00a0 \u00a0 <\/span> \u00a0 \u00a0 \u00a0 <\/span> \u00a0 \u00a0 \u00a0 <\/span> \u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n

    Consider The Golden Ratio\u00a0\u00a0<\/strong><\/h3>\n

    If you want a pixel-perfect grid layout, it\u2019s worth using the golden ratio. The golden ratio is a mathematical proportion that equals 1:1.618. If we consider this proportion a rectangle, its length would be 1.6180 times the width. This ratio can be applied to any shape or element, and is a helpful reference point when working out how to divide up the page\u2014and how much space to allocate to each component.\u00a0<\/span><\/p>\n

    <\/a>6. Final thoughts\u00a0<\/strong><\/h2>\n

    When it comes to web design, grids can be an invaluable tool in helping to create engaging and effective designs. By setting up columns, rows, and margins, design elements have room to breathe\u2014and users can quickly get to grips with the interface without getting overwhelmed.\u00a0<\/span><\/p>\n

    Following these five golden rules of grid usage can help you ensure that your design is clean, organised, and cohesive. If you take all these best practices into account as you approach your next design, you\u2019ll be left with a professional, well-thought-out website that users will love.\u00a0<\/span><\/p>\n

    To learn more about the principles of great web design, check out these related blog posts:\u00a0<\/span><\/p>\n