How to Design a Website: Step-by-step

As with most design projects, the first step when creating a website is to perform research. Some of this research will be done with the client to get an understanding of their needs. You will also need to learn more about their industry and competitors.

When meeting with your client, you need to discover as much as possible to help you develop an outline for the site and eventually design it. This includes asking about their target audience, goals, creative direction and other variables that may affect what you can offer the client, such as budget and deadline.

Your industry and market research will happen simultaneously. In order to be prepared for meeting your client, you should have an idea of their industry. After finding out their needs, you will then want to look a little deeper.

The level of research performed will depend on the client’s budget and your existing knowledge of the industry. It can be as simple as looking to see what other websites in the field look like. For bigger projects, it may be something like in-depth research with focus groups. 

Once you know what the project is all about, it’s time to gather ideas, and brainstorming is a great place to start. Rather than looking for the perfect idea to be your first, throw out any and all ideas or concepts for the website. You can always narrow it down later.

Some websites might call for a standard web interface, with navigation (a button bar) and content areas where users are most likely to expect them. Others may require a unique concept to present the content.

In the end, the content will drive the design. For instance, a news site will have a much different approach than a photographer’s web portfolio

Early in the process of developing a website, decisions need to be made regarding the technical requirements of the project. Such decisions will affect the budget, time frame and, in some cases, the overall feel of the site.

One of the primary decisions is what the underlying structure of the site should be, which will determine what software to use and what system makes the site “work.”

Your options include:

• Basic HTML: A standard HTML site in which each page is edited manually. This may be relatively quick to develop but leaves little flexibility and a lot of ongoing maintenance. It's also important to remember that HTML sites are not HTML alone and can include CSS, JavaScript, and other programming languages for functions.
• Use a Content Management System: Using a CMS generally allows a client to perform regular content updates, while the designer controls the overall look and feel of the site. Some systems may be developed from scratch and others purchased and tailored to the client’s needs. Online systems such as Blogger and WordPress are free and include a basic CMS as well.

Now that you’ve gathered the necessary information and brainstormed some ideas, it’s a good idea to get it all down on paper.

An outline of a website should include a list of each section to be included on the site, with a description of what type of content will be shown on each page. It should also describe in as much detail as possible what features would be on the site, such as user accounts, commenting, social networking functions, video, or a newsletter sign-up.

Aside from helping organize the project, the client should be presented with the outline of a website proposal so they can approve it before the project continues. This will allow them to add, remove, or adjust any sections or features.

All of this will ultimately help you develop a budget and time frame and build the site. Agreeing on a price for a website project based on an approved outline will help to avoid additional fees or differences of opinion late in the project.

Wireframes are simple line drawings of website layouts that allow you (and the client) to focus on the placement of elements rather than color and type.

This is extremely helpful as it determines which content deserves the most focus and the percentage of space used on the page for those elements. Without being distracted by other visual elements, approved wireframes provide a framework for your designs.

For some projects, you might consider having a collection of wireframes available to use for different types of content. The contact, about, and other pages with a lot of text may have a different layout than a gallery or shopping page.

It is important that you maintain a uniform look throughout the website as you transition from one wireframe to the next.

Once you and your client are happy with the wireframes, it’s time to start designing the site.

Adobe Photoshop is the most common tool for creating the initial designs. The focus of the site design should be to present the content and it will be used to create the actual web pages.

For now, simply design and play with the basic elements to create something for your client to look at and approve.

• While flashy designs and animation have their place, they should not overpower what the user is looking for.
• Consistent navigation will help your visitors find all your main content areas.
• Clean use of type (in the case of a text-driven site) will keep visitors reading and coming back for more.
• Before you have actual content for a site design, Lorem Ipsum text will help fill spaces without distracting your client.

When your design is approved, the pages need to be turned from mockups into actual web pages written in HTML and CSS.

Experienced designer/developers may choose to take on all the coding, while someone focused on the design side of the web may work closely with a developer to bring the site to life. If that is the case, the developer should be involved from the start.

Developers will help make sure the design is a realistic and an effective web layout. They should also be consulted about any features you promise the client as some may not be possible to execute or beneficial to the site.

Software such as Adobe Dreamweaver can help a designer turn a mockup into a working web page, with drag-and-drop features, pre-built functions, and buttons to add links and images.

There are many software choices available for website building. Choose one that you enjoy working with, just be sure they allow you to really get into the details and coding of the pages.

Once your layout is completed in HTML and CSS, it needs to be integrated with the system you have chosen. This is the point where it becomes a functioning website. 

This may mean developing templates to be read by a content management system, altering a WordPress template, or using Dreamweaver to create links between pages and more advanced web features. This is again a step that may be left to another member or members of the team.

You will also need to buy a website domain name and have a hosting service lined up. This should have been part of your discussions with the client and, in reality, should be done in the initial stages of the process. Sometimes it can take awhile for services to become active.

It's also very important that you or your developer do thorough testing of the website. You do not want to do the 'big reveal' and have functions that don't work right.

With your website online, it’s time to promote it. Your amazing design does no good if people do not visit it.

Driving traffic to a site can include:

• Optimizing it for search engines. Hire an SEO expert if this is not an area of expertise as the best practices are continually changing.
• Sending newsletters to highlight new content. The newsletter design should relate to the website design to keep brand messaging consistent.
• Advertising with PPC ads on Google or with banner ads on other sites.
• More conventional methods such as print advertising and word-of-mouth.