Apr 29, 2019

The Fundamentals of Wireframing

 

Why You Need Wireframes For Your Next Website Build.

Okay, we admit, wireframing isn’t exactly the sexiest part of web design, but it's important. We can almost guarantee that your website won’t be nearly as functional, optimal or beautiful if you skip this crucial step.   

Sometimes called "page schematic" or "screen blueprint", wireframes are a visual guide to map out the structure of a website clearly. 

Like blueprints for a home, they’re done well before any actual design or building takes place, because they reveal everything you need to know to move forward with confidence.

SFCS-Wireframe-for-Commuter-Services-Website

Created in simple black and white blocks, wireframes give you an easily digestible, no-frills picture of the "skeletal framework" for your site – specific pages, page elements, site features, navigation, areas of conversion, links and more.

Essentially, wireframing allows you to map the architectural integrity of your site and make any necessary adjustments before investing the time and money associated with the design and build phases.

DCA_Wireframe_Image1_04162019_JD

You’ll see precisely how things fit and function together. You’ll develop a stronger understanding of the intended behavior of visitors. You’ll notice what paths are missing and what elements seem unnecessary. Most importantly, you’ll be able to spot any flaws and fix them before they’re built into your site and passed on to unsuspecting visitors.

If you ask us, it all adds up to a pretty beautiful argument for wireframing.

Download this blog post

Five Tips To Effective Wireframing

  1. Keep it simple. Your site will surely evolve as new ideas and details are brought to the forefront (in fact, expect quite a few to arise during the wireframing process), but this is not the time to sweat the small stuff. Getting mired in the details runs contrary to the purpose of gaining a big-picture perspective of your architecture. Avoid graphics and colors. Use “Lorem Ipsum” for content. Keep it simple.
  2. Start with a marker: Many of us prefer to hand draw quick sketches for our initial wireframes. Working with your hands makes it easier to grasp the architecture, connect with it, and come up with new solutions on the fly. Plus, if things aren’t working the way you want, simply crumple, toss, and start again. You haven’t wasted too much time or energy. Once you're ready to finalize the wires, here's a list of tools that will help you create professional-looking wireframes.
  3. Do your homework: The best wireframes are built around a good general understanding of proposed content. Interview your stakeholders, conduct a content audit, know the priority parts of your site before you begin wireframing.
  4. Don’t get ahead of yourself: You might be tempted to jump to the design phase while still in the midst of wireframing. Jotting down thoughts and ideas along the way is great. Just don’t commit significant time or money to design before completing the wireframing process. You might do so only to find your brilliant concept is wildly off base.
  5. Think reasonably: Don’t go crazy. Chances are you won’t need to wireframe every single page of your site to get the answers you need. Do those that are necessary (home page, main navigation pages, pages with forms and blog content templates) to take you to a confident point from which to begin your design and build.  

 Here's an image that shows the wireframe and the design comp based on it:

hawks-cay-website-wireframe-and-comp

Standard Elements of Wireframes

  • Header
  • Search field
  • Breadcrumbs (ex. Home > Page > Sub-page)
  • Headers & Sub-Headers (H1, H2, Hx, etc.)
  • Navigation
  • Photo/Graphic Areas
  • Copy Length with "Lorem Ipsum" or Indicative  Text
  • Buttons
  • Footer
  • Standard Font
  • Dimensions

Top 5 Benefits of Wireframing - At A Glance

  1. Clarity: Wireframes give all parties a tangible vision of website architecture and functionality, making it easy to spot issues and implement necessary changes.
  2. Functionality: Wireframes are done entirely in grayscale without any imagery. This makes it easier to focus on the functionality of the website before worrying about its form.  
  3. Improved User Experience: Wireframes put usability at the forefront of the development process.  They provide a clear understanding of conversion paths, navigation elements, embedded links and other elements that impact how users will interact with the site.
  4. Experimentation: Wireframing provides a good look at your site’s conversion paths, key messages and user takeaways, allowing you to experiment with different options while still in this basic developmental stage.
  5. Saves Time & Money: Wireframes make it simple to share website architecture with all parties involved. Exchange feedback, add new solutions, try new approaches, rethink navigation, and much more, long before making these types of changes become far more costly and complicated.

See What Wireframes Can Do For You

The first rule of wireframing is simple – don’t skip it! If you do, you’re just asking for problems down the road – problems you could have fixed that will end up costing you added dollars, bigger headaches, and, quite possibly, lost customers.

DCA_Wireframe_Image2_04162019_JD

