Design Element Properties

There are various properties we can apply to elements of design: shape, size, color, texture, pattern, and orientation. These properties, used individually or together, are used to create aesthetically pleasing designs. They can also influence users’ perceptions of the elements, guiding them toward taking certain actions.

There are three types of shapes: geometric, organic, and abstract.^[1] Think of geometric shapes like those we studied in math class, such as squares and circles. Whether simple or complex, these shapes create a feeling of order and control. 

As for organic shapes, we can draw them freehand — often, they are the shapes found in nature, like leaves or clouds. Organic shapes produce a natural feel.

Abstract shapes are often pictorial representations of objects, such as traditional "male" and "female" icons for restrooms. They're often used as icons in design. In addition to these, there are primitive shapes that are used in 3D design.

If size is an absolute measurement, like 14px, scale is a comparison measurement, i.e., how large one object is in comparison to another.^[2] By playing with scale, we can create dominance, focal points, rhythm, balance, and visual hierarchy.

Color plays one of the most significant roles in graphic design. We use colors to convey emotions, add variety, emphasize hierarchy, organize units, and ultimately create a unique style. Keep in mind that due to cultural differences and personal associations, colors may elicit different reactions and emotions.

Textures are all about how surfaces feel to the touch. In design, we can simulate a tactile feeling with visual patterns — the better the texture is, the easier it is to imagine how it would feel. 

Patterns are similar to texture, but give less of a tactile impression and rely more on visual appeal. Think of wallpaper patterns or the pattern of a tiled floor. 

Both texture and pattern can be used to create designs that more closely resemble the physical world. They can also be used to reinforce visual hierarchy, create focal points, and entice users to interact with parts of your design.

Using recognizable shapes for various functions helps them stand out in your design. For example:

• Rectangles are for buttons, cards, images, or videos
• Circles are for avatars or badges
• Arrows for navigation or Play buttons

Changing the shape of these elements can cause friction and confusion. If you want users to intuitively know how to use your interface, stick to common shapes.

Scale helps establish dominance and create visual hierarchy. Make more important elements larger than less important ones to catch users’ attention. Less important elements should be smaller so they don’t compete with the main focus. For example, in a slideshow, make sure the images are significantly larger than the navigational controls to scroll through them.

Color not only makes elements more noticeable, but it also has the power to evoke emotions. Use color to emphasize certain aspects of your content but always keep accessibility in mind. Be careful, though, as using too many bright colors can be distracting and overwhelming to some users.

Texture and pattern can be used to set the mood of a design. For example, using vivid colors with simple patterns creates a friendly and playful mood. Apart from making your designs more tactile and visually appealing, applying texture and pattern helps reinforce the product’s mood, tone, and voice. Background textures and patterns also add visual interest to your designs that can set them apart from the competition.