Back to Studio Journey

Teacher + Student Session Page

Studio 08 / MAKE

Design the Interface and Content

What structure, words, and choices make the experience clear?

Teacher aid

Session Teaching Card

A compact facilitation aid with the setup, teaching points, discussion prompts, activity guidance, and support notes for this session.

Session Teaching Card

08

Design the Interface and Content

What structure, words, and choices make the experience clear?

Objective

Create structure, hierarchy, navigation, and key messages.

Method

Wireframing and content hierarchy

Evidence

Wireframe

Setup Notes

  • Prepare wireframe examples showing hierarchy, navigation, labels, calls to action, and empty states.
  • Review accessibility basics: readable text, contrast, clear labels, and predictable navigation.
  • Make paper or digital wireframe templates available.

Key Teaching Points

  • Interface design makes the promise visible.
  • Words are part of the design, not decoration after the fact.
  • The most important action or information should be obvious without explanation.

Activity Guidance

  1. 1Annotate a model wireframe and name hierarchy decisions.
  2. 2Students draft a wireframe and write the key content blocks.
  3. 3Run a clarity pass where peers point to the first thing they notice and the next action.

Discussion Prompts

  • What should the user see first?
  • Which words make the action clearer?
  • What information can move later or disappear?

Reflection

What should be obvious without explanation?

Teacher Watch

Challenge decorative design choices that do not support the user path.

Support

Give a simple page structure: title, user need, action, supporting details, next step.

Extension

Ask students to create mobile and desktop versions with the same hierarchy.

Message Frame Visuals

Four visual anchors for Studio 08

Student-facing slides for the session: question, purpose, concept, example, steps, template, work time, and reflection.

Opening Frame

08

Design the Interface and Content

Studio 08 / Design

Driving Question

What structure, words, and choices make the experience clear?

Start with a quick written response.

Driving Question
  • What do you notice?
  • What questions do you have?
  • Why might this matter?

Student Prompt

What should be obvious without explanation?

Open Opening Frame PNG

Talk Track

Alright, let's start with the question on the screen: What structure, words, and choices make the experience clear? Do not try to sound impressive yet. Just write what you honestly notice, what you wonder, or where your mind goes first. Good creators begin by paying attention.

Context Set

Set a calm pace. Give students a few seconds to look before you explain. The goal is to invite attention, not rush into performance.

Say This

Alright, let's start with the question on the screen: What structure, words, and choices make the experience clear? I do not want a perfect answer. I want your first honest answer. Write what you notice, what you wonder, or where your mind goes. Creators do not begin by pretending they already know. They begin by paying attention.

Engage The Room

Give students 45-60 seconds to write. Then ask for two volunteers: one who noticed something practical and one who had a question. Keep responses short and affirm the noticing, not the polish.

Real-World Example

Say: Think about a time a website, sign-up form, team group chat, lunch line, or school announcement made something easier or harder. Somebody designed that experience. Today we start learning how to see those choices.

Loop Back

Close the opening by saying: keep this question in the back of your mind. By the end of class, you should have one visible piece of thinking that moves your idea a little closer to something real.

Why It Matters

08

Design the Interface and Content

Clarity before polish

Purpose

You are learning to make useful things.

Each class helps you move from an idea to something real.

Purpose
  • Notice what people need.
  • Make your thinking visible.
  • Improve the work as you learn.

Student Prompt

What kind of creator do I want to be?

Open Why It Matters PNG

Talk Track

The point of this studio is not to become a person who clicks buttons faster. The point is to become someone who can notice a need, shape an idea, and make something useful for somebody else. The tools will change. The habit of seeing clearly will stay with you.

Context Set

Use this slide to make the class feel bigger than tools. The tone should be invitational: students are being trusted with real creative responsibility.

Say This

The point of this studio is not to become a person who clicks buttons faster. The point is to become someone who can notice a need, shape an idea, and make something useful for somebody else. The tools will change. The habit of seeing clearly will stay with you.

Engage The Room

Ask: Where have you seen something small make life easier for people? Let students name ordinary examples: a good checklist, a clear map, a better form, a video that explains something, a schedule that saves confusion.

Real-World Example

Say: A useful thing does not have to be huge. It might be a club finder, a practice guide, a better way to explain service hours, a page for new students, or a tool that helps one person feel less lost.

Loop Back

Loop back to the studio promise: notice a real need, make the thinking visible, get feedback, and improve the work so it serves someone beyond the maker.

Concept Frame

08

Design the Interface and Content

Clarity before polish

Turn evidence into a product direction people can understand.

Wireframing and content hierarchy

Create structure, hierarchy, navigation, and key messages.

Turn evidence into a product direction people can understand.
  • Try the thinking move.
  • Use evidence when you can.
  • Be ready to explain your choice.

Student Prompt

What choice do I need to make today?

Open Concept Frame PNG

Talk Track

Today is about one move in the creator process. In this session, Design the Interface and Content, we are practicing how to slow down enough to make a better choice. If you can explain why you made a choice, you are already working like a designer.

Context Set

Frame the concept as one professional move, not a lecture. Students should know what thinking habit they are practicing and why it matters.

Say This

Today is about one move in the creator process. In this session, Design the Interface and Content, we are practicing how to slow down enough to make a better choice. If you can explain why you made a choice, you are already working like a designer.

Engage The Room

Ask students to point to the key word on the slide. Then ask: What would this look like if someone did it poorly? What would it look like if someone did it with care?

Real-World Example

Say: In real work, teams do this before they build. A product team, a coach, a teacher, a campus minister, a designer, or a student leader all have to decide what matters before asking people to follow a plan.

Loop Back

Bring it back by saying: the concept is not the final product. It is the move that helps your next version become more useful.

Artifact Example

08

Design the Interface and Content

What Good Work Looks Like

Model

Wireframe

Today you will make a wireframe. Someone else should be able to understand it quickly.

Model
  • Make it clear.
  • Make it specific.
  • Make it useful for your project.

Student Prompt

What should be obvious in the artifact?

Open Artifact Example PNG

Talk Track

By the end of class, you should have a wireframe. This is not busywork. It is evidence of your thinking. Someone should be able to look at it and understand what you are noticing, deciding, testing, or improving.

Context Set

Students need to know what they are making and why it counts. Keep the artifact concrete and remove mystery.

Say This

By the end of class, you should have a wireframe. This is not busywork. It is evidence of your thinking. Someone should be able to look at it and understand what you are noticing, deciding, testing, or improving.

Engage The Room

Ask: What would make this artifact clear to someone who was not in class today? Take three answers and turn them into quality criteria on the spot.

Real-World Example

Say: Imagine you were absent and a classmate handed you their wireframe. Could you tell what they cared about, what they learned, or what decision they made? That is the standard.

Loop Back

Loop back by saying: the artifact is a snapshot of your thinking today. It does not need to be final. It does need to be visible.

Simple Steps

08

Design the Interface and Content

How To Start

Process

Make your wireframe.

Start simple. You can improve it after feedback.

Process
  • Answer the template prompts.
  • Make a rough first version.
  • Share it before you polish it.

Student Prompt

What is the first small move I can make?

Open Simple Steps PNG

Talk Track

Here is the way in: keep it simple. Start with the prompts, make a rough first version, and do not wait for it to be perfect. We can improve rough work. We cannot improve work that only stays in your head.

Context Set

Lower the barrier to starting. This is where Mark's style should feel practical and reassuring: rough work is welcome because rough work can be improved.

Say This

Here is the way in: keep it simple. Start with the prompts, make a rough first version, and do not wait for it to be perfect. We can improve rough work. We cannot improve work that only stays in your head.

Engage The Room

Ask students to choose their first move silently: write, sketch, list, interview, map, prompt, revise, or test. Have them point to the step they will begin with before they open a tool.

Real-World Example

