In the first part of this chapter, we have defined the first 3 steps necessary to make a website together, namely: the setting of objectives, determining the functionalities of the website, as well as the creation of its hierarchy.

Once the hierarchy is built, the skeleton of the website is there, however, it needs membranes and skin!


Step 4: Organize the pages of the website.

The pages of a website are not alike. At this stage, it is good to define the components of each page, as well as the positioning of each of these components. This work is crucial, it’s necessary to take the time to do it carefully as it represents the ‘user experience’ of your website.

A good way to do this is to take a pencil, and a number of paper corresponding to the number of pages of your website, and draw frames for each of the page components taking care to describe the natures and choose approximate dimensions to those used for highlighting, this image presents a concrete example of this exercise.

These components can be the menu, an image, paragraphs, articles, a video, a form, « twitter » feeds, etc.


Step 5: Make a website template.

“The web is about style”, the structure of the pages gives a global vision of your future site. It is high time to set the scene, the papers you made in the previous step should be transcribed as a website template. You can use a program like Photoshop or Gimp, or better speak to an expert to make the template.

There are several points to consider when making the aforementioned model:

  • The choice of colors: Take care to choose those that will be in harmony with the theme of the website. Avoid having too many colors not to sting the eyes of your visitors, or to have little risk of being cold and dry.
  • Use an appropriate font type for the visitors you are targeting.
  • The font size should be neither huge nor too small, think also about choosing a font size for each component, the size of the title will certainly not be the same as that of the comments.

Other instructions to follow when making a template will be detailed in a future article.


Step 6: Architecture of the database of the website.

The last chapter in our journey is about organizing what happens in the back office. The template gives us a representation of our website, however, we have no idea yet on the routing of information, nor what happens in the submerged part of the iceberg. As you may have understood, at this level, your job is to decide how the information will circulate and where it will be stored, as well as this information’s organization in the database.

In order to properly structure these pieces of information, start by defining a structure of your database: the name of the tables, the constituent fields of each table, as well as the type of information for each field, and the maximum number of characters. The information can be of these types:

  • Text (ID, names, first names, address, message posted on the forum, etc.).
  • Numbers (age, price, etc.).
  • Dates.

Our chapter on design is coming to an end, although, as you must already know the website is still not finished. Find the third part of creating a website in our next article « Coding ».

And if some of the understanding of some parts prove more difficult than others, do not hesitate to contact us, we will be happy to accompany you.