The 7 stages of web design: Prototype development

The 7 stages of web design Prototype development

Designing a website has a particular process. Obviously, all phases adapt to the design process for web design ultimately belongs to this group, but there are certain characteristics that own the web design process when working on behalf of a client. In this article, we mentioned the different stages of web design and explain them one by one.

If you are looking for a professional creative freelance designer, we recommend our Partner, Yu Jin Lee who offers:

1) Interview with the client

The 7 stages of web design Prototype development

The initial step in any project is to gather all the information required from the client. This can be achieved by having a personal meeting with your client, scheduling a conference call by Skype (or any other similar platform) or by sending a questionnaire by mail to your client.

By collecting this information, you can meet the goals of your client, why he has commissioned the project, the perception of users, the message wants to communicate, etc. This interview or initial meeting gives you all you need to base the project information.


These data should be evaluated and transferred to the brief. This document is brief and serves as a reference you can use every time that you spend working hours to the project.

In order to create an appropriate brief, it is necessary to do your client the right questions. Often, direct questions might not be enough so well prepared your questions so you can have a fluent conversation with your client.

2) Research

The 7 stages of web design Prototype development

Once you’ve organised the information in the brief to better understand the order and customer needs, it is time to begin the research phase where you must consider the main competitors of your customer, the benefits of the product or service, the latest trends, etc.

This phase is probably not your favourite and will require you to analyse data. Always research usually takes time, so be sure to separate the time. You can obtain some information from the customer. For example, it is likely that he has all the information about their users, so if you make the right in qualifying questions, then you already have a piece of important information.

3) Development of wireframes

The 7 stages of web design Prototype development

When you’re already much more familiar with the business, you can start with the first sketches. The previous phase has allowed you to understand more about the client’s goals and has even provided you with a series of visual references for the possible design. But for now, you just have to worry about the layout and organisation of elements.

The first wireframes can be both digital and hand sketches. The goal is that you can communicate your idea of how effective your client, so the first sketches are of low quality. This means that not even the appearance or graphic or even the exact measurements of the interface will be taken into account, although it is considered the format (either vertical or horizontal).

Once you have some ideas and can discuss them with the client, you can turn the sketches to high-quality wireframes, where and accurate measurements are taken into account and work on the basis of guidelines.

4) Design Mockups

The 7 stages of web design Prototype development

At this stage and you deal with typography and graphics components such as colour, both essential for good design. You can also place images as shown, as the final photographs and the text should be provided by the customer. If the client has not sent you the file with text, then you can place text to test for certain areas, but ideally, you have the content before making the final version.

However, everything depends on the time you count with the project. Sometimes you’ll find images that help to create a certain environment and go according to the design and message. These will not be the final images are only tests, but may be useful to help communicate the idea to your client. But if you have little time for delivery, you should not take as much time looking for photographs, because the elements that must be defined are the sources and format them as well as the navigation bar and colours to be used in all sections.

5) Prototypes

The 7 stages of web design Prototype development

Prototypes refer to interactive elements. So far, the results generated in each process have been static. It is at this stage where you can give a sample of website interactivity and experience that will offer its users. Are treated as prototypes, they are not the final design, but they are pretty close both the design and interactivity which will present the website when it launches.

Prototypes are usually used for testing usability and verify all interactions are functioning. Perhaps, implementing a specific effect on the site you thought a good idea, but notes that when tested in the prototype usability problems are generated. In this way, you can come up with an alternative plan.

6) HTML and CSS Development

The 7 stages of web design Prototype development

Although it is possible that prototypes are developed in HTML and CSS, it is not always the case. Depending on the time you have available, you might want to prototype in another tool. Or do you feel is best to start with the code if eventually, you’re going to be in charge of moving the design in PSD to HTML or another format. It all depends on your preferences.

You’ve already done the respective usability testing, you have a clear idea about the type of interactions and effects that you can apply so that the transfer of design to HTML can be without difficulty.

7) Launch

The 7 stages of web design Prototype development

Although apparently in the previous stage web design process seems to have ended, to face with the customer is another phase that really matters. This is to ensure that the website works properly. Obviously, you’ve done all the tests, so the answer to this question should be positive, but it’s part to provide better service to your customers when asked if everything works properly after launch. This way, your customer know that you really care about your company and if all goes well, you may hire you for future projects or recommends to acquaintances. And no more effective marketing than word of mouth recommendation form.

Leave a Reply