This article presents the basic principles of designing a website and a mobile app. The definition of site design, what stages it consists of, how much time to set aside.
Stages of website design
To understand what site design is, let’s summarize what stages site development consists of. In summary it consists of five points:
- Site Planning
- Design
- The layout and software part
- Filling content + testing
- Launch
In pure form, this process is encountered very rarely. Usually, several stages take place in parallel or the project is developed iteratively. But now, at the very beginning you can omit these details.
What is website design
Site design – this is the first and key stage of site development. And, in a good way, just with him to start the development. And this is the right approach that will save you a lot of money, time and nerves. Many people start right away with the design and then get websites that do not solve the problems of business, not selling and generally it is not clear what they are made for.
In the process of design, we determine why we need a website, how it will solve the problems and pains of the company and its customers, what sections it will have and how they will look. That is, think through all of the site in the beginning, “on shore. After that, already thought out the script, sits down and quietly develop design, software and filling the content, etc. That is the design of the site – this is the base, the basis for further Web development.
Example of the ocean
He is not from digital, but very clearly reflects the essence of design.
Imagine you’re looking at the ocean. You need to build a submarine, which will move the sea inhabitants. There is a huge world under the water, its own rules, laws, sea creatures. You generally understand what it is. But you do not know the details, the laws. Who are these sea creatures? What do they want, how do they live, what kind of submarine do they need? By what laws does a submarine move? What weight should it have, displacement? What kind of hatch?
To build a boat that will not only float underwater, but also perform all the functions required of it, you need to dive underwater, consider everything. Study, ask around all the sea creatures, see other submarines. Study the laws that work in the ocean. Then, based on that data, make a blueprint of the future boat and give it to design engineers to build.
Think of engineering as just that. Being a pioneer, learning everything from scratch, understanding what and how things work in this world and coming up with the best solution possible.
In other words, designing a site is about immersing yourself in the world of the company you’re making the site for. Studying the environment, the conditions in which it operates. Making an outline and plan for further development.
Stages of site design
Site design can be divided into ten stages. I built them as a sequence of works.
- We find out what we do the site for
- Collecting data
- Research: character method, benchmarking, usability testing, etc.
- Information architecture of the site
- Userflow – scenarios for using the site
- Interface prototypes
- Software design
- Terms of reference
- Content plan
- Customer Journey Map (CJM)
Which stages are obligatory and which are not
The most important steps are the first, second, fourth and sixth, and they are highlighted in bold. You can’t do without defining goals, collecting data, developing structure and prototypes.
All the rest are necessary, important, but they can be added/removed depending on the free time and budget of the project. If you’re having trouble figuring them out, start by doing just these. Add the others a little later when you’ve mastered the key ones.
Why you need website structure planning?
How do you prove to a customer or company executive that a new website or app needs to be designed? Why spend money and time on it? Here are three compelling arguments.
We will precisely make the site the company needs.
At the start of the design process, you’ll need to answer the question, “Why do we need a website? What do we want to accomplish?” If you do not know where we want to go, there is a high risk of going to the wrong place. And it seems that everything is clear. But usually in the process of developing the site objectives are diffused, you need all at once. This section and that. Or vice versa, something is forgotten. And in the end we get the company website, but not the solution to business problems. In simple terms – draining the budget, losing money, the client, frustration and confidence in the fact that “online does not work.
You do not have to guess how to do it right
The real story: a meeting, in which the marketer, director, accountant and commercial are discussing a new website. What to put on the main page of the site, what items in the menu. And they argue for an hour or two.
The accountant wants to add a menu item “Documents” and place there statutory and details. Because all the contractors have already tortured her with requests and phone calls with requests to send these documents. The commercial is against it, because this item will distract from the main thing – the sale of services. The accountant has been working since the foundation of the company and has more influence on the director than the commercial one. The director agrees, the menu item is added.
Of course, this is a very stupid decision. The “Documents” page should be placed on the site, but certainly not in the first priority. Move it to the “About” section, for example. But what are your arguments for refusing an accountant? But if you did a study by the method of character and asked real customers, what they expect to see on the site, you would convince everyone in the opposite direction.
You don’t have to redo the design and layout of the site
This is a pain, but if you didn’t discuss what would be on each page of the site during the prototyping phase, you’ll probably have to do it all in design. And redo some of the design layouts. Torture the designer, yourself, spend a huge amount of time.
Even worse, you have to make up the design and then move everything in the live layout. Then you have to redo both the design and the software part. Compare: change fields in the service calculator in black and white pictures or on a piece of paper, or change the design of online calculator and program it again. Feeling tired already? Plus customer dissatisfaction, missed deadlines, and the project going into deficit. We haven’t had many such examples, but we have. It is always emotionally difficult. I’m not talking about money and time.
How long does it take to develop a website
The short answer is that it all depends on the site. You can have a service with a personal account for traders, or a lending site for selling burger stoves. You’ll spend different amounts of time on these tasks. Fork: from two days to two months.
The detailed answer is in the table by type of site. Hopefully it’s easier to navigate that way.
| Website type | Design time |
| Landing | 2 —3 days |
| Corporate website | 5 — 7 days |
| Corporate website with a catalog of services/products | 6 — 10 days |
| Online store | 10 days |
| Web service with a customer account | 14 — 20 days |
| Web service of high complexity with a minimum of analogues on the market, integration with external systems | from 25 days to several months |
| Mobile app | 10 — 20 days |
This includes doing all the items in the list above except CJM, with only one thing in the research – the character method. You need to budget those work days into your project budget and timeline.
Conclusion
Website design is the first and key stage of development. It’s the base, the foundation. In the design process, we determine why we want the site, what sections it will have and what they will look like.
Goals, data collection, structure and prototypes are a must. Everything else is optional and on budget.
Determine the type of site and set aside adequate time and money to design it.
Designing is needed so you don’t have to redo the site at the design and programming stage. Not to guess which section and where to put. Not to drain the project budget.
