Build Your Website, Step 4: How To Design Your Website
See my original post 7 Steps to a New Website for all the steps involved in building a new website.
Your website should reflect your brand: who you are, your personality, and the unique value you provide. Designing your website can be fun and creative, using colors, images and fonts to share your story. But it can also be scary and intimidating as you make decisions about colors, fonts and logos - which ones? Can I change my mind? How do I decide? Where do I start? This design guide provides an overview of all the steps involved in designing a beautiful website for a small to medium sized business.
Site Architecture
Like a house, a key element of website design is the architecture of the site, the structure that forms the high level organization of your website. Most smaller sites have less than 10 pages, so site architecture is pretty straightforward, and if you’ve completed step 1 of this series, you sketched out a simple site map of all the pages you want. As a refresher, here’s a list of common pages:
Home
About (for a non-profit, this might also include What We Do, Mission Statement, Board Members, Staff)
Services (for a small business)
Portfolio (for an artist, and possibly a small business)
Contact
Blog or News
Events (for some non-profits and businesses)
These pages will make up your navigation - how people get around your site. You can always add or remove pages.
Once you’ve got a general idea of the pages you want, now let’s move on to the actual design of your site.
Layout
The easiest way to choose a layout is to select a template from your platform provider. Most will have several categories to choose from, and most will allow you to modify the layout as you design and add content. Squarespace and Wix allow you to browse through hundreds of templates for inspiration with no obligation and both offer free trials; Weebly requires registration before you browse template options.
Once you find a template you like, you modify it to fit your unique branding identity: logo, colors, fonts, pages, copy and images.
Competitive Research
It’s always a good idea to look at similar organizations and see how they present themselves for inspiration and ideas. Google around and check out at least 3 other websites that are similar. Notice your first overall impressions (is the site inviting and friendly, or is it dated, and hard to understand?). Then note specifics (colors, fonts, images, placement of pages) – what works and what doesn’t?
Logo
A logo is a valuable tool to identify your brand. If you already have a logo, that’s a great start in designing your site. You can use the style and colors to choose your color palette and fonts.
If you don’t have a logo, that’s ok - you can create a new one, or you can simply do without. To create a new logo, I recommend hiring a professional graphic designer, who can provide a unique graphic representation of your brand. Logos are much more complicated that the average person realizes, and a skilled graphic designer can create one you’ll use for years.
If you want to create your own logo, most website building platforms have simple free logo makers. Here’s a free logo creator from Squarespace that walks you through the key consideration in creating a logo; here’s a simpler one from Canva. (Canva’s logo creator doesn’t walk you through all the steps, but Canva is a great all-around free graphic design tool, with a paid version that offers even more graphic design capabilities.)
Or, if you choose to go without a logo, you can simply use your organization’s name in an appropriate font.
Color Palette
The colors you choose for your website should compliment your logo and contribute to your brand identity. Or, if your logo is black or white, you can create your own palette. Most web platforms have a built-in color palette generator, using your logo or custom colors - here’s a guide for Squarespace. And here’s a free one from Canva which can be used on any web platform.
Fonts
The template you choose will provide recommended fonts, but you may want to modify these to match your branding more closely. Simple is best on the web, where your site will be viewed on multiple devices of different sizes, so the best fonts are simple and easy to read.
If you’re interested in exploring font options, Hold Space Creative has a great guide to fonts based on your personality type.
Elementor has another good guide for fonts and font pairings.
Images
Compelling images are especially important to tell your story and communicate what you and your business are all about. Ideally, you will have a library of unique photographs that are high quality. It’s worth the expense to hire a professional photographer to take photos of you and your business, because good photos will build trust and communicate your expertise instantly. Many cell phone cameras are high enough quality and it’s often good to include a few casual-type images that are captured by cell phones. Stock photos can often be used to supplement your own unique photos, and are included free in most web building platforms - and stock photos can be used as placeholders as you build your site, until you get your own professional images.
Putting it all together
Once you have decided on your site architecture, general layout, colors, fonts and images, you should have a basic site structure. You can create placeholder pages to ensure your navigation from page to page flows well. From here, the next step is to add content - text and images - to all pages. As you add content, you can modify and tweak design elements based on the copy you use and the images you display.
Next up, coming soon: Build Your Website, Step 5 : Adding Content
Check out my other posts about Building Your Website!
