Top 7 Shape Styles: How to use Shapes in UI

Shape Style

Shapes represent ideas and feelings

The form can be considered as a powerful tool like color or words. Using simple shapes in design is not a trend. Designers have been using geometric shapes as decorative and structural elements in our designs for practically a century.

Circle Shape

Circle shape

Circle represents: Harmony, Unity, Amity, Eternity

Usage of Circle:
  • Buttons
  • Userpics
  • Infographics
  • Decorations

Use when you want to make a playful design.
In combination with color is perfect for entertaining niches.
Circle doesn’t have angles so it makes them softer. This is a good reason to convey warm emotions.

Square & Rectangle Shape

square-shape

Squares & Rectangles represents: Discipline, Strength, Stability

Usage of Square & Rectangle
  • Fields
  • Galleries
  • Backgrounds
  • Inputs

Often used in art and fashion niches. Sharp corners perfectly show the classic style.
Straight lines and right angles of these two shapes give a sense of reliability and security.
Use straight shapes in wireframing. It helps to divide your UI into logical components.

Triangle Shape

triangle-shape

Triangle represents: Power, Excitement, Risk

Usage of Triangle
  • Icons
  • Direction
  • Decorations

An upright triangle brings the feeling of stability and balance but the reversed one looks risky.
Triangle often used as a part of sci-fi, finances, or business sector.
Use triangles when you need to show energy and movement.

Rounded Corners Shape

ronded-corners-shape

Rounded Circle represents: Harmony, Unity, Amity, Eternity

Usage of Rounded Circle
  • Fields
  • Cards
  • Backgrounds
  • Pop-up

Rounded corners take up more space in the content area than square corners.
Hyper rounding is now a trend. Try experimenting.
Rounding corners make your interface more cute and friendly.

Line Shape

line-shape

Line represents: Progress, Inconsistency, Diversity

Usage of Line
  • Icons
  • Separation
  • Decorations
  • Direction

Lines can show the dynamics without animation.
The line can be around any shape with a border. This is called the Outline style.
Line can also help sort information by logical blocks.

Hexagon Shape

Hexagon shape

Hexagon represents: Creativity, Intelligence, Consistency

Usage of Hexagon
  • Patterns
  • Infographics
  • Forms
  • Decorations

You will rarely use this form. But think about it when you want to come up with something original.
Use hexagon/pentagon/octagon when you want to make the UI more futuristic.

Abstract Shape

abstract-shape

Abstract represent: Uniqueness, Natural, Complex

Usage of Abstract
  • Illustrations
  • Logos
  • Forms
  • Decorations

It is better not to use abstract forms for functional elements.
Effects, such as gradients, volume imitation, and others are great for abstract shapes.
It’s an effective way to transfer a message quickly without text.

Thank you for reading this article. We hope it will be very helpful for you. If you are like it, don’t forget to subscribe designkeys newsletter and get daily design news, inspiration, and tips.

Leave a Reply

Your email address will not be published. Required fields are marked *