How To Build a Website: Develop a Project Outline

By Michael Rohde

You've been online, looked around at a few web sites, and reached the conclusion that you want a site of your own. In this tutorial, you will learn how to create a project outline, use a wireframe and begin to design your website!

We all know what a website is, but the only problem is that for many of us, our entire knowledge of websites comes from using Google to search for information, not how to actually design a site that provides that information. What you need is a simple, easy-to-read instructional guide on how to create web sites starting at the ground floor; without using cookie-cutter templates. You want to build your skills and develop the foundation for either a career in web site development, or you simply want your own unique web site that you built yourself; without having to pay a very expensive web site developer.

What's the Point of Having a Web Site?

Web sites are good for many purposes. They can be as simple as an online brochure for your business or an online resume, which allows prospective employers to view your portfolio. Web sites can also be extremely complex shopping tools where customers can purchase goods. Web sites may serve as news outlets, or in the case of blogs, a place where you can publish your rant of the day. The first step you have to take when building a web site is to determine the purpose of your site. In time, this purpose will help you develop a mission statement for the site, which will help keep your project on task and focused. Without focus, a web site can start out with the purpose of being your online resume, and before you know it, the focus of the site is a Youtube video of a cat playing with yarn. Yes, that might be cute, but is it relevant? The point is, there are plenty of features and functionality that you can add to your site, but only implement the features that are pertinent.

After you have decided on the purpose of your site, visit existing sites that appear to have the same purpose, as doing so can provide you with some ideas for the presentation, functionality and content of your site. From here, you can start to form an image in your mind of how you want your site to look and behave.

Formulate a Project Outline

You're at the point now of formulating a project outline. You know the purpose of the site, you've written a mission statement and you have an idea of the functionality you want on your site. It's a good idea to start a list of all the features you want, which might include:
  • Do you need a shopping cart to allow customers to purchase items?
  • Do you want visitors to leave comments?
  • Do you want a forum?
  • Do you want social networking features?
  • Do you need to worry about security?
  • Do you want people to sign in to view particular content?
  • Will you have a newsletter?
Also include in your project outline if you have a budget for designers and writers. Web sites include many parameters, and most shops have teams of graphic artists, writers, editors, developers and Q&A. No one person can specialize in all things; although some of us try...you need to determine your strengths and be willing to reach out to others. If a budget is a fantasy, then you can still develop a fully functioning site, but keep in your mind that at some point you might want to find a friend or a colleague to help copyedit, or create some unique art for your site. You could always return the favor by offering to build or enhance a web site for them.

One last item to include in your outline is a timeline. Do you have any existing constraints as to when you want your site to go online? Giving yourself a deadline will provide a goal for you to reach. Otherwise, you might hold off on launching the site until you get just one more piece. When it comes to developing web sites, there will always be one more piece to add, or one more item to tweak. You have to know when to say enough is enough and put your creation out there for the world to see.

Draw the Wireframe

Now that you have a purpose and a project outline, it's time to create a wireframe. What is a wireframe? Think of it as taking that image in your mind and putting it on paper. If you have the skills and the resources, you can always use graphics software to start sketching your web site. However, even as archaic as it sounds, taking pencil to paper is a great place to start. Simply draw in a rectangle for the header, some vertical boxes for your columns and another rectangle for the footer. You might be scratching your head over, what's the point in that, but it comes in handy when you start writing the code for the layout. The wireframe provides a reference point for what you are creating. Plus, if you like what you see on the paper, chances are you're going to like what you eventually see on the screen. As part of the wireframe, you can write in your Title header and any basic content that you know you're going to want. Plus, you can try different layouts. Do you want a single-column, two-column or three-column layout? Drawing it by hand takes a lot less time than writing and rewriting the code.

While you're drawing your wireframe, keep in mind that studies have shown that a visitor's eye traces a Z pattern across the screen as they scan a page. Don't become disheartened if your visitors don't read every word you write and don't click every link that you provide. You basically have 10 seconds for a visitor to determine if they like your site or not. In that amount of time, you have to present your purpose, clearly and succinctly, to keep that visitor from leaving.

The first thing your visitor will see is the header, which is presumably the title, a logo and perhaps a short blurb that describes the site. Next, they'll see the middle content and perhaps skip right over anything that is directly below the header on the left. Last, they'll scan the bottom of the screen. This could be your footer if the entire page fits on the screen. These are principles that you have to take into consideration when designing the page.

Note: In regards to the Z pattern, if your menu and navigation is crucial to keeping visitors on your site, you'll probably want a horizontal menu as opposed to a vertical menu running along the right or left border. What you have on your menu will also determine the additional pages to your site. You'd be hard-pressed to find a web site these days that consists of a single page. You need to think about the content for these secondary pages. The vast majority of sites do have an About Us page and a Contact Us page. Organize additional pages by topic, which provides a sense of logic for the visitor to find what they are looking for. Keep in mind that visitors do not want to click more than two or three times to reach their objective. However, if they feel they are on the right path, they will continue to click until they get to where they want to go. The basic rule is to keep your navigation simple and each section of your site should not be more than two or three levels deep.

Get Organized

At this point, you're ready to turn on your computer. First, you need to create a folder structure. Keeping your files and images organized is crucial. Each file and image will be linked in your code. If you move a file after you've linked it in your code, then you need to go back and update the code. Save yourself that hassle and create a folder system now.

Create one folder for each type of file that you'll have more than one of, such as:

  • Images
  • Pages (your .html files)
  • CSS (cascading style sheets, it's how you format your pages)
  • Scripts (more than likely, you'll add some JavaScript to your site)
Don't worry about these folders being empty for now. You'll fill these folders soon enough.

The Coding is Next

Now you're probably starting to wonder, "when do I start coding". That will come in good time. Let's start first with defining HTML. HTML stands for Hyper Text Markup Language and is the cornerstone for all web sites. It's a relatively simple and easy language to learn and to use. HTML became publicly available in 1991, and almost 20 years later, it's still relevant and highly important. If you learn HTML, you have undertaken a large first step in web site development. The next article in this series will guide you through how HTML works, what tags are and you'll write your first lines of code that allows you to say, "Wow. I did that. I *can* do this!"

Equally is important to HTML is JavaScript, which allows the development of enhanced user interfaces and dynamic websites. It was developed with ease-of-use in mind so that non-programmers can work with it. For the most part, if there's some kind of basic functionality that you want with your site, chances are you can find sample JavaScript online that you can tweak to your preferences. The next article in this series contains the following information:

  • Writing your first HTML code
  • Starting your CSS (cascading style sheet)
  • Applying the styles in the CSS to the HTML


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •