This introductory lesson will show you what design is in general and what key concepts it includes with illustrative examples. Get to know the basic terms that everyone has heard but no one understands.
Design — it is the result of designing an object in order to solve the set tasks, including artistic (aesthetic) ones.
In a broad sense, design implies not only artistic design, but also the solution of a number of other problems: technical, social, consumer, and so on.
Design should solve the problem with the minimum amount of funds with maximum efficiency.
Depending on context and task, design solves problems in different ways. Let's look at Coca–Cola promotional materials from 1949:
In terms of graphic design, this poster should attract attention, identify the brand, motivate — these are all design objectives in this context. Composition, color theory and typography help us with this — design tools and principles. copywriting or how the text is written also plays a key role here, but this is already a related discipline.
Now let's focus on the red soda machine (which is shown floating in the sky as an allegory).
Look at the size of the door, the location of the handle and the coin slot. Pay attention to the hinges and the cooling grille. Every detail has been worked out and has a reason why it is done the way it is.
This is the result of industrial design – a separate complex discipline that takes into account completely different aspects: functional requirements for a product, technical limitations, device and layout of parts. To create such a design, you will already need engineering help or consultations with relevant specialists.
From the above, you should understand that the design is different, but each of its subspecies has boundaries and applications. We are going to learn a very specific kind of design — UX/UI design for screen GUIs.
Interface — it is a set of tools for the interaction of two systems. From English interface means "a place of contact". In the case of design, one of the systems is always a person.
Let's break down the UI (User Interface) of the microwave oven.
The front panel includes several elements that we can customize depending on our needs:
- Door with window and opening handle — opens access to the food container and is an indicator (when the heating is on, we see the light);
- Power Knob — sets how hard to heat up the content;
- Timer Knob — sets how long to warm up. In addition, as soon as we set the time, the cooking process begins immediately. That is, this handle also serves as a switch.
All of the above are UI elements.
Using our retro microwave as an example, let's take a look at what UI and UX design are.
UI–design (User Interface Design) or user interface design – defines how the user interface looks like, namely:
- Materials and colors - metal and glass, beige and bronze;
- Mechanical style is retro;
- The style of icons and labels is flat, sans-serif.
UX–design (User Experience) or interaction experience – defines how the user will use the interface, namely:
- Which UI elements to choose — instead of mechanical UX handles, the designer could have put an LCD display with touch controls and status indicators. He could also install an additional switch to turn the oven on / off or a door open button;
- Size and position of interface elements — which side to put the handle on, what size window to install in the door, how big should the knobs be on the right.
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 distinguished:
- Student reheats frozen pizza before breakfast — it seems they will warm up often, maybe you should think about the only button that will automatically set the power to 240 watts and the timer for 3 minutes?
- Mom bakes fish in foil — it can take an hour, you should think about the loud signal for the end of cooking, at this moment mom may be in another room.
The interface in a microwave oven is physical and even mechanical. But UX/UI designers work with GUIs. That is, all interface elements are on the screen of a monitor or mobile device (smartphone, tablet).
It is very important to understand that a desktop monitor screen and a smartphone screen have important differences. Namely, how we interact with them interact:
- Desktops use keyboard and mouse;
- Smartphones, tablets and smartwatches use only fingers instead of a mouse and keyboard. This imposes its own requirements. For example, you can't make a button too small on a mobile device, as it will be impossible to hit with your finger.
So, UX/UI designers create graphical screen interfaces, namely design for:
- Web–sites — what we will study intensively;
- Mobile Apps — touched only in passing;
- Desktop applications.
Design for web–sites and mobile apps – this is what UX/UI designers work on 99% of the time. In this article series, we focus on design for web sites, this is called web design.
For a better understanding, here are a few more types of unusual interfaces. We will not work with them, but they exist:
- Symbol interface or command line — one of the first interfaces that is still used by professionals today. Requires high technical training, but allows you to quickly and flexibly manage your computer. Uses only the keyboard to work;
- Gesture interface — control with hand gestures and touch screen. Recognition without touch is also possible. So, for example, the multimedia system of the latest BMW models allows you to control the volume of music with an intuitive gesture of twisting your index finger;
- Voice interface — one of the most understandable ways to interact with computer systems is through human language. It is especially relevant when the device is devoid of 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 the creation of a neural interface that will provide direct interaction between the human brain and the computer. Just imagine how much the quality of user experience will change when you can control the cursor with your thought and dictate the text without saying a word.
Disassemble the interfaces of three things. For example, an air conditioner, a car, a washing machine, or your items that you use all the time (the latter is preferable). Namely — describe what the selected device has UI (what parts and properties), and what is UX (why they chose these elements and arranged them that way). Try to get to the bottom of it. For example, the handle is shaped so that it is comfortable to hold in your hand.
If you can't complete this task, then re-read the section What is UX, UI design and what is the difference? of this lesson.
As a challenge, paint an object that doesn't contain buttons or electronics, such as a spoon. Where are the UX and UI parts of the design?
Give at least one new type of interface that is not described in the lesson (they exist, you can also come up with your own).
Send your answers to Instagram Direct @frusia.pro (do not forget to indicate that this is for the first lesson) or leave it here in the comments under the article (registration is not required).
For each answer, I will give feedback, so you make sure that you have learned the material correctly.
Today you learned about the basic concepts in design. Please make sure you understand them well (do all your homework) before moving on to the next lesson. Re-read the article again after a while.
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!
