Building a Website Tutorial – Part 1

This post is 1st in a 3-part series tutorial designed to build an awesome website from the ground up!

Web Template Website Design Concept

From time to time, people ask me how can I create a website for anything ranging from a startup to a hobby site.  If you find yourself feeling light-headed trying to understand everything you need but want to try your creative skills out, this post is for you!  Years ago, my programming professor taught us the Input/Process/Output (IPO) design concept.  The rest of this tutorial will help you follow this concept on your quest to present your business to potential clients.

Output – deciding on content and design elements

First, you must have a clear vision what the Output should be.  For our purposes, this would include (1) the message that communicates the value you have to offer to visitors on your site, (2) site layout, (3) colors and fonts.  It is nearly impossible to build a coherent, well laid-out website if you have no vision!

1. The Message

There are different ways to approach writing good content and you can research them if you wish to, but I tend to make a list of pages I will need then write the first paragraph or two as an overview of what the page is about.  Then build a skeleton outline with those points.  After that, we “flesh” out the content for each item in the list.

2. Site Layout

To define the layout for a website, it is effective to take 1 or 2 keyword phrases from your content that you would expect people might use to find you and search the internet (with Google, Bing, etc.) using them.  When you find 3 – 5 sites that you like from those searches and use them to draw ideas from for your site layout.

3. Colors and fonts

If you already have a logo, perhaps on a business card, it would be best to utilize the colors and fonts that were used on it.  That way your organization can be easily identified with your marketing items; website, business cards, letterhead, signs, etc.


Secondly, once you determine what the output should be, the next step is to determine what tools you have to work with to create your vision.  There are a plethora of ways to create your website, but WordPress (WP) is wildly popular.  This is largely due to the many options available via their plugin directory.  While we are talking about WP, you should also know that they have workshops and lesson plans written by subject matter experts at their Learn WP website.

If the site you envision is more of an application, where you need custom coding algorithms and WordPress just doesn’t seem to fit, we stand ready to help you with that here at Manz Web Designs.  We will take your vision and make it a reality while providing all the custom functions and features you desire!


But, should you still desire to do it yourself, you would need to take what you found in your Output and Input discoveries and put the pieces in place.


This should get you well on your way to publishing your new website on the internet so interested people can have an opportunity to take advantage of your organization’s offerings!  The next tutorial will delve deeper into the Input and Process parts.  And, if/when you get stuck and don’t know quite where to reach out for help, we are more than happy to work with you to make your dream website come alive!

Leave a Comment

Scroll to Top