If you’ve ever made a website then I’m sure the phrase “so where do I begin?” came up pretty quickly. Well I’m glad that you asked because it can be a pretty intimidating and confusing place to be. Especially if you have never made a website before.

A lot of people make the mistake and open up Dreamweaver (or some other html tool) and begin making their website without much thought as to how it’s going to look or run. Then they get results that look amateurish and in fact drive away potential employers or customers.

There a lot of technical aspects to consider, such as manipulating the tools in Photoshop and scripting the systems in PHP/ASP and HTML. The scripting part itself is the most time consuming so it pays to spend some time beforehand and think about if you really want to put in that comments or chat system.

So let’s start by developing a mental picture of the website. Deciding how we want it to function, what we want it to look like and how we’re going to maintain it.

Let’s begin to develop an idea. Take some time and write down your idea. It doesn’t have to be long, just provide a brief one or two sentence description.

Example

I’m going to make a portfolio website where people can view my artwork. Hopefully this will attract potential employers.

My description is very simple, it just gets the idea out and onto paper. I’ll elaborate on my idea in the later phases.

Now let’s begin thinking about the details of the project. From the brief description above, a lot of characteristics are already implied but if you want to get a clearer picture it’s worth spending some time and fleshing out other aspects.

Get away from the computer, in fact, go into another room. Take out a piece of paper and begin writing down different strategies on how you’re going to accomplish your goal using the format that I’ve provided for you below. Write down every and all ideas that you have, don’t edit yourself. Even if it seems out of the scope of this project, you can always go back and cross t out. Keep this in a list format, you’re just brainstorming ideas. If you want, go ahead and ask a friend to help.

1. What kind of technology will I be using?
   1. XHTML to code the layout/visuals
   2. PHP to code the functionality
   3. MySQL Database to handle the data
   4. Designs in Photoshop
2. What kind of content will I have?
   1. Home Page
   2. Gallery
   3. Contact
   4. Resume
   5. News
   6. Mail List
3. Who is my audience?
   1. Potential Employers
   2. Commissions
   3. Museum Galleries
4. How big will this website be? Will it grow?
   1. Must be able to easily add new gallery pieces
   2. Must be able to add more mail list members
   3. Must be able to easily add Links
   4. Must be able to add News
   5. Must be able to update my resume easily
5. What is the style/brand of my website?
   1. I want it to be classy, professional
   2. I don’t want it to overpower my gallery pieces
   3. I want it to feel hip and fresh
   4. I don’t want glaring colors, something nice and subtle
   5. Elegant

A great way to get ideas flowing is to talk to someone. You can often draw inspiration from other people’s suggestions. Make sure it’s someone who is interested in this stuff as well. If you can’t find someone, try looking to online forums and ask for suggestions.

This step is what separates the good sites from the bad ones so be generous with your time. If you need, spend half an hour on it today then drop it. Come back tomorrow and see if you can think of more ideas. While developing TutorialQuest, I and Max at Pixel Hive Design spent two weeks just brainstorming, we ended up with dozens of pages of ideas.

You’ve built a list of ideas, now it’s time to turn them into a written description. That way you work out a lot of the details early on so that you don’t have to worry about them during production (increasing the speed of production as well as reducing frustration).

Your description can follow many different formats but for the sake of this project I’m going to follow the format of my brainstorm list. In general it’s a good idea to be as thorough as possible but in the end it’s up to you.

Introduction:

Be sure to include an introduction that expresses the purpose and hopes for your website.

Example

The Portfolio Website project will provide a place for me to upload my art so that potential customers or employers can view it. Over a period of time the website will grow as I add more and more work to the gallery.

What kind of technology are you going to use? This is an important question as there are many different ones available. Are you going to code your website in PHP or ASP? Are you going to use Flash or stick with more general HTML? Each of these technologies has their advantages and disadvantages, it’s up to you to decide what you are going to use.

Because I have a lot of experience with PHP I’m going to use that. Don’t just limit yourself to one skill though, become competent with as many different technologies as possible that will increase your value as a professional and open you up to new ways of thinking.

Example

PHP will employ the most advanced web technology at my disposal. This will allow for quick and easy maintenance by organizing everything in a logical, easy to follow format.

XHTML

The website will use the latest version of HTML, XHTML as well as CSS to comply with w3 standards and ensure the website looks the same across as many browsers as possible today and in the future.

PHP

