Member-only story

How thinking about hierarchical grids helps you take a content-first approach to design

Bad things can happen when you don’t think about content

Kai Wong
UX Collective

An example hierarchical grid on a web page. The same image is shown in a large window on the top with text on the right, and the same image is repeated below in smaller rectangles below.
Photo by Pankaj Patel on Unsplash

As UX Designers, we’re often asked to tread a fine line between content and design. As a result, our designs, especially early on in the process, tend to avoid content since they might not be finalized.

If you want to include some introductory text on the home page, but your team is still debating it, any sketch you show the team might have placeholder text since including that content might derail the discussion.

A page with a placeholder image and lorem ipsum text.

We often abstract the design to get the team to focus on what the page should do, instead of whether something is a droplist or radio button. This allows us to figure out what we need to design and explore several creative options.

However, that begs the question: When do you add the content back in? There’s a tendency to avoid adding content until the latest possible stage: usually before user testing or even later if you feel necessary.

Leaving content for last can sometimes lead to several problems in the late stages of…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Responses (6)

What are your thoughts?

When you’re forced to think about which element is the top priority, you also begin to ask questions about what type of message this page conveys and whether it aligns with what you wan...

I think i gradually figure out WHY I haven't encountered situations in which content-first approach was not used by me.
In my field of trade, visual communication is the primary aspect of our products (mobile games).
The visual hierarchy on a screen…

--

Ran into the same problem with a insurance website, great wireframes, but the long legal wording completely messed up the page design

--

What’s worse, though, is that we hadn’t considered whether certain things were possible. Our idea of a ‘personalized dashboard,’ for example, wouldn’t work when we realized that the use...

YEEEEES exactly!!!!

--