Field Notes NEUTRAL LAYOUT DEMO

DESIGN & EVERYDAY TECHNOLOGY

A useful app starts with one small problem

Before choosing colours or writing code, describe the task you want to make easier. A simple prototype can help you explore that idea.

Demonstration article

Sample content for layout review

An illustration of a mobile app and connected design tools
A simple illustration shows screens, services, and the connections between them.

An app does not have to solve every problem at once. It might help someone remember a short shopping list, find a saved note, or plan the next task. Choosing one clear purpose makes the first version easier to discuss and review.

A prototype is a way to explore that first version. It can begin as a few sketches on paper. At this stage, the goal is to make the sequence understandable: what someone sees first, what they can do next, and how they know that the task is complete.

Describe the first step

Write a short sentence about the person using the app and what they want to accomplish. For a note-taking app, that might be: “I want to save a thought and find it again later.” This gives you a concrete task to keep in mind while sketching.

1. Sketch

Draw the first screen and the most useful action. Keep the labels short and familiar.

2. Connect

Show what happens after a tap. Include a clear way to return to the previous screen.

3. Review

Walk through the task and note anything that feels confusing or incomplete.

Give each screen a clear job

A screen can introduce a task, collect a small amount of information, or show a result. When several actions compete for attention, try separating them into a shorter sequence. The first version can stay deliberately small.

An illustrated board for planning a sequence of activities
A short plan helps keep a prototype focused on a manageable sequence.

Review the experience on a small screen

Read the headings, follow the links, and check the spacing around buttons. Try the same task at a narrow window size. If something needs a long explanation, consider making the label or the next step clearer.

The result of this exercise is a starting point, not a finished product. Record what you learned, adjust the sketches, and decide which small improvement to explore next.

Explore the companion layout

The workshop preview includes a sample agenda, an expandable FAQ, and a form demonstration that does not send data.

Open the workshop preview