I'm Alex, owner and designer at Alex Collier Design. My mission is to help you uplevel your businesses through gorgeous and strategic web design.
Sign up for
Free Guide
Are you a wedding professional looking to design your own website? Designing on a grid is an essential skill to learn to create a professional-looking website.
Remember when you were a kid and it was a big deal learning to “color inside the lines?”
As a kid, I got a thrill taking my 96-pack of Crayolas and transforming a simple outlined picture of Cinderella into a masterpiece. Given a totally blank sheet of paper, could I have re-created that same masterpiece? Heck no! It might have been creative, sure, and maybe even kind of good, but nowhere near the quality of the coloring book version. The lines gave me guidance. They showed me exactly where to color to create a stunning visual.
Your website is the same way!
The great thing about Showit is that it allows you total creative freedom. When they say you can simply drag and drop, they really mean it! But…all that creative freedom has a downside. Given this totally blank canvas, it’s easy to go nuts and place elements where they “seem” like they should go. Creativity without any boundaries can look messy, unorganized, and unprofessional.
The solution? Designing on a grid! Grid-based design is the difference between a website that looks just okay and one that looks amazing and professional.
Today I’m going to teach you why and how to design on a grid in Showit!
A grid is composed of columns (and sometimes rows) that organize a page’s structure. The grid system’s origins are in print design; pick up any newspaper or magazine and you will notice that the content is organized in proportional columns! Check out this example (of course, I had to choose a T Swift example as I did as a teacher, old habits die hard):
While some elements on this page “break the grid,” like the cutout image of Taylor and the splashy headline, the anchor elements—the text and images—follow a grid pattern. This gives structure and organization to the layout and makes the page look exciting without being haphazard and chaotic.
Grids come in many different shapes and sizes! Notice in the Taylor Swift example, each page follows a three-column grid. The standard grid for web design is a 960-pixel 12-column grid. This grid has 12 columns that are each 60 pixels wide, with 10 pixels of space on either side of each column. This creates a 20 pixel “gutter” between each column.
A 12-column grid is great for web design because it gives you so much flexibility. You can make elements stretch the full width of the grid, or you can break them into proportional sections. See, your 4th grade math teacher wasn’t joking when they said you’d use fractions in real life!
Using a grid is one of those designer secrets that will make your website look amazing! Next let’s chat about how to create a grid in Showit.
Many design programs, like Sketch (which I use and love), have grid templates you can easily download from the web. But if you’re creating your site directly in Showit, you can still create and use a grid!
Here are the steps to create a 12-column 960-pixel grid in Showit!
Remember, a grid is like the lines in a coloring book. It gives us friendly limits for where our content should go so that our creative ideas look polished and professional. That said, it’s okay to break the grid, like in the Taylor Swift magazine example above! Occasionally breaking the grid with a splashy image or quote can make your design more dynamic and fun. You gotta know the rules to break the rules!
I’d love to hear if you try creating a grid in Showit and designing your website with it! Comment to let me know how it goes!
Alex Collier is a brand, logo, and Showit web designer for wedding professionals. Are you ready for a brand and website that elevates your business and books ideal clients? Get in touch!
Site design by Alex Collier Design | Brand Images by Paty Araujo Photography