Say: Most good work starts as something unimpressive: a messy note, a box-and-arrow sketch, a sentence that is almost right, a page with the wrong layout. The important thing is that it exists, because now we can work with it.

Loop Back

Loop back by saying: your first version is not your identity. It is just the next piece of evidence.

Student Template

08

Design the Interface and Content

Fill This In

Template

Wireframe template

Use these prompts to get started.

Template
  • First thing users see
  • Main action
  • Key words
  • Supporting information

Student Prompt

Which prompt is hardest to answer?

Open Student Template PNG

Talk Track

Use this template as a starting line, not a cage. If a prompt is easy, answer it quickly and move on. If one prompt makes you pause, that is probably where the real thinking is. Spend a little time there.

Context Set

Present the template as support, not a worksheet trap. Students should feel guided without feeling boxed in.

Say This

Use this template as a starting line, not a cage. If a prompt is easy, answer it quickly and move on. If one prompt makes you pause, that is probably where the real thinking is. Spend a little time there.

Engage The Room

Ask students to circle or mark the prompt that feels hardest. Then say: start there or save it for last, but do not ignore it. That prompt is probably telling you something useful.

Real-World Example

Say: A professional brief, design board, script, product spec, or research note often begins with simple fields like these. Simple fields force clear thinking before the work gets complicated.

Loop Back

Loop back by saying: the template is here to help you think clearly enough that another person can understand and respond.

Work Time

08

Design the Interface and Content

Studio Work

Make, share, revise, capture

Create your wireframe.

Students create a wireframe with clear content hierarchy and accessible navigation choices.

Make, share, revise, capture
  • Make the first version.
  • Ask what is clear or confusing.
  • Save your wireframe.

Student Prompt

What should be obvious without explanation?

Open Work Time PNG

Talk Track

Now we move from talking to making. Your job is to create the first useful version of your wireframe. I will be walking around asking simple questions: Who is this for? What is clear? What needs another version?

Context Set

This is the transition from teacher voice to studio work. The script should be concise, energizing, and clear about what students should do next.

Say This

Now we move from talking to making. Your job is to create the first useful version of your wireframe. I will be walking around asking simple questions: Who is this for? What is clear? What needs another version?

Engage The Room

Set a visible timer. Tell students the first checkpoint is not for grading; it is for feedback. Halfway through, have them show one person what they have and ask: what is clear, and what is confusing?

Real-World Example

Say: This is how real creative work moves. You make a version, show it to someone, learn something, and make the next version better. Waiting until it is perfect usually means waiting too long.

Loop Back

Loop back by saying: by the end, save the evidence. If it is not saved, it cannot teach you anything next time.

Reflection Close

08

Design the Interface and Content

Portfolio Capture

Save the evidence

Before you leave

Save your work and name what you learned.

Save the evidence
  • Save your wireframe.
  • Write one sentence about what changed.
  • Name one next step.

Student Prompt

What should be obvious without explanation?

Open Reflection Close PNG

Talk Track

Before you leave, save the work. Then answer this honestly: What should be obvious without explanation? The reflection matters because it helps you see your own growth. A creator is not just someone who makes; a creator notices how the work changed.

Context Set

Use this as a calm close. The goal is to help students notice growth and preserve evidence without making reflection feel performative.

Say This

Before you leave, save the work. Then answer this honestly: What should be obvious without explanation? The reflection matters because it helps you see your own growth. A creator is not just someone who makes; a creator notices how the work changed.

Engage The Room

Ask students to write one sentence only. Then invite one or two students to share a specific change: a clearer idea, a better question, a revised choice, or something they now understand.

Real-World Example

Say: Athletes watch film. Musicians listen back. Designers compare versions. Builders test what changed. Reflection is not extra; it is how people improve on purpose.

Loop Back

End by saying: next class we will use this saved evidence as the starting point. The work keeps moving.

Learning Goal

Create structure, hierarchy, navigation, and key messages.

Studio Activity

