Creating a website requires the coordinated work of a team of specialists. Since we are studying web design, let's figure out in what order and by whom web sites are developed; what place does UX / UI design take in this process.
I would like to draw your attention to the fact that everything in this article is written in the simplest possible language, so that it is easier to understand the essence of the process. When this is understood, I will move on to technical terms in the next lesson.
But today it will not do without new words.
A website can be called a web application if it provides not only a static set of pages, but also includes close interaction with the user and reaction to his steps to perform additional tasks (besides providing information).
Example website: personal blog. web application example: logo generator based on your preferences (works using a neural network).
The more complex the project, the more specialists need to be involved and the more stages to go through. Further, all stages of website development in which UX/UI designer takes part are marked with
Before starting the development of a risky project, for example, a startup, it makes sense to conduct market research: try to analyze competitors, predict profits. This is done by both business analysts and consulting companies. Often a UX designer is involved in analyzing and collecting information about a project.
The stage is found on high-budget projects. Sometimes business analysts are kept on staff on a full-time basis to conduct new research.
Based on the information collected and the analysis carried out, a technical assignment – a detailed description of the requirements and necessary functions that the website should have after the development is completed. The Project Manager and product owner also write technical documentation.
After the concept is approved, the terms of reference are passed to the UX/UI designer to find the visual style and even UX solutions. That is, we search among existing sites and try to "guess" what the client will like. Sites such as Behance and Dribbble are often used for this. All successful examples found are collected in a collection called moodboard.
Next, the moodboard is shown to the customer and noted what he liked and what he didn’t. This stage allows you to save time and skip a lot of unsuccessful attempts to find the right visual style.
At this point, the UX–designer starts designing the user experience. In other words, he comes up with how the user will work with the system. Depending on the detail and elaboration of the terms of reference, you may need:
- Identify typical users and their tasks — allows you to understand who and how will use the website, register each function as a sequence of actions:
![User story]( "User story")
- Split a web site into screens and display them as a diagram. The logic of transitions between screens is set at this stage:
![User flow]( "User flow")
- Draw Screen Thumbnails — based on the previous UX stages, the designer determines the location and size of the interface elements. At this stage, colors and visual style are ignored, usually everything is rendered in black and white or gray. Below is the same screen sketch, made in different styles, which does not affect the intended meaning in any way:
![UX sketches]( "UX sketches")
- Create interactive screens – based on previous UX sketches, the designer makes an interface that the user can interact with (it becomes interactive). That is, you can click on the buttons and the website will respond to this (for example, move between screens). You save time as no programming is required. Already now you can test your solution on real users, because the interface works as if in a browser. Perhaps this is one of the most impressive and rewarding stages. You can do research and see how users perform certain tasks, what problems they encounter (and fix them right there).
![Prototype]( "Prototype")
For simple web–sites, for example, business card sites, blogs, online–shops, it is enough to draw only sketches of screens (this stage is often ignored in studios). This is logical, because these types of sites can be worked out in such detail that the UX & ndash; design is already obvious.
But don't underestimate this step for complex and unique web–applications. For example, you need to create an interface to calculate calories and nutrients based on your diet. This problem can be solved in many ways, but it is impossible to determine the best one based on static sketches alone. But having tested the interface on users and received their feedback, we can already draw conclusions.
When the sketches for all the screens have been decided, the UI designer is working on finding a visual style: choosing colors, fonts, icons, building a grid and drawing the key sketches from the previous stage.
When the visual style is approved by the customer, all screens are rendered. It is important to understand that this step decides how the website should look after development is complete (unlike the previous step, where the structure of each screen was determined).
After all screens have been rendered, the UX/UI designer prepares a presentation of the project.
Usually a static presentation is enough, but we'll see interactive prototypes later on. See the example below and pay attention to the animation of the appearance of the elements and what happens when the user clicks on the movie card.
After a successful presentation and approval, the project moves on to the layout and programming stage. They can run in parallel. To start typesetting, Frontend–developers need all icons, pictures, illustrations in separate — resources.
Resources are prepared and exported by the UX/UI–designer. What is layout, the next paragraph explains.
Layout – is writing code that allows you to get static pages (without transitions between screens). Such pages have all interface elements, visually everything looks like a finished product. These pages open in the browser, but as soon as you press some button or want to follow a link (try to interact) — nothing happens.
Drawing an analogy with a microwave oven, at this stage, layout designers only create a front panel with handles, a door and a case — frontend. Other parts (magnetron, control board, roller) that provide the functionality of the – missing.
To perform this stage, layout designers use the following technologies:
- HTML (HyperText Markup Language) — hypertext markup language, which defines the elements of a web page and its content;
- CSS (Cascading Style Sheets) — cascading style sheets that set the appearance of pages;
- JS (JavaScript) — programming language, with which at this stage you can "revive"; some interface elements: add micro-animations, make the slider work, and so on.
Frequent use of frontend–frameworks — a set of tools and ready-to-use components that work on top of HTML, CSS, and JS. This greatly reduces development time.
Bootstrap — the most popular frontend framework that includes design templates for web forms, buttons, labels, typography, navigation blocks and other components.
Programmers or backend–developers create the functional part of the site, everything that makes the elements of the microwave front panel (frontend) work. This whole system is invisible and hidden inside, but it is what brings the web site to life and allows it to respond to user actions. In a microwave oven, this will be a magnetron, a control board and a — backend.
Backend developers use a wide variety of programming languages and technologies. Here are just a few of them:
- HTML, CSS & JS — everything that layout designers use;
- PHP (PHP: Hypertext Preprocessor) — a programming language widely used for developing web applications. For you to understand the essence, the PHP language allows you to dynamically generate HTML–code, in response to the prevailing circumstances and user actions;
- MySQL — database management system. Allows websites to store and process information. For example, user accounts and their posts on a social network.
Programming should not be intimidated, as in design everything is thought out so that its tools provide maximum flexibility and efficiency in solving problems.
Moreover, most graphic editors have their own programming language similar to JavaScript (the one used by layout designers and frontend–developers). This allows you to automate routine actions.
I'll give you a real-life example from graphic design. You need to draw 10,000 (ten thousand) tickets with a unique barcode, seat and save each of them in a separate file. Manually, it will take you weeks of work. In addition, the more tickets, the higher the chance of making a mistake. By writing a script in Adobe Illustrator in Javascript and executing it, you will receive all the necessary materials within 10 minutes.
During the development process, each new feature is thoroughly tested by testers and QA–specialists:
- Manual — the tester launches the site and goes through all user scenarios, trying to identify errors in the work;
- Automatic — A QA specialist writes a script that launches a real browser and performs all actions instead of a person.
Sometimes regular users are involved for testing, but they are warned that the site is not yet ready and may contain errors. This is called open beta testing.
Deploy or web site deployment — is the process of transferring and launching a website on a server on the Internet. The fact is that the development of the site is carried out on the computers of the developers themselves, therefore, only they can visit them.
System Administrators and devops–engineers keep the website running smoothly. Incidentally, these jobs are done in a terminal that uses a symbolic GUI.
Read IT Professions Jobs Overview. It contains additional specialties that are not mentioned in this lesson. Of these new specialties, try to understand and write at what step in the creation of the site they can be involved and why.
Send your answers to Instagram direct @frusia.pro (indicate that this is the second lesson) or leave it here in the comments under the article. I will give an answer for each homework.
Now we know what steps the process of creating a new site consists of and what specialists are involved in this. In the next part, we will focus on the typical tasks of a UX/UI designer and figure out what software is used.
Follow me on Instagram - @frusia.pro - stay up to date with announcements of new lessons, check homework in stories, ask questions, and you will also find many useful posts about design.
Stay tuned!