Artistic peacock feather

Build a Website in 5 Steps: A How-To Guide

5 Steps to Build Your Website

A How-To Guide and Process Overview

 
Sketching logos in a notebook.

Wondering what goes into building a typical small-to-medium business website? Here’s the scoop on what it takes to get off the ground and going somewhere online. There’s five basic stages to consider in the order shown below that will take your business online with the best results. Don’t skip on these steps! If you do your homework and due diligence, you’ll be starting with a solid foundation that makes later decision-making and direction so much clearer.

Plan for Your Customer Base (the Market Research Stage)

The very first step in your entire endeavor is to figure out who you are really selling to. There’s demographics, the old “single women in Montana, aged 18-30” thing, and where you really want to turn your attention to these days is psychographics. More than the quantifiable stats on a person (like their age or their zip code), this delves into the benefits that your target customer is really after and why they want it. Ask yourself, what drives them? What motivates them? What keeps these people up at night?

It can be difficult at first but you really need to separate your preconceived notions of who you think your customers should be from the actual most-likely folks who are going to be attracted to your products and services. Get really honest and clear about the catnip you are hanging out on a string to the world. It’s going to perk the attention of a very certain group of people: who will it be?

Even worse, don’t fall into the “everybody could buy my stuff” trap. This is possibly the most detrimental mindset you  can have, because it is the proven first step on the road to BORING and BLAH. When we are trying to appeal to everybody, what we really do is appeal to nobody. Yes there are certain products that in theory, anyone could use. But you don’t inspire anybody when you aim for a wide range target. Instead, narrow it down at first – then snowball into new types of people once you can build that initial base of happy customers.

The more you can write down on paper here, the better. Maybe you already have a model customer and you’d like to see ten more just like her? Keep her in the front of your mind and better yet, write down in a Market Research Brief the facets of who this person is and why they are so perfect for you.

To get a perfect score on this stage: Have your Market Research/Customer Brief fleshed out and written down.

Nail Down Your Copy and Page Structure (the Content Planning Stage)

Now that you know who you’re talking to, it’s time to design the skeleton of your website according to what information your prospects need and will want to see. This might include store locations, team bios (if that’s really important), products sorted into categories, or a walkthrough of the key features of your product (or facility) that make it so special.

Take all this information that you’d like to show the world and put it into a graphical Sitemap, which is essentially a flow chart. This diagram will show all the pages the website will need to have, and approximately their hierarchy. If you really want to score bonus points with your developer, note any special features that a given page needs to have. You don’t need to be making content notes at this stage, just short titles for what each page would be about will be fine, but if you can also write things like “Contact Form” and “Add to Cart Form” it will make an even better map for the project.

The ideal would be to come up with all of your website’s copy at this stage, and pull & purchase the images you want to use. If your copywriter is still working on it, or you personally are writing the copy and it’s not finished yet, that will be acceptable. But it really would be best to have at least a rough outline on what type of words (and how many) are going to go on each page.

At the end of this stage you should have a Sitemap in hand, and an Excel or spreadsheet file is just fine.

Dream Up Your Design (the Design Stage)

Now just before you think I am going to get all artsy fartsy on you, there’s a little more writing to be done. I want you to write up some ideas about the impression your website should be making on people. This should be ever so slightly “touchy feely” — meaning that you should go out on a limb and use words like simple, high tech, kind, cutting edge, minimalist, hometown, high style, luxurious, inclusive, fleeting, time tested, etc. You’re going to want to paint a verbal picture of the experience your customers should be having. Write at least a page on this (single words per line are fine), and put the title Creative Brief at the top. You can do both positive and negative angles on this: write down what it IS and then also what it ISN’T.

With the brief in hand, now is the time to start the web design process. What I really like to do next is get a StyleBoard going that will decide the flavor of things to come. This makes it easier to agree on the look and feel before too much design is done (leading to wasted time), and also it’s the thing that will get you excited but also patient enough to wait for the full page renderings. Pull together a medium sized rectangle with your logo and all kinds of colors, photos, font faces, and page elements that you think will look good. There doesn’t have to be a solid layout to this persay, but it should look very pleasing when it’s done. Now step back. Does this look like the face of the brand you want to continue with? This is the “headshot phase” which will very shortly be followed up with the “filming on set” phase, if you want to think of it like acting. Choose a Style Board that looks like it has all the right character and fundamentals. When in doubt, refer to the Creative Brief that you wrote. The Style Board should personify the Brief nicely.

