What is website design and why it should be done
Design - this, perhaps, a key stage in the creation of the website, answers us with the following questions:
Designing gives the site a lot:
The exception, perhaps, is low-cost sites - with a budget of 5-15 thousand rubles - where designing becomes unprofitable, alas.
Design can be divided into four main parts:
Goal setting is necessary to determine why we are creating a site and what kind of results we want to achieve. This serves as a guideline for all further work: no matter what we do - be it modeling, creating interfaces, adding new functions or changing old ones - all this should correspond to the goals.
In the future, they also help evaluate the success of the project .
The first step in goal setting was made in the vision of the project . At the design stage, goals are formulated more accurately and in detail , and site tasks are determined, the implementation of which will work to achieve each goal.
Research is necessary to obtain information, which we will call the context of the site. By context, we understand the various circumstances surrounding a site and that can influence its operation. These circumstances include:
The context of the project helps us understand the target audience and how the site should be made: how to position it, what information should be on it and what language should it speak to Central Asia (this is called a communication strategy), how will it differ from competitors (of course, in a favorable direction).
In addition, research plunges the project team into the topic, allows you to see / make the right decisions somewhere even on a subconscious level.
Best of all, of course, the study helps to understand the audience:
Ideally, we should get information about the context from the client, but if the client does not have such data, then the context study will have to be done by ourselves.
For research, I advise you to use two methods that have proven themselves best on all projects we have done without exception:
Excellent: goals set, context data received. It is time to put all the available information into a concept (an analogue of what we did in the vision, but more detailed). Let me remind you that by concept we understand the main ideas and opportunities inherent in the project:
Modeling is the creation of a site model that describes the functionality and information structure.
In the functional part of the model, we describe the possibilities that the site provides its users: for example, upload, group and comment on photos (social network) or order and pay for goods (online store). It is important to understand that opportunities are tools for solving problems. If an invented opportunity does not solve any of the problems, this may mean that it is superfluous. In the project assignment, we describe the possibilities at a fairly high level of abstraction - not as detailed as we do in the "Terms of Reference for Programming", because here it is simply not required.
An information structure is a diagram showing which sections a site consists of, what tasks they solve, and how a user will navigate a site (navigation diagram).
Next, we are working on a partition scheme - this is a more deeply and in-depth developed scheme (compared to the information structure of the site), showing section navigation, links and transitions between subsections. The partition scheme ideally includes the following elements:
As usual, brief conclusions:
If this article seemed useful to you, write down in the comments what stages of the design you would like to learn more about.
- What are our goals - why do we make a website? How do we achieve our goals?
- How will the site look and work?
About the benefits of design
Designing gives the site a lot:
- Strongly increases the guarantee of achieving results.
Only by clearly formulating the tasks, determining the target audience of the site and its needs, simulating the interaction of the site and its users, we can be sure that we will get what we need. - Saves time and money.
Correcting a mistake at the design stage is quite simple: we change several pieces of text and diagrams. To do this at the stage of design or layout development will be more expensive. If an error is detected at the programming stage, its correction can cost many thousands (tens, hundreds of thousands) rubles and take months, or even years. - Allows you to effectively share work.
The design assignment is a completely self-sufficient document. Having received it, the client can make the site on their own or hire another team that, in his opinion, is better at dealing directly with the development (we have such experience when we performed only design and the client developed the site on their own).
The exception, perhaps, is low-cost sites - with a budget of 5-15 thousand rubles - where designing becomes unprofitable, alas.
How to design a website
Design can be divided into four main parts:
- Goal setting
- Context study
- Concept creation
- Modeling.
Goal setting
Goal setting is necessary to determine why we are creating a site and what kind of results we want to achieve. This serves as a guideline for all further work: no matter what we do - be it modeling, creating interfaces, adding new functions or changing old ones - all this should correspond to the goals.
In the future, they also help evaluate the success of the project .
The first step in goal setting was made in the vision of the project . At the design stage, goals are formulated more accurately and in detail , and site tasks are determined, the implementation of which will work to achieve each goal.
Context study
Research is necessary to obtain information, which we will call the context of the site. By context, we understand the various circumstances surrounding a site and that can influence its operation. These circumstances include:
- Target audience and its needs,
- Characteristics and trends of the area,
- Competitors and their activities,
- Experience of other projects,
- Legislative or other restrictions
- Other factors of influence, depending on the subject of the project.
The benefits of context research
The context of the project helps us understand the target audience and how the site should be made: how to position it, what information should be on it and what language should it speak to Central Asia (this is called a communication strategy), how will it differ from competitors (of course, in a favorable direction).
In addition, research plunges the project team into the topic, allows you to see / make the right decisions somewhere even on a subconscious level.
Best of all, of course, the study helps to understand the audience:
- How to communicate with her : what words to use in a “conversation” with her, how to name your product or service (perhaps you need to use professional slang, or vice versa, deliberately simplified terminology), whether to refer to her “you” or “you” .
- What are her needs : what is priority, what is optional, but desirable, which cannot be done in any case.
Where to get data
Ideally, we should get information about the context from the client, but if the client does not have such data, then the context study will have to be done by ourselves.
For research, I advise you to use two methods that have proven themselves best on all projects we have done without exception:
- A study of available sources - literature, Internet resources and so on.
- Interviews with key actors - users, experts.
- Without context data, your chances of doing well for the user tend to zero.
- Even independent research provides useful information, albeit to a lesser extent than professional.
- And even if you conduct the research so ineptly (which is unlikely) that you can’t get answers to the above questions, you are still immersed in the context of the project and at least subconsciously grasp something useful.
Creating a website concept
Excellent: goals set, context data received. It is time to put all the available information into a concept (an analogue of what we did in the vision, but more detailed). Let me remind you that by concept we understand the main ideas and opportunities inherent in the project:
- What and for whom we do - a common idea and target audience;
- How the site will work and what information it contains;
- How the site will earn (if it is a project with direct monetization);
- What will be the distinguishing features of the site (from competitors), how it will be positioned;
- How the site will develop after launch.
Website modeling
Modeling is the creation of a site model that describes the functionality and information structure.
The functional part of the model
In the functional part of the model, we describe the possibilities that the site provides its users: for example, upload, group and comment on photos (social network) or order and pay for goods (online store). It is important to understand that opportunities are tools for solving problems. If an invented opportunity does not solve any of the problems, this may mean that it is superfluous. In the project assignment, we describe the possibilities at a fairly high level of abstraction - not as detailed as we do in the "Terms of Reference for Programming", because here it is simply not required.
Information structure
An information structure is a diagram showing which sections a site consists of, what tasks they solve, and how a user will navigate a site (navigation diagram).
Next, we are working on a partition scheme - this is a more deeply and in-depth developed scheme (compared to the information structure of the site), showing section navigation, links and transitions between subsections. The partition scheme ideally includes the following elements:
- Tasks - which of the previously set tasks are solved by the section. For example, the “Photos” section on a social network solves the problem of exchanging information between friends and subsequent communication;
- Messages are literally messages that a section or part of it sends to a visitor. For example, a greeting message “Hello, you are on the portal XXX! We are glad to see you here ”or“ Hey, this is our best product - try it, order now and see for yourself! ”
Messages are of various types; the most common: advertising, calls to action, notifications and image messages. - Functional elements - interface elements that enable the visitor to perform some kind of operation. For example, a functional element is a form for entering a message that allows you to send a message, or a button in the interface that saves the changes made.
- Variants of the visitor’s behavior - assumptions about what the visitor of the site can or should do after studying the interface or its individual parts.
Summary
As usual, brief conclusions:
- Be sure to design any site. If you do not know how, then it's time to start learning.
- Designing is useful: it improves the quality of the site, saves time and money.
- Designing is, first of all, the correct statement of the problem, and then the research arising from it, conceptual and engineering modeling.
If this article seemed useful to you, write down in the comments what stages of the design you would like to learn more about.