UI Grid Best Practices
May 20, 2021 - Reading time: 6 minutes
Make better designs with layout grid tips & tricks.
Space and grid make the foundation of any design. Once mastered and used correctly, the grid helps you to create solid and visually appealing solutions for your designs.
Therefore, I would like to share my tips for mastering the grid in UI design. In this episode, we talk about layout grids. Let's start ✌️
What is a Grid?
The grid helps establish the foundation of any interface. You can think of it as a framework for your layout. The framework helps to organize your UI elements, guide the reader and identify individual parts of your design.
Terminology
The grid consists of grid units. The layout is placed upon the grid and has a certain amount of columns. Columns have margins on the left and right, as well as paddings between each column.
Tip 1—Choose numbers wisely
While the 12-column Bootstrap like-grid is the most popular choice, it's not mandatory. When choosing a grid, select the one with a number of columns your design truly needs, no less, no more.
Tip 2—Know your constraints
Always consider the screen you are designing for. Know how it is handled and operated by others. Use these limitations to your advantage and learn to design with them.
Most common screen resolutions (px)
- Desktop: 1440x1024
- Tablet: 768x1024
- Mobile: 320x640
Tip 3— Horizontal and vertical spacing
Consider both vertical and horizontal spacing to make your layout more appealing and consistent.
Tip 4—Shape vertical rhythm
Use the baseline grid to arrange the content and bring visual consistency to your text and layout elements.
Bonus tip—Adjust font line-height to match the baseline grid.
For example: If you choose 4px as a baseline/grid unit, to align text, you will need to set the line-height of the font to a multiple of the unit, which means the line height should be 4, 12, 32, 64, etc.
Tip 5—Use power of the frame & color
Use framing as a tool to focus your user's attention on a certain layout part. Add additional visual weight in the place where it is needed.
Tip 6—Step out of the grid
Put certain elements off the grid. Use this breakdown trick to add value and make certain parts of your design stand out.
Tip 7—Adapt your grid
Ensure your layout is adaptable to common screen sizes, breakpoints and provides a good mobile user experience. Make sure to always check your designs on different screens.
Tip 8—Learn to design without a grid
Designing without the grid is okay for a small project indeed, but for scaling projects, it's mandatory.
Learn to design with a grid and without actually bringing it to your canvas. Observe your layout without the "grid glasses" from time to time to find the most creative solutions for your tasks.
Useful resources
Resources
Plugins
- Layout grid vizualizer —Better layout visualization (Figma);
- Grid generator — Generate grids in seconds (Figma);
- Guides—Quickly generate guides for a selected element (Sketch);
- Copy/Paste—Copy-paste layout grids (Sketch).
How to Be a Better Designer
April 16, 2021 - Reading time: 8 minutes
Mindful tips for a creative job journey.
How to be a good designer? It's hard to say.
Probably one should be able to code, know Photoshop, be a good architect or manager + designer + unicorn, or smth. But this is not an article about that.
Here I collected tips/perks I discovered through my journey into calling myself a designer.
Consider these tips to represent summarized concepts rather than serious ass advice.
Have fun. Subscribe if you like the tips!
Tip 1 — Work a lot
Practice makes perfect, so learn to have fun in the process.
Instead of dreaming about the outcome, enjoy the small details of your daily routine and learn to be happy while you are in these waters.
Tip 2 — Take a break
Learn to distract yourself from cluttered thoughts and calm your mind. 💭
Instead of staring at the screen, relaxing and conducting inner research can bring the best ideas when stuck.
Consider trying meditation as one of the tools you apply to progress from time to time.
Tip 3—Master your tool
Any tool. Just focus on one at a time and achieve results with it.
Once you master one, you will be able to do crazy shit, even if it is photoshop or Excel. And the next tool will be much easier to get into.
With time you will notice that the learning process is — also an interface you can actually master.
Tip 4 — Steal like an artist
It’s hard to come up with original ideas at the start.
So no need to shame. Find someone else’s design you really like, and copy it while constantly making it better.
Think about this process being rethinking a problem solution rather than stealing the idea.
Tip 5 — Learn to listen
Use listening as a tool to establish trust with people you work with.
Use listening to learn others' viewpoints, collect valuable intel, and make your design bulletproof.
Tip 6 — Articulate your design
Know how to present your work and articulate your decisions.
Put ego far away when reviewing and getting feedback also.
Tip 7 — Learn to lose
Sometimes your design won't work, and it's okay.
Please do yourself a favor and don't focus on the loss, considering it as a defeat.
Use lose as a valuable experience to get ready for the next battle.
Tip 8 — Optimize your process
Plan your way smartly - use best practices and guides to shorten the distance.
Skip designing everything from scratch and pre-made assets to speed up the process.
Always strive to re-use and power up your toolkit.
Useful resources
References
Tools
How to Design Better Icons
April 16, 2021 - Reading time: 4 minutes
Interface iconography tips & tricks.
Iconography is one of the most crucial parts of the user interface. It’s a visual language that represents commands, content and reveals the meaning behind functionality.
Your icons should always represent simple visual metaphors that users can understand and recognize instantly.
Based on how you design and use icons in your product, you can bring a feel of uniqueness to the brand. So here are my tips to help you design better icons.
Tip 1 — Set up a grid
You’ll never create just a single icon. You always design a set. To make your set uniform, you will need a grid.
Define the safe zone and set keylines. Use a resulted grid as a template to solidify all your icon’s proportions and sizes.
Tip 2 — Make it consistent
Use the same line width, corner radius, and fill style when designing your set. This will ensure your icons look brand unified and more recognizable.
Exmaple: Line thickness - 2px, corner radius - 3px;
Tip 3 — Make it clear
Less is more in the icon design. Use clear metaphors with the same amount of details to make each icon easy to recognize and understand.
Tip 4 — Use equal spacing
Use the same amount of space between your icon elements to make your set look harmonious.
You can count the distance between vector lines by holding the ALT key in Figma, Sketch, or XD.
Tip 5 — Optical correction
Align your icon elements based on the optical center and balance the visual weight.
Tip 6 — Fill the space
Rotate narrow icons and use the whole container space to get better readability.
Tip 7— Combine styles
Use fill & outline styles to describe the interface states and help the user spot the right icon or button.
Tip 8 — Handy tools
Tools
- Icons8.com
- iconfinder.com
- flaticon.com
- thenouproject.com
Resources
Updates
FAQ