The anatomy of a design

Key points

Do you know the 4 elements that make up every design composition? We're zooming out and going back to first-order inquiries.

The content is what viewers seek

Content is at the core of any design. It encompasses the information, messaging, or storytelling that the user is seeking. This can include text, images, videos, data, and more. Understanding user intent and providing relevant and valuable content is essential for effective design.

Content includes textual and visual information, but for web apps and mobile apps, it also includes the interactive elements and functionalities that allow users to accomplish their goals and tasks. Content here encompasses not only what users read and see but also what they can do within the app.

Content

  • Information
  • Text
  • Images
  • Videos
  • Data

We use layout principles to make make sense of the content

Here we're talking about the organization of the content.

Layout principles involve how content is structured and arranged within a design. This includes considerations for hierarchy, grouping related elements, and ensuring a logical flow of information. A well-organized layout helps users navigate and comprehend the content.

Layout

  • Sizing & spacing
  • Alignment
  • Hierarchy
  • Grouping
  • Visual consistency

We use styling to give the layout an identity and mood

Any respectable layout has a clear visual language. We're tapping into the intangible here but it is very much real. The feeling a composition gives you upon looking at it is very real.

Visual language encompasses the design elements and aesthetics that give a design its unique identity. This includes colors, typography, imagery, iconography, and branding elements. Visual consistency and coherence create a memorable and recognizable design.

Visual language

  • Motif
  • Color
  • Typography
  • Balance
  • Visual ideas (shadows, lines, image treatment, backgrounds, borders, corners)

We use accessibility principles to make the content easily and widely consumable

Accessibility is a critical aspect of design that ensures the design is usable by as many people as possible, including those with disabilities. This involves considerations for readability, usability, and compliance with accessibility standards, such as WCAG (Web Content Accessibility Guidelines). An accessible design enhances inclusivity and user reach.

Accessibility

  • Contrast
  • Textual accessibility
  • Touch targets
  • Focus order
  • Alt text
  • HTML structure