How to Use Shapes in UI

Tegra - November 10, 2019 - 0 comments

How to use shapes in UI

How to use shapes in UI ⚡️

Courtesy of @uixlover

The shapes of objects in your design may be sending a message to users that you aren’t even aware of. Whether you put an image inside a square or circle or triangle can have an impact on what people think about that UI, illustration or logo.

Here, we will look at common shapes used in design projects and the signals they may convey.

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.
Circles  - Use when you want to make a playful design.
- In combination with color is perfect for entertaining niches.
- Circles don't have angles so it makes them softer. This is a good reason to convey warm emotions.
Squares & Rectangles  - 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.
Triangles  - An upright triangle brings the feelings 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  - Rounded corners take up more space in the content area than square corners.
- Hyper rounding is now a trend. Try experimenting.
- Rounding corners makes your interface more cute and friendly.
Lines  - Lines can show the dynamics without animation.
- The line can be around any shape with a border. This is called Outline style.
- Line can also help sort information by logical blocks.
Polygon  - 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  - 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.
Put 🔥 in comments if you want to learn Top 7 Shape Styles

Bonus — 4 tools that may be useful in your designer way:

Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.

Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.

Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.

Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.

Be free to send us any feedback by reply or reach using DM on Instagram

Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

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