THE WEBSITE BLUEPRINT

Before we jump on to Squarespace...

The Website Blueprint provides a proven process for creating successful websites, developed and refined over two decades of experience in the web design industry.

Extracted from our flagship online course with the same name, this process has been delivered, tested and optimised for maximum efficiency and effectiveness. It now forms an essential part of our web design workshops. One of the key benefits of this process is its scalability. Whether you're working on a small personal project or a large corporate website, the steps can be expanded or condensed, depending on the scale of your project. We will give you a glimpse of the process in this chapter.

Cover Your Bases

What is this website for?

What are the key objectives? Think about market trends and outside factors

MARKET TRENDS

Growth or decline in your industry

External impacts and events

YOUR OVERHEADS

Development costs

Marketing Shipping

COMPETITOR ANALYSIS

Local or National

Your position in the market

New innovations

Do you have an edge (USP)?

BULLET-POINT BRIEF

Even if you are only creating a one-page design, write a short lists of bullet points covering what the website is for, and what it needs to achieve.

BACKGROUND

About your business, key milestones

AUDIENCE

Your target demographic/s

EDGE

What sets you apart from your competitors

DELIVER

What does the website sell/provide

MEASURE

How can we consistently measure the performance of this website?

Prioritise Content

Break down each key page design into 3 tiers of priority

TIER 1

Critical information for the page. Often includes a banner (hero unit), key messages and a representation of the company brand.

TIER 2

Important, but not crucial information. Often includes signposting to key content.

TIER 3

Low priority content for the page, however information could be added to the website footer, meaning that it would appear as tier 3 content on ALL pages

RESPECT THE GRID!

The Squarespace fluid engine is based on a 24 column grid.

The 24 column grid system is a popular approach that involves dividing a webpage layout into 24 equal columns By using an invisible grid, designers can achieve a balanced and consistent layout that helps to guide the user's eye and create a sense of hierarchy The 24 column grid allows for more flexibility in design

This system is often used in responsive web design, where the layout needs to adapt to different screen sizes, and can be customised to fit the specific needs of the project

Sitemap

Think of this as a family tree for your website content.

When we have a clear idea of where each page sits in relation to the sitemap, our customers are far more likely to have a positive user experience on our website

Wireframe

A rapid 'sketch' mockup of key page designs.

Wireframes can be built using a variety of software and traditional methods Our favourite approach is to utilise the giant chalkboard walls at PixelHaze Studio This hands-on approach allows us to ideate and iterate quickly, with the freedom to sketch out our ideas, making adjustments and corrections as we go The chalkboard walls provide a space for collaboration and experimentation, fostering a creative and dynamic environment that helps bring our ideas to life