4 Things to Do Before Designing Your Website

Before designing your website, the thought of going through all the tasks to get it launched can be either very exciting or stressful and overwhelming. It’s very tempting to jump right in, roll up your sleeves, and start building your website—but there are a few key steps you need to take before even thinking about designing. <<< Doing these steps will help eliminate getting overwhelmed during the process.

Think of your website like a house; you wouldn’t start with painting the walls and hanging curtains, you would start with laying a solid foundation.

Brand Identity (Logos, Colors, Fonts, etc.)

Establishing your brand identity is the first step before building your website. Your brand is more than a logo. It’s how you make someone feel when they interact with your brand. I’d even argue that the colors and fonts you use in your brand are more important than a logo. I highly recommend working with a brand designer for this step if at all possible. Depending on the brand designer you work with, the process will be different, but you need to make sure that your brand identity package includes:

Logo Files

Your brand identity should include multiple versions of your logo. The reason is that you need a logo that will work for different areas of your website and business in general. For example, the logo you would use at the top of your website might need to be different than the logo you use in the footer. Common logotypes are:

Primary/Main Logo

This type of logo will generally have more details included in it, like your full business name, tagline, industry, and/or established year.

Secondary Logo

A more condensed version of your primary logo that might have less information included.

Submark

An even more condensed version of your primary logo.

Monogram

A logo that uses the initials for your business.

Wordmark

A simple logo that only has your business name.

Brandmark/Favicon

A symbol that represents your brand, that may or may not have been used in one of your other logos. This logo can also be used as a favicon, which is the image that appears in the browser tab when your website is being viewed.

You should receive your logo files in multiple file types (SVG, PNG, JPG, etc.) and in all brand colors + black and white.

Color Palette & Fonts

In a lot of ways, your brand colors and fonts are actually more important than your logo. Colors have emotions associated with them, and different fonts have unique personalities. It’s important to establish what kind of feeling you want your brand to have before choosing your colors and fonts.

Brand Guidelines

A document that goes over how to use your logo files. It should include all of the color codes (HEX, RGB and CMYK) that are part of your brand. It also should include a list of your brand fonts and the hierarchy they need to be used in.

Website Copy (Words on Your Website)

It’s very important to with your website copy before designing your website. The design of your website looking amazing is a necessity, but if you don’t write copy that connects to your ideal client, it won’t matter. The copy on your website is what will sell someone on whether to work with you or not, and the layout of your website needs to highlight that.

Website Wireframe (Mockup of Your Website Pages)

I highly recommend starting with a website template or hiring a web designer to build your website from scratch. But if you’re going to DIY from the ground up, it’s important to map out your website before designing. Your website wireframe doesn’t have to be fancy or fully designed. A lot of web designers will do a full website page mockup in Adobe XD but personally, I feel like this is more work than necessary and I’ll only do a very rough mockup if I do one at all. The purpose of doing a wireframe is to make sure that you make sure you’ve covered everything you need on your pages and to map out a customer journey for anyone who’s landed on one of your website pages.

Brand Images

Ideally, you invest in a full brand photoshoot for this step, but at the very least, I would recommend getting a professional headshot taken. For any other photos on your website, you can use stock photography. I recommend looking into a high-quality stock photo membership like Social Squares as opposed to a free option like Unsplash.

Website

Now that you’ve laid all of the foundational work, you can start building your website. If you’re not ready to hire a web designer yet, I highly recommend starting with a strategic website template rather than DIYing your website from scratch. It will be so much less stressful for you to start from a template, and it will help you launch your website faster. Unless you have a lot of web design experience, a strategic website template will convert thousands of times better than if you DIY from the ground up.