Skip to content

4 Steps to Building an Effective Website – Step 3: Layout The Framework

4 Steps to Building an Effective Website – Step 3: Layout The Framework

Before you build a house, you have blueprints created to help you visualize the overall layout of your new home. Blueprints layout the design of your home, identifying room size and shape, as well as the placement of windows, doorways, and closets. Just as we plan out a home before we start building, we need to plan out a website to create the framework for design. Just as blueprints to give us a clear visual of what the home will look like, Wireframes create an initial graphic representation of the website.

What is a Wireframe?

wireframeA wireframe is not the official design stage, but a sketch of how you expect your information to be laid out on the computer screen. This step is not about defining the colors or fonts in the design, but it is the gateway to understanding how things function on your website.

The Wireframe Process

Different web firms may approach this process differently, but for us here at the Technology Therapy Group this step should build on steps one and two. Before you begin to frame out your site you need to be clear of your goals and you need to have created your structure. Here are some questions to help you.

Question 1: How Many Wireframes Do We Need To Create?

Think back to your goals and map; do you see each page having the same purpose and layout? Create a list of the pages you’ll want to layout, for example:

  • Home page
  • General content page
  • Shopping category page
  • Search results page
  • Video page
  • Blog

As you can see, there may be several pages to draw out before you begin designing.

Question 2: What Type of Information is on the Page?

blueprintLet’s go back to our analogy of the home blueprint; wouldn’t it be nice to know the furniture going in the room before you built your house? What if you designed a room that could not support that big screen TV and the sectional coach you already picked out?

You must ensure that the pages you are laying out will support the content with which you will fill them. Identify the items and content that will be needed, for example:

  • How much content will the page need to hold?
  • Are you putting in video?
  • How prominent does the call to action need to be?
  • Will you have social sharing icons?
  • Do you want to cross relate information?
  • Do you want to capture contact information?

These questions are starting us on the road to step 4 on function that we will cover next. However, these items will make it easier to see what might be missing in a wireframe and they will help denote placement for prominence.

Question 3: Will the site be Responsive?

This question is an important one in the wireframe phase because it will affect how you can layout your frames. Responsive websites need to be designed on a grid in order to stack elements properly. When you create a wireframe for your website, you will also want to create wireframes for how the content will scale on smaller devices and screens. This will help tremendously in the design phase. If you plan on creating a separate mobile website instead of responsive site, you can mock up the layout on your mobile after you have clarified the desktop version.

Just like building a house, before you pour the concrete you need a blueprint to know where you are going. Before you design a website, especially when you are starting out, laying out your framework can help you see what you have and what’s missing. Getting a visual picture before you send out an rfp or write a line of code can really help strengthen the goals you have set and will save your budget in the long run.

Share This:

Book FREE Trial

We know that getting back into fitness is tough! Let us help you achieve your weight boxing workouts.

Creative Director/Senior Designer

Tom DiGrazia

With over a decade and a half of professional design experience, Tom brings his knowledge of design principles and focus on user experience to every aspect of his contribution to TTG. Paying special attention to each client’s brand, personalized needs and individual interests, he strives to create compelling concepts utilizing intuitive and highly-refined design solutions. In addition to traditional and digital design work and oversight at TTG, Tom also boasts a wide portfolio of web development projects with the company, allowing him to stretch his CSS and HTML skills across multiple platforms and disciplines. He feels that being a designer in the digital landscape of websites, eCommerce solutions, email marketing platforms and social media, it is important to understand the code that goes into these areas as it assists his ability to tailor designs specifically targeted to achieve the best end result and further builds understanding and communication with backend development teams.

In his off hours, Tom is an avid pop culture enthusiast, staying up to date on the latest shows, films, comics and games. He can also typically be found taking part in a whole host of artistic activities that help him further stretch his creative legs. Regardless of the activity, Tom is always accompanied by his dog, Eli, and his cat, Tib.

Design, Photography, Illustration, Digital Imagery Manipulation, Wesbite Development

Photoshop, Illustrator, InDesign, Lightroom, HTML/CSS, Wordpress


Courtney Dumont

As Senior Marketing Strategist & Analyst at Technology Therapy Group, Courtney is energized by the ability to flex both her left and right brain daily. Courtney discovered her passion for Marketing at Bryant University, where she spearheaded research on students’ perceptions of Social Media Marketing for her Honors Capstone Project. After graduating Bryant in 2012, she joined the Technology Therapy team, where she’s honed her skills in social media, search and social advertising, email marketing, SEO, and more.

Since joining the team, Courtney has created digital marketing strategies and managed campaigns for clients across the country, ranging from plastic surgery centers, to jewelry stores, to construction companies. With a cohesive, cross-channel approach and a focus on data-driven decision making, she has increased their leads by up to 217%. But Courtney doesn’t leave her zeal for social media at the office; she also runs a local foodie Instagram account with her husband to document their meals across Rhode Island and beyond. Check them out: @hoppilyfed.

Marketing Strategy, Data Analysis, Google Ads, Facebook Ads, Social Media

Google Analytics, Google Ads, Facebook Ads, Facebook Creator Studio, Instagram, Klaviyo, Mailchimp, Emma Mail, Google Data Studio, WordPress, YouTube, LinkedIn, Facebook, Microsoft Office