Students create a wireframe with clear content hierarchy and accessible navigation choices.

Tool or Method

Wireframing and content hierarchy

Reflection

What should be obvious without explanation?

Creator lens

Who does this work look like beyond class?

This session mirrors how professional creative teams work: clarify the human need, make the work visible, invite feedback, and improve the product.

Product progression

What this adds to the final work

Move the final product from idea toward something clearer, more useful, and easier to explain.

Before next studio

What to do between classes

Advance the project one meaningful step before the next class. Bring evidence: a note, sketch, quote, test result, revised screen, draft, or decision.

Teaching video

Start with the short teaching clip.

Each studio will include a brief video that frames the concept, shows an example, and gives students enough direction to begin making.

Video Placeholder

Studio 08: Design the Interface and Content

Replace this placeholder with the session teaching video, embed, or link once the clip is produced.

Suggested clip structure

0:00-0:30 Frame the driving question.

0:30-2:00 Show one concrete example or model.

2:00-3:30 Demonstrate the tool, method, or thinking move.

3:30-4:00 Name the artifact students must create.

Student prompt after viewing: What is one decision I need to make before I begin?

Before, during, after

Use this page as the class plan, not just a reference.

Each session page gives teachers enough structure to run the hour and gives students enough clarity to know what to make, save, revise, and reflect on.

Before Class

  • Post the driving question: "What structure, words, and choices make the experience clear?"
  • Prepare a visible example of wireframe.
  • Decide how students will capture and submit wireframe.
  • Set up a shared timer, critique protocol, and portfolio capture location.

During Class Agenda

0-5 min

Opening observation

Students write a fast response to the driving question.

5-12 min

Mini lesson

Introduce wireframing and content hierarchy and connect it to the learning goal.

12-35 min

Studio work

Students create a wireframe with clear content hierarchy and accessible navigation choices.

35-45 min

Peer critique

Students share work in pairs or table groups using specific, actionable feedback.

45-55 min

Revision sprint

Students improve or clarify the wireframe before saving it.

55-60 min

Portfolio capture

Students upload wireframe and answer the reflection prompt.

After Class

  • Review whether each student saved wireframe.
  • Look for patterns: where did students need more modeling, vocabulary, or time?
  • Choose two anonymous examples to open the next class with: one strong move and one useful revision opportunity.
  • Flag students who need beginner support or advanced extension next session.

Evidence Quality Check

  • The artifact is named clearly and saved where the student can find it later.
  • The artifact shows thinking, not only a finished surface.
  • The student can explain what changed because of feedback or evidence.
  • The reflection names a next step, question, or improvement.

Critique Norms

  • Name what is working before suggesting changes.
  • Be specific enough that the creator knows what to do next.
  • Connect feedback to the audience, purpose, and evidence.
  • Let the creator decide what to accept, revise, or test.

Run the session

A shared operating page for teachers and students.

Student Use

  • Read the driving question.
  • Complete the studio activity.
  • Capture the evidence artifact.
  • Answer the reflection prompt in the portfolio.

Teacher Use

  • Open with the driving question and ask for a quick written response before discussion.
  • Model one concrete example so beginners can see what good work looks like.
  • Coach students through choices rather than taking the work out of their hands.
  • Use critique language that is specific, kind, and actionable.
  • End by naming the artifact students should save in their portfolio.

Studio Rhythm

Opening question

Short mini lesson

Focused studio work

Peer critique

Instructor coaching

Reflection

Portfolio capture

Support Beginners

  • Offer a template, sentence starter, or visible example.
  • Pair the student with a peer for the first work cycle.
  • Reduce the first deliverable to one clear version that can be improved later.

Stretch Advanced Students

  • Ask for a second version aimed at a different audience.
  • Require evidence from a user, peer, or source before the next decision.
  • Have the student document tradeoffs and explain why one direction was chosen.

Responsible creation

Use tools honestly, check what they give you, protect other people, and make sure the final choices still sound like you.