Starting a Website: Our Website Design Process

Building a website can seem like a great adventure or a daunting quest – either way, you know what you have currently and what you want to achieve, but you don’t have a clue how you’re going to get there. Here’s a roadmap of how we plan on getting your new website project launched and helping to convert your leads and to delight your customers.

Story Block Media – Starting a Website: Our Web Design Process


How do I start a new website?

First, we start with a creative brief. Don’t be confused by the name. While the creative brief is typically used to define print design projects, a creative brief can describe or define any project. In our creative brief, we gather vital details such as what copy currently exists and what needs to be created, what your website’s ultimate goals, pages needed, personas targeted, the future campaign content that will be created, custom programming or functionality needed, and to assess a proper fit for delivering mockups to you that make the most sense.

Web Design Phase

Our first phase of the process is the design phase. This one is a no-brainer for you, but it’s a vital component for us. Without laying this foundation, we could be setting everyone up for a very painful build. How to design a website might mean to you that a mockup is a mockup and that there is one clear way to go about this. I’m here to dispel this myth, post-haste. There is a variety of paths the web design process can take. As your build team, we’ll assess the right path for you in the creative brief and if you have any opinions about what you want to see, speak up! (And if you have reservations about the importance of graphic design, I will now clear my throat and direct you here.)


What is a wireframe? Is that like a mockup?

A wireframe is a basic and general layout of a website, devoid of any and all style. Its purpose is to layout a clear and definitive framework for how content should look on the website. Wireframes are important because they provide a path to show where the content that is currently being planned will live and coexist with the surrounding elements. Wireframes can also help forecast and plan the creation of mockups to better allocate time and resources – for example, whether a pattern should be created as a background image or if an image should be used. This allows for the mockup to have an approved layout to build upon. Think of it as the framework of a house. It builds upon the foundation and gives structure to an otherwise structureless content creation process.

What is a wireframe? Low Fidelity vs. High Fidelity
Left, low fidelity wireframe mockup hybrid – Right, high fidelity wireframe

Low Fidelity vs. High Fidelity Website Designs

There is a scale of mockup and wireframe quality in web design that we refer to as fidelity. Low fidelity indicates that the design is most likely a sketch or a very simple set of boxes with hardly any indication to what is in them or what style is involved. High fidelity is the most detailed and optimized version of your wireframe or mockup. This would resemble a fully-styled mockup with every detail to pixel perfection or a page wireframe with all of the content already created and ready for critique. It sounds like high fidelity might be what everyone should seek, right? Nope, not at all. Why? Well, you might have heard about a little debate about “content first! No, design first!”

What is rapid prototyping?

Oh, one more thing. Rapid prototyping is a development-oriented solution to the mockup. In some cases, it makes sense to move straight into small-scale development so that when the focus is on user interaction or animation, we can better display what responses will result and what the user flow will look like. It’s important to note that this does lead to a full site development – the idea is to only create the pages needed to give examples of what you can expect.

 the Chicken or the Egg – Content First or Design First?

So...which came first? Do we start with content or do we start with design?

Here at Story Block Media, we get both churning mostly for the sake of expediency. Moreover, we think that they should inform one another. Others usually choose sides.

Think content should come first to educate the design? Well, this is a gamble because as you near the end of the design phase, you might discover pieces missed that need to be written. How about design first, then? If you proceed that way, you also take a risk that your design will be warped or distorted later by pieces that were not accounted for. This is why wireframes are important!

Starting a New Website

This might seem like a lot to process and that's ok. It's our job to process and we work to make it perfect for our client's needs. And, you're probably thinking that all of this is well and good, but it doesn't put my site online. In our next blog, we're going to explain our web development process and how to build a website. Meanwhile, check out our blog for other goodies or book a consultation if you want to get started on your website process. Be forewarned – we might "inbound" you to death. Trust me, it's our mantra and it's in your best interest, scout's honor.

Hit Me with a Consultation