What is Visual Design?
| English | Polish |
|---|---|
Visual design aims to shape and improve the user experience through considering the effects of illustrations, photography, typography, space, layouts, and color on the usability of products and on their aesthetic appeal. To help designers achieve this, visual design considers a variety of principles, including unity, Gestalt properties, space, hierarchy, balance, contrast, scale, dominance, and similarity. | Projektowanie wizualne ma na celu kształtowanie i doskonalenie wrażeń użytkownika przez uwzględnienie wpływu ilustracji, fotografii, typografii, przestrzeni, układu i koloru na użyteczność produktów i ich estetyczny wygląd. Aby pomóc projektantom w osiągnięciu tego celu, projektowanie wizualne uwzględnia różne zasady, w tym spójność, Gestalt, przestrzeń, hierarchię, równowagę, kontrast, skalę, dominantę i podobieństwo. |
Visual design as a field has grown out of both user interface (UI) design and graphic design. It focuses on the aesthetics of a product and its related materials by strategically implementing images, colors, fonts, and other elements. A successful visual design ensures that content remains central to the page or function, and enhances it by engaging users and helping to build their trust and interest in the product (and, consequently, the brand). | Projektowanie wizualne jako dyscyplina wyłoniło się z projektowania interfejsu użytkownika (UI) i projektowania graficznego. Koncentruje się na estetyce produktu i związanych z nim materiałach przez przemyślane wykorzystanie obrazów, kolorów, czcionek i innych elementów. Udany projekt wizualny zapewnia, że zawartość stanowi centralną część strony lub funkcji i uwydatnia ją, przyciągając użytkowników i pomagając w budowaniu ich zaufania i zainteresowania produktem (a w konsekwencji marką). |
Visual design houses a wealth of issues for designers to bear in mind, ranging from the differences in cultural interpretations of the color red, to proper use of whitespace, to universal taboos such as the setting of red elements against blue backgrounds. It draws on a rich and lengthy history of the production of aesthetically pleasing, successful work. | Projektowanie wizualne obejmuje wiele zagadnień, o których projektanci powinni pamiętać, począwszy od różnic kulturowych w interpretacji koloru czerwonego, przez właściwe wykorzystanie pustej przestrzeni, aż po uniwersalne zakazy, takie jak ustawienie czerwonych elementów na niebieskim tle. Czerpie z bogatej i długiej historii tworzenia estetycznych, udanych dzieł. |
By considering how they can form and arrange visual elements to address the principles of good visual designs, designers can shape the user experience in order to elicit user responses and behaviors that suit the use and purpose of the product. Inconspicuous, small details of a product’s aesthetics can thus play a significant role in the design of the user experience. | Uwzględniając sposoby tworzenia i rozmieszczania elementów wizualnych zgodnie z zasadami poprawnego projektowania wizualnego, projektanci mogą kształtować wrażenia użytkowników w celu wywołania reakcji i zachowań, które są zgodne z przeznaczeniem produktu. Niepozorne, drobne szczegóły dotyczące estetyki produktu mogą zatem odegrać znaczącą rolę w kształtowaniu wrażeń użytkownika. |
Fundamental principles for good visual design
| English | Polish |
|---|---|
Unity. Good visual designs suggest a certain shared set of characteristics between everything shown on a page. This shouldn’t come at the expense of variety (too much similarity implies monotony) but it should be clear for a design that there is a conceptual link between everything that is displayed. | Spójność. Dobre projekty wizualne zawierają pewien wspólny zestaw cech widoczny we wszystkich elementach na stronie. Nie powinno się to odbywać kosztem różnorodności (zbyt duże podobieństwo oznacza monotonię), ale powinno być widoczne, że istnieje koncepcyjny związek między wszystkim, co jest wyświetlane na ekranie. |
Gestalt. The Gestalt is the understanding that when we see a design we tend to perceive the overall design as opposed to breaking it down into its constituent elements. | Gestalt. Gestalt polega na zrozumieniu, że kiedy widzimy projekt, mamy tendencję do postrzegania go jako całości, w przeciwieństwie do rozkładania go na elementy składowe. |
Space. The use of space is vital to delivering a design that doesn’t overwhelm users. There are whole books to be written about the use of white space (the space we don’t put anything in) and then there’s spacing between elements, between characters, etc. to consider too. | Przestrzeń. Wykorzystanie przestrzeni jest niezbędne do stworzenia projektu, który nie przytłacza użytkowników. Można by było napisać całe książki na temat wykorzystania pustej przestrzeni (przestrzeni, w której nic nie umieszczamy), a potem jeszcze trzeba byłoby zająć się odstępami między elementami, znakami itp. |
Hierarchy. It’s often the visual designer’s job to show the importance of different elements of the product/site by demonstrating this through visual hierarchies. The size of font used or the colour scheme and of course where things are actually positioned on page too. | Hierarchia. Często zadaniem projektanta wizualnego jest pokazanie znaczenia różnych elementów produktu/witryny za pomocą wizualnych hierarchii – rozmiaru użytej czcionki, kolorystyki i oczywiście rozmieszczenia elementów na stronie. |
Balance. The visual designer wants to create the impression that things are equally distributed that doesn’t mean that they have to be symmetrical but they should feel balanced. | Równowaga. Projektant wizualny chce stworzyć wrażenie, że rzeczy są równo rozłożone, co nie oznacza, że muszą być symetryczne, ale powinny być postrzegane jako wyważone. |
Contrast. The use of emphasis, sizes, directions, etc. can be used to make certain elements stand out and catch the user’s eye. | Kontrast. Za pomocą elementów akcentujących, rozmiarów, kierunków itp. można sprawić, że pewne elementy będą się wyróżniać i przyciągać uwagę użytkownika. |
Scaling. The use of scales in the visual aspects of design can catch a user’s attention and help signify the relationships between different elements of a site or application. | Skala. Zastosowanie skali w wizualnych aspektach projektu może przyciągnąć uwagę użytkownika i pomóc oznaczyć relacje pomiędzy różnymi elementami strony lub aplikacji. |
Dominance. Sometimes you want a user’s attention to be focused on a single item or single area before it wanders elsewhere. A graphic designer can manipulate colours, positions, sizes, etc. to achieve dominance for a single element and make it easier to anticipate how a user will respond in a given situation. | Dominanta. Czasami chcesz, aby uwaga użytkownika była skupiona na pojedynczym przedmiocie lub obszarze, zanim przejdzie on w inne miejsce. Grafik może zmieniać kolory, pozycje, rozmiary itp., aby przyciągnąć uwagę do pojedynczego elementu i przewidzieć reakcję użytkownika w danej sytuacji. |
Similarity. A graphic designer also adds the touches that make different areas of the same site or product similar enough to be readily identifiable as part of the same whole whilst carrying out different tasks. | Podobieństwo. Projektant graficzny dodaje również elementy, które sprawiają, że różne obszary tej samej strony lub produktu są na tyle podobne, że można je łatwo zidentyfikować jako część tej samej całości, mimo realizacji odmiennych zadań. |
What is a visual hierarchy?
| English | Polish |
|---|---|
Visual hierarchy is the order in which a user processes information on a page; its function to allow users to understand information easily. By assigning different visual characteristics to sections of information (e.g., larger fonts for headings), a designer can influence what users will perceive as being further up in the hierarchy. | Hierarchia wizualna to kolejność, w jakiej użytkownik przetwarza informacje na stronie; jej funkcją jest umożliwienie użytkownikom łatwego zrozumienia informacji. Poprzez przypisanie blokom informacji różnych cech wizualnych (np. większe czcionki nagłówków), projektant może wpływać na to, co użytkownicy będą postrzegać wyżej w hierarchii. |
The visual characteristics that a designer can use to influence users’ perception of the information are: | Cechami wizualnymi, za pomocą których projektant może oddziaływać na postrzeganie informacji przez użytkowników, są: |
– Size: the larger the element, the more attention it will attract. | – Rozmiar: im większy element, tym większą uwagę będzie przyciągał. |
– Color: bright colors are more likely to draw attention over muted ones. | – Kolor: żywe kolory mają większe szanse na przyciągnięcie uwagi niż te stonowane. |
– Contrast: dramatically contrasted colors will catch the eye easily. | – Kontrast: mocno skontrastowane kolory łatwo wpadną w oko. |
– Alignment: an element that breaks away from the alignment of others will attract more attention. | – Wyrównanie: element, który wystaje z szeregu, będzie przyciągał większą uwagę. |
– Repetition: repeating styles can give the impression that content is related. | – Powtarzanie: powtarzanie stylów może sprawiać wrażenie, że treść jest powiązana. |
– Proximity: closely placed elements will also appear related. | – Bliskość: elementy położone blisko siebie również będą wydawać się powiązane. |
– Whitespace: more space around elements will attract the eye toward them. | – Pusta przestrzeń: więcej przestrzeni wokół elementów będzie przyciągać do nich wzrok. |
– Texture and style: richer textures will attract more attention than flat ones. | – Tekstura i styl: dekoracyjne tekstury będą bardziej rzucać się w oczy niż te jednolite. |
When information design does not have a strong visual hierarchy, a user’s eye follows a predictable reading path. This path is culturally influenced, as it is connected to the standard reading direction of written text. In the Western world, two main left-to-right paths exist, which can be described as a Z and an F pattern. A designer has the opportunity to use visual hierarchy to reinforce these natural paths, or use visual characteristics to break such patterns so as to draw the viewer’s attention to a focal point. Thus, the successful manipulation of this hierarchy empowers designers to lead users, quite literally, along a cleverly devised visual journey to a goal. | Gdy projekt informacji nie ma wyraźnej wizualnej hierarchii, oko użytkownika podąża przewidywalną ścieżką czytania. Ścieżka ta jest uwarunkowana kulturowo, ponieważ wiąże się ze standardowym kierunkiem czytania tekstu pisanego. W świecie zachodnim istnieją dwie główne ścieżki czytania od lewej do prawej, które można określić wzorem Z i F. Projektant ma możliwość wykorzystania hierarchii wizualnej, aby wzmocnić te naturalne ścieżki lub wykorzystać cechy wizualne w celu przełamania tych wzorców i zwrócić uwagę użytkownika na dany punkt. Tak więc operowanie hierarchią pozwala projektantom na poprowadzenie użytkowników, całkiem dosłownie, dobrze zaplanowaną wizualną ścieżką do celu. |
Exercises:
Exercise 1.
Answer the questions.
- What does visual design aim to?
- What are the principles that visual design considers?
- What does visual design focus on?
- What issues should designers bear in mind?
- How can designers shape user experience?
- How do you understand the unity principle?
- What can you do to give prominence to a particular element on your website?
- What is a visual hierarchy?
- What are some visual characteristics that a designer can use to influence users’ perception of the information?
- Do you know any differences in the way people read?
Exercise 2.
Exercise 3.
Exercise 4.
Change the sentences into the passive voice.
- Visual design considers a variety of principles.
- Designers can shape the user experience.
- You shouldn’t break a design into its constituent elements.
- A hierarchy shows the importance of different things.
- The use of scales can catch a user’s attention.
- A successful hierarchy leads users to their goal.