by Amy Parker
What if Fore Design was a department store?
That’s the question I asked myself when I started designing the latest version of our website. Approaching it this way helped me consider everything from how big the type should be to where I’d place the signage and how people would move around the space.
I’m not alone in this way of thinking: Pentagram partner Paula Scher uses the same technique. In How to Think Like a Great Graphic Designer, Scher tells author Debbie Millman she’s “designing a building as a user’s manual. I’m taking a form of print and marrying it to a three-dimensional system.”
I’ve done the opposite, taking a three-dimensional space and marrying it to a website, but I found it very freeing to think outside the typical constructs of what we think a website should be. Here’s a brief summary of my approach:
We have a few main groups of people who come to our site: potential clients vetting us, our work, and our services, peers interested in our work or our writing, and customers buying one of our products.
In my head, I translated those groups to customers entering our fictional department store. They’re either coming into the space for the first time or they’re returning and are more familiar with the space. Either group might be looking to browse, or might be interested in tracking down something specific. So how do I get these very different groups to where they’re going (even if that’s nowhere in particular)?
I’d place a big store directory at the front of the store and another at the elevator exit so our customer could focus completely on where they need to go as soon as they’re at a decision point. As they move around the space, they’d probably need an identifier to know what department they’re in and signage to know where the other departments are.
To translate that to our website, our “store directory” is our home page menu. With diverse groups of people trying to get to different places, we felt it was important to help them self serve — present them with the options and let them decide where they want or need to go. Sometimes getting out of the way is best experience you can give your customer.
“Department identifiers” are a combination of the section titles at the top of the page (the department our customer is currently in) and the sidebar menu (departments they can see from where they are and might like to go).
Mapping the Fore Design brand onto a physical space would probably look pristine and modern, with glossy white floors and furniture, matte white walls, minimal black fixtures, and simple but bold black lettering on all the signage to let the product shine through. In digital form, that translates to white backgrounds with a single typeface set in black and lots of negative space to let our projects stand out.
In a physical space, there’s a clear content hierarchy: some signs are meant to be viewed up close and provide an overview while others are place markers meant to be seen from a distance. This helped me establish a typographic hierarchy and decide when to make wayfinding content front and center (like the menu) and when it should “be seen from a distance” (like the sidebar menu or section titles).
I thought the idea of taking an elevator up and down in our theoretical department store was a sensical analogue for moving customers around our site. Dan added subtle upward transitions between sections and pages to help visitors understand where they are in the context of the site.
Turns out, a real-life, three-dimensional space is a great way to think about making a website. Translating depth and dimension to a flat plane unlocked a lot of possibilities for designing our digital space.
If you’ve ever approached a project as though it’s a totally different medium, I’d be excited to hear what you learned.