Inspiration
Reads
- Color Theory For Designers — Learn more about color theory and different color schemes types.
- The Psychology Of Color — Learn the meaning of each color.
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
How to Make Badass Shadows
April 16, 2021 - Reading time: 3 minutes
Tips to help create better UI shadows.
Shadows play a huge role in modern user interfaces. They bring depth and hierarchy to organized rectangles.
Based on how you use them, they can bring joy and a feel of elevation to your interface. Here are my tips to help create better shadows with such design tools as Sketch, Figma, or XD.
Tip 1 — Make it Soft
Don’t use default application shadows. Instead, adjust the shadow opacity around 5–25%, and set a higher level of blur.
Bonus Tip:
You can also perform this trick with CSS. Here is a great material showcasing many use cases of applying multiple shadows within a single property.
Tip 3—Don’t use pure black
Avoid using #000 for shadows. To make the shadow look more realistic — pick a color based on the element background or its surroundings.
Tip 4—Use a separate layer as a shadow
For a more decorative purpose. You can duplicate the layer and put it beneath the original to emit a more natural-looking shadow.
Add a smaller layer with a maxed blur behind your fore element.
Tip 5— Add depth
Position your shadows based on the light source to emit their direction. Lower the fore layer’s opacity and add a slight border for more depth vibes.
Tip 6— Make it crisp
Add a 2-step gradient stroke/border to highlight the shadow and make it crispy.
Tip 7 — Blur images background
Put a blurred image behind another to radiate a more natural colored shadow and match it with the image.
Tip 8—Handy tools
Tools
- neumorphism.io — Generate Soft-UI CSS code
- brumm.af/shadows—Make a smooth shadow visually and copy the code
- softui.io—Generate neumorphic styles
- neumorphic.design—Neumorphic playground
Resources
Design Better UI Color Palette
April 15, 2021 - Reading time: 19 minutes
8 Tips for creating bulletproof UI color schemes.
Color is everywhere. Working with color is an essential part of any brand, and a modern interface strives for its recognition. Therefore, choosing and using colors to achieve business goals can be challenging for any designer.
The choice you make affects the look and impacts how the customer feels about your product and business. Here are my practical tips on creating a bulletproof UI color scheme to help you make the right choice.
1. You must choose. But choose wisely
Define your primary colors.
The primary color is the first thing you should decide on.
The primary color is displayed most frequently across your screens and is used to point users to UI’s focal actions. Ideally, you should have 1 to 3 primary colors easily associated with your brand or product. That’s it.
Find your whites and blacks.
The only rule here is not to use an absolute white or black.
Absolute black and white colors can exhaust eyes when reading or performing actions. White (#FFF) has 100% color luminance, and black (#000) has 0%. Such an imparity makes intense contrast, which is harder for human eyes to adapt when navigating and reading.
Avoid using pure black on pure white, especially on larger areas. The best thing would be to use a limited grayscale palette made from neutral black colors with added white tints. Here is a quick sample you can apply in your projects:
Use the same accent colors.
Consistency is the key. Use the same color for both your links and buttons. By doing this, you will help users to spot interactive elements and perform actions seamlessly.
Use semantic colors to highlight important information.
Semantic colors — are colors used to signal user information about success, error, warning. Use semantic colors if you want:
- To highlight a vital UI status, positive or alert info;
- To validate text fields or controls like toggles, checkboxes;
- To give fast visual feedback, like a new in-app message.
2. 60–30–10 Rules
This technique comes from real-world design, but it perfectly fits digital products. The 60% + 30% + 10% rule works because it brings the feel of balance and helps the eye move smoothly from one CTA area to another, guiding your user through the interface.
The rule is super simple and goes like this:
- 60% of your space is for your primary/area color;
- 30% Is your secondary/supportive color;
- 10% Is your accent and guiding color.
You can use these proportions to find the right balance when matching and combining your colors without turning your UI into a colorful mash.
It is considered that these proportions are pleasing to the human eye because they allow one to perceive interior design and your screen's overall composition easily.
To better visualize, let us have a quick example with “60–30–10” in action:
Bonus Tip:
You can also apply colors in a different order, and it will still work. Wow!
3. Know your audience
The key to a good UX is understanding your audience.
Color plays an important role here, as your choice impacts the user's feelings and emotions when interacting with your product.
Therefore, when choosing a color, it is essential to ask and answer yourself the following questions:
- Who is your target audience?
- How old are they?
- What is the specialization of your product?
- What emotions do you want your brand to evoke?
These questions may and should affect your choice, so keep them rolling when choosing the UI palette and discussing your team's choices.
4. Use photos to create your color palette
One of the very cool tricks is to use nature or architecture to inspire your unique color scheme.
There are plenty of tools on the web that can help you generate a color palette from an image. Here are my personal favorites you can easily use:
- Coolors.co/image-picker (Web app);
- Alembic (Sketch plugin);
- Image-Palette (Figma plugin).
Have fun, and take inspiration from things you like.
5. Contrast is your friend
Use contrast based on your goals.
If you want to focus your user’s attention on a specific action, It’s a good idea to use high contrasting colors to help him find the focal point.
Such colors as blue, green, and red will quickly tell the context before the user reads the buttons’ text.
Contrast helps users to distinguish various text and non-text elements. Higher contrast makes the imagery more comfortable to see, and reducing contrast can give a more flat tone to images.
However, when dealing with UI design, a high contrast level can also be harmful if applied unwarily. If your text has too much contrast with the background, your UI will be harder to scan.
That why it's always a good idea to conduct a contrast check with the desaturation, evaluate the contrasting success, or just testing your design on different screens.
Bonus tip:
A tip to help you check the overall level of saturation with your designs.
Put a rectangle over your Frame or Artboard, click on show/hide through the night, to check and match your colors' overall contrast with your eagle eye. See if colors have or not the same level of saturation gamma.
Put a #000 layer with Saturation fill over your colors. Check your color's saturation pattern. See something no one else can see.
6. Keep an eye on Accessibility
As a designer, you have to take care of your users, especially when working with color, since not all people perceive it in the same. According to recent research, about 285 million people worldwide are visually impaired: blind or suffering from other vision impairments.
So here are a few tips to keep in mind when designing digital products:
- Don’t rely solely on colors. Use supportive text and iconography for all necessary commands;
- Make your foreground elements stand out from the background. aka., Neumorphism is not for everyone;
- Contradictory commands should be strikingly distinguishable. e.g. (Blue vs. Red);
- Always provide a valid alt text for your images;
- Implement keyboard navigation into your product.
7. Use a straightforward naming convention
When using your colors within a design system, always provide an exact name for each color. Every member of your team should understand names without the additional hustle and easily refer to a specific color within the product.
Avoid using a color gradation in names such as Light Blue or Darker Blue. Instead, use functional words that best describe the color in UI purpose. e.g., Positive, Warning, Active, Primary-Blue.
8. Tools & Bonus Reads
Tools
- Coolors.co — Simply the best tool for picking colors.
- Designspiration.com — Find images based on the color of your choice.
- Material Color Tool — Apply color palettes to your UI and measure any color combination's accessibility level.
- Palx — Generate a color palette based on your primary color.
- Copypalette.app — Create your palette and easily copy/paste it into Sketch or Figma.
Updates
FAQ