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.
- 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.
- An upright triangle brings 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 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.
- 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.
- 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.
- 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.
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.