In this introductory lesson, visual examples will demonstrate what design is in general and what key concepts it includes. You will master the basic terms that everyone has heard of but that no one fully understands.
Design — is the result of designing an object with the aim of solving the set tasks, including artistic (aesthetic).
In a broad sense, design focuses not only on artistic construction but also on solving a number of other problems: technical, social, consumer, etc.
Design must solve the problem as effectively as possible.
Depending on the context and the task at hand, design addresses problems in different ways. Let's take a look at the advertising materials of Coca–Cola from 1949:
From the perspective of graphic design, this poster should attract attention, identify the brand, and encourage action — all of this is the task of design in this context. Composition, color theory, and typography help us with this — tools and principles of design. A key role here is also played by copywriting or how the text is written, but that is already an adjacent discipline.
Now let's focus on the red vending machine (which is depicted in the sky with an allegory of steaming).
Look at the size of the doors, the placement of the handle and coin acceptor. Pay attention to the hinges and the cooling grille. Every detail is crafted and has a reason for being made this way.
This is the result of industrial design – a separate complex discipline that takes into account completely different aspects: functional requirements for the product, technical constraints, structure, and layout of components. To create such a design, engineering assistance or consultations with relevant specialists will be needed.
From what has been presented, it should be clear that design can be different, but each of its directions has boundaries and areas of application. We are going to study a very specific type of design — UX/UI дизайн for екранних графічних інтерфейсів.
Interface — is a set of tools for interaction between two systems. From English, interface means «place of collision». In the case of design, one of the systems is always a person.
Let's break down the UI (User Interface) user interface of the microwave.
The front panel includes several elements that we can customize according to our needs:
- Door with window and handle for opening — provides access to the food container and serves as an indicator. When heating is in progress, we see a light;
- Power knob — determines how strong the heating will be;
- Timer knob — sets how long the heating will take. Additionally, as soon as we set the time, the cooking process begins immediately. That is, this knob also acts as a switch.
All of the above are user interface elements.
On the example of our retro microwave oven, let's consider what UI and UX design are.
UI–design (User Interface Design) or user interface design – defines how the user interface looks, namely:
- Materials and Colors — metal and glass, cream and bronze colors;
- Style of Mechanical Elements — retro;
- Style of Icons and Text — flat, sans-serif font.
UX Design (User Experience) or interaction experience – defines how the user interacts with the interface, namely:
- Which interface elements to choose — instead of mechanical knobs, the UX designer could have installed a display with touch control and status indicators. They could also have installed an additional switch to turn the oven on/off or a button to open the door;
- Size and placement of interface elements — from which side to place the knob, what size window to install in the door, how large the dials should be.
The responsibilities of a UX–designer also include finding product use cases based on user roles. For example, in our case, several scenarios can be identified:
- Student heats frozen pizza before breakfast — it seems heating will be frequent, maybe it's worth considering a single button that automatically sets the power to 240 watts and the timer for 3 minutes?
- Mom bakes fish in foil — this can take a whole hour, it's worth thinking about a loud signal to indicate the end of cooking, at that moment mom may be in another room.
The interface of a microwave oven can be described as physical and even mechanical. But UX/UI designers work with graphical user interfaces. That is, all interface elements are located on the screen of a monitor or mobile device (smartphone, tablet).
It is very important to understand that the monitor screen of a desktop computer and the screen of a smartphone have important differences. Specifically, how we interact with them:
- On desktop computers a keyboard and mouse are used;
- On smartphones, tablets, and smartwatches only fingers are used instead of a mouse and keyboard. This imposes its own limitations. For example, a button on a mobile device cannot be made too small, as it is impossible to hit it with a finger.
So, UX/UI designers create graphical screen interfaces, namely design for:
- Websites — what we will study intensively;
- Mobile applications — we will only touch on the surface;
- Desktop applications.
Design for websites and mobile applications – this is what UX/UI designers work on 99% of the time. In this course, we will focus on design for websites, this is called web design.
For a better understanding, here are a few types of unusual interfaces. We will not be working with them, but they exist:
- Command Line Interface — one of the first computer interfaces still used by professionals today. It requires a high level of technical training but provides flexible and efficient control of the computer in return. It exclusively uses the keyboard for operation;
- Gesture Interface — control through hand gestures and a touchscreen. Touchless recognition is also possible. For example, the multimedia system in the latest BMW car models allows you to control the music volume with an intuitive twisting gesture of the index finger;
- Voice Interface — one of the most understandable ways to interact with computer systems using human speech. It is especially relevant when the device lacks a keyboard or when its use distracts from the main activity (for example, a driver on the road).
New interfaces continue to be developed today. Elon Musk's company Neuralink is working on creating a neurointerface that will enable direct interaction between the human brain and a computer. Just imagine how much the quality of the user experience will change when you can control the cursor with your thoughts and enter text without uttering a word.
Due to the large influx of those wishing to take the course, I am making the homework check paid. 30$ (at the current exchange rate), I will donate 10% to the Armed Forces of Ukraine. For one donation, I will check homework for all lessons.
For details, write in the direct messages on Instagram @frusia.pro
The course and lessons remain free of charge.
Homework will no longer be checked for citizens of Russia.
Analyze the interface of three objects. For example, an air conditioner, a car, a washing machine, or your personal items that you use regularly (the last option is better). Specifically — explain what the selected device has as UI (which parts and properties), and what constitutes UX (why you chose these elements and arranged them this way). Try to get to the essence. For instance, the handle is shaped in a way that makes it comfortable to hold.
If you are unable to complete this task, reread the section What is UX, UI design, and what is the difference? of this lesson.
As a more challenging task, analyze a object that has no buttons or electronics, for example, a spoon. Where are the UX and UI parts of the design?
Name one new type of interface that is not described in the lesson. They definitely exist, and you can even invent your own.
Send your answers via direct message on Instagram @frusia.pro. Don’t forget to mention that this is for the first lesson or leave your answer here in the comments under the lesson. Registration is not required.
For each answer, I will provide feedback, so you can ensure that you have understood the material correctly.
Today you became acquainted with the basic terms of design. Please make sure you know them well. Complete the homework in full before moving on to the next lesson. Review the lesson again after some time.
Follow me on Instagram @frusia.pro. Stay updated on announcements for new lessons, watch homework checks in stories, ask me questions, and you can also look forward to many useful posts about design.
Continue learning
