Wireframing is an important step in the web design process. Wireframes allow you to map out the layout and structure of a website or mobile app before visually designing the actual interface. Sketching wireframes is quick and easy using a versatile tool you likely already have – Google Docs.
In this simple tutorial, you’ll learn:
- What wireframes are and why they matter
- The benefits of wireframing with Google Docs
- A step-by-step guide to creating wireframes in Google Docs
- Tips, tricks, and best practices for rapid wireframing
You’ll see just how easy it is to leverage Google Docs to collaborate on website wireframes. Let’s get started!
What Are Wireframes and Why Do You Need Them?
A wireframe is a visual guide that represents the framework of a website or app interface. Wireframes focus first on space allocation and priority of content, not colors, font choices or graphics.
Benefits of wireframing include:
- Organizes site layout and structure
- Quickly validates ideas with stakeholders
- Saves time and money by fixing issues early
- Provides a blueprint for visual design phase
Without the planning phase of wireframing, you risk wasting effort visually designing a user interface that doesn’t meet user needs.
Why Use Google Docs for Wireframing?
Google Docs removes all barriers to wireframing, even if you don’t have access to fancy diagramming tools. Benefits include:
Free and Intuitive
- Docs is free to use with any Google account
- Simple and intuitive interface lowers the learning curve
Built-in Collaboration
- Real-time co-editing allows for quick feedback from team members
- Consolidates feedback and revisions in a single file
Customizable Templates
- Choose from many free wireframing templates
- Save your own templates to reuse for consistency
The real-time collaboration Google Docs provides is extremely helpful during the iterative wireframing process. Next, let’s walk through the step-by-step process.
How to Create Wireframes in Google Docs
Follow these steps to start wireframing your website or mobile app in Google Docs:
1. Open a Blank Doc or Template
Open a blank document or search the template gallery for “wireframe” to start your sketching faster. Using an existing wireframe template provides you with pre-made layout boxes, elements, and icons.
Tip: Name your doc something like “ProjectName Wireframes” for easy recognition.
2. Mockup Key Pages
Determine the most important pages for your website or app that need to be wireframed. This may include:
- Homepage
- Product pages
- Pricing page
- Contact page
- User profile page
- Shopping cart
Focus on defining the structure on key pages instead of wireframing every possible state.
3. Add Boxes and Elements
Use Docs’ built-in drawing tools to map out sections of each page layout.
- Text boxes: Headers, titles, body text
- Shapes: Images, buttons, widgets
- Lines and arrows: Delineate sections or connecting elements
Tip: Group related elements so they move together when iterating.
4. Add Annotations
Make use of annotations to indicate interactivity or provide notes for developers.
Examples:
- Site logo = clickable
- Image carousel
- Expandable content section
5. Apply Colors and Icons
Use colors, icons and text formatting for easy identification of different sections or functionalities. For example:
| ## Main Navigation |
6. Review and Iterate
Share your Google Doc wireframes and gather feedback from team members and stakeholders. Comments and suggestions feature allows threaded conversations.
Use feedback to iterate quickly on your wireframe sketches before design begins. Easy!
Tips and Best Practices
Follow these tips and tricks to get the most out of wireframing with Google Docs:
Use Slide Presentations
- Create clickable prototypes with transitions between slides
- Add animations and morph to demonstrate interactions
Integrate Wireframing Templates
- Check out add-ons like Wireframe.cc for specialized shapes and icons
- Insert elements from UI kits like Material Design, iOS, Bootstrap
Trace Over Existing Sites
- Import screenshots of current site or competitors
- Trace sections directly over screenshot to rebuild layout
Package Multiple Wireframes
- Combine homepage, product page, checkout flows together
- Simplifies sharing for feedback between multiple wireframes
Print as PDF
Before design hand-off, print your wireframes as a PDF to preserve document formatting.
Next Steps After Wireframing
Once you have completed initial website or app wireframes, the next steps include:
- Conduct user research: Gain additional feedback directly from target users.
- Create higher fidelity wireframes: Increase detail and interactivity in wireframes.
- Handoff to designers: Use wireframes as the blueprint for visual and UX design.
- Build hi-fidelity interactive prototypes: Test complex workflows prior to dev handoff.
Go Forth and Wireframe!
And that’s it! With Google Docs, wireframing is something anyone on the web project team can do.
You’re now equipped to leverage Google Docs to quickly sketch wireframe layouts on your next web design project. Iterating on wireframes pre-visual design will help align teams and save countless hours down the road.
While other paid tools exist, don’t underestimate the versatility and simplicity of good ol’ Google Docs for wireframing. Sign in to your Google account and start wireframing your next project!