Now for the site itself. Decide of you want to tailor your site more to mobile or more towards desktop users, and then start sketching up where the various elements might go on the page. You actually do not need to start with the homepage for this process. I often start with the most used page or the one I think the users will be spending the most time on. This might actually be a Dashboard or My Account page. Start with the one that will be visited the most by your customers.

This might be a stage where the actual page content is open to interpretation. There will be times when you want to decide early what’s going on the page (and lock down that decision), and other times you can let it evolve with the artwork. I rather like a middle of the road approach. Sometimes the flow of a page looks so great if you just bring in a few more elements — a few of the latest news or blog snippets, for instance. Play around with it.

When you have a layout that is really working for you and the elements of the page are generally in their places, it’s time to bring it into full color and high fidelity. You might grab the images off your style board and work them in, or create totally new complimentary things. The key is that you want to make it very pleasant and also in alignment with the style board you created earlier. Which is of course itself in observance of your Creative Brief — and hm, didn’t we create that piece to go along with our Marketing Brief? As you can see, it’s all connected and vital!

You’re ready to move on from this stage if you have a Creative Brief, Style Board, and complete Website Artwork for at least 2 main pages of your website (typically Home, a Subpage, and any other critical type like Single Product Page).

Slice and Dice into Code (the Development Stage)

Okay so you have your artwork, and this is very exciting because things are starting to look very real. It’s time to produce this broadway show so the world can see it!

Generally this phase starts with the digital artwork as Photoshop or Illustrator files, and the website’s Front End and Back End are sliced up. There’s two parts there, there is the functionality portion – the backend – which is concerned with making the website actually work and do stuff. Then there is the user interface – the frontend – which makes the website look like you, using the artwork from the previous phase.

This Development step can take days, weeks, or months — it really depends on what needs to be created for the project. Like most things, more work = more time and a larger budget.

Development is complete when you have a working website (on a test URL probably) and the bugs are worked out.

Go Live and Start Marketing (the Launch Stage)

The final stage of your website building journey is to take the site live at the domain name of your choice. Up to now you may have used a Coming Soon page, or just not even registered your domain name at all. Well this is the time to purchase your domain name and web hosting (if not already) and get those all set up. Then launch the site to your nice pretty URL (something like www.my-business-name.com) and let it loose on the web.

When your site is up, good! You’re somewhat (but not all the way) there!

Wait, what? My bank account won’t just fill with millions of dollars because I launched a website? Nope, sorry. There is still a little marketing and promotion to be done. But since we’ve laid the foundation for an excellent and successful website build, you have totally stacked the deck in your favor. You just need a little marketing effort to get the ball rolling.

See, a website with no promotion is like a box of business cards in your desk drawer. Nobody ever sees them, and they won’t be doing you any good. It’s when you pass them out and people get to know you (and visit your awesome website to get an interactive taste of what you’re all about) that the leads start pouring in and the business wheels get turning. So don’t see your website launch day as the time to kick off your shoes and rest on your laurels.

Instead, pull out that Marketing Brief we created in step one. Gosh, I hope it isn’t too dusty. You didn’t let this timeline drag out too long, right? Take a good eyeful at the folks you told the brief that you would serve. Now go market to them! I don’t have time to explain that process here, but there are oodles of folks who can help you with it or even just handle it for you. Advertising, SEO, relations building, all that stuff.


So whew! We made it to the other side of that process! How did you do? Did that sound exhausting or are you like me, and can’t wait to do it all again?

If you want to get in touch with someone who can churn and burn on this for you, I’m your gal. We’ll start the ball rolling and then I will handle all the nitty gritty because you probably already have your hands full with just running your business everyday.

That’s kind of my superpower.

We’ll do the briefing process together and get your vision on paper, and from there on it is largely approvals. Sound good to let someone else do the hard work? Of course it does! Give me a shout and we’ll block off some time to chat about where this web project stuff can take your business.

High Five me by sharing: Pin on PinterestTweet about this on TwitterShare on LinkedInShare on FacebookShare on Reddit

Last updated on