Explains why no content is present yet and which genuine next step would be possible.
Digital design / an independent ideas lab
CLEAR.
DISTINCT.
USEFUL.
Mandrill Media explores digital design as an interplay between expression and orientation. A website can have character while remaining easy to understand. The studies on this page are specially created learning examples. Typographic tiles and descriptions of interface states make hierarchy, reading flow and the role of precise labels tangible.
READFINDUNDERSTANDSTUDY / TYPOGRAPHIC HIERARCHY
01 / Typography shapes behaviour
A heading needs to do its job.
Typography influences how quickly people grasp content and the mood it creates. An expressive heading can make a strong opening. Body text, by contrast, needs a calm rhythm. Test the combination with long words, several lines and a narrow view. That is where you discover whether a design only accommodates one favourable screen size.
Use differences deliberately. When everything is bold, large and colourful, hierarchy disappears. A clear contrast between a few roles often feels more distinctive than a collection of decorative type styles.
02 / Structure before surface
Sort the content before placing it.
An interface does not begin with a grid of boxes. It begins with questions: What do visitors want to understand? Which information do they need first? What is supplementary? Group content around these relationships. Two elements placed close together should also belong together in meaning. Design then becomes a readable model of what is being presented.
The simple card test
Write each content task on a card. Sort them without colours or images. If the order remains unclear, an elaborate visual treatment is unlikely to solve the problem.
03 / Name states honestly
What is happening now?
And what has not happened yet?
Identifies the missing information specifically, rather than presenting the entire process as a failure.
Confirms only an outcome that has actually occurred. A visual tick is no substitute for a real function.
These three conceptual state descriptions provide a working basis for a later design. Thinking about states belongs in the design process from the start, because it changes language, sequence and space requirements.
04 / The reduction test
What remains without the presentation?
Look at a design without illustration, then in greyscale, then with enlarged text. Is its purpose still understandable? Are links recognisable and focus indicators visible? This test does not rule out strong design. It reveals whether expression and usability support each other or get in each other's way.
- Every interactive element has a recognisable function.
- Important content remains accessible without movement.
- Contrast and order hold up on small screens.
- An explanation is not hidden exclusively in a graphic.
05 / Pass on the decisions
A design system needs reasons.
Record more than colour values and spacing. Explain what a component is intended for and when another would work better. An understandable example sentence often helps more than an abstract rule. A later team can then carry the design idea forward without building every new page as a copy of one sample layout.
Think a design through
Where does an interface lose clarity?
Questions about typography, content structure or the states described here are welcome by email. Identify the task and the point at which a reader needs an additional explanation. A passage you have written yourself or a general description is enough to begin with. Only share confidential interfaces and third-party material once permission has been clarified.
