The Website Blueprint: 5 Steps to Streamline Your Web Design Projects

Elwyn Davies shares his 20 years of experience in web design and management, breaking down the Website Blueprint – a scalable, no-nonsense approach to managing web projects for small businesses and beyond.

The Website Blueprint is the key to staying sane while managing web design projects, regardless of size.

I have built and streamlined this entire planning system over two decades, and I am going to be releasing all aspects, along with course videos here, completely for free over the coming weeks.

---

If you are crying out for additional help and support on this or any other web design topic, you can join our FREE Pixelhaze Academy membership here.

---

In over 20 years as a professional web designer, project manager, business owner, and agency founder, I’ve had to become the ultimate generalist—someone who knows a bit of everything to keep the ship running smoothly. Over time, I developed an easy-to-follow system for managing website projects, which I call the Website Blueprint. The best part? It’s scalable, meaning it works whether you’re building sites for micro-businesses or medium-sized organizations.

If I had to pick a lane, small business web design is my sweet spot. And the good news is, if you’re just starting out or sharpening your skills, this is the perfect system to help you learn everything you need without burning out. Let’s cut through the jargon and break it down.

Part 1: The Bullet Point Brief

You need to extract all the essential information from your client to get your project off the ground. But that doesn’t mean you need to drown in paperwork. I’ve streamlined this process into the “Bullet Point Brief.” This formula makes it easy to gather everything you need in one go, without endless back-and-forth.

Here’s where tools like Otter AI come in handy. I use it to record and transcribe client interviews. You get all the critical info from a conversation, and I’ll even provide a list of questions honed over 20 years. There is no fluff, just results.

“If you want to avoid endless revisions and confusion, nail the brief from the start.” — Elwyn Davies

Part 2: Knowing Your Customer

Once the brief is in hand, it’s time to research the client’s customers. You need to know who you’re building the website for. Are these users likely to explore every nook and cranny of the site, or do they want to buy a product and bounce as quickly as possible?

Understanding the end-user's persona is crucial to delivering a site that fits their needs, not just your client’s ideas.

There’s no right or wrong audience—just a right or wrong approach. Build your personas, and you’ll know how to guide the design process for the best user experience.

Part 3: Building the Site Structure (Sitemap)

You're ready to map out the site with the brief locked in and the personas defined. In this step, you decide what pages are needed and how users will navigate the site. Think of this as building a system that guides users seamlessly from A to B. If your audience is left frustrated, you’ve missed the mark.

Consider things like:

What pages should sit in the top menu?

How many clicks does it take to get to the most important content?

These decisions will dictate the site's flow, and this stage of the Blueprint is where it all starts to come together.

Part 4: Content Prioritization

You can focus on the content now that you know the site structure. The key here is to break it down into three priority levels. Go through this process for every key page in your website.

• Tier 1: The essential stuff that sits above the fold (the first thing users see without scrolling). This is your site’s billboard. What’s the most critical thing visitors need to know or do? Put that here.

• Tier 2: Important but not critical content sits below the fold. This could be blog posts, product highlights, or calls to action that guide users to other site sections.

• Tier 3: Non-essential content, like footers. This is still valuable information, but it doesn’t need to take up prime real estate. This is where you tuck away newsletter signups, contact details, and social media feeds.

Being ruthless about content prioritization keeps your site lean and avoids overwhelming users with too much noise.

Part 5: Wireframing

Wireframes are an often overlooked step, but they’re critical. Even after two decades, I still sketch out wireframes, and if you’re serious about professional web design, you should, too.

You don’t need fancy software; a good old-fashioned sketch on paper, whiteboard or chalkboard works. But for those who want a more integrated approach, our own Squareforge.net will allow you to build rapid prototypes directly onto a Squarespace website (your final site does not need to be built on Squarespace.

Clients can see exactly how things will fit together without waiting for a complete build, making getting approval much more accessible.

The point of wireframing is to avoid surprises. Clients like to see where their site is going before they sign off, and this is your chance to guide that process and manage their expectations.

“Skip the wireframes, and you’re just asking for a redesign down the road. Clients hate surprises.” — Elwyn Davies

---

Check out Squareforge for over 300 ready-made Squarespace section templates to help you rapidly prototype, wireframe and even design websites in half the time. Never start from scratch again.

Join the Pixelhaze DIY Community for tutorials, tips, and advice on building websites, perfect for anyone getting hands-on with web design.

---

Takeaway Notes:

• The Website Blueprint is a step-by-step approach to managing website projects efficiently.

• Start with the Bullet Point Brief to extract essential client info upfront.

• Understanding the client’s audience is crucial to shaping the site’s user experience.

• Prioritize content in three tiers to avoid cluttering the site.

• Wireframing is a must—don’t skip it if you want a smoother approval process.

Jargon Buster:

• Above the fold: The part of a web page visible without scrolling.

• Persona: A representation of the target user based on behaviour and needs.

• Wireframe: A basic visual layout that outlines the structure of a website.

Wrap-up:

The Website Blueprint system keeps you in control of web design projects. By breaking the process into manageable stages, from the brief to the wireframe, you’ll stay on top while delivering results that hit the mark. Whether you’re just starting out or a seasoned pro, this system keeps you sane and gets the job done.

---

Want to sharpen your web design skills with free courses? Sign up for a free membership at Pixelhaze Academy and start learning today.

"Master the five phases of the Website Blueprint and streamline your web design process."