If you have ever experienced trouble placing elements in your design, don’t worry! “Super Layout Grid Tool” is here to save your day. In this tutorial, you will learn how to use it properly and never, ever, eeeeever face this issue again.
The Super Power of Visual Hierarchy
Take a look at a picture, or design you find very mesmerizing. For some reason it feels oddly satisfying to stare at it, to visualize it. This is known as Visual Hierarchy, and it determines how you read the image and what the user gives attention to. When we are not sure how to follow this rule -especially in UI/UX design- we use The Layout Grid Tool. So let’s create one from the start.
- Open your Design File. Go to the top toolbar. Create a Frame… oh no ☹ don’t know yet how to create a Frame? We suggest checking, How to Create a Frame tutorial.
Once you create the Frame go to the menu at the left and see the Layout Grid Tool option. When you activate this option, the grid will appear over the frame you draw. If you want to change the number of grids based on how you want to place the elements of the design, just press the dropdown bottom and see what has to offer.
You can change the color and rows, and customize your grid as needed. Some designers prefer using columns instead for bottom placement for example.
Don’t be afraid to explore how your workspace can help you flow better -and even more effectively- within the design process. Remember that it will determine how long and how much of your energy will be invested in it.
In our next tutorial How to Use the Layout Grid, we will dive a bit more into it, so stay tuned!