Creating a website requires coordinated work from a team of specialists. Let's figure out in what order and by whom websites are developed; what role UX/UI design plays in this process.
I want to point out that in this lesson everything is written in the simplest language possible to make it easier to understand the essence of the process. Once this is grasped, I will move on to specialized terms in the next lesson.
But today, we won't get away without new words.
A website can be called a web application if it has not only a static set of pages but also includes close interaction with the user and responds to their actions to solve additional tasks (besides providing information).
Example site: personal blog. Example web application: logo generator based on your preferences, which works using neural networks.
The more complex the project, the more specialists need to be involved and the more stages must be completed. Below are all the stages of web development in which a UX/UI designer is involved, marked with a checkmark
Note that each company has its own processes, so the stages, their components, and even the sequence may differ somewhat. In large corporations, the steps may be more complex, while in small studios, there will be fewer stages.
- Stage 1. Analytics, information gathering, writing technical specifications
- Stage 2. Finding references, creating mood boards
- Stage 3. UX design
- Stage 4. UI design
- Stage 5. Project presentation
- Stage 6. Resource export
- Stage 7. Markup (HTML/CSS/JS)
- Stage 8. Programming
- Stage 9. Testing
- Stage 10. Deployment
- Homework
- Conclusions
Before starting the development of a risky project, such as a startup, it makes sense to conduct market research: try to analyze competitors, forecast profits. This is done by both business analysts and consulting companies. Often, the analysis and gathering of information about the project is handled by a UX designer.
The stage is encountered in high-budget projects. Sometimes business analysts are kept on staff permanently for conducting new research.
Based on the collected information and conducted analysis, a technical specification – a detailed description of the requirements and necessary functions that the website must have after the development is completed, is written. Project manager and product owner (read as product owner) are also involved in writing the technical documentation.
After the approval of the concept, the technical task is handed over to the UX/UI designer for finding UX solutions and visual style. That is, we look among already existing sites and try to «guess» what the client will like. For this, sites such as Behance and Dribbble are often used. All successful examples found are collected into a collection called moodboard (pronounced as moodboard).
Next, the mood boards are shown to the client, highlighting what they liked and what they didn't. This stage helps save time and skip many unsuccessful attempts to find the right visual style.
At this stage, the UX–designer begins to design the user experience. That is, they come up with how the user will interact with the system. Depending on the level of detail and processing of the technical assignment, it may be necessary:
- Identify typical users and their tasks — allows you to understand who and how will be using the website, detailing each function in the form of a sequence of actions:
![User story]( "User story")
- Break the website into screens and display them as a diagram. The logic of transitions between screens is defined at this stage:
![User flow]( "User flow")
- Sketch the screens — based on previous stages, the UX designer determines the layout and sizes of the interface elements. At this stage, colors and visual style are ignored, usually everything is drawn in black and white or gray colors. Below is an illustration of the same screen drawn in different styles, which does not affect the intended content:
![Screen sketches]( "Screen sketches")
- Create interactive screens – based on previous sketches, the UX designer creates an interface that users can interact with (it becomes interactive). This means you can click on buttons and the website will respond (for example, transition between screens). At the same time, you save time as programming is not required. You can already test your solution on real users since the interface works as if in a browser. Perhaps, this is one of the most impressive and useful stages. You can conduct research and observe how users perform certain tasks, what problems they encounter, and fix them immediately.
![Prototype]( "Prototype")
For simple websites, such as landing pages, blogs, and online stores, it is often sufficient to just sketch the screens (this stage is often ignored in studios as well). This is logical, as these types of websites can be developed in such detail that the UX design is already obvious.
But one should not underestimate this stage for complex and unique web applications. For example, you need to create an interface for counting calories and nutrients based on your diet. This task can be solved in many ways, but it is impossible to determine the best one based solely on static sketches. However, by testing the interface on users and gathering their feedback, conclusions can be drawn.
Once the sketches for all screens have been finalized, the UI designer works on finding the visual style: selecting the color palette, fonts, icons, building the grid, and refining the key sketches from the previous stage.
When the visual style is approved by the client, the remaining screens are designed. It is important to understand that at this stage it is decided how the site will look after development is completed (unlike the previous stage, where the structure of each screen was determined).
After all the screens are designed, the UX/UI designer prepares the project presentation.
Usually, a static presentation is sufficient, but later we will get acquainted with interactive prototypes. See the example below and pay attention to the animation of element appearances and what happens when the user clicks on the movie card.
After a successful presentation and approval, the project moves into the layout and programming stage. They can be executed in parallel. To start laying out, Frontend developers need all icons, images, and illustrations in separate files, which are called resources.
The preparation and export of resources is done by the UX/UI designer. What layout is, is explained in the next paragraph.
Layout – is the writing of code that allows for the creation of static pages without transitions between screens. Such pages have all the interface elements, visually everything looks like a finished product. These pages open in a browser, but as soon as you click a button or want to follow a link (you try to interact) — nothing happens.
Drawing an analogy with a microwave oven, at this stage, the developers create only the front panel with handles, doors, and the casing — this is frontend (read as frontend). Other components (magnetron, control board, roller), which provide the functionality of the device, are missing.
This work is carried out by layout designers and frontend developers using the following technologies:
- HTML (HyperText Markup Language) — a markup language for the web used to define the elements of a web page and its content;
- CSS (Cascading Style Sheets) — a style sheet language used to describe the presentation of the HTML elements we created;
- JS (JavaScript) — a programming language that can be used to «bring to life» certain interface elements: add micro-animations, make a slider work, and so on.
Frontend frameworks are often used – a set of tools and ready-to-use components that operate based on HTML, CSS, and JS. This significantly reduces development time.
Bootstrap — the most popular frontend framework, which includes design templates for web forms, buttons, labels, typography, navigation blocks, and other components.
Programmers or backend developers (pronounced as backend) are involved in creating the functional part of the website, everything that makes the elements of the microwave oven's front panel (frontend) work. This entire system is invisible and hidden inside, but it is what allows the website to respond to user actions. In a microwave oven, this would be the magnetron, control board, and roller — backend.
Backend developers use a wide range of programming languages and technologies. I will mention just a few of them:
- HTML, CSS & JS — all that is used by web developers;
- PHP (PHP: Hypertext Preprocessor) — a programming language widely used for web application development. To help you understand the essence, the PHP language allows for the dynamic generation of HTML code in response to prevailing circumstances and user actions;
- MySQL — a database management system. It allows websites to store and process information. For example, user accounts and their messages in a social network are stored in databases.
There is no need to be afraid of programming, just like in design, everything is thought out so that its tools provide maximum flexibility and efficiency in solving problems.
Moreover, in many graphic editors the embedded programming language is similar to JavaScript (the same one used by layout designers and frontend developers). This allows for the automation of routine tasks.
I will provide a real example from the field of graphic design. You need to draw 10,000 (ten thousand) tickets with a unique barcode, seat assignment, and save each of them in a separate file. Doing this manually will take you weeks of work. Moreover, the more tickets there are, the higher the chance of making a mistake. By writing a script in Adobe Illustrator using JavaScript and executing it, you will get all the necessary materials in 10 minutes.
During the development process, each new feature is thoroughly tested by testers and QA specialists (QA is pronounced kew-eye – Quality Assurance in translation quality check):
- Manual — the tester launches the site and goes through all user scenarios, trying to identify errors in the operation;
- Automated — the 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 ready yet and may contain errors. This is called open beta testing.
Deploy (pronounced as deploy) or website deployment — is the process of transferring and launching a site on a server in the Internet. The fact is that the development of the site is done locally. That is, the site being developed is not available on the Internet at all.
System administrators and devops engineers (pronounced as devops) ensure the smooth operation of the website. By the way, this work is performed in a terminal that uses a character graphic interface.
Due to the large influx of people wanting to take the course, I am making the homework checks paid. 30$ (at the current exchange rate), 10% will be donated to the Armed Forces of Ukraine. For one donation, I will check homework for all lessons.
For payment details, message me on Instagram @frusia.pro
The course and lessons remain free of charge.
Homework is no longer checked for citizens of Russia.
Read the article IT Industry Professions: Overview of Positions. It contains additional specialties that were not mentioned at all in this lesson. Think carefully and indicate these new specialties, as well as the stage at which they are involved. Try to explain your reasoning. If you did not find a new specialty for any stage, we will skip it.
Send your answers in direct on Instagram @frusia.pro. Indicate that this is the second lesson or leave a comment here under the lesson. I will respond to each homework.
Now we know what steps are involved in the process of creating a new website and which specialists are involved in this. In the next part, we will focus on the typical tasks of a UX/UI designer and explore which programs are used for this.
Follow me on Instagram @frusia.pro, stay updated on announcements of new lessons, watch homework checks in stories, ask questions, and look forward to many helpful posts about design.
Continue learning
