“Stop making wireframes.”
This turned out to be the single worst piece of web design advice I ever received — but I took it anyway. We thought that clients didn’t understand wireframes. We thought designers would be constrained by them. We thought new prototyping tools eliminated the need to plan complex interactions. We thought we could work faster without them.
We thought wrong.
The truth is that wireframes, like architectural blueprints, are the most important tool we have for collaborating on matters of functionality, behavior, content, and constraints. As our team has grown and individual skills have become more specialized, we revitalized the practice of wireframing to bring many aspects of a complex process out into the open.
Get to Great Sooner
What are the ingredients of a solid wireframing process? Who needs to participate? And what does a wireframe look like?
Content First
There’s no better way to get ahead than to just start. Go, make that first mark! To stare down a blank screen can be a humbling experience, especially when the pressure is on.
Designs must be beautiful, innovative, and smart. (Of course!) We never want to rely on familiar design ideas. By putting style aside and focusing on the storyline, the interactions, and a complete inventory of content requirements, we can get to great design — design that meets visitor needs and clearly delivers on our strategy — sooner.
Everything begins with listening and looking with intent. For example, when we begin a new project, we:
- Talk with students, faculty, and leadership.
- Get a feel for the campus and immerse our team in the culture and traditions of the institution.
- Gather notes, Post-its, meeting recordings — even napkin sketches — that document our thoughts and ideas.
Excited and inspired after returning from on-campus discovery with new clients, we identify themes that rise to the top from all of our conversations.
Then we start to craft the story. Our team — strategists, designers, technologists, project managers and account people — works together to align on a differentiated, effective, and authentic narrative.
To formalize our ideas, our content strategists create models in which each web page has a purpose, priorities, and a set of expected user tasks. We share these ideas with our clients for feedback, and together we begin to shape important pages at the top level of the site.
Put the Active in Interactive
With a shared vision for important pages, we begin to think about the system of components needed to express our story ideas and drive visitors to action. We factor in many considerations at this stage. For example, to show the beauty of campus, we may need a slideshow or an immersive video; to communicate a vibrant student life, we may need a social feed or calendar of events. Many individual components get fleshed out with details in a more developed wireframe — the more details, the better.
Once it is time to produce the actual wireframes, each member of our team helps to create the wireframes based on their expertise. A writer crafts copy, a visual designer annotates the wireframes with inspiration, our developers ask important usability questions, and an analyst catalogs content types. As ideas come to life, we’re all able to respond and riff. We post them internally for individual comments and group review and discussion.
I think it surprises most clients — and would even surprise many designers — that our wireframes are interactive, contain real content, and demonstrate important behaviors ahead of the visual presentation.These detailed wireframes help our clients see the thinking in progress. It allows them to be partners in shaping ideas and — equally important — in pulling us back when the content production we’re proposing is too resource-intensive or too restrictive.
For the Design Skeptics
As great as this all sounds, we suspect you have questions: Doesn’t this process constrain design? Where is the experimentation? When do clients see real design? And what if the design concept changes the perception of the content?
We have a plan for that. We’re nimble that way. We understand that visual design, by its nature, is experimental. Layout is a puzzle — the number of navigation items affect menu design choices, and photography, typography, and color have an enormous impact on perception and usability.
We involve visual designers from the beginning, helping to craft the story and define the conceptual approach. Good designers know that constraints actually invite inspiration and creativity. As we wireframe each page type and build out the content structures, we share visual design with clients along the way to ultimately get better feedback faster and build excitement.
Start Making Wireframes
“Start making wireframes” was the single best idea I had when I was looking to open up mStoner’s design process to more substantive collaboration.
Here’s the truth: It really doesn’t matter if you wireframe on a napkin or with the latest, slickest design tool. The point is to share ownership of the process, give yourselves a shared tool for expressing your ideas and plans, open the work up to collaboration and critical analysis, and let your colleagues contribute their expertise early. The work will only get better as a result.
2019 Digital Admissions Research
A content-first approach to wireframing requires identifying and understanding themes and insights from our target prospective student audience.
mStoner and TargetX designed a survey focusing on how prospective teen students use a range of digital tools — social media, websites, email, and digital ads — during their college search and selection process, and what information is most helpful at each stage of the journey.
Our 2019 Digital Admissions research offers rich insights into the nuances of their behavior as they make a vital decision in their lives.
-
Ben Bilow Creative Director Creative success comes from digging in, getting messy, and making stuff. As a kid in St. Louis, my interest in skateboarding and rock & roll music shaped my work ethic — be resourceful, build community, share. We invented our own fun, designing rock posters and building half-pipes — tearing them down and doing it again.