When designers express brand and hierarchy in UI, they’ll often turn to familiar systems of color, imagery, and typography. But there’s another, overlooked element in the designer’s toolbox: shape.
All the visual objects can be analyzed in terms of shapes. For example, an average house may be perceived as a rectangle with a triangle on the top and the sun is often presented as a circle with lines around it.
Hearing the word shape most people think about geometric figures first. There are plenty of geometric shapes that people see daily including squares, circles, rectangles, and others. But what do they mean? Dan Romero has come up with how to using shape in UI Design. Check them out below.
1. Curves
A curve is defined as a smoothly- flowing continuous line that has bent. It does not have any sharp turns. The way to identify the curve is that the line bends and changes its direction at least once.
Circles, ellipses, parabolas, and hyperbolas, as well as arcs, sectors, and segments, are included in two-dimensional curved shapes. Curves will work perfectly in modern and friendly sites. Use them carefully, though.
2. Lines
A line connects two points. It’s also the path made by a moving point. Lines can be thick or thin. They can be long or short. They can be vertical, horizontal, or diagonal. They can be solid or dotted or dashed. Lines can be curved or straight of combinations of both. There’s an endless variety in what we think of as a line.
Each of the different ways we draw or represent a line gives it unique characteristics. Thick lines convey a different meaning than thin lines. Curved lines send a different message than a sharp straight line. They work fantastic with a clean and well-spaced layout.
3. Circles
The circle is a perfect shape, meaning that it is the same no matter how you look at it. It is complete and in harmony with nature – consider how many natural elements are circle-based.
Circles have a free sense of movement – wheels, balls, merry go rounds. Their movement may also represent power and energy. Due to their curved lines, ovals and circle are graceful and complete. They give a sense of integrity and perfection. They work perfectly for background decoration, feature introduction, and isolated buttons.
4. Diagonals
Diagonal backgrounds and slanted lines create an off-center appearance to the layout. It creates a wonky feeling that draws the eye across the whole composition. It also creates natural “breaks” in page content and even offers a gridless feeling to the layout.
Diagonal lines can take a “meh” design up to spectacular pretty fast. But going too far with diagonal lines can take a design from spectacular to unusable just as fast. With diagonals, we accomplish a lot of dynamism and a natural sense of speed.
5. Triangles
In design, skinny triangles can be used instead of arrows or pointers. Smaller triangles can be used as shapes in a collage with an interlocking composition of mosaic effect. Larger triangles are more noticeable, so you should take into consideration their meaning before using them in larger sizes.
It is always best to use triangles that sit comfortably on a base or with a point facing to the right, conveying a message of moving forward. Use them carefully and people will love the layout. Perfect for abstract and modern interfaces.
6. Squares
The familiarity of squares and rectangles makes them easy to use as the base of design or as a frame. Squares and rectangles make us feel safe and contained. They give a sense of stability and assurance but also easily fall to the background, and the feelings they convey are mostly subliminal.
All websites are made upon a grid pattern using rectangles and squares. The eye reads theses shapes easily which is why the most text is contained within these shapes. Squares are perfect for corporate and serious style interfaces, without leaving aside the modern aspect.
Conclusion
Unlike existing systems such as type and color, the shape does not have well-defined rules for application in UI. Use this opportunity to experiment with shape alone or in combination with more established UI patterns to find the most effective way to communicate with your users.
