← Creative

Designing Without a Wall of Cards

Spacing, headings, and alignment can organize a page without putting every section in a box.

Let the sequence do the organizing.01Describe the situation02Explore the options03Agree on the next workUse a boundary when it identifies a real choice.

Video edition not yet available. Explore the complete written treatment below.

A border can indicate that something is a distinct object: a selectable option, a movable item, or an independent piece of content. It can also do nothing more than enclose a paragraph that already belongs under a heading. Putting a border around every thought can make readers work out what all the boxes mean when the content needs no such separation. First decide which ideas belong together and how readers should move through them. A sequence can use order and spacing; a comparison can use alignment; a group of sentences can simply stay together. Use a card when the enclosed area helps readers recognize a separate item or action.

Use the relationship to choose the structure.

Consider a page explaining three stages of a consultation. Numbering, spacing, and a simple rule may show the sequence more clearly than three nested panels. A booking option, by contrast, may deserve its own selectable boundary because it represents a distinct action. The consultation sequence could read as three aligned steps: describe the situation, explore options, and agree on the next work. Those steps explain a process rather than offer three separate purchases. A choice between two bookable appointments is different: each option represents a distinct selection and may need a clear boundary.

Let the relationship choose the layout. Related sentences should read together, alternatives should be easy to compare, and interactive objects should behave like objects. Removing a border is not the goal; making the hierarchy easier to understand is. Choose according to what readers need to understand or do. A page can use ordinary text to explain a process and a selectable card to offer an appointment.

Put it into practice.

Name the job of each container before styling it. Ask whether it separates an action, identifies an object, or merely repeats a grouping already established by the heading. Flatten nested containers that have no distinct purpose. Keep real interactive boundaries clear, including selected and focused states. Review the result by following the content in order. Removing a box is useful only if the relationship remains easy to understand and any required action remains obvious.

Does this container explain a relationship or merely occupy space?

Our work begins with people.