Design and Product Lead

Design meets content: Building better news & media websites

We've been building websites for a long time. When it comes to creating sites with high readability and an intuitive user experience, we know about the challenges that lie ahead.

Where do we begin? Content. Content impacts all areas of the project.

Laying the foundations

As Ernst Keller once said, “The solution to a design problem should emerge from its content.”

Content is your voice, your product, and the reason readers visit your site. It might also serve as a gateway to other offerings. Despite its significance, content is often overlooked — not because it isn’t valued, but because there’s an assumption that it will come together naturally. While this is partly true, neglecting content early on will only kick the can down the road, usually to the design phase or, worse, the development phase.

The design phase is crucial for testing how content fits together, whether through post-it notes for simple user flows, wireframes, or high-fidelity mockups. However, it is not the stage to start defining content from scratch or expecting anything meaningful to happen in the design phase. Being busy isn’t the same as being effective. Beware of false economy.

Content comes first

Whether you have existing content that needs evaluation or are starting from scratch, defining content early on is essential. Many decisions depend on it, beyond just design. Questions like:

  • Are we migrating from an existing website?
  • What’s the content structure?
  • Will certain sections be behind a paywall?
  • Is there a clear commercial or UX strategy for the content?

We’ve encountered these questions countless times, often met with uncertainty. Addressing them early helps guide decisions and prevent bigger roadblocks later on.

Asking the right questions

It’s better to ask the hard questions upfront, allowing ideas and solutions to surface in time for the next phase. Even if all the answers aren’t clear, having the right discussions early ensures a well-thought-out approach.

Can we see some designs yet?

Almost — but not just yet. Once we have a solid understanding of the sitemap, content types, articles, landing pages, and general structure, we can start developing visuals and prototypes. It’s a team sport so expect collaboration; it’s a key area we help and guide you on.

Avoid being a dummy

Lorem Ipsum (dummy text) is often used as a placeholder, but it can be a bad thing if used incorrectly. Using real headlines, paragraphs, category structures and labelling allows for a more authentic visual representation. Placeholder text can mislead clients about how the final content will work.

We take an agile approach, starting small to allow for flexibility and revisions. Committing to large-scale designs too early can lead to wasted effort and budget. Establishing solid visual foundations at the outset is key.

A sample of cards and header blocks with real content.

Initial design concepts

We begin with sample articles, card styles, and homepage content blocks to establish a creative direction. This helps clients understand the creative direction before larger commitments are made.

The role of design systems

Design systems have gained popularity in recent years. A well-known example is Google Material Design, but even a simplified version can be incredibly beneficial. Another good example of what a design system is can be found in Figma. While we don’t create something as extensive as Google’s system, we establish essential styles, including:

  • Typography
  • Colour palettes
  • Icons
  • Components: buttons, cards, etc.

Even if a full design system isn’t needed, this approach maintains consistency, bridges the gap between design and front-end development, and serves as a reference for future communications and reference points.

A sample of button and badge components in a design system.

Handing over to development

When designs are handed over to the development team, the more detail, the better. A well-documented design system includes typographic scales, grid systems (such as 4 or 8-point grids), and common components. This streamlines development and ensures consistency with the approved designs by the client.

Bringing it all together

Design is the emotional element that clients want to see as early as possible. Just like furnishing a house, people want to know how the new sofa looks or where the coffee machine will go. However, without strong content and strategic planning, you might end up finding the coffee machine in the toilet.

Prioritising content ensures a seamless design and development process, ultimately leading to a more successful website build.