I often have people come to me and say, “I want to start a website. What do I need to do?” The web is commonly associated with the following words: “free,” “instant,” “quick,” and “easy.” Although those words do describe the web, they only describes a small portion of it and most of the time the people who know, understand, or have little to nothing to do with web design and development tend to loosely use those terms when referring to the web.

I agree. Parts of the web are free, one of the advantages to the web is that it is quick, and information can be posted instantaneously, but the work that goes behind the scenes can hardly be described as being easy. From obtaining a domain name and web host and wireframing to typography, CSS, and markups, I tried my best to put together a rather simple how-to in getting your own website started from my 15 years of experience in web design and development.

What first?

Things to keep in mind and consider.

KISS

I’d like for you to remember the word, KISS, an acronym for the design principle, “Keep it simple, Stupid!” Kelly Johnson, lead engineer of Skunk Works, once said, “The KISS principle states that simplicity should be a key goal in design, and that unnecessary complexity should be avoided.”

Too many people want websites to do too much, say too much, and have too much. Simple is key.

Domain name and web host

The domain name represents the web address of your website (.com, .net, .org). A domain name costs an average of $10/year. Keep the domain name simple; you don’t want others to have to memorize a long URL to get to your website.

The web host/server represents the place you store your website. A host will cost you about an average of $50-100/year. You will also be asked to choose between a Linux server and a Windows server. I recommend choosing a Linux server, unless you have worked with IIS before.

There are many companies that provide hosting packages, which include a domain name and a web host. Companies also provide blog hosting packages if you’re wanting to start a blog or run your website off of a blogging engine (i.e.: WordPress, Drupal, Joomla). (I currently have my domain and hosting with GoDaddy; I pay about $70/year)

Software

People will spend hours asking and debating what the best programs are for web design and development. My suggestion is to take advantage of the free trials that programs offer, try them out, and use the ones that fit you and your work habits best.

Apart from the program names themselves, I will, however, tell you what types of programs you will need.

  1. Web Design/Development program
    This type will allow you to code and piece together the elements you are needing for your website and its pages. (i.e. Adobe Dreamweaver, Microsoft Expression Web, Panic Coda, Nvu)

  2. Graphic Design program
    This type will allow you to design the graphic elements that will complement your website and its pages. (i.e. Adobe Fireworks, Adobe Photoshop, Gimp, Corel PaintShop Pro)

  3. File Transfer client
    This type will allow you to transfer the files for your website onto your web host to make your website live and active. (i.e. GlobalSCAPE CuteFTP, FileZilla, WinSCP, Transmit)

Like what you buy. Try what you buy.

Wireframe—What is going on?

One key step in web development that scores of people leave out because of negligence, laziness, or ignorance, is wireframing. Wireframing can be split up into 3 elements: architecture, functionality, and content. Wireframing will save you tons of time to hashing out these 3 elements prior to actually starting the visual design.

Architecture. The architecture of the wireframe is basically the outline or flowchart of your website. What may help is to start by creating a structural outline of your website using the same technique you would when outlining a novel or a chapter of a science textbook (think back to the days of junior high school). A flow chart may also help as well-Whatever you’re more comfortable with.

Functionality. The functionality of your website is determined ultimately by you but is dictated by the skeleton and personality you give to the site. Do you want your website to have a fixed (a static/fixed width) or a fluid (the layout adjusts to the size of the screen) layout? Do you want your website to be heavily interactive? These are all matters you will want to research, study, and decide.

Content. You don’t want a website without content, quality content. You want to plan ahead and fill your website with content, and please use relevant content. People go back to websites ultimately for their content.

Typography—I can’t read what I typed!

Inexperienced web designer often underestimate or fail to see the importance of typography and its effect on the user. The elements that will have the most impact, if used properly, on your typography are simplicity, size, and space.

Simplicity

Simplicity is effective, but creating a simple design is no easy task–it can be very daunting.

Size

For headlines and to draw attention, the bigger and bolder the typography, the better. Popular headline fonts are Helvetica, Arial, Georgia, and Times New Roman.

Space

Space is an element that can give your design a great, simple, clean effect when used properly. Negative space (the space around an object) is important and critical when achieving a simple design. The last thing you want to do is clutter your design by eliminating the negative space in your composition. Learn to appreciate and even take advantage of negative space.

Line spacing and letter spacing is also important. Play around with your letter spacing and see what kind of an effect you can get!

What next?

Practice makes perfect. I am a firm believer that in web design, practice makes perfect. You’ll soon find out that the harder you try to push for perfection, the more you may feel like you’re drifting away from it. That’s a good sign, and it’s a sign that you’re improving.

Read, read, read. There are hundreds and thousands of articles and tutorials on the web about web design, typography, design principles, etc. Take advantage of the plethora of free resources and read! I spend an average of at least 3-4 hours a week reading article after article.

In conclusion

I realize that one can spend days and even years teaching on web design, and I know that I left many important elements out; however, I was trying my best to wrap the basics of web design and development to help those who are interested in getting started. Any suggestions about what to include would be helpful; I’d be happy to take your suggestions into consideration.