Learning how to build a website is easy. Building a good website that gets your visitors attention, offers a solid user experience, and puts your business in the best light possible will take a little more work.
At the core, a website seems pretty simple. Often, it’s little more than a few pages of text and some pictures that display in your web browser.
When you’re building your website it’s important to have some foundational knowledge that will help you build the best site possible. In fact, that’s the very reason we wrote this post.
Below you’ll learn core web design principles that will make your site shine, a few planning measures that will help you create a site that serves your visitors, and finally the step-by-step process of building web pages in the most beginner-friendly way possible.
Let’s jump into the basics of building web pages!
Core Web Design Principles to Keep in Mind
Your new website is your canvas. However, there are some basic principles you’ll want to keep in mind as you build a website. . Think of it as coloring inside the lines. You might not get something wholly unique, but by sticking to user expectations you’ll be able to deliver a much better experience that will increase the chances of your site’s success.
1. Understand Visual Hierarchy.
Visual hierarchy refers to how people read and engage with text on a website. Typically, people will read left to right, from up to down. But, when we expand this to the internet people read in a very different way.
First, instead of reading from top to bottom people usually scan a website to see if the information is relevant to them before they dive in.
On websites, people tend to follow an ‘F’ shape. So, on a traditional website, they’ll start at the logo, scan across the navigation, then slowly read down the page.
When you’re building your website make sure to keep this structure in mind, so you can place your most important elements where readers will actually see them.
2. Choose the Right Fonts.
Adding Google fonts to your WordPress website are a typically overlooked aspect of web design. People usually end up using the stock fonts, or choose way from left-field and end up selecting a font that ruins their site.
Today, there’s a wide variety of font choices that are actually supported by your browser. This means that they’ll end up rendering properly. The number of fonts you’ll have to choose from are incredibly massive.
But, with that selection, it’s usually better to stay simple with both the font size and design. After all, your font choice can say a lot about your site, and if you don’t have an eye for website design it could actually detract from your overall efforts.
Make sure to keep your font size and choice minimal, and only use two or so fonts across your entire site. When it comes to font choice, less is more.
3. Know How Images and Colors Work Together.
It can also be tempting to go crazy with your color and image selection. But, there’s one rule to live by here, less is more.
A tiny splash of color will draw the eye to it and give your site some creativity, but too much and your website will be distracting to your target audience..
In regards to images, the same can be true. A few images that are thoughtfully placed will add some life to your site and help to convey emotion. But, don’t just use images to fill white space. Every image you place across your site should be intentional.
The Basics of Website Building: Principles
Now that you’re better equipped about some website design best practices, let’s start planning your site. By taking the time to think about your audience, and what you want your site to include, you’ll make it that much easier to build and launch your site.
Here are two things you need to know before you start building:
1. Plan Before You Design.
This first step of the web development process is all about taking stock of who your audience is and the type of site you’re trying to build.
Without nailing down these two elements it’s much more difficult to stay on track as you’re building your website. Even if you’re building out a site for fun, you’ll probably want to start with a goal of what you hope to achieve.
Let’s start with looking at your overarching goals for your site.
Spend some time with the following questions. They’ll help you find what category of site your building, which will help with the final step below.
- Are you planning on selling any physical products, where building an eCommerce store is a necessity?
- Will you be selling any services like photography, SEO (search engine optimization), freelance writing, or something else entirely?
- Do you require a blog to highlight different blog post articles? Or, are you building a simple site with only a few pages?
- Are you building a large online magazine website or just a simple blog?
Once you know what you’re building it’s time to dig into who you’re building it for. If you want your website to succeed it’s always a good idea to niche down your offering. Once you’ve successfully served that small niche you can always expand into related niches.
Here are a few questions that’ll help you get a better understanding of your audience:
- What gender is my audience? What’s their income? What do they do for work?
- What problem is my website solving for them?
- How do I uniquely address that problem they’re having?
- What other kinds of blogs and websites do they read and enjoy?
2. Craft Your Website Structure
Now you know what kind of site you’re building and who you’re building it for you’ll want to map out some additional pages for your web development. If you’re building a large website, then how you structure it will be very important for both your readers and the search engines.
For example, here’s how we’ll map out our basic site pages:
- Home
- About
- Blog
- Services
- Contact
But, let’s say we want to create more web pages that relate to our general about page:
- About
⃠Our Team
⃠Our Mission
⃠Work for Us
On a classic drop-down menu, these new pages will show up when one of our visitors hovers their mouse over the ‘About’ page.
You can create this same kind of nested structure for any kind of website you’re building. Just think about what is the most logical approach to giving your visitors information about your website.
You’ll want to make it as intuitive as possible, so your visitors can glide around your site without the need to ask questions.
The Basics of Website Building: How-To
By now you’re equipped with a ton of useful foundational information. Now, it’s time to put all the knowledge to work.
So far you’ve learned the basic design components that make up a good website, what kind of website you’re building and who you’re building it for, and you know how to structure your site to present your information intuitively.
Now, we’re going to walk you through the process of actually building your first site.
1. Purchase a Domain Name and Hosting.
Before you can have a website that’s live on the internet you’ll need to purchase a domain name and web hosting. Your domain name is what people type into the browser to visit your site, while your host is where you’ll store all of your website’s files. You need both working together to have an accessible website.
There’s a multitude of different websites where you can purchase a domain name and hosting. In a lot of cases, you can even purchase the two together. This isn’t a necessity, but it can make getting your first website online even faster.
If you’re like to purchase your domain name and web hosting from HostGator, the process is very simple.
First, head over to HostGator and select your hosting plan. There are all kinds of plans available, but the most common plan is the basic shared hosting plan. In time, as your site continues to grow you can upgrade to a plan that caters to higher traffic sites.
During the checkout process, you can also add a domain name to your order.
Once you’ve entered all the relevant details continue with the steps to complete your purchase.
2. Choose Your Website Builder
If this is your first website you’ll most likely be relying on a website builder or a CMS to help you build out your site. Otherwise, you’ll have to take the time to learn programming languages like HTML, CSS, and potentially even Javascript or PHP. This is incredibly time consuming and probably isn’t the best way to spend your time, unless you’re looking to get into the field.
A website builder is entirely built for beginners. All you have to do is choose your template, customize it to your liking, and your site is ready to publish.
Another great alternative is using a CMS like WordPress. WordPress will allow you to create a totally custom website with a lot of room to grow. It’s an especially great choice if you’re going to be blogging a lot.
3. Design Your Site.
Now the real fun begins, it’s time to design your site. Most of your customizations will take place within your theme.
If you went the website builder route, you’ll have a variety of themes to choose from. All you have to do is login and find one you like.
If you went with a CMS like WordPress, you’ll have a similar variety, too. You can choose WordPress themes from the Appearance>Themes menu in your Dashboard.
Next, you get to customize your theme. You can do all sorts of things, like add a logo, change your color scheme, text, add widgets, and a lot more.
4. Write and Add Your Content.
Now it’s time to build out the content you planned earlier. Add new pages to your start and get writing!
You can create as many pages as you desire. You can also add images and video, change font sizes, and more.
5. Test and Launch.
With your site finished it’s time to do a final run-through before you publish it online. The last thing you want is to have a handful of links that don’t work, or find that there are typos scattered across your site.
Spend some time going through every single page you’ve created. Look for links that don’t work, or take you to the wrong page, and comb every page for typos.
Once you’ve done a thorough review it’s time to launch your site!
Closing Thoughts
If you’ve made it this far, then congratulations, you have a solid grasp of the basics of website building, which is more than enough to help you build your first website. From website building theory, all the way to the practical steps, you can successfully publish your site live on the internet.
Best of all, you can do it without having to invest too much time into learning any programming languages. Of course, you’re always welcome to continue your own programming or website building education. In fact, the more you know the easier it’ll be for you to customize your site and troubleshoot any errors in the future.
Good luck building your website!
Kevin Wood writes about technology and human potential. You can find him at his virtual homes Wooden Writing and Counter Culturist.