Ways to Structure a website: Step-by-step

A potential client just asked you to BlackStorm Design a website, but where would you begin? There’s a certain process which you can follow to ensure the job goes smoothly. It mirrors the standard graphic design procedure , with only a couple of website-specific steps to include.

As a graphic designer, then you might opt to undertake the whole design yourself, including the coding. But, you may also wish to gather a team that will assist you with the particulars. A web developer and SEO expert might be valuable additions to your project.


Just like most design jobs, the very first step when developing a website is to do research. A number of this research will be achieved with the client to get an understanding of their needs. You’ll also have to learn more about their industry and competitors.

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

BlackStorm Design

Your industry and market study will occur concurrently. In order to be prepared for meeting your customer, you need to have an idea of the industry. After finding out their needs, then you will need to look a little deeper.

The level of study performed will be dependent on the client’s budget and your current knowledge of the business. It may be as simple as looking to see what other sites in the area look like. For larger jobs, it may be something like in-depth research with focus groups.


As soon as you know what the project is all about, it is time to gather ideas, and brainstorming is a great spot to begin . Rather than looking for the best idea to function as first, throw out all ideas or theories for the website. You always have the option to narrow it down after.

Some sites might call to get a standard web interface, together with navigation (a button bar) and articles places where users are most likely to expect them. Others might require a exceptional concept to present the content.

In the long run, the material will drive the design. As an Example, a news website will have a much different approach compared to a photographer’s website portfolio

Decide on Technical Requirements

Early in the process of creating a site, decisions need to be made regarding the technical needs of the undertaking. Such decisions will influence the budget, time period and, sometimes, the total feel of the website.

One of the primary decisions is what the underlying structure of the site needs to be, which will determine what applications to use and also what system makes the site”work.”

Your choices include:

Basic HTML: A normal HTML site where every page is edited manually. This may be somewhat quick to develop however leaves little flexibility and a lot of ongoing maintenance. Additionally, it is important to not forget that HTML websites are not HTML alone and can include CSS, JavaScript, and other programming languages for functions.
Use a Content Management System: Using a CMS usually allows a customer to execute routine content updates, even while the programmer controls the general look and feel of the website. Some systems may be developed from scratch and others bought and tailored to the customer’s needs. Online systems like Blogger and WordPress are free and include a basic CMS as well.
Write an Outline
Now that you’ve gathered the necessary information and brainstormed a few thoughts, it is a good idea to get it down on paper.

An outline of a site should have a list of each section to be contained on the site, using a description of which type of content will be displayed on each page. It also needs to explain in as much detail as possible what features would be on the site, such as user accounts, commenting, social media purposes, movie, or even a newsletter sign-up.

Aside from helping arrange the job, the customer ought to be presented together with the outline of a site proposal so they can accept it until the job persists. This will permit them to add, remove, or fix any parts or attributes.

All of this will finally help you build a budget and time period and construct the site. Agreeing on a price for a website project predicated on a licensed outline will help to avoid extra fees or differences of opinion late in the project.

BlackStorm Design

Create Wireframes

Wireframes are simple line drawings of site layouts that enable one (and the client) to concentrate on the placement of components instead of color and type.

This is extremely useful as it determines which content warrants the maximum focus and the proportion of space used on the page for all those elements. Without being distracted by other visual elements, approved wireframes provide a frame for your layouts.

For some jobs, you could consider using a selection of wireframes available to use for different types of content. The touch, about, and other pages with a great deal of text may have a different design in relation to a gallery or shopping page.

It is vital that you maintain a uniform appearance throughout the site as you transition from one wireframe to the next.

Design the Website

As soon as you and your client are happy with the wireframes, it is time to begin designing the website.

Adobe Photoshop is the most frequent tool for producing the first layouts. The attention of the website design should be to present the content and it’ll be employed to create the real web pages.

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

While flashy designs and animation have their place, they shouldn’t overpower what the user is searching for.
Consistent navigation will help your customers find all your main content locations.
Clean usage of kind (in the case of a text-driven website ) will keep visitors coming and reading back for more.
Before you’ve got actual content for a site design, Lorem Ipsum text will help fill spaces without deflecting your customer.
Build Web Pages
When your design is approved, the pages need to be switched from mockups into real webpages written in HTML and CSS.

Knowledgeable designer/developers may choose to take on all of the coding, while someone centered on the design side of the net may work closely with a developer to bring the site to life. If that is the case, the developer ought to 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 attributes you promise the client as some may not be possible to perform or beneficial to the website.

Software like Adobe Dreamweaver can aid a designer turn a mockup into a functioning web page, with drag-and-drop features, pre-built functions, and buttons to include links and images.

There are lots of software choices out there for site building. Pick one that you like working with, just be sure they permit you to truly get into the coding and details of the pages.

BlackStorm Design

Develop the Website

Once your layout is finished in HTML and CSS, it needs to be incorporated with the system you’ve chosen. Here is the point where it becomes a functioning website.

This may indicate creating templates to be read by a content management system, altering a WordPress template, or using Dreamweaver to create links between pages and more complex web features. This is a measure which might be left to some other member or members of the team.

You’ll also need to purchase a site domain and also have a hosting agency lined up. This should have been a part of your discussions with the customer and, in fact, should be carried out in the initial stages of this process. At times it can take awhile for services to become busy.

Additionally, it is extremely important that you or your programmer do comprehensive testing of the site. You don’t want to do the’big reveal’ and also have functions that don’t work correctly.

Promote the Website

Together with your site online, it’s time to market. Your incredible layout does no good if people don’t visit it.

Driving visitors to a site can include:

Optimizing it for search engines. Hire an SEO expert if this isn’t an area of expertise as the best practices are always changing.
Sending newsletters to highlight new content. The newsletter design should link to the site design to keep manufacturer messaging consistent.
Advertising with PPC ads on Google or with banner ads on other sites.
More traditional techniques such as print word and advertising.
Keep it Fresh
Among the best ways to keep folks coming back to your website is to keep the content clean. With all the work place into a site, you do not want it to stay the exact same for months following the launching.

Continue to post new content, photos, videos, or music… whatever the site was built to present. A blog Is a Good way to keep a site updated, with articles of almost any length on any topic related to your site,

If your client will be handling the upgrades for a CMS site, you might want to train them to make use of it. Making upgrades to a website you’ve made is a nice way to receive regular income. Be sure that you and your client agree upon the frequency and rates for any update work you do.

Bookmark the permalink.