SmartCause Digital

Wireframe Your Way to Website Success

Sep 25, 2012

What is a wireframe?

A wireframe represents the layout of a website without any design elements, such as colors, fonts or logos.

Why is a wireframe important?

A wireframe allows you and your team/boss/vendor to discuss the placement of major elements of the site and explore how specific functions will work without having to get into additional conversations about colors and logos. Your team will save valuable time and budget by discussing features and layout and editing the wireframe, rather than editing a final product. After the wireframe is complete, your designer and/or developer will use it as a base for the next phases of the website project.

We're walking through a website wireframe, but you can wireframe almost any project including email newsletters, print brochures or specific pieces of a website such as a donation form or online donation process.

How can I make a wireframe?

There are many online tools available to use or try for free. Go Mockingbird is a good place to start for a simple project. If you have something a little more complex in mind, Balsamiq might be more your speed.

How can I make a [good] wireframe?

Now we're getting to the good stuff...

You don't need to be a designer or a developer; anyone can make a wireframe. Let's walk through a wireframe process and review some important considerations.

Western website visitors tend to read websites in a Z pattern. They scan from the top left corner to the top right corner to the bottom left corner to the bottom right corner. The top corners of your wireframe should provide website visitors with an introduction to your nonprofit and easy-to-access useful links.

Nonprofit Website Wireframe - Branding

This is the Branding corner of your wireframe. Think about including: your nonprofit's logo, your nonprofit's tagline or [brief] mission statement and/or the logo as a link to the front page.

 

Nonprofit Website Wireframes - Helpful

This is the Helpful corner of your wireframe. Think about including: useful links for secondary audiences including log in, careers / jobs, contact us or privacy policy pages, a search box, your organization's phone number and/or a donate link or button.

 

Nonprofit Website Wireframes - Footer

This is the footer area of your wireframe. Footers can be very slim with a single line or two of text or expanded in height to include lists of popular links. Think about including: copyright information, your nonprofit's name and/or logo, contact information like a phone number or email address, a link to your organization's online privacy policy, sponsor logos and/or a repeat of the links in the helpful area.

 

Nonprofit Website Wireframes - Content

This is the Content area of your wireframe. There are many ways to arrange the content area, including the options displayed below. For your homepage wireframe, choose one area to serve as the main focus, especially for visitors who are new to your organization. Remember to use compelling pictures and images and to use the main area to introduce your mission or your community. Consider including areas such as: recent content such as "latest news", links that take visitors deeper into the website and a call-to-action such as "sign up" or "donate".

 

Nonprofit Website Wireframes - Content

Nonprofit Website Wireframes - Content

 

 

Nonprofit Website Wireframes - Internal

For internal page wireframes, think about adding a breadcrumb trail to provide context and remember to leave plenty of room to accommodate different types of content. The column that runs alongside the main content in the layout is called the sidebar. The sidebar is an opportunity to pull in relevant content such as latest news, upcoming events, social media links, a subscribe box, case studies, profiles or multimedia content.

 

Sample Wireframes for Inspiration

Below are homepage and internal page wireframes from two different website projects for review and inspiration. Click on any of them to view the full size image and review detail.

Sample Nonprofit Website Wireframe  Sample Nonprofit Website Wireframe

Sample Nonprofit Website Wireframe  Sample Nonprofit Website Wireframe

Sample Nonprofit Website Wireframe  Sample Nonprofit Website Wireframe

Did you find this article useful? Subscribe to SmartCause updates to receive a free helpful resource every week

About the Author

Yesenia SoteloYesenia Sotelo is a digital skills trainer and web developer.

I'm grateful to have led trainings & presentations for these nonprofit thought leaders

Nonprofit thoughtleaders

I'm proud to be a member of each of these nonprofit teams

World's best nonprofit clients