If you’re interested in seeing what a well-crafted wireframe looks like and can accomplish, drop us a line at Diaz Cooper. Our team has been named a top digital marketing agency by DesignRush. We’ll walk you through our proven process and show you some of our latest and greatest wireframes, as well as the beautifully designed websites that never would have been possible without them.  

 

Get inbound marketing insights, tips and resources...

Latest Articles from Our Blog

The costs of inbound marketing can vary widely, and we're going to provide average price ranges based on the assumption that you want the highest-quality work to see real results.
Content Marketing

Inbound Marketing: What You Need to Know to Get Started

Brandi Jangula
Brandi Jangula
Inbound Marketing: What You Need to Know to Get Started
Photo by krakenimages on Unsplash What is the Purpose of Inbound Marketing? Why is it Important? Inbound marketing is different from...
Brandi Jangula
Brandi Jangula
Content Marketing

Inbound Marketing: How to Attract More Customers

Brandi Jangula
Brandi Jangula
Inbound Marketing: How to Attract More Customers
Photo by krakenimages on Unsplash Learn how inbound marketing strategies can grow your business. As a marketer, it's your goal to attract...
Brandi Jangula
Brandi Jangula
Content Marketing

7 Signs You Should Hire an Inbound Marketing Agency

Brandi Jangula
Brandi Jangula
7 Signs You Should Hire an Inbound Marketing Agency
Photo by krakenimages on Unsplash Why You Should Hire an Inbound Marketing Agency Building a website, managing social media and designing...
Brandi Jangula
Brandi Jangula

The Top Reasons Why Tech Careers Are Booming

Elizabeth Mackenzie
Elizabeth Mackenzie
The Top Reasons Why Tech Careers Are Booming
Photo by krakenimages on Unsplash Tech Careers will boom over the next 10 years... The Fourth Industrial Revolution is reshaping the...
Elizabeth Mackenzie
Elizabeth Mackenzie
Email Marketing

Top 5 Tactics Working in Emails (Right Now)

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Top 5 Tactics Working in Emails (Right Now)
Photo by Priscilla Du Preez Improve your open rates today using the top data-backed tactics that are working right now. The last few months...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Websites Growth-driven Design

What is Shopify and Why Should I Choose it?

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
What is Shopify and Why Should I Choose it?
If you've ever purchased from Lindt, The Economist, FitBit, or Allbirds (just to name a few), then you've likely experienced the Shopify...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
News and Press

Is Your Agency Still Focused on Counting Hours Rather than Results?

DCA Team
DCA Team
Is Your Agency Still Focused on Counting Hours Rather than Results?
Diaz & Cooper Advertising Staff Have Been #ROWE Since 2012 Last year while a global pandemic ushered in an expansive and unexpected...
DCA Team
DCA Team
Business Growth

How to Achieve Digital Growth in a Post-Cookies World

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
How to Achieve Digital Growth in a Post-Cookies World
Photo by Austin Distel on Unsplash Google's announcement that it will block third-party cookies across its Chrome browser by 2022 has sent...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Inbound Marketing

5 ways to reignite your travel marketing in 2021

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
5 ways to reignite your travel marketing in 2021
The travel industry is starting to recover from the COVID crisis – and it looks like 2021 could bring a boom. The travel industry has been...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Inbound Marketing

Marketing for the travel recovery

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Marketing for the travel recovery
Now is the time to market for the post-COVID travel recovery. Here's why: It is no secret that the travel and tourism industry took a...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
News and Press

We've been named Top 40 Outstanding eCommerce Agencies

DCA Team
DCA Team
We've been named Top 40 Outstanding eCommerce Agencies
Diaz & Cooper Advertising is excited to announce that Retail Today has placed us in the exclusive category of 40 Outstanding eCommerce...
DCA Team
DCA Team
Inbound Marketing

How can you help support small businesses?

Todd Cooper – VP, Client-in-Residence
Todd Cooper – VP, Client-in-Residence
How can you help support small businesses?
Photo by Bruce Mars We, like 2.3 million others, are a small business in Florida. Over the last 19 years, Diaz & Cooper has become known as...
Todd Cooper – VP, Client-in-Residence
Todd Cooper – VP, Client-in-Residence
Inbound Marketing

How to Optimize your Google Ads Campaigns for Better ROI

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
How to Optimize your Google Ads Campaigns for Better ROI
During challenging economic times, the temptation to cut back on marketing can be overwhelming. This is particularly true of digital spend...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
News and Press

Telemark chooses Diaz & Cooper for regional marketing.

DCA Team
DCA Team
Telemark chooses Diaz & Cooper for regional marketing.
Named after the historic inland region of Southern Norway known for its vast forests and as the birthplace of Telemark skiing, Telemark, WI...
DCA Team
DCA Team
Websites Growth-driven Design

7 Ways to Optimize Your Homepage & Increase Conversions

DCA Team
DCA Team
7 Ways to Optimize Your Homepage & Increase Conversions
Conversion Rate Optimization (commonly known as CRO) is a method aimed to help you improve your website’s ability to convert passive...
DCA Team
DCA Team
Inbound Marketing

How to Market with Compassion During a Crisis

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
How to Market with Compassion During a Crisis
This guide will help you make the most of your marketing dollars during the crisis. Browse through LinkedIn or any other social channel...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Email Marketing

Using lead magnets to attract new sales.

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Using lead magnets to attract new sales.
Photo by Anete Lūsiņa Is your website producing new leads that you can turn into customers? We know that email marketing is one of the...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
News and Press

Wellbeing Wearables Shopify Launch

DCA Team
DCA Team
Wellbeing Wearables Shopify Launch
Philip Stein Launches New eCommerce Platform for Wellness Diaz & Cooper develops new website for global watch brand Miami, FL: Under the...
DCA Team
DCA Team
Websites Growth-driven Design

Case Study: eCommerce on Safari

DCA Team
DCA Team
Case Study: eCommerce on Safari
goal: Increase repeat purchases and reduce cart abandonment.
DCA Team
DCA Team
Business Growth

It's Time to Put the Results into Remote

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
It's Time to Put the Results into Remote
   
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Inbound Marketing

How Google Maps Is Changing Booking Options

Victoria Hajjar – Growth Strategist
How Google Maps Is Changing Booking Options
Image courtesy of The Word Point As the battle for direct bookings becomes ever more competitive for hotels, Google is increasing its...
Victoria Hajjar – Growth Strategist
Case Studies

Case Study: Fueling Online Bookings

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Case Study: Fueling Online Bookings
goal: Increase direct bookings online
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Websites Growth-driven Design

Should You Worry About Your Website Being ADA Compliant?

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Should You Worry About Your Website Being ADA Compliant?
The Essential Website Accessibility Guide What do Beyonce, Domino’s Pizza and the Avanti Hotel have in common? They have all recently been...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Case Studies

Case Study: Digital Approach Doubles Sales

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Case Study: Digital Approach Doubles Sales
goal: Generate leads and sales
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Case Studies

Case Study: New Leads Make a Leap

Sandi Abbott – Inbound Marketing Supervisor
Sandi Abbott – Inbound Marketing Supervisor
Case Study: New Leads Make a Leap
goal: Increase sales from email campaigns
Sandi Abbott – Inbound Marketing Supervisor
Sandi Abbott – Inbound Marketing Supervisor
News and Press

DCA Named Top 25 for eCommerce Design and Development

DCA Team
DCA Team
DCA Named Top 25 for eCommerce Design and Development
Diaz & Cooper has been named as one of the Top 25 eCommerce Design and Development Companies of 2019 by DesignRush. Coming in at #7 out of...
DCA Team
DCA Team
Websites Growth-driven Design

How Not to Lose $32 Million on a Website

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
How Not to Lose $32 Million on a Website
The new Hertz© website was just in the news, but not for a good reason. According to “The Register” car-rental giant Hertz hired the global...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Websites Growth-driven Design

The Fundamentals of Wireframing

DCA Team
DCA Team
The Fundamentals of Wireframing
 
DCA Team
DCA Team
Content Marketing

How to Optimize Customer Value in 6 Steps

Patrick Foster – Guest Blogger
Patrick Foster – Guest Blogger
How to Optimize Customer Value in 6 Steps
  The sheer breadth of customer data available to the average seller today can actually become a problem. When your head is up in the...
Patrick Foster – Guest Blogger
Patrick Foster – Guest Blogger

Mastering the basics of email automation

Sandi Abbott – Inbound Marketing Supervisor
Sandi Abbott – Inbound Marketing Supervisor
Mastering the basics of email automation
We’ve all had those days when we’re super busy, yet have to send out countless emails to prospects, as well as publish blog posts and...
Sandi Abbott – Inbound Marketing Supervisor
Sandi Abbott – Inbound Marketing Supervisor
Inbound Marketing

What I learned at 10x Growth Con

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
What I learned at 10x Growth Con
I spent Super Bowl weekend at Grant Cardone’s 10x conference – here’s what I learned. This weekend, almost 35,000 people descended on Miami...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Inbound Marketing

Six Steps of Strategic Planning

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Six Steps of Strategic Planning
Any marketing plan works best when you start with a well-thought out strategic plan for business growth.  With a strategic growth plan,...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Websites Growth-driven Design

Case Study: Triple-crown winning site brings in 3x the booking revenue

DCA Team
DCA Team
Case Study: Triple-crown winning site brings in 3x the booking revenue
goal: Increase direct booking conversions on website
DCA Team
DCA Team
Websites Growth-driven Design

How To Create The Perfect Product Landing Page

Patrick Foster – Guest Blogger
Patrick Foster – Guest Blogger
How To Create The Perfect Product Landing Page
Creating an excellent product landing page should be high up on your priority list when you’re designing your ecommerce site. The ecommerce...
Patrick Foster – Guest Blogger
Patrick Foster – Guest Blogger
Case Studies

Case Study: Lose the Keys, Find Key West Campaign

DCA Team
DCA Team
Case Study: Lose the Keys, Find Key West Campaign
goal: Launch Brand; Generate Awareness, Leads and Increase Ridership the challenge: Launch a new brand and campaign to convince locals and...
DCA Team
DCA Team
Websites Growth-driven Design

Sadly, “Brochure” websites no longer work. So What WILL?

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Sadly, “Brochure” websites no longer work. So What WILL?
On a scale of 1 to 10, how important is your website to your travel business? If your site were to disappear overnight, how would it affect...
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Websites Growth-driven Design

So, you think your hotel website is optimized?

Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
So, you think your hotel website is optimized?
Here are 5 reasons you may be wrong. You and I know something pretty important about your website – you need it to convert more bookings....
Omi Diaz-Cooper – CEO, Speaker
Omi Diaz-Cooper – CEO, Speaker
Websites Growth-driven Design

The Quick & Dirty Guide to Getting Found Online

DCA Team
DCA Team
The Quick & Dirty Guide to Getting Found Online
Part 1: Search Engine Optimization Introduction There is no debate: Your website is one of the most important pieces of your business...
DCA Team
DCA Team
Websites Growth-driven Design

Why Stock Photos Are Ruining Your Website UX

Tony Dicks – Digital Strategy Coach
Tony Dicks – Digital Strategy Coach
Why Stock Photos Are Ruining Your Website UX
Remember the last time your coworker cracked a joke during a conference call and the entire room erupted in hysterics? How about the time...
Tony Dicks – Digital Strategy Coach
Tony Dicks – Digital Strategy Coach
Websites Growth-driven Design

Why Do I Need an SEO Consultant?

DCA Team
DCA Team
Why Do I Need an SEO Consultant?
DCA Team
DCA Team
Case Studies

Case Study: The Only Key You'll Need

DCA Team
DCA Team
Case Study: The Only Key You'll Need
goal: Increase Sales (Brand Website Bookings) the challenge: Generate bookings among the adult and couples market to drive occupancy during...
DCA Team
DCA Team
News and Press

Diaz & Cooper Wins Platinum Summit Marketing Effectiveness Award

DCA Team
DCA Team
Diaz & Cooper Wins Platinum Summit Marketing Effectiveness Award
Miami, Florida – Sept. 19, 2012 – Diaz Cooper, a Miami-based digital marketing agency promises their Clients results. In September, the...
DCA Team
DCA Team
Case Studies

Case Study: Destination Immersion Social

DCA Team
DCA Team
Case Study: Destination Immersion Social
goal: Build Customer Loyalty, Engage Social Community
DCA Team
DCA Team
Case Studies

Case Study: Destination Immersion Integrated Campaign

DCA Team
DCA Team
Case Study: Destination Immersion Integrated Campaign
goal: Generate Leads, Increase Revenue
DCA Team
DCA Team
News and Press

DCA Wins HRM Award for Banyan Website

DCA Team
DCA Team
DCA Wins HRM Award for Banyan Website
Website design and usability earn HRM award.
DCA Team
DCA Team
News and Press

Diaz & Cooper Named in Top 25 Advertising Agencies in South Florida

DCA Team
DCA Team
Diaz & Cooper Named in Top 25 Advertising Agencies in South Florida
DCA honored by TCI and UM's JAE Leadership Institute.
DCA Team
DCA Team
News and Press

ROWE Provides Results-focus at Diaz & Cooper

DCA Team
DCA Team
ROWE Provides Results-focus at Diaz & Cooper
For the Diaz & Cooper Team, it’s all about results.
DCA Team
DCA Team
News and Press

Team DCA “Geeks Out” at An Event Apart in Atlanta

DCA Team
DCA Team
Team DCA “Geeks Out” at An Event Apart in Atlanta
DCA Design and Development team stays on the forefront of web technology.
DCA Team
DCA Team