The server will be installed with the latest version of PHP to ensure the highest in performance and compatibility.
A new custom developed PHP framework will be used to handle all of the files and database queries. This framework is in its 5th version and has been tested on many different systems. This will immediately reduce the amount of work when it comes to managing files, handling database connections, linking functions and much more.

MySQL

The website will be using a MySQL database server to store all of the data. The user will have access to the database via a 3rd party PHPMyAdmin application. This database is commonly used in PHP projects and has earned a reputation for security and efficiency.

Photoshop

The website layout, and icons will be designed in Photoshop and then sliced and exported into optimized gif or jpeg images to be used with HTML.

What kind of content are you going to have? This is what defines your website. If you’re going to have a gallery website you’re going to have a lot of pictures you’re going to need a section that can display the pictures in columns and rows. If you’re going to have articles you will need a section that can handle large bodies of text nicely.

Don’t think about this section in terms of pages, think of it in terms of kinds of content. A gallery can potentially have thousands of images. So think of a way the user can easily view those images and then view more information on a particular image if they are interested.

Example

Home Page

This page will have basic introductory information such as who I am and what this site is. It will also have news and featured projects.

Gallery

This is the centerpiece of the website. It will be intuitive and easy to use. Images will be displayed in a table, approximately 30 images per page. They can cycle through the pages via a next and back button located above the gallery.

When they click an image a popup window with appear showing a larger image as well as additional information (similar to that found at the 3dtotal online gallery). When the image is enlarged they will have the option to go to the next image from that window by pressing a next and back button.

Contact

The contact page will have an online form where the visitor can contact me with any questions or concerns they might have. There will be four forms, a Name, Email, Subject and Message form. When they click send I will automatically be sent an email.

AIM/Yahoo/MSN contact information will also be available.

Resume

An up to date resume will be available for potential clients/employees. They can view the resume online or download a PDF version for their files.

News

Visitors will be able to read weekly updates via a news panel seen throughout the site. News can range from additions to the gallery, to awards, to upgrades to the website. Anything the administrator deems appropriate. The news panel will display up to 10 news items at a time while the rest are saved in an archive. That way the news also reflects the life of the website, recording important information.

Mail List

Visitors can sign up to a mail list where they will receive weekly news reports and any other important information the administrator wants to share. E-Mail messages can be sent from the Administrative backend which will be written for this project.

Links

As the website grows people will begin asking me to exchange links. This is a good way to exchange traffic and to be a more useful resource to other people.

One thing that often gets overlooked is your audience. These are the people who are going to be looking at your website. Too often people make their website “the way they want to make it.” This is wrong, you must cater your website to the people who will be using it.

So for instance let’s say your primary audience was children between the ages of 6 and 12. Then you would want to use a lot of bright colors and large cartoony icons to grab and keep their attention. However, if your audience was senior citizens you would want your colors to be more subdued and your font larger to accommodate the older audience.

Do you want this go international? Then you will need several different language versions quickly available at the click of a button.

It doesn’t matter how pretty your pictures are or how advanced your code is, if your audience cannot use your website then it is a failure, period.

Example

This website will be built for potential employers, commissions and museum galleries. In this case my work really needs to stand out so the interface will not overpower my pieces.

The audience understands art and visual communication so great care will be taken when organizing the pieces. For instance, paintings will be divided up into their own sub categories such as oil or acrylic.

How big is your website going to be? Are you going to keep it a small personal website to show your work or do you want it to grow as you get more clients and experience? Perhaps you want to add a new tutorials or downloads section. Well then you must build this in to your design and take special consideration when you’re building the framework of your website.

For example; the beginner will frequently design their interface in Photoshop without taking into account the possibility of growth. Therefore they build themselves into a corner when they want to expand their website. They are forced to open up their Photoshop file and export the images again. This is very tedious and in the professional world, unacceptable. You as a developer must be able to make changes quickly and efficiently.

Example

The website will be able to grow easily as it will be built into the initial framework. Adding a new section will be as easy as adding a new entry to a list.

Adding new content will be handled automatically via an administrative content management system.

What initial impression do you want people to get when they first see your website? What kind of mood do you want to set? And lastly, how are you going to get people to remember your website?

Example

The brand will communicate talent, skill above all else, professionalism.

When the visitor looks at my page for the first time they will immediately get the impression that this is a professional website. As this is going to be focused toward people in the art field, it will communicate that I understand balance and composition when it comes to layouts. The colors will be subdued as I don’t want to overpower my work. It will be there to augment my work, not diminish it.