Cover Image

How to Design Sexy Gradients

August 17, 2021 - Reading time: 5 minutes

Actionable UI tips to help you design better gradients.

Gradients are everywhere. It's no longer a trend from the '90s, and designers tend to employ gradients all over modern minimalistic UI. Backgrounds, buttons, toggles, cards, even shadows, you name it. Gradients have taken over digital products and Dribbble/Behance.

So what are gradients?

The gradient is a transition from one color to another. A gradient is a procedural blending made from multiple colors (a single gradient can have unlimited shades). 

We can use gradients in many ways. We can make subtle or extremely bold color combinations that can be used for both backgrounds and foreground interface elements.

Because gradients are that versatile, we use them to communicate a unique design or brand vibe.

In this article, I want to share practical tips & tricks on making gradients that stand out.

Find the right inspiration

First, we need to find the source.

The best inspiration for gradients is nature. So, start the design process by taking your time and observing the real world. Find photos of landscapes, environment, or plants as your source of colors to associate your project with.

Create your palette

Use the "Color Picker" to find the right mood. Build your palette by extracting 2 to 3 primary striking colors from a photo/picture.

It's recommended to start with only a few colors. Since the RGB color model has only 3 variables, this means you can make any gradient by solely mixing Red, Green, and Blue. RGB values are usually given in the 0–255 range;

So for making soft-looking gradients, consider using the range of 50-150 when building your palette.

Blend palette colors

Create a new layer above the chosen color palette, and make a smooth transition by adding a background blur effect. 

Now create a new layer and use the resulted blurred path to recreate your linear gradient.

Use radial gradient to add depth to a linear scale

Radial gradients are used to simulate lighting, which isn’t always linear. You can apply a radial gradient to a predesigned linear gradient and configure the light source direction to make it look even better.

Use gradient direction 
that makes sense

Employ the gradient direction where it's needed. 


For example, emit the light source to highlight a certain element, make the text more readable by placing it over colored areas, or direct the user through UI with a smooth gradient path.

Add noise to make it strike

In Figma or Sketch, apply an additional layer of grain over your gradient to make it look vintage. You can apply noise effect on the web by placing an image over your gradient.

Learn how to add noise with CSS here.

Note: Usually, you only need 0.1% to 0.5% of noise image transparency. 

Combine gradients with abstract shapes

To make your gradient, even fancier employ abstract semi-transparent shapes. Use the "Mask" tool for nesting blobby or wavy shapes beyond or above your gradient layers.

---

Thanks for the read! 🙌

If you enjoyed this article, feel free to subscribe and share these tips with others!

Cover Image

Typography: Visual Hierarchy

August 5, 2021 - Reading time: 4 minutes

Typography tips & tricks to help you better control UI visual hierarchy.

Visual hierarchy can help improve your UI/UX efficacy, conversion potential, and overall aesthetic. In other words, you can tell a whole story by solely tweaking page fonts, guiding the reader throughout your design.

To do so, you need to properly balance the visual weight of your page or a specific design area/element.

It would be best to start bold and intrigue and then proceed smoothly to an interacting CTA conclusion. So, let's find out how to properly distribute text hierarchy between size, weight, and color, so your UI stands out against the crowd.

UI typography hierarchy goes in three levels: 

Level 1 — The first thing user sees on a screen or specific area. This level is usually reserved for bold headlines that introduce the reader to a topic or specific context. Consider this level always to be clickable!

Level 2 — Contains the second-biggest font size and is usually reserved for a call to action or other options that demand interaction. Buttons and form elements are the perfect examples.

Level 3 — Used to expand upon the topic and provide less important to the design goal information. Usually, this is the  <body> text of your design.

Visual Hierarchy Typography

The key to a successful type hierarchy is high contrast between levels. Consider these techniques when designing each of them:

Don't rely solely on font size.

A common mistake is to rely solely on font size to settle all 3 levels. It often leads to primary content being too big and secondary content being unreadable.

UI Visual Hierarchy

Use fonts with multiple weights

Pick a font with 6+ different weights to have more options and control over your UI. Use both weight and color to build a high contrast pair within a consistent font size.

Visual Hierarchy in Interface Design

Multiple font-weight better communicates text importance rather than using only the font size.

Font choice in visual hierarchy

Stick to two to three font weights instead of multiple sizes:

  • Font-weight: 400/500 — for regular text;
  • Font-weight: 600/700 — for headlines and CTA's;

Use colors to convey the importance of text

Similarly, instead of a smaller font size, use softer colors for supporting text and clarify that the text is secondary without losing readability.

Visual Hierarchy in UI Design

Stick to two to three colors:

  • Primary dark color for important content (e.g., headline and pricing tag, number of reviews);
  • A grey for secondary content (less important text);

Typography: Visual Hierarchy

That's it. As you see, the results are always worth the hustle. So play it statigically and use this typography technique to design how users interact with your UI. Consider this technique as a tool to tell an eye-pleasant story and guide to your advantage.

Cover Image

Typography: Alignment

July 27, 2021 - Reading time: 5 minutes

Make your UI more effective and easy to read with text alignment.

Text alignment is a small but significant part of the interface. Alignment affects how our brain scans the content on a screen. A proper text alignment is one of the most distinct indicators of a professionally crafted digital product.

Any interface is 90% text. So that's why when you see a duly aligned typography, you get the impression that you're using a more thoughtful interface. And when something is not in its place, it hurts our perception immediately.

In this episode, I want to share practical tips to help you create a neatly aligned interface typography.

Tip 1—Avoid center alignment for long text

When text is longer than two or three lines, it is always recommended to ignore center alignment.

When you center-align a longer text, you will force the reader to make additional eye movements on both sides of the content. This causes unnecessary eye fatigue and results in lower reading focus.

Avoid center alignment for long text

Tip 2—Always left-align long text

The left-aligned text results in much better content readability, so all books, articles & newspapers are written this way. The left-aligned text helps to avoid unnecessary eye jumps, making the whole copy much easier to follow.

Always left-align long text

Note: When localizing UI for right-left languages such as Arabic, Hebrew, or Persian, use the right-alignment instead of the left one.

Tip 3—Use center alignment for headlines or small blocks 
of text only

Use center alignment if the headline is one to two lines short. If the text block is longer than two to three lines, it will always look better left-aligned.

Use center alignment for headlines or small blocks 
of text only

If you need to center more than one block of text, one of them is a little longer. The best solution is to modify/rewrite the content to make it shorter:

Use center alignment for headlines or small blocks 
of text only

Tip 4—Use the hanging alignment to connect with UI elements

Use the hanging alignment to establish a clear visual hierarchy for UI elements that don't have the same visual weight as the text, such as icons, bullets, or quote commas.

Hanging alignment helps to create a clear eye path for the text, eliminating zig-zag eye jumps.

Use the hanging alignment to connect with UI elements

Tip 5—Right-align data & numbers

Right-align numbers and timestamps when designing tables, cards, or dashboards. The numbers are easier to compare at a glance with corresponding left-aligned information when they are placed right opposite it.

Right-align data & numbers

Tip 6—Balance whitespace for justified text

Justified text works great in print, but for the web, when you want to have a more formal vibe, it may leave many uncomfortable spaces between words. To avoid these gaps, consider enabling hyphenation.

The hyphens property controls the hyphenation of text in block-level elements. Note that <hyphens> class is language-sensitive. It helps to find break opportunities depends on the language defined in the font attribute of a parent element. Not all languages are supported, and support depends on the specific browser.

Note: If the hyphenation is not an option, please ignore the justified text and stick to left-aligned text.

Balance whitespace for justified text