Structure: my new favorite step of the web design process

When designing my first websites six years ago, like many junior designers, I relied on the widely recognized web design process. You know, the whole research → information architecture → wireframing → UI routine.

However, I couldn't shake the feeling that something was missing or not quite right with this process. Information architecture (IA) felt too general, but wireframing, on the other hand — too detailed. There was a gap that needed to be filled.

Determined to find a better approach, I challenged the status quo and sought a more effective solution. This exploration led me to a breakthrough — the concept of Structure. It completely shifted my perspective on the web design process and fixed all the problems I had been struggling with.

In this article, I’ll shed some light on how Structure works, and show you what an impact it has had on my web design workflow.

My problems with the status quo web design process

IA is too general

The most common IA model gives you a general idea of how a website is organized. It presents the categories in which the content is divided, often hierarchically based on importance.

However, in its most basic form, IA doesn’t consider user paths, even though the ultimate goal of websites is converting visitors into customers, leads, or any kind of content consumers. It’s merely a group of loosely linked blocks without any visible user journey.

I felt this approach lacked a broader context — one showing the connections between the main navigation, pages, and sections. I wanted to see the bigger picture; to have a clear overview of all the possible actions website visitors can take before leaving.

Wireframes are too detailed (even the lo-fi ones)

Here's why I'm not a huge wireframe fan (and it seems like I'm not the only one).

Layout

Wireframes help us visualize how web pages might look and determine where information will be placed, and in what order. They provide a rough idea of the layout, but often unintentionally suggest the final arrangement of elements. And that’s my biggest deal with wireframes.

Let me give you an example: imagine we’re adding a benefits section to the home page wireframe. We put together a centered heading with three cards displayed horizontally. This arrangement might seem generic, but it’s specific enough to influence our final layout choices.

Wireframes can create a sense of unnecessary commitment to stick only to a specific layout during later stages. This limits the freedom to explore alternative options and potentially stifles creativity.

Additionally, relying too heavily on these early sketches can restrict the copywriter’s role. Wireframes can dictate copy placement too rigidly, making it challenging to adapt and refine the content as the project progresses.

Visual direction

Wireframes oversimplify visual concepts (like key visuals, motion effects, or illustrations) to the point that it’s difficult to see how they translate into the final design. And that’s leaving clients confused. Some expect wireframes to include the final decisions about every detail. Others think the generic solutions won’t be explored further in the following stages.

These conflicting assumptions lead to speculative, thus unproductive discussions. But even if we set clear expectations with the clients upfront, it’s simply hard for them to think straight when they get the first glimpse of their website coming to life.

Copy

Copy plays a major role in web design. It delivers the message and guides users through the experience. If you treat it as an afterthought and use a generic placeholder text, you miss out on the opportunity to shape the design around the actual content — as you should. And don't get me started on the random and nonsensical nature of lorem ipsum that confuses everyone.

On top of that, design can heavily rely on the power of words, like the Swiss Style depends on typography. If your website uses big, bold words, you use their meaning to dictate the design. Just imagine a heading that contains the word “flowers” — a hover interaction that animates a bouquet instantly pops into your head. But all this magical process is gone when you create wireframes with a dummy copy because the design process told you so.

Meet Structure

For me, IA was a crucial starting point in the web design process. But even though it laid a solid foundation, it wasn’t enough to capture the full context. On the other hand, wireframing felt like diving into too much detail too quickly.

With this in mind, I went on a mission to find the sweet spot between those two deliverables. I needed a more holistic approach that considered both the big picture and the finer details.

By combining the strengths of IA and wireframing, I discovered the potential of a single diagram that resolved all my issues. I call it Structure — it perfectly captures its purpose without sounding super technical.

What’s Structure

When you look at it, Structure resembles a subway map showing stations and routes (sorry, I’ve played way too much Mini Metro in the past couple of weeks). That’s because Structure gives an easy-to-understand picture of how different parts of the website are linked and how users can move between them.

It gives you an idea of how information is organized; what pages there are and what sections they contain — without forcing any specific visual direction. You start paying more attention to the actions that users can take and the paths you want them to follow, which makes your design truly conversion-oriented. And the content guidelines you attach to the diagram give the copywriter a head start.

Why Structure

Solid UX foundation

Structure serves as a starting point and foundation of my web design process. It’s just enough to focus on the logic and goals of the website without burning the budget on endless discussions about the final wording or what goes into these mysterious placeholders.

User journey, mapped

Structure gives you a crystal-clear perspective on all the actions users can take on each page. And it’s easier for your clients to understand the entire user experience and the context surrounding these actions. This level of visibility helps you make better design choices and identify any potential gaps, inconsistencies, or errors early on.

Single source of truth

Structure is a diagram that provides the team with an overview of the website in one place. It eliminates the need for lists, tables, or multiple separate documents.

Handoff made easy

Even though the final prototype gives the development team a full understanding of how the website works, it’s easier to grasp the navigation when looking at Structure.

To wrap it up

The old-school IA deals well with organizing content but forgets how people interact with the website. With Structure, you take a more holistic approach that emphasizes the user journey, without having to deal with layout, visual direction, or copy like you would with traditional wireframes.

That’s not to say that it’s a one-size-fits-all solution. Although Structure works great in my projects (it’s already helped me with a dozen), everyone has their own take on the web design process. So give it a shot, tweak it to your preferences, and let me know how it works out for you!

‍