If you’ve ever wondered what it takes to design and develop a website, you are not alone. Many people attempt to build their sites every day. Many succeed, but much more fail because they do not have a step-by-step plan to follow. We happen to have that step-by-step program with everything you need to know about web development and design, so you have everything you need to succeed. Horayyy!!

But first, the basics. 🙂

Why do businesses need a website? There are many reasons why a company would need a site including the most important one: to be found by the millions of people searching for products and services just like theirs on the internet.

What needs to be included on your website? elements of proper website design

Depending on the kind of business you are running, the content will vary from site to site, but the basics are the same.

Everyone needs relevant and eye-catching information about their brand, product or service, they need to have pictures or other media to keep consumers engaged, and they need to have a way for consumers to contact the business and/or buy products and services from the company.

Can you build a website by yourself?

With the right information and enough time, anyone can learn to build a website.

The more you practice it, the better you will be. So don’t be discouraged by the thought of web development; we’ll show you how.

I realize that you probably don’t want to read a giant writeup but the total reading time for this piece is about 6 minute and you’ll emerge with a very solid understanding of the of the basics of good web design and UX. 


What You Will Learn in This Guide

  • How to start your own blog or website
  • How to design your website
  • Understand principles of user experience and interaction
  • What templates are best
  • A beginner’s guide to HTML, CSS, and Javascript
  • Website platforms for beginners
  • Responsive design
  • Pulling it all together

How to Use This Guide

Read the entire thing from start to finish to get a high-level understanding of the ideas and concepts we present. This will help you start to formulate your plan of attack. Then, go through it again with a pen and some paper and make notes about the things that seem the most difficult; you’ll soon see that following the steps and advice we present will provide you with lots of information to get the job done right.

Why Did We Create This Guide? Picture of Lucas

We know that more and more people are interested in learning how to develop their websites, or at least understand what is happening behind the scenes of their website when they hire a developer to build a website for them.

This guide is for anyone interested in learning more about web development and design.

The Path of Least Resistance

In designing this guide, we are taking the least resistance approach, which involves keeping things at a high level for understanding and not overwhelming you with too much information. It means we aren’t going to reinvent the wheel here – people are already using this information all over the world.

We just put it in a neat little package for you. Finally, we are providing you with simple solutions that you can learn to apply in broader ways as you become more comfortable with web development.


Part 1: How to Plan Your Website

Planning your website involves three main parts:

  • Important questions to ask about your website’s use
  • How to choose a domain name
  • How to register for hosting

A lot of people will skip this step entirely and just jump right into designing a website without thinking about how the website is going to get setup or where it is going to live on the internet.

How hosting works..

image showing how a web server works

This set is the most important because your domain name is how people will find you on the web, and your hosting service needs to be good enough to allow your website to remain operational online.

If you don’t take the time to consider the use and function of your site, you’ll end up wasting your time and money.

When planning your website, ask yourself these two questions:

  • What will this site do?
  • Why do I need it to accomplish?

Asking yourself these questions will help you determine the functionality your website needs. For example, if you want to open an online store, you need e-commerce functionality.

Other questions to consider include:

  • What is the “thing” that is going to be showcased on your site?
  • Is it a blog? Store? Portfolio? Lead generation site?
  • Who is your audience? Who will visit the site and why?
  • What is the problem you are solving for people?

The question related to problem-solving is vital: if your website is going to be successful, it needs to provide something to someone on a regular basis.

  • Will you help people manage their projects easier and faster?
  • Will you sell customized prints for people who are stressed out at work?

The possibilities are endless, but you need to spend some time thinking about how to solve a problem for a customer. It’s definitely important to plan out your website before start. Check out Smashing Magazine’s kickass guide to planing a new site.

Other things to keep in mind:

  • Your customer needs to feel important to you
  • Be clear about what your website is supposed to do – confusion doesn’t sell

Always work with your reader in mind. It’s their problem you are trying to solve, after all.

Choosing a Domain Name image showing different domain names

First things first: domain names are going to cost you money so just get ready to swallow that pill right now.

How much you spend on a domain name can vary greatly depending on the industry you are in and the name you want.

Here is a great domain name generator if you can’t think of one.

Trends in domain naming have come and gone, and it’s best to stick with something simple that people can remember.

No, you are probably never going to have the recognition of Coca-Cola or Apple, but your name can undoubtedly become something people can remember. 🙂

If you are a freelancer, it’s best to stick with your name. If you are a company, use the company name. Keep it simple. That’s the best rule of thumb.

A couple of things you should understand about domains:

  • They are unique
  • They are akin to the address of your home or apartment: it’s where you live
  • Don’t try to buy all the domains, just buy one that will be meaningful to your website and business

How to Sign up for Hosting

Once you have a domain name picked out, you’ll need to park it somewhere. This is called hosting. Think of hosting as the plot of land your house is built on.

Hosting ranges in cost and consistency, so you’ll want to compare some hosting companies before making your decision.


If you’re looking for the quick and easy answer to this question –  our recommended host is Siteground for a few reasons. Fastest datacenters. Most free upgrades that can save you $300/year over other hosts. The best 24/7 suppport hands down. Free transfer/backup/SSL/hacking protection.

We also hooked up all our readers with 60% off shared plans. 🙂 Click on the image below.

Siteground Promo Banner


 

When you are first starting out, keep it simple and don’t spend thousands of dollars on large hosting packages, you don’t need. Any hosting package you buy can always be upgraded later, so just get yourself on the grid to start and worry about upgrades later. For a super duper comprehensive guide to hosting check out our page on how to start a blog by yourself.

Part 2: How to Design a Website

Designing a website is fun and your chance to let your creative juices flow. There are three areas to consider when creating a website:

  • The type of content you will have
  • How the website will be laid out
  • Drawing it on paper 

The type of content you will have will help to determine the look of the website. For example, if you are going to run a blog, your site will feature mostly text and pictures, and you might have a sidebar where you can sell products or advertising.

If you are going to sell handmade products, you’ll want a picture gallery where people can see your products, and maybe not so much text.

If you’re selling products online or featuring on core offer you’ll need to build a landing page.

Next, write down all the sections you want your website to have. These typically include:

  • Homepage or landing page
  • About us page
  • Gallery/portfolio/store page
  • Contact us page

Depending on the type of website you are building, you may have multiple pages to make. This list is a primary place to start.

Finally, take a few minutes to sketch out how your website should look when it is finished. This is called a wireframe, and it’s the bones of the site, and the content is the meat.

You’ll line the wireframe with content, pictures, products, and more to build your website. Many templates can help you design your site, and we’ll talk more about those later. For now, draft your wireframe and start getting excited about how your website is coming together.

Sorta like this…

what is a wireframe-min

 

When designing your website remember that the content is what is going to sell your customers on your product. Sure, it helps to have a wonderful site, but they can’t find you on looks alone.

Search engines are going to be looking for keywords, phrases, and relevant content for your industry to help you rank well. Pay attention to content.

When you sit down to create the structure of your website, find some examples of sites you already like online and use them as inspiration to create your design. When you have a great deal of content, you can start to build your structure around the content, and it will come together more naturally.

Things to keep in mind:

  • Don’t be afraid to draw multiple versions of your wireframe, but don’t become obsessed with details
  • Go for flow and ease of use
  • Pay attention to content first and have some content ready before you start building your website – remember you need ingredients before you can bake a cake
  • Make wireframes for each page, so you have a visual guide of what you hope to achieve with your website.

Here are a couple of resources to help you design your site:


Part 3: Understanding User Experience and Interaction

Part of your website design includes considering how your audience will interact with and interpret your message, product, and services. You need to consider what you want your customers to do on the website, get them emotionally involved in your products, what typography to use and what you want it to look like.

This is perhaps the best example of this in action. Pure simplicity. 🙂

The user interface is the part of your website that your customers will see. The user experience is how your customers interact with your site. If you make it hard for them to find information or buy products, they will not have a good experience, and you won’t make any money from your website.

The better experience, the more successful your site will be. It’s a fact that people avoid certain websites because they are not easy to use.

To check whether or to your website is going to have good user experience and user interaction ask yourself these questions:

  • Can your audience do what you intended them to do?
  • Can they find your products or services easily?
  • Will they understand your ideas, concepts, products, and services?
  • Is your website engaging and exciting?
  • Have you taken fluff off of your site and avoided fancy elements that are a waste of your time?

Although a bit abstract. Good UX starts with planning and below is one of the most widely recognized graphics about UX.

5 elements of UX

A good way to approach this is to visit websites that you like and figure out what you don’t like about it. Write down all the things you don’t like and be sure to avoid using them in your website design.

Design Evokes Emotions and Feelings color emotion guideline

You can evoke emotions in your audience by using great content and design, colors and experiences.

You’ll be tempted to use your favorite colors, but your choice colors might be the worst in the world for everyone else.

Take some time to look at trends and what evokes certain emotions in people to draw them to your site.

Big brands have been doing it for a long time.

The kind of fonts you use can have an impact on your website’s success as well. For example, many people advise against using fonts such as Comic Sans, but if you are running a daycare, Comic Sans might be the perfect way to convey a friendly and playful atmosphere to your audience.

Comic Sans might not be appropriate for your consulting company unless it is consulting on daycare operation.

To keep things simple, use simple typography like Ariel or Times New Roman. Many modern typefaces are great to look at, but hard to read, so keep it simple.

You can get custom fonts that are simple too, so don’t be afraid to try to get creative, but keep it simple in the end. Go for prominent though: large fonts are easy to read, and people will get the information fast and easy.

Here is a great post from Web Design Plus discussing font selection on your site. Think it’s not important? It can even affect your website conversion rates as well (how many sales you make).

There are several parts of your website that need typography:

  • Titles
  • Headings
  • Paragraphs

You can get a custom font to use on your website by searching for them on Google and downloading them. It’s easy to install them and then they will be on your menu on your word processing software and templates for websites.

Finally, gather up everything you’ve completed so far and get ready to start putting it into a website template. This is the fun part! 🙂


Part 4: Website Templates

Most of the world up to this point involved planning, and not doing a whole lot to “build” your website. Now the real work starts. You’re going to start getting your hands dirty from this point onward. But first, more decisions.

This is the point where you need to decide if you are going to build a website from scratch using HTML and CSS (which we’ll explain soon), or if you are going to use a content management software like WordPress. Many questions might arise at this point:

  • Do I need to learn HTML?
  • Do I need to learn CSS?
  • Are ready-made website templates enough to get the job done?
  • Do I want to use a ready-made website template?
  • Will people be able to tell?
  • Does it matter?
  • What’s the best content management software? 

In a nutshell, you do need to understand some aspects of HTML and CSS, even to use a Content management software. Yes, you can use a ready-made template, and yes, some people might be able to tell.

No, it doesn’t matter as long as your business is represented professionally. And the best content management software? Well, the debate is still out on that one. They are all pretty good – it depends on what you need them to do.

What I suggest is using a pre-made template like a theme which takes all the work out of doing any hard coding or any modifying of your website. Themes are easy to use and super simple to setup. 

website template

To decide how to move forward, take a minute to self-identify with one of the following:

  • Are you someone who wants to invest time in learning about the code?
  • Are you someone who already knows a little about code but just wants a website quickly built?
  • Are you someone who is not interested in learning code and just wants a website quickly built?

Most people will fall into the second and third category. Reading this resource in full is a good idea, but once you have done that you can always come back to the parts that are important to you.


Part 5: Introduction to HTML, CSS & Javascript html vs css

To provide you with a starting point, we are going to give you the necessary information about HTML, CSS, and Javascript.

This will help you determine if it is something you want to learn more about or if you’re going to skip it altogether and use a content management software.

Here are some simple definitions to get you started:

  1. HTML: the language used on a website. Every website uses HTML to tell the internet how to interpret the information on the page.
  2. CSS is what makes your website look great. It’s the thing that adds wow factor to your site. It includes color, text, layouts, animations, videos, and more.
  3. Javascript is a dynamic language that lets you do things like validate web forms and interact with users in a better way online.
  4. jQuery is a Javascript library that lets you do more advanced things online with your website.
  5. Bootstrap: common pre-built website elements that can be built upon and added to by a coder.

None of these languages or templates are hard to use, but they do take time to learn. Do you want to learn more about them to be able to write and edit your code?


Part 6: Website Building Platforms for Beginners

Content management software systems like WordPress, Joomla, or Drupal all provide users with a streamlined, and easy-to-use experience to build a website. These are pre-designed and ready-to-use.

You can change pictures and add some text and publish to the web in a short period. There’s no need to reinvent the wheel here if you are not interested in learning how to code. These software packages work like word processing programs and function in a drag-and-drop style.

You should know that even if you choose to use a website template, you’ll still need to set up hosting and buy a web domain before proceeding.

Here’s a bit about each of the popular website template software programs:

  1. Squarespace: it’s a handy solution for people who don’t have any prior coding skills. You can build websites, blogs, stores and it’s easy to use.
  2. WordPress: a good portion of the internet’s websites are built on WordPress themes. This gives you lots of options, add-ins, and flexibility to develop your site, and you can even use your coding skills.

Part 7: Mobile Responsive Design 

Because most people on the internet view websites on their mobile phones, your site needs to be mobile responsive. This means it will look the same, or at least be a comparable version of the desktop version of your website to provide a good user experience no matter how your audience interacts with your site.

Many website owners have not updated their websites to be responsive, and you can always tell which ones haven’t because it looks terrible on your phone. The fonts will be too small, the layout will be weird, and the forms and buttons will be hard to use.

responsive website design

If you are using a ready-made content management software template, your website is likely to be mobile responsive. If not, you’ll need to code in the responsive nature of your site yourself.

Not every website design is going to be optimized to be viewed on mobile devices right out the gate.

There are some resources you can use to test if your website is mobile responsive like Google Pagespeed insights. 


Part 8: Pulling it Together

At this point, we’ve given you enough information to sign up for hosting, buy a domain, decide what important pieces of information need to be on your website, choose whether you’ll code or use a template to build your site, and determine if your site is responsive for mobile use.

Before you do anything, go back to the beginning and read this through again and take notes on the things you want to learn more about.

Check out the resources that we’ve provided to help you pull the whole project together. Before you know it, you’ll have a functional and well-designed website to call your own.

Good luck with your website design and build. You can do it!

Summary
Review Date
Reviewed Item
The 8 Stages of Structuring a Successful Website
Author Rating
51star1star1star1star1star