Skip to main content

Step 2: Building Your Site Blueprint

Step 2: Building Your Site Blueprint

Before you read about creating your site blueprint, be sure to catch up on the whole web development series over on our blog!

What would happen if you tried to build a house without a blueprint?

You probably wouldn’t end up with a door on the ceiling or a toilet in your kitchen, but your rooms may be in the wrong order, your doorknobs are backward, and your wall corners are cockeyed. Proceeding with the web development process without a site blueprint would end much the same way. You might have the basic structure in order, but there will be a lot of repairs and inconveniences to deal with in the future. 

So, to prevent hold-ups and redos, the next step in the web development process is creating the architectural outline of your site, then diving into page specifics. This product gives both parties a more realistic idea of the overall cost and timeline of the project while also providing a springboard for content and design. The depth of your blueprint depends on the client’s wishes and the agency’s protocol. Some keep it simple with a wireframe and content outline. Others storyboard each page, section by section, drawing up rough drafts of every piece of text and media you’ll later see in the final product. 

Looking at your site blueprint is one of the most exciting parts of working with a web design agency. You get reassurance that your project is proceeding with purpose and direction, plus you get a first peek at your future online home! 

Step 1: Think About the Information You Want to Present

Before creating rough drafts of pages, you need to figure out what information you want to communicate. It helps prevent your blueprint from growing too large and unwieldy with page after page of information for your visitors. Remember that most people are going to skim your copy, so creating an overwhelming number of pages packed to the gills with every piece of information you could think of about your company, services, or whatever will most likely go unnoticed. Focus on crucial details and value-added facts. 

Step 2: List Out Pages

Your pages are the “bricks” of your website, so you want to create a master list of which kinds you want. 

According to Digital, a site that reviews digital tools for small businesses, narrows the list of page types down to just 14:

  1. Homepage, which is the first thing that visitors see when they land on your site. It needs to be bold and full of personality if you want it to keep people engaged. Time published an article that notes most people spend a measly 15-seconds on a page before they decide whether or not they’re willing to stick around. 
  2. About Page shows a summary of who your company is, typical with staff bios, achievements, and the origins of the business. 
  3. Services, listing out what your business offers. 
  4. Products, where you list the available items for sale, the prices, and more information on specs, details, colors, etc. 
  5. FAQ, or Frequently Asked Questions, covers things you need to address all in one spot. 
  6. Testimonials and Reviews is your chance to #humblebrag about happy customers. 
  7. Contact shows visitors how to get in touch with you and where your business is located if you have a brick-and-mortar store. 
  8. The blog is where you house all of your super-steller, search engine optimized content. 
  9. Press/Latest News gives you a spot for any news articles, ads, or videos about your business. 
  10. Privacy Policy explains how the site and your company use any personal data a visitor hands over. 
  11. Terms and Conditions is pretty standard information about what guidelines a visitor should adhere to while using your site. 
  12. A sitemap lists out all of the pages on your website. They’re typically in the footer. 
  13. Page Not Found is a custom 404-error page that redirects visitors to your homepage if a page they’re looking for has been removed. 
  14. Other Pages are not seen on most sites but may have a purpose in some cases. These can be temporary or permanent fixtures and include things like jobs, events, or case studies

Step 3: Create a Wireframe

When you’ve decided what pages you want on your site blueprint, you need a wireframe to give it all structure. You’ll have two types:

Site Map Frame

Example of a sitemap
Source

You’ll start with the overall architecture of your website, listing out each page and the subpages that you’ll find when you head there. Search engines require a copy of your map to index your site’s pages, so in addition to serving as a basecamp for construction, it’s also going to help out with SEO. 

 

Page Frame

Source

On each of your pages listed under your whole site frame, you’ll also want to create a page frame. It shows a general layout and design for each page, with simple visuals showing where you plan to place text, videos, images, and buttons. 

From Site Blueprint to Site Building

At NATIV3, we’re passionate about creating websites that make client dreams come true. We understand that a building can’t be built without a detailed construction plan, and neither can a website. From day one, we work to establish or redesign your web presence by listening closely to your goals and creating a Website Planning Document. It creates a firm foundation for us to begin our work developing the human-centered, visitor-converting site you’ve been searching for. 

Stop playing with drag-and-drop site builders and doodling web designs in the margins of your notebook. Let NATIV3 bring your vision to life with our established three-prong approach to web development. Drop a line, schedule a phone call, and let’s get down to business. 

Share this post:

If you have any questions, feel free to call us

877.660.1195

Minneapolis

400 Cedar Lake Rd S.
Minneapolis, MN 55405
Sales: 612.354.6164Support: 651.900.7834

Washington, DC

Sales: 202.505.2763

© 2024 NATIV3, All Rights Reserved.