What is UI design?
| English | Polish |
|---|---|
Also known as user interface design, UI design refers to the aesthetic design of a product’s user interface. It’s the process of creating interfaces of apps and websites with a focus on look and style. UI design typically refers to digital user interfaces, but also includes voice-controlled interfaces (VUI). | Znane również jako projektowanie interfejsów użytkownika, projektowanie UI odnosi się do estetyki projektu interfejsu użytkownika produktu. Jest to proces tworzenia interfejsów aplikacji i stron internetowych z dbałością o wygląd i styl. Projektowanie interfejsu użytkownika zazwyczaj odnosi się do cyfrowych interfejsów użytkownika, ale obejmuje również interfejsy sterowane głosem (VUI). |
A UI designer designs all the screens of a product, and creates the visual elements – and their interactive properties – that facilitate user interaction. To achieve this, they use things like patterns, spacing, text, and color. | Projektant interfejsu użytkownika projektuje wszystkie ekrany produktu i tworzy elementy wizualne oraz ich właściwości interaktywne, które ułatwią interakcję z użytkownikiem. Aby to osiągnąć, projektanci używają takich elementów, jak wzorce, odstępy, tekst i kolor. |
What is a user interface? A user interface is the point of human-computer interaction on an app, webpage, or device. This can include keyboards, display screens, and the appearance of a desktop. User interface elements usually fall into one of these four categories: | Co to jest interfejs użytkownika? Interfejs użytkownika to punkt interakcji człowieka z komputerem w aplikacji, na stronie internetowej lub w urządzeniu. Może obejmować klawiatury, ekrany, a także wygląd pulpitu. Elementy interfejsu użytkownika zwykle należą do jednej z czterech kategorii: |
1. Input Controls that allow users to input information into the system, e.g. an entry field that enables users to register with their email address. | 1. Kontrolki wprowadzania danych, które umożliwiają użytkownikom wprowadzanie informacji do systemu, np. pole wprowadzania danych, pozwalające użytkownikom na rejestrację za pomocą adresu e-mail. |
2. Navigational components that help users move around a product or website, such as a hamburger menu on an Android. | 2. Komponenty nawigacyjne, które pomagają użytkownikom poruszać się po produkcie lub stronie internetowej, jak menu hamburgerowe w systemie Android. |
3. Informational components, including notifications, progress bars, message boxes, that share information with users. | 3. Komponenty informacyjne, umożliwiające wymianę informacji z użytkownikiem, w tym powiadomienia, paski postępu, okna komunikatów. |
4. Containers that hold related content together, such as accordions – vertically stacked lists of items with show/hide functionality. | 4. Kontenery, które trzymają powiązane treści razem, takie jak menu rozsuwane (akordeonowe) – pionowo ułożone listy elementów z funkcją pokaż/ukryj. |
UI design disciplines, concepts, and practices
| English | Polish |
|---|---|
Let’s explore some of the disciplines, concepts, and theories that form the fundamental base of UI design. | Zbadajmy niektóre z dyscyplin, pojęć i teorii stanowiących fundamentalną podstawę projektowania interfejsów użytkownika. |
Gestalt principles Communication plays a central role in both UI and UX design, and the Gestalt Principles are widely employed by UI designers to help them understand how users interpret and process complex stimuli around them. Gestalt psychologists state that our minds have a tendency to group and organize elements and do so in predictable ways. Understanding how the user’s mind works helps UI designers to design interfaces that people will enjoy using. | Zasady Gestalt Komunikacja odgrywa kluczową rolę zarówno w projektowaniu UI, jak i UX, a zasady Gestalt są powszechnie stosowane przez projektantów interfejsów użytkownika, aby pomóc im zrozumieć, jak użytkownicy interpretują i przetwarzają złożone bodźce, które ich otaczają. Psychologowie Gestalt twierdzą, że nasze umysły mają tendencję do grupowania i organizowania elementów i robią to w sposób przewidywalny. Zrozumienie tego, jak działa umysł użytkownika, pomaga projektantom UI w projektowaniu interfejsów, z których użytkownicy będą korzystać z przyjemnością. |
Let’s take a quick snapshot of a few principles below: | Spójrzmy na poniższe cztery zasady: |
1. The principle of proximity states that we tend to perceive elements as a group when they are close to each other. | 1. Zasada bliskości mówi, że mamy tendencję do postrzegania elementów jako grupy, gdy są one blisko siebie. |
2. The principle of similarity dictates that we’re inclined to group elements that look like each other. | 2. Zasada podobieństwa oznacza, że jesteśmy skłonni grupować elementy, które wyglądają podobnie do siebie. |
3. Our mind tends to follow paths and group elements that are aligned with each other. This is the principle of continuity. | 3. Nasz umysł ma tendencję do podążania ścieżkami i grupowania elementów, które są do siebie dopasowane. Jest to zasada ciągłości. |
4. The principle of closure tells us that users need to understand the status of tasks. Whenever a product needs a little more time to complete a task, loaders inform us that the product is still working in the background. | 4. Zasada zamknięcia/domknięcia mówi, że użytkownicy muszą rozumieć status zadań. Zawsze, gdy potrzeba trochę więcej czasu na wykonanie zadania, komunikaty o ładowaniu informują nas, że produkt nadal działa w tle. |
UI design patterns Ever notice how most products follow particular design conventions, such as a drop-down menu or a top navigation bar? This repetition of common elements or features is known as UI design patterns. UI design patterns are general, reusable solutions to commonly occurring problems. Some common UI design patterns include: | Wzorce projektowe UI Czy kiedykolwiek zauważyłeś, że większość produktów jest zgodna z określonymi konwencjami projektowymi, takimi jak rozwijane menu lub górny pasek nawigacyjny? To powtórzenie wspólnych elementów lub funkcji jest znane jako wzorce projektowe interfejsów użytkownika. Wzorce projektowe UI to ogólne rozwiązania, które można stosować wielokrotnie do powszechnie występujących problemów. Niektóre popularne wzorce projektowania UI obejmują: |
1. Problem: What does the user want to do? 2. Context: When should the pattern be used? 3. Solution: What is the solution? 4. Examples: Where and how has the pattern been implemented before? | 1. Problem: Co użytkownik chce zrobić? 2. Kontekst: Kiedy należy wykorzystać wzorzec? 3. Rozwiązanie: Jakie jest rozwiązanie? 4. Przykłady: Gdzie i w jaki sposób wzorzec został wcześniej wykorzystany ? |
Most designers use UI design patterns to shape their work and, as a result, design similar-looking user interfaces. | Większość projektantów wykorzystuje wzorce projektowe UI do pracy i w rezultacie projektuje podobnie wyglądające interfejsy użytkownika. |
Responsive UI design Consisting of a mix of images, flexible grids and layouts, and a use of CSS, responsive web design responds directly to the user’s behavior and environment based on screen size, platform, and orientation. | Projektowanie responsywnych interfejsów użytkownika Składający się z połączenia obrazów, elastycznych siatek i układów oraz wykorzystujący CSS responsywny projekt strony reaguje bezpośrednio na zachowanie użytkownika i środowisko w oparciu o wielkość ekranu, platformę i orientację. |
Let’s look at an example. When viewing a traditional website on a desktop computer, the site might show three columns. If you look at the same website on a handheld device, it might force you to scroll horizontally, and certain elements may become hidden or distorted. By using responsive design, however, the website will automatically reconfigure the content to appear as a single column on the handheld device, and resize images rather than distort them. | Spójrzmy na przykład. Podczas przeglądania tradycyjnej strony internetowej na komputerze stacjonarnym, strona może wyświetlać trzy kolumny. W przypadku oglądania tej samej strony internetowej na urządzeniu przenośnym, może być wymagane przewijanie w poziomie, a niektóre elementy mogą zostać ukryte lub zniekształcone. Jednak w przypadku korzystania z responsywnego projektu witryna automatycznie skonfiguruje zawartość tak, aby wyświetlała się jako pojedyncza kolumna na urządzeniu przenośnym, a także zmieni rozmiar obrazów zamiast je zniekształcać. |
What does a UI designer do?
| English | Polish |
|---|---|
Ultimately, UI designers are responsible for ensuring the product’s interface is visually stimulating, easy to use, and in line with business goals. UI designers are also responsible for creating style guides or common languages that can be used across the business to establish consistency. | Ostatecznie, projektanci UI są odpowiedzialni za to, żeby interfejs produktu był wizualnie atrakcyjny, łatwy w użyciu i zgodny z celami biznesowymi. Projektanci UI są również odpowiedzialni za tworzenie przewodników stylu lub wspólnych języków, które mogą być używane w całej firmie w celu zapewnienia spójności. |
UI design is a multidisciplinary field, requiring UI designers to wear multiple hats as part of one role. While it’s largely a visual discipline, many people don’t realize that there’s a psychological aspect that is paramount to good UI design. | Projektowanie interfejsów użytkownika to dziedzina multidyscyplinarna, wymagająca od projektantów przyjmowania wielu ról w ramach jednej specjalności. Choć jest to w dużej mierze dyscyplina wizualna, wiele osób nie zdaje sobie sprawy z tego, że istnieje aspekt psychologiczny, który ma zasadnicze znaczenie w projektowaniu dobrych interfejsów użytkownika. |
UI designers need to understand how people work – and how each visual, interactive element shapes their experience – in order to design user-friendly interfaces. They conduct extensive research to predict what the user will expect, and design the app’s interface to ensure that it feels intuitive to navigate. UI designers also reflect on accessibility and inclusion, carefully weighing up what each design choice means for the end-user. | Projektanci UI muszą zrozumieć, jak użytkownicy pracują i jak każdy wizualny, interaktywny element kształtuje ich doświadczenia, aby zaprojektować przyjazne dla użytkownika interfejsy. Prowadzą oni rozległe badania, żeby przewidzieć, czego użytkownik będzie oczekiwał, i zaprojektować intuicyjny w nawigacji interfejs aplikacji. Projektanci UI zastanawiają się również nad dostępnością i otwartością, dokładnie analizując, co każde z wybieranych rozwiązań projektowych oznacza dla użytkownika końcowego. |
So what does a UI designer typically have on their to-do list? | Co więc projektant UI ma zazwyczaj na swojej liście rzeczy do zrobienia? |
– To design each individual screen of the product, paying close attention to information architecture and visual hierarchies | – Zaprojektować każdy ekran produktu, zwracając szczególną uwagę na architekturę informacji i hierarchię wizualną. |
– To ensure the designs of the product are responsive by testing the interface on various devices and screen sizes. | – Zapewnić responsywność produktu, testując interfejs na różnych urządzeniach i rozmiarach ekranu. |
– To design a suite of elements to be used across the product, including icons, buttons, and sliders. | – Zaprojektować zestaw elementów, które mają być używane w całym produkcie, w tym ikon, przycisków i suwaków. |
– To choose an awesome color palette for the interface, as well as thinking about the typography. | – Wybrać piękną paletę kolorów dla interfejsu, a także pomyśleć o typografii. |
– To design the interactivity of each UI element (what does a button do when the user clicks on it?). | – Zaprojektować interaktywność każdego elementu interfejsu użytkownika (co robi przycisk, gdy użytkownik w niego kliknie?). |
Source of English text: https://careerfoundry.com/en/blog/ui-design/what-is-ui-design-guide/
Exercises
Exercise 1.
Answer the questions
- What is a user interface?
- What is UI design?
- What do input controls allow users to do?
- What is the function of navigational components?
- What do information components include?
- What content does a container hold together?
- What are the four Gestalt principles?
- Why are design patterns useful?
- What is the benefit of responsive design?
- What are UI designers responsible for?