Website Design Wireframe Production

Phases

Introduction

A website is a collection of pages. Typically a small business website features at minimum 4 pages (homepage, about, services, contact.)

A page is a collection of rectangular sections. Typically a page features 3-7 sections.

A section typically consists of 1-3 columns.

Designing a website is a page-by-page process. We begin with creating a basic  verson of the website by developing a website wireframe. The purpose of the wireframe is to add and place your content (wording and images) on the website. Once we have your content placed on the website and the website takes on a basic shape, we can work on crafting the desired visuals, styling, positioning and structure. 

Our web design process was developed to be simple and effective. We start at Step 1 and move forward one step at a time. The goal is to keep moving forward so that the website begins to come together visually while adding certain elements one step at a time. Based on your feedback, we will design and develop your concept. To make it as smooth as possible, we have predesigned a number of design elements for each step for you to choose from or to use as guidance. These are classic and universal website design elements that you see on the majority of websites. If you prefer different ideas, please feel free to show by referencing any website sample. There will be a final revisions phase where we revise everything thoroughly.

To provide us with feedback to specific phase-related questions, typically about content. To add as much content and structure as possible while adding a simple design so we can move forward onto the next phase. 

We develop both versions of the simultaneously, however we focus more on the desktop since it’s more advanced. We will work on the mobile version during the mobile phase.

Revisions. In this step we revise everything and take a step back if needed.

Step 1 - Top Section

The top section, also known as the hero or above the fold section, is the most prominent part of any page of your website, be it the homepage, services page or contact page. It’s the first visual impression of a page. Typically, it features the main headline of the page, an image and a call to action. 

 

Typically SMB websites feature two top section designs–one for the homepage and a different design for the remaining pages. However feel free to choose any of the following:

– same top section for whole website

– top section for homepage, and second will be the same for all other pages

– different top section on all pages

Please pick your option and the desired design(s) below. Note that we can mix them up anyway you would like. 

If you prefer something completely different for a top section, please reference a website sample

Pick your desired top section designs:

Step 2 - Header & Footer

Pick your Header section design:

Current. Transparent section with the top section overlaying it. Navigation is centered, logo to the left, call to action button to the right.

A popular header design with a white back over the top section. A bit bigger highlight on the navigation here.

Centered. Big emphasis on the logo and contact info in the top header bar.

Modern header design that we did for Mansion on Rush. Navigation is not visible at first, slides in after clicking on the navigation icon.

My recommendation? #1 or #4

Step 3 - Contact page

The contact page features a top section and a content section. Feel free to pick any top section from Step 1. As far as the content sections, below are a few popular design layouts:

Common website elements found on the contact page:

– Contact form

– Map of business

– Business name, address and phone number

Step 4 - About page

The most common sections on an about page are:

1- Content section

2- Images or Gallery

3- Our team

4- Instagram 

5- What people say about us (Reviews)

6- Make a reservation/booking (link to another page)

Step 5 - Main pages

Step 6 - Homepage

Once we picked the header and the top section ready, we can focus on the homepage.

A homepage typically averages 5 horizontal sections, ranging anywhere from 3-7 horizontal. You can decide on the number and order of sections.  The most common sections on a homepage are in order:

1- About — Brief description of your business. A few sentences is good enough, as we will have a separate “About” page. Typically 1-2 columns.

2- Services — What we do and who we serve in a nutshell.  

3- Something unique e.g. Why go with us (Something different, unique about us) 

4- Testimonials (Social proof).  We can use here any reviews, certifications, awards, statistics or press mentions. 

5- Contact section – At the bottom of the homepage should be a clear call to action that directs to the contact page.

Step 7 - Mobile

Step 8 - On-page SEO

Step 9 - Revisions