content-design

A prominent message strip, usually spanning the top of a page or section, that stays visible until the user dismisses or resolves it.

A boxed note set into the flow of content to carry a warning, tip or aside, coloured by severity and staying put once shown.

A note pinned onto the data itself: a callout, arrow, or highlighted span that tells the reader what to see in the chart.

The line attached to a field that says what went wrong and what to do about it, announced to assistive technology the moment it appears.

A label that sits inside an empty field and rises to the field's top edge when the field takes focus or holds a value.

The short line under a field that explains the format or constraint before anything goes wrong.

A time printed as a distance from now, two hours ago or in three days, updating itself and holding the exact time in its tooltip.

The control at the end of clamped text that expands it to full length and, when honest, collapses it again.

The large opening block of a page carrying a headline, a supporting line, imagery, and the main call to action.

The screen that closes a transaction, stating plainly that it succeeded, giving a reference the reader can quote, and saying what happens next.

Wording the decline option so that choosing it is an admission of something embarrassing, making refusal feel like a confession rather than a choice.

Offering a corrected spelling for a query that returned little or nothing, either as a suggestion to accept or as a substitution the reader can undo.

Writing series names next to the data instead of in a legend, trading a lookup for a glance.

The screen a container shows when it holds nothing, naming the absence and offering the action that ends it.

The whole screen a site serves instead of the page that was asked for: what happened, in the reader's words, and the shortest way back to something that works.

Accepting whatever shape the reader types and normalising it afterwards, instead of rejecting input that differs only in spacing or punctuation.

Documentation opened beside the task rather than over it, keeping the form usable while the explanation is read and staying open across steps.

An interface's smallest strings: the verb on the button, the line under the field, the sentence when it fails. Short enough to be read every time.

What a search or filtered list shows when nothing matched, naming the query, explaining why, and offering a way to loosen the constraints.

The line an inbox prints under a subject, written as hidden text at the top of the mail so the client shows those words instead of scraping whatever body copy comes first.

The name a mail appears to come from, chosen rather than inherited, because a reader scanning an inbox decides on it before reading a word of the subject.

The one line a mail is opened or ignored on, written to survive a list that truncates it and shows it wedged between the sender and the preview text.

Phrasing a choice so its plain reading is the opposite of its effect, typically through double negatives or a label that describes the wrong outcome.

The first-run screen a feature shows before any data exists, written to teach the feature rather than to report emptiness.

A shortened form of a word or phrase, from Dr. to NASA, with its own typographic conventions and an expansion assistive tech can speak.

Text set entirely in capitals, which reads slower than mixed case because the word's outline shape disappears.

The short summary line set between a headline and the body, larger than body text and written to sell the article.

The longest common dash, about the width of the letter m, used to set off an abrupt break or an aside inside a sentence.

A dash about the width of the letter n, used for ranges of numbers and for connections between two things.

A short line of text above a heading that says what category or series the content belongs to.

Qualifying text set small and set last, carrying the conditions that the larger claim above it leaves out.

A short line of type that names the section under it and, by its size and weight, says how far down the outline that section sits.

Cutting a block of text off after a fixed number of lines, with an ellipsis at the end of the last one.

Scrambled pseudo-Latin placeholder text used so a layout can be judged on its shape and texture before the real copy exists.

The slanted tick used for feet, inches, minutes, and seconds, which is a different character from either a straight quote or a curly one.

A phrase lifted out of an article and set large as a graphic element, to draw a browsing reader into the text.

How comfortably a body of text can be read at length, a property of the setting: size, measure, leading, and contrast.

Capitalising only the first word of a label or heading, plus any proper nouns, as you would in an ordinary sentence.

The curved opening and closing quotation marks a typeface actually draws, as opposed to the straight vertical marks inherited from typewriters.

A rule drawn through the middle of text to mark it as removed, superseded, or no longer the current price.

Capitalising the first letter of each significant word in a heading or label, leaving short articles, conjunctions and prepositions lowercase.

Cutting text that does not fit and marking the cut, usually with an ellipsis, so the reader knows something was removed.

The string assistive technology announces for a control, computed from label, aria-labelledby, aria-label, or its own content in a fixed order of precedence.

The text alternative that stands in for an image, written to serve the same purpose in the same context rather than to describe every detail.

The text alternative for a chart: a summary of the takeaway plus access to the underlying values, not a recital of the pixels.

Breaking content into small labelled pieces, short paragraphs, lists, and headings, so a reader can hold one piece at a time instead of the whole wall.

Calling the same function by the same name and icon everywhere in a product, so a reader who learned it once does not have to relearn it per screen.

The nested outline formed by heading levels, navigated directly by assistive technology and broken by skipping a level or picking a level for its size.

The rule that a control's accessible name must contain its visible label text, so speaking the visible words works in voice control.

Whether a link's own text says where it goes, the reason a list of read more and click here links fails when read out of context.

An extended text alternative for a chart, diagram, or map, linked or referenced because a short alt string cannot carry the content.

The document title, the first thing a screen reader speaks and the only label a reader has when picking between tabs, windows, and history entries.

The antipattern of using placeholder text as a field's only label, which vanishes on typing and usually fails both contrast and naming.

Writing interface copy at the reading level of the people using it, with short sentences, familiar words, and the point first, rather than at the level of the org chart.

How a form says a field cannot be left empty, in the label text, in the announced name, and not by an asterisk whose meaning is explained somewhere else.

An author supplied name for a widget's role, spoken in place of the stock role name, which overrides the platform wording and misleads easily.

Instructions that lean on shape, size, position, or sound alone, such as the round button on the right, which fail when those cues are not perceived.