large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="http://ift.tt/2nuuGN4">| Prototyping: From UX to Front End &mdash; Medium</a> Meghan Lazier 
Both budding and expert designers know how important a layout is to design. It’s the most basic and fundamental element of every project. Grids help ensure a consistent framework to organize graphic elements, like type and images, into a hierarchy. If you want to use a grid, or break it altogether, you have to first understand the basics of a grid system.
A grid is an approach to laying out a design. A grid is made of up of horizontal and vertical elements and modules that create a structure for your work. Because grids create a system, they can help a designer ensure that a layout is balanced and has a good sense of proportion. In your final design, a grid will help with readability and clarity, even though the grid will be invisible to the untrained eye.
<img alt="" src="http://ift.tt/2ndOsdL.">
History and Popularity The grid system was popularized by the Swiss style of graphic design, which debuted in the 1940s and 1950s. The Swiss style is recognizable by its use of sans-serif type, primary colors and grid layouts.
<img alt="" src="http://ift.tt/2nKvu1f."><img alt="" src="http://ift.tt/2ndLTbG.">
The Swiss style has had a recent renaissance because of its emphasis on “<a href="http://ift.tt/1k0l8mD">simplicity, legibility and objectivity</a>,” makes it incredibly relevant to digital design.
<img alt="" src="http://ift.tt/2ndMIkK.">
Terms When working with designers, you’ll want to understand the terms that comprise a grid system. Here are a few foundational terms to start:
<ul>
<li>Format: A format defines the area of a design. It’s the size and space of the canvas you’re working on, whether it’s an A4 poster or a browser window.</li>
<li>Element: An element is a single component of a layout. An image and a sub-heading are two separate elements.</li>
<li>Module: A module is the building block of a grid that ties together multiple elements. Modules form columns and rows.</li>
<li>Gutter: A gutter is a space that separates modules. Gutters can be horizontal or vertical.</li>
</ul>
These terms just skim the basics. If you’re interested in learning more, we recommend <a href="http://ift.tt/2nKA2oi">Making and Breaking the Grid</a> by Timothy Samara or <a href="http://ift.tt/2ndzPXV">Layout Essentials: 100 Design Principles for Using Grids</a> by Beth Tondreau for a deeper dive.
Breaking the Grid Once you know how a grid system works, you can start to play within it. While a grid may seem overly strict or formulaic, it will give your design structure and clarity. Like all good rules, breaking a grid is more fun if you know the impact you’ll make!
Originally published at <a href="http://ift.tt/2nKA2EO">trydesignlab.com</a>.
<img src="http://ift.tt/2ndP1EB" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2nKseTj">The Power of the Grid</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Power of the Grid

The Power of the Grid

Top Stories