Skip to content
CMPSC 302: Web Design

Content and Information Architecture

This week, we meet a few design terms that help us both:

  1. plan for what kinds of content we need to design for
  2. understand the structure and connections between “places of information” on our portfolio

Learning Objectives

Section titled “Learning Objectives”

This lesson addresses learning objectives:

  1. Design front-end user experiences using accepted web design patterns, methods, and information structures.
  2. Identify and use strategies of successful visual rhetoric for the web.

Text

Section titled “Text”
Information Architecture, Chapter 1 + 2 + 6 + 13

Content and Information Architecture

Section titled “Content and Information Architecture”

Types of Thinking

Section titled “Types of Thinking”

In this course, we balance two different kinds of thinking:

Design Thinking

Design thinking diagram

Systems Thinking

Systems thinking diagram

Design Thinking vs. Systems Thinking

Section titled “Design Thinking vs. Systems Thinking”
Design Thinking
Section titled “Design Thinking”
  • Human-centered, tangible, experimental, action-oriented
  • Foregrounds empathy with people part of and impacted by the system
  • Considers audience needs and behaviors
  • Encourages prototyping with a high degree of risk-taking
Systems Thinking
Section titled “Systems Thinking”
  • Relationships-based, where some actors aren’t human
  • Visualizes systems instead of individual actors
  • Concerned with root causes
  • Offers ability to see gaps or opportunities without thinking about how to address them

Humanity-centered Design

Section titled “Humanity-centered Design”

In creating effective design, we use both kinds of thinking in a form called Humanity-Centered Design, whose steps are:

Discover and Address the Proper Root Cause
Section titled “Discover and Address the Proper Root Cause”
Systems thinking diagram

Our semester starts here with a single rhetorical problem:

The main goal of this course is to enable you to complete a single larger-scale personal portfolio project. Students may choose to display other types of projects from discplines including, but not limited to, computer science. While this project occurs over the course of the entire semester, there will be periodic benchmarking assignments to assess student progress on the various planning and building tasks inherent in creating a complete, polished, personal website.

  • What is the “root cause” of our problem?
  • How do we know it’s the right one?
  • How do we propose to address it?

The main goal of this course is to enable you to complete a single larger-scale personal portfolio project. Students may choose to display other types of projects from discplines including, but not limited to, computer science. While this project occurs over the course of the entire semester, there will be periodic benchmarking assignments to assess student progress on the various planning and building tasks inherent in creating a complete, polished, personal website.

TermDesign implications
personal portfolioA portfolio is a kind of genre of communication; communication requires understanding audience and the various forms of communication they validate and accepts
disciplinesIndividual disiplines have their own conventions, requirements, evaluations and expectations; how do you meet yours?
completeBoth a level of finish and a testing benchmark; various topics in this course will challenge this idea
polishedSimilar to completeness, this is a testing benchmark and a clear understanding of conventions and practices
websiteRequires a particular set of tech and systems to implement and maintain; these are part of the design calculation

The Communication Problem

Section titled “The Communication Problem”

we’re left with a nasty paradox: we’re forced to demonstrate the value and essence of our work in a visual medium, though our work itself isn’t especially visual.

Rosenfeld, Morville, Arango, pp. 391

To solve this, we’re starting with Information Architectures and Content Inventories for two (2) primary reasons. These are diagrams which:

  1. “define content components” (i.e. what a unit of content is)
  2. illustrate the connection between information and how it serves an audience

Content Inventory

Section titled “Content Inventory”

breaking down or combining existing content into content chunks that are useful for inclusion in your environment. A content chunk isn’t necessarily a sentence or a paragraph or a page. Rather, it is the most finely grained portion of content that merits or requires individual treatment

Rosenfeld, Morville, Arango, pp. 415

A content inventory describes available content and where it can be found as well as content gaps that need to be filled.

Content inventory tool screen capture
Content Inventory Tool
Page inventory tool screen capture
Page Inventory Tool

Sitemaps

Section titled “Sitemaps”

We approach Information Architecture through a sitemap, a tool which:

show[s] the relationships between information elements such as pages and other content components, and can be used to portray organization, navigation, and labeling systems. Both the diagram and the navigation system display the “shape” of the information space in overview, functioning as a condensed map for site developers and users, respectively.

Rosenfeld, Morville, Arango, pp. 394-5

Content mapping tool screen capture
Content Mapping Tool
Example IA
Example Information Architecture

Figma

Section titled “Figma”

Figma logo

To complete these exercises, students have been given a FigJam template to complete. FigJam is a whiteboarding tool similar to tl;draw and Excalidraw, but offers many more design-specific features. It is also an industrially-relevant and widely-used tool for planning, collaborating and, as we’ll see in the next lesson, wireframing.

To create an account, go to figma.com.