How To Create Mockups In Excel

A case for Spreadsheet Wireframes

Why I switched, and I think you should too.

Screen shot of a Google spreadsheet formatted into a wireframe.

As an information architect, sometimes, you have to make wireframes. These should be super lo-fi, bu t a client might ask you to do more (which hopefully they don't because that's what the designer is for, and that's not a wireframe). For previous wireframes, I've used Sketch, or I've simply drawn something out with pencil and paper. Sketch is a simple tool that has become an industry standard; it allows users to complete basic visual design tasks without requiring them to figure out an entire suite of tools to do so, unlike some other tools out there *coughcoughAdobecoughcough*. A lot of design software companies boast about how useful their tools are, all the things they can do, but as a user, I shouldn't have to take a class or spend hundreds of hours figuring out software. That's just bad UX…usually backed by bad IA.

Before I get into it, I feel like it's important to understand what a wireframe is. I've heard and worked with many people who use the word "wireframe" loosely, so I want to get on the same page here. We use wireframes to understand the design layout of a website. They are a low fidelity representation of the pieces that must come together to build a website. It's the skeleton, simple as that. The blood and guts, the visual design; that comes later.

But why are wireframes important to information architects? Simple. This is the first time in a project when you can see all the strategies behind the IA connected to some visual representation of the site. The paths through the site start to become visible with a wireframe. When used appropriately and at the right time in a project, wireframes allow amendments to structure with a lot less headache. After all resetting, a bone is easier than reconstructive surgery.

I am not a visual designer, but I will happily give a client a basic static wireframe, and I know I'm not alone here. This simple deliverable can be enough. But then the inevitable happens. Something comes up, and a change must be made. The client decides they want to go in a completely different direction. Maybe the client is confused by Lorem Ipsum and doesn't understand the "content" that is fake Latin used to fill space. These are genuine issues. These things happen all of the time. And usually, these issues require going back to square one, maybe square two, scraping the work, and coming up with another rendition (at least in my experience). And — well, let's be real, that's annoying. It adds time that may not exist to get extra work done. There is rarely an opportunity to make a "simple" change in a timely fashion. It doesn't make sense that creating such a useful and straightforward tool should come with this unnecessarily stressful work. Not only can a simple static wireframe lead to the above issues, but it also doesn't offer enough. It can give your client an idea of how things might work, but that can be asking a lot of someone coming from a different perspective. They require a lot more explanation. And tend to have a pretty low return, at least in my experience.

And that's why I've switched to making wireframes in spreadsheets.

This concept was brought to my attention by Abby Covert after I made some lack-luster wireframes in Sketch. She said,

"I know spreadsheets are your love language; have you ever tried making a spreadsheet wireframe?"

The short answer was no. No, I had not. But I absolutely needed to know more, because I find few things sexier than a well-formatted spreadsheet.

So being the person that I am, I spent the next several hours conducting more research than necessary, trying to learn about this beautiful sounding concept. I was shocked at how little I found. So, I opened Google Sheets and started noodling around. And guess what? I quickly made some pretty impressive wireframes. These wireframes proved to be incredibly useful for the next several stages of the project I was working on. They made sense, were easily editable, contained actual content, created a collaborative workspace, and they were clickable, navigable, giving everyone of all experience levels the ability to understand how users would navigate the site. It was amazing how such a simple artifact, a spreadsheet, could contain such a "complex" and essential aspect of wireframes.

Screen shot of a Google spreadsheet laid out as a website landing page

Using these spreadsheet wireframes allowed the designer, the client, and myself (the information architect, content strategist, and project manager…I like to wear a lot of hats) to collaborate throughout the project. We could work on the websites IA, design, and content creation seamlessly. I could make any changes the client asked for in no time, with zero stress. It created such a simple hand-off to the designer, who was making the actual fleshed out designs. And the fully rendered mock-ups were able to contain actual content provided by the client in the wireframe.

This wireframe creates a simple clickable tool, but it also condenses several files into one. The client only has to keep track of one file that contains multitudes. For this project, my spreadsheet contained a simple and easy to read sitemap. Big surprise here! The sitemap was clickable, allowing the client to navigate to whichever specific page they wanted to review. Having this sitemap in the same document also shows off the site's taxonomy. Giving everyone a chance to see and interact with the site's architecture to make sure it's simple, productive, and easily navigable. And bringin' it back — the central portion of this document is testing that navigability.

gif of a google spreadsheet wireframe being clicked through.

Now I can't sit here and tout this tool as the best thing ever, while close, it still doesn't solve everything. There is the obvious glaring hole that is the visual design aspect. You can't get that high fidelity wireframe look from a spreadsheet (you could probably get close if you tried hard enough, though). I am in no way saying a designer isn't needed in the planning process of creating or revisiting a website. These wireframes should be used as a very stable stepping stone in the process. A team should be able to have a solid grasp on the content strategy and IA feeling completely confident in the skeletal work before trying to add in the visual layer. A designer should come into this process with an apparent direction provided. Let the designer do what they do best and make that thing pretty as heck!

I'm a convert. I never want to go back to making a wireframe in Sketch. I never again want to spend time connecting lines. It's true, I love a good spreadsheet, it's not hard to get me on a spreadsheet bandwagon, so I am driving this one. I can't see myself going back to Sketch for wireframes anytime soon; I don't see the point of InVision for clickable wireframes. I have no intention of feeling "less skilled" because I don't want or have the time to spend learning a complex tool. Why would I use those programs when I can make a spreadsheet.

— — — — — —

How does this magical spreadsheet wireframing work? Allow me to offer you a quick overview. Don't worry. There is a template for you to play with at the end of this. :)

Before diving in, there is one piece of essential information to note — I've only created these wireframes with Google Sheets. I am not a fan of the Microsoft Office suite or the Apple iWork suite and almost exclusively work on the Google platforms, so this overview relates solely to functions available in Sheets. These functions may be possible in the other suites, but I am not aware of them.

Open a new spreadsheet and give a title that you can remember, so it doesn't get lost in your drive.
You will be using multiple sheets (tabs), and your first sheet should be your sitemap, so go ahead and rename the sheet you are on add your sitemap. The rest of the sheets will represent each page of the site. As you move forward, rename each sheet to match the page it represents.

Add another sheet, name it appropriately (ie Landing Page), and create your site's top nav. Each navigation section should be in a new cell. Make sure what you've written for the navigation section matches the name of the sheet representing that page. **Optional duplicate this sheet several times, so you don't have to recreate the top nav on each new sheet.

Now to make things clickable!

Select a navigation section that you've created a corresponding sheet for and right-click on the cell.
A drop-down menu appears, look for and select Insert Link (you can also use Cmd+K to insert a link).

gif — someone selecting Insert Link on a cell in a spreadsheet wireframe.

A small menu will appear under the cell. Make sure the text reads correctly in the "text" field.

gif — someone hovering over text in a spreadsheet wireframe.

In the link field, a drop-down menu reading Sheets in the spreadsheet should appear under the field. Select that drop-down. Select the corresponding sheet.

gif — someone selecting Landing Page within in the add link menu of a spreadsheet wireframe.

Click Apply.

gif — someone clicking the Apply button within in the add link menu of a spreadsheet wireframe.

And that's it. (I've left a few navigation items without links in the template, so you can complete these steps).

At this point, if you have actual content that you want to add to the wireframe, go ahead and add it. If you don't have content, but you have an idea of the structure of the page, create that structure in the spreadsheet.

If you plan to have in-text links, you can use the above steps to add links to specific content as well.

If you want to spend some time exploring this idea, I've made a template for you. You can find it here. Just download the document, add to your drive, and do your thing!

I hope you enjoy this amazing tool and find a use for spreadsheet wireframes in your work!

Thanks for reading.

The UX Collective donates US$1 for each article published in our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.