Which piece of chocolate would you pick out of the two: the one that’s melting inside a dirty squished wrapper or the one that’s in perfect shape inside a beautiful heart shaped gift box? You’ll probably choose the second one, right?
Your website visitors are the same way.
Coming to your website, they want to consume your content, see your products and read more about your services.
But… if your website’s design sucks, they are not going to read anything there, just like you won’t eat the chocolate inside the squished wrapper.
This is why web design matters.
According to a survey by Adobe:
“With only 15 mins to consume content around the world, 59% people would read something that was beautifully designed.”
What this shows is that beautifully designed websites aren’t just important because they look good, but because they sell better.
First, to create a well-designed website, you need a well-designed plan.
In this article, we’ll tell you how to approach planning your website design, so you too can build a website that will make your visitors come back again and again.
Step 1: Figure out What Content You Need for Your Website
When you build a house, what’s the first thing you plan?
It’s the rooms your house will have. The size of each room, wallpaper, paint colors and everything else comes second.
Similarly, your website design should be content-driven. This means first you need to decide what content your website will have, then you can worry about the color and looks.
And this content should be determined by what your visitors will want to see in it – and what will provide value for them.
For example, let’s say you run a plumbing company and want to design a website so people can hire your services online. In this case, here is the information (and the webpages) you’d want on your website:
- Your company’s introduction (Homepage): Who you are, where you are located and in which areas you provide your services.
- List of services (Services): What kind of repairing, fixing and installing you do, what your rates are and the list of packages you provide – if any.
- Contact information (Contact Us): Your phone number, an online booking form, links to your social media accounts or any other way to contact you.
- Blog section (Blog): A place where you share useful plumbing tips to people visiting your site.
Once you have a basic idea of the content you want on your website, it will become easier for you to design it.
Keep in mind that content isn’t limited to just words (unless you want a super boring website).
… and other media elements are part of your website’s content as well.
This means that things like:
- A hero shot of your plumbers working
- A video-tutorial on fixing some simple plumbing issues
- Customer profile pictures for testimonials
… and more – are all part of your website content which you have to plan in advance.
Step 2: Decide Which Approach You’ll Use to Design Your Website
A website isn’t something you can build for free. At the very least, you’ll have to pay for hosting and a decent template.
Depending on your budget and time availability, there are two ways you can build your website:
Here are two ways you can design your website without any design or coding skills:
1. Install WordPress and buy a template: WordPress is the most popular CMS (content management system) on the internet used for building a website. In its official store, or in other online marketplaces, you can buy a beautiful WordPress template for $50 – $150, install in on your site and have your design ready in less than 5 minutes.
2. Use A Website Builder: Website builders have a drag-and-drop tool which let you design your website easily. You can either start with a pre-designed website template, or if you’re ambitious, start designing your website from scratch.
These are the two most affordable and fastest ways you can design your website.
Note that it will require some amount of time to learn the technicalities of both WordPress and website builders.
Now, let’s move on to a more sophisticated (and expensive) way of designing a website.
Option 2: Hire A Professional
If you are in a business or company – or have the budget necessary (but not the time or skills), you can hire professionals to build your website for you.
In this case, the first thing you’ll want to know is: how much is it going to cost?
The answer, annoying as it will sound, is: it depends.
If you hire a web designer to create your website from scratch, prototype it and then get it implemented by a back-end web developer, this can cost you anywhere between $2000-3000 and up to tens of thousands.
Just keep in mind not to compromise on your website by skimping on pricing when hiring a professional web designer. You are always going to get what you pay for.
Step 3: Create a Mockup of your Website Layout
Nothing is worse than building your website and then finding a flaw in the design. It’s a costly and time-consuming mistake that will make all of your hard work go down the drain.
… unless you create a wireframe or mockup.
The two basic ways you can create a mockup of your website:
- By hand: If you’re just using the DIY approach to build your website, you’ll already have the theme or template at hand. But still, it will be empty. Simply by using a piece of paper and a pencil, you can draw a rough design of which menu item will have which link, where each image will be positioned, where the content will go, what will be in the sidebar and footer, where the logo, headlines and text will be placed, and so on.
- With web design software: If you’re hiring a web designer, you can ask them to build you a low-cost mockup for your website using Adobe Photoshop, Illustrator or Sketch. This will include the design of the homepage and at least one internal page as well.
This will allow you to see how your website will look like before you spend money on a web developer to implement your design or before you spend countless hours working on your template or theme yourself.
One important thing you (or your web developer) should pay special attention to is developing the navigational structure of your website.
This means you should spend time deciding what links you’ll place on your website and where.
In general, there are four main areas where you can place links to different pages on your website:
1. Primary menu bar: This menu is usually located on your website below the logo, but above your website’s content.
2. Secondary menu bar (Optional): If the primary menu doesn’t have the space, or you have quite a few pages you want to link to, you can link them in the secondary menu bar which is located either above or below the primary menu bar.
3. Sidebar: Your sidebar stays visible no matter where your users are on your website. You can use this area to add links your visitors might find useful.
4. Footer: The final place where you can add links on your website to different pages is in the footer, which is the very bottom of your website.
Step 4: Develop the Brand Style Guide for Your Website
What makes your website,well, yours?
The answer is simple: branding.
The branding on your website will play a major role in your website design. It is the main component which will differentiate your website from the million other websites out there.
Business Dictionary defines ‘brand’ as:
“Unique design, sign, symbol, words, or a combination of these, employed in creating an image that identifies a product and differentiates it from its competitors. Over time, this image becomes associated with a level of credibility, quality, and satisfaction in the consumer’s mind.”
According to 99Designs, there are 6 essential elements of a brand style guide:
1. Brand story: Your brand story will tell the world who you are, why you exist and what you do. If you don’t know the answer to these three questions, you don’t have an identity.
And if you don’t have an identity, you don’t have a brand. If you don’t know how to get started, Simon Sinek’s excellent TED talk will give you the guidance you need to develop your brand story.
2. Logo: Everyone recognizes the iconic curvy yellow ‘M’ is McDonald’s, the bitten apple is Apple Inc. and the simple tick is Nike. That’s why it’s important for you to design a beautiful logo as well. It will act as the silent ambassador for your brand.
3. Color palette: The colors you choose for your brand will be applied on your website, logo and everywhere else. As a rule of thumb, you should use four or less colors, i.e. a light color for backgrounds, a dark color for text, a color that pops and a neutral color.
This website will give you a good idea how companies like Amazon, Domino’s Pizza and Nintendo apply this approach on their website and logos.
4. Typography: According to famous UX designer Oliver Reichenstein, “Web Design is 95% Typography”. This means you should spend serious time deciding which font family or combination of fonts you’ll use on your website.
5. Imagery: Your images play a crucial role in conveying the emotions you want on your website. To make yours different, you can apply a specific set of colors to it, round them off or apply special effects or filters.
6. Voice: Every website has its tone. Some ‘talk’ playfully while others are strictly professional. Depending on what your brand identity is and who your target audience is, your website should talk in a tone that resonates with them. This helpful guide shows various tones you can use on your website.
By working on these six things, you’ll develop a strong brand style guide to use on your website – and everywhere else including social media, ads, posters, banners and more.
Step 5: Choose Your CMS, Hosting Provider and Security Service
Your work is still not done. During the planning phase, it’s important to research:
- Which CMS you’ll use to add / remove content to your website.
- What hosting provider you’ll use to host your website.
- How you’ll protect your website from online hacking attempts.
Choosing a CMS
Your content management system is the software through which you will add content to your website.
If you went with the DIY approach, you don’t need to worry about this. The tool with which you designed your website will act as your CMS as they also give you the ability to add content to your site.
But if you hired a web developer and web designer to build your website using web design software and custom code, you’ll need to choose a custom CMS.
Right now, the top three CMS are: WordPress, Joomla! and Drupal.
To know which one is the best for your business, feel free to check out our CMS guide. We compare all three CMS and discuss the pros and cons of each one.
Choosing A Hosting Provider
Choosing a hosting provider is easy. Just make sure they give reliable uptimes, offer great hosting packages and provide high quality customer support. Here’s our guide in which we discuss how to choose a hosting provider for your website.
Choosing a Security Provider
While this step isn’t strictly related to ‘designing’ your website, it is still necessary in planning your website and making sure it stays safe. Here we discuss everything you need to know about website security and the importance of it.
Step 6: Finally, Test Your Website for Bugs
Once you’ve implemented your design and your website is live, it’s a good idea to test it.
There are two main areas you should test for:
- Browser and device compatibility: Open your website in the most popular browsers such as Chrome, Firefox, Safari, Edge and Opera. Test to see if it’s working properly or not, and look out for any crashes. Remember to check your website in multiple versions of each browser on different devices i.e. phone, tablet, laptop, PC etc.
- Usability testing: Ask the people around you – or hire a professional tester to test your website. Their insights can show you how well people respond to your websites. Usertesting.com provides a great service for just that.
These two kinds of tests will expose any bugs or anomalies your website may have.
Planning your website’s design like this from start to finish will make sure it turns out – and works – exactly the way you intended.
Have you created a plan for your website? Did you run into any issues with it? Let us know!