Visual Design Elements

Visual design elements are the building blocks of visual design. Common elements include line, shape, color, texture, space, form, and typography. Designers decide which elements to include, how to style them, and where to place them on the page.

• Lines can be used to divide pages, make shapes, or create textures. By adjusting a line’s properties (such as style, color, and weight) different effects can be achieved.
• Shapes are used to create UI components (such as buttons, modals, and text inputs) and design assets (such as icons, illustrations, and logos). Shapes can create sections on a page or draw attention to a specific area.
• Color helps define a product’s aesthetic and create organized designs. Color can be applied to establish patterns and make elements stand out.
• Texture defines the surface of an object. By creating patterns with lines, shapes, or colors, a wide variety of textures can be simulated.
• Space, also called negative space or white space, is the blank area that surrounds objects like images, text, and buttons. Designing with sufficient and consistent spacing keeps the design scannable and organized.
• Form, or volume, is a three-dimensional effect on a two-dimensional screen. Form creates the illusion that the object has mass.
• Typography encompasses which fonts are included and how they are styled. Users often rely on words to make sense of a product, so effective typography is a vital component of an interface.

Visual design elements in the screenshot:

• A. The typography in this section uses the same font in different sizes and weights.
• B. The texture made up of tiny dots adds visual interest and helps divide the top of the page from the bottom.
• C. The bright purple color directs our attention to the call-to-action buttons.
• D. This rectangle is made up of thin lines.
• E. This box has form, which means it appears to be three-dimensional.
• F. The white rectangles are shapes that serve as containers for the code challenges.
• G. The space between the rectangles is consistent, creating symmetry.