Per Axbom smiling, in a lilac shirt, in front of a lake under a dramatic blue sky.

Designing for the web since 1996

Per Axbom

Senior UX designer and digital strategist, with expertise in interaction design, accessibility and visual storytelling.

Filter the portfolio

Showing all 128 cards

Everything since 1996: projects, templates and tools, talks, publications and awards. Open the filter to see only what is relevant to you.

Speaking

Webbdagarna Göteborg

Organization
Webbdagarna
Format
Talk
Place
Clarion Hotel Post, Gothenburg
Years
2016

Innehåll först med innehållsprototyper

In English: Content first with content prototypes

View larger: Title slide: “Innehåll först med innehållsprototyper” (Content first with content prototypes) and @axbom, with an open book full of lines of text against a light blue background.
  • View larger: We are unique: A wireframe for “Din webbplats” (your website) with a carousel and the heading VI ÄR UNIKA (we are unique), the text “We are tremendously unique and stand out from all our competitors. Even though our website looks the same.” and three columns: Always. Three. Columns. The idea borrowed, with respect, from Dave Ellis.
  • View larger: The user’s journey: A curve from start to goal with signposts along the way and sweets scattered around it – our job is to put up the signposts, but we’ve become experts at laying out sweets.
  • View larger: Content defines structure: “Innehåll definierar struktur.” (Content defines structure.) Beside it: “Inte tvärtom!” (Not the other way round!) – its letters squeezed into a narrow box.
  • View larger: What is a content prototype?: “A content prototype: a document with the content the user needs to achieve their goals.” Below, a text document with the start page content: Förälder (parent), Sjuk (ill), Arbetssökande (job seeker).
  • View larger: The qualities: Notes around a document: based on real needs, quick and cost-effective, doesn’t invent features, doesn’t have to fit a structure, makes us work iteratively with content, understood by everyone, open for everyone to contribute (users too), worth its weight in gold to a visual designer, future-proof – support for accessibility, platform independent, mobile first.
  • View larger: Even a tweet: “A content prototype can be used for a web page, an app… yes, even a tweet.” The same purpose and audience, and three versions of the text that get clearer with each round.
  • View larger: Purpose, value and benefit: The header of a content prototype: page, purpose, for whom, what the person wants to do, message, what should happen, value offered, measurable benefit for the organization and last updated – above the page’s content.
  • View larger: Content works everywhere: “By first producing good, structured content you cater for the lowest common denominator in how the user consumes it, whether that’s a small screen, a screen reader or a TV. The content works everywhere.”
  • View larger: From prototype to form: My idea prototype at enwebbsida.se/fk, built from the content: Försäkringskassan’s four areas – parent, ill, job seeker and disability – as large tap targets, each with its own colour.
  • View larger: Your content will change: “With a content prototype you work collaboratively, iteratively, inclusively, generously and thoughtfully. Content comes neither first nor last, it happens all the time – the content is your business. The content shows your intent.”
Watch on video.axbom.se

On the problem of producing visual design before the content is ready, so the content has to be squeezed into an ill-fitting suit. The solution: start with a content prototype that gives the visual form something to build on. In September 2016 I showed how far you can get by working with text alone as design material, together with all the stakeholders. The talk was in Swedish.

Read more
  • I opened in lorem ipsum. Nobody shoots Stranger Things and adds the dialogue afterwards, and nobody builds GTA without a script. Yet websites often get approved, built and tested before anyone has written a word.
  • The user’s journey needs signposts, not sweets – teasers, icons and ads that distract. Like an agility dog getting lost among the treats.
  • Content defines structure, not the other way round. Otherwise you get right-hand columns that editors have to fill just to keep the page looking balanced.
  • The content prototype: a shared document, often in Google Docs, with the content users need to reach their goals. Quick, cheap, understood by everyone and testable with users – and good for accessibility, with mobile first thrown in.
  • Purpose, message, value and benefit written at the top of every page, and the text rewritten iteratively – as when I improved a tweet live on stage.
  • A worked example with Försäkringskassan’s content (the Swedish Social Insurance Agency): design that reinforces the content instead of being filled with it. Colour rather than icons for the areas, full news headlines and large tap targets on mobile.
  • “There is always content” – the old site, the competitors’, or start writing. “If you don’t have an intent and can’t communicate it in text, you’re just very good at wasting money.”

Back to all work

Work