Learn

Lesson 02A / UX Process

Information Architecture And Content Models

Time
39 min
Type
Reading + Interactive
Level
Intermediate
Use
Studio Support

Organize pages, screens, labels, content types, and repeated data so interfaces are easier to navigate, design, and build.

Course Role

Studio Support

Best during work sessions, critique, debugging, project planning, or final polish.

See course roadmap Minimum viable paths
Teacher Notes / In-Class Use

Demo Live

  • Model a familiar project as content types before showing any screens.
  • Turn one content type into a card, list row, and detail page so students see how structure becomes interface.

Try In Class

  • Have students inventory the content types in their current project.
  • Ask students to define fields for one repeated content type and sketch card/list/detail views.

Submit Or Check

  • Students should submit content types, one field list, navigation labels, and one semantic HTML outline.
  • Repeated content should have enough fields to support cards, lists, filters, and details.

Watch For

  • Students designing one perfect card without considering the full repeated content set.
  • Navigation labels that sound clever but do not predict the destination.

Learning Goals

  • Define the main content types in a web or app project.
  • Group content and actions into clear pages, screens, sections, and navigation labels.
  • Create simple content models for repeated items such as projects, events, profiles, posts, and resources.
  • Use information architecture decisions to support semantic HTML, reusable components, and responsive layouts.

Interactive Demo

How to use this demo.

Use the demo as a small lab. Change one thing, observe the result, then connect it back to your own project.

What To Try

  • Choose a project type and inspect the content type, fields, and views it needs.
  • Switch the primary view to compare card, list, detail, and filter markup.

What Changes

  • The field list and view requirements change with the project type.
  • The code sample shows how IA decisions become semantic HTML patterns.

What To Notice

  • Repeated content needs fields before it needs visual polish.
  • Cards, lists, details, and filters each reveal different amounts of the same content model.

Apply It

  • Choose one repeated content type in your project and define the fields before designing the card.

Interactive Demo

Content Model Builder

Choose a project type and inspect the content types, fields, views, and HTML structure it needs.

Project

Portfolio project

A reusable content type for portfolio cards, project listings, and detail pages.

Fields

    Views To Plan

      <article>...</article>

      This demo uses extra JavaScript for teaching. The code sample shows the pattern to practice. View full demo source.

      Structure Before Screens

      Information architecture is the organization of content and paths through an experience. It answers questions like what belongs together, what should be named, where content lives, and how people move between related pieces.

      App design students often think in screens. Web design students often think in pages. Information architecture gives both groups a shared way to plan the underlying structure before choosing a layout.

      Content Types

      A content type is a repeatable kind of thing in the project. Once you can name the content types, patterns like listings, filters, detail pages, cards, and forms become easier to design.

      ProjectLikely Content Types
      PortfolioProjects, skills, roles, testimonials, articles, contact methods.
      Campus event appEvents, venues, speakers, categories, saved items, users.
      Course siteLessons, modules, projects, resources, announcements, submissions.
      Restaurant siteMenu items, categories, locations, hours, reservations, specials.
      Design systemComponents, tokens, patterns, guidelines, examples, releases.

      A Simple Content Model

      A content model names the fields each content type needs. This helps students avoid designing one perfect card while forgetting what every card must support.

      Content TypeFields
      ProjectTitle, summary, role, tools, image, date, live link, repository link, process notes.
      EventTitle, date, time, location, description, category, image, registration link, status.
      ProfileName, photo, bio, contact, role, links, availability, preferences.
      ArticleTitle, author, date, excerpt, body, tags, hero image, related links.
      ResourceTitle, type, description, URL, topic, difficulty, last updated.

      Navigation Labels

      • Use words the audience would recognize.
      • Prefer clear labels over clever labels.
      • Keep the same label for the same destination across the project.
      • Avoid labels that describe the team instead of the user need.
      • Test whether a label still makes sense out of context.
      • Use headings and links to reinforce the same structure.

      Card, List, And Detail Relationships

      ViewPurposeContent Needed
      CardHelp users scan and choose.Title, short summary, image or icon, key metadata, clear link.
      List rowSupport dense comparison.Title, status, date, category, primary action.
      Detail pageHelp users understand and act.Full description, media, related content, actions, metadata.
      Filter viewHelp users narrow a collection.Categories, selected filters, result count, no-results state.

      IA To Semantic HTML

      Information architecture should show up in the markup. If the structure is meaningful to users, it should usually be meaningful to the browser too.

      IA DecisionHTML Connection
      Primary navigation<nav aria-label="Primary navigation">
      Main page topic<h1> inside <main>
      Repeated cards<ul> with each item as an <li> or repeated <article> elements.
      Independent detail item<article>
      Supporting filter controls<form> or grouped controls with labels.
      Related content<aside> or a clearly labeled section.

      Studio Activity: Model The Project

      • Name the audience and primary task.
      • List the project content types.
      • Choose one content type and define its fields.
      • Sketch a card, list, and detail view for that content type.
      • Write navigation labels for the main sections.
      • Create a semantic HTML outline for one listing or detail page.

      Submission Checklist

      • The project has named content types.
      • At least one repeated content type has a field list.
      • Navigation labels are clear and audience-centered.
      • Cards, lists, and detail pages show the right amount of information for their purpose.
      • Filters, empty states, and no-results states are considered when collections are used.
      • The planned HTML structure reflects the information architecture.

      Checkpoint

      Before moving on, make sure these feel true.

      • I can name the main content types in a project.
      • I can define fields for a repeated content type such as projects, events, posts, or resources.
      • I can connect IA decisions to navigation, cards, detail pages, filters, and semantic HTML.

      Project Connection

      This lesson supports current class projects.

      Project 04 Interactive Portfolio Create a multi-page portfolio website that showcases your design skills and programming ability through responsive layout, strong presentation, and at least one interactive element.

      Practice

      Resources