ݺߣ

ݺߣShare a Scribd company logo

White Space

•
•
Apptension
Apptension

White Space czyli krótka historia pustej przestrzeni i jej zabójcza rola w projektowaniu. Nasz Digital Designer, Jakub Paniączyk wystąpił na drugiej edycji TipiUX w Poznaniu, gdzie opowiadał o niedocenionej roli przestrzeni jako integralnej części komunikacji wizualnej, burzliwej historii pustki i narodzinach minimalizmu.

1 of 17
Download to read offline
A P P T E N S I O N J A K U B P A N I Ą C Z Y K
E W O L U C J A P O J Ę C I A P R Z E S T R Z E N I Typografia jako środek o charakterze typowo komunikacyjnym stanowi dobry przykład tego, jak na przestrzeni wieków zmieniał się stosunek człowieka do białej powierzchni i funkcjonalności grafiki. Tak naprawdę dopiero narodziny tzw. Nowej Typografii, opisanej przez Jan Tschichold'a spowodowały, że bierny element tła zyskał status aktywnej części kompozycji. Ruch Nowej Typografii stawiał przede wszystkim na elastyczność metod projektowania i wykorzystanie techniki. Odchodził od tradycji, która była ograniczeniem wolności twórczej. Celem podejmowanych działań projektowych była tutaj funkcja, standaryzacja. Degradowano pojęcie formy dla formy, czerpano inspiracje z malarstwa abstrakcyjnego. 0 2
E W O L U C J A P O J Ę C I A P R Z E S T R Z E N I Nowa Typografia była również bardziej oryginalna niż przedwojenna a jej ideologia miała charakter o podłożu kognitywnym. Wśród kolorów pierwszeństwo zyskała czerwień, która tworzy najsilniejszy kontrast z tradycyjną czernią. Pod uwagę brane były również odcienie żółci i niebieskiego jako barwy, które nie ulegają rozproszeniu. Porzucono dekoracyjną funkcję koloru na rzecz jego specyficznych właściwości psychofizycznych. Nadrzędne znaczenie zyskała również przestrzeń negatywna, która służyła do wzmocnienia lub osłabienia określonych efektów. 0 3
K I E L I C H B E A T R I C E W A R D E "Wyobraź sobie butelkę wina. Niech to będzie twój ulubiony gatunek i rocznik, niech wino przyjemnie połyskuje głębokim karmazynem. Na stole stoją dwa kielichy. Jeden ze szczerego złota z kunsztownymi zdobieniami. Drugi z czystego kryształu, cienkiego jak bańka mydlana i tak jak ona przeźroczysty. Nalewasz i wypijasz; a ja na tej podstawie stwierdzę, czy jesteś koneserem wina. Jeżeli bowiem sam trunek nie dostarcza ci dość wrażeń, będziesz chciał mieć poczucie, że pijesz z naczynia wartego tysiące funtów; jeśli zaś należysz do ginącego gatunku miłośników tego napoju bogów, wybierzesz kryształ, gdyż on nie skrywa, lecz ujawnia piękno tego, co zawiera„ 0 4
White Space
White Space
F U N K C J A B I A Ł E J P R Z E S T R Z E N I Pojęcia white space czy negative space odnoszą się do przestrzeni między elementami kompozycji. Wbrew nazwie przestrzeń ta nie musi być biała czy nawet pusta. To tło, próżnia o niewielkim lub zerowym obciążeniu kognitywnym dla użytkownika , która wymusza jego uwagę na pozostały kontent, stanowi jego uzupełnienie i nieodzowną część. W grafice projektowej kluczową rolą czystej przestrzeni jest budowanie hierarchii wizualnej między elementami UI oraz kierowanie wzroku użytkownika na strategiczne punkty interakcji. Co więcej, jeśli w projekcie mamy do czynienia z typografią, white space pozwala poprawić funkcjonalność i czytelność tekstu. 0 7
O B S Z A R Y D Z I A Ł A N I A Harmonijny rozkład pustej przestrzeni wpływa na efektywność z jaką człowiek skanuje tekst w witrynach internetowych. Zachowanie prawidłowych odległości między znakami wpływa na wygodę oraz szybkość z jaką człowiek rozpoznaje i łączy litery. S K A N O W A N I E C Z Y T E L N O Ś Ć Biała przestrzeń spełnia ważną rolę w wizualnym zagospodarowaniu powierzchni, a więc przekłada się bezpośrednio na estetykę projektu. Natłok bodźców wizualnych kojarzy się nam podświadomie z zaciętą konkurencją, walką o przestrzeń reklamową i co za tym idzie obniżaniem kosztów oraz jakości produktu. E S T E T Y K A W R A Ż E N I E J A K O Ś C I 0 8
White Space
White Space
K L A S Y F I K A C J A Dotyczy większych odległości między elementami. Oddziałuje na flow wizualne użytkownika, czyli kolejność percepcji. Dotyczy mniejszych odległości między elementami. Wpływa przede wszystkim na czystość i przejrzystość projektu, M A K R O P R Z E S T R Z E Ń M I K R O P R Z E S T R Z E Ń Otoczenie pustką elementu o nadrzędnym znaczeniu oraz umiejscowienie go w centralnej części kompozycji to skuteczna metoda skierowania na niego uwagi. Minimalna odległość elementów niezbędna do prawidłowej nawigacji, dostrzegania aktywnych elementów interfejsu oraz przeglądania kontentu bez frustracji. P R Z E S T R Z E Ń A K T Y W N A P R Z E S T R Z E Ń P A S Y W N A 1 1
White Space
White Space
White Space
White Space
Ź R Ó D Ł A Landing page produktu Oculus rift [na:] https://www.oculus.com/en-us/rift/ [dostęp: 22.05.2016] Okładka Elementare Typografi: Typografischen Mitteilungen, 1925 [na:] http://www.typolexikon.de/typographie/ [dostęp: 22.05.2016] Okładka Épreuve des caractères de la fonderie de Briquet, 1757 [na:] http://luc.devroye.org/fonts-40550.html [dostęp: 22.05.2016] Serwis ecommerce marki OVER [na:] https://overclothing.com/ [dostęp: 10.01.2017] Strona internetowa [na:] theafrix.com [dostęp: 10.01.2017] Zdjęcia kielichów [na:] zarahome.com [dostęp: 10.01.2017] 1 7 Ź R Ó D Ł A O N L I N E
Ź R Ó D Ł A Cao Jerry, Ellis Matt, Stryjewski Krzysztof, Zięba Kamil, Consistency UI Design. Creativity without confusion, UXPin, Gdynia 2015. Cao Jerry, Ellis Matt, Stryjewski Krzysztof, Zięba Kamil, White Space in Web UI Design: Mastering the Power of Nothing, UXPin, Gdynia 2015. Tidwell Jenifer, Projektowanie interfejsów. Sprawdzone wzorce projektowe, Helion, Gliwice 2012. Tschichold Jan, Nowe życie druku, [w:] Widzieć/Wiedzieć, wybór Jacek Mrowczyk, Krakter, Kraków 2011. Warde Beatrice, Kryształowy kielich, czyli druk powinien być niewidoczny, [w:] Widzieć/Wiedzieć, wybór Mrowczyk Jacek, Krakter, Kraków 2011. Weinschenk Susan, 100 rzeczy, które każdy projektant powinien wiedzieć o potencjalnych klientach, Helion, Gliwice 2013. Ź R Ó D Ł A P I S E M N E 1 8 O P R A C O W A N I E : J A K U B P A N I Ą C Z Y K

More Related Content

White Space

  • 1. A P P T E N S I O N J A K U B P A N I Ą C Z Y K
  • 2. E W O L U C J A P O J Ę C I A P R Z E S T R Z E N I Typografia jako środek o charakterze typowo komunikacyjnym stanowi dobry przykład tego, jak na przestrzeni wieków zmieniał się stosunek człowieka do białej powierzchni i funkcjonalności grafiki. Tak naprawdę dopiero narodziny tzw. Nowej Typografii, opisanej przez Jan Tschichold'a spowodowały, że bierny element tła zyskał status aktywnej części kompozycji. Ruch Nowej Typografii stawiał przede wszystkim na elastyczność metod projektowania i wykorzystanie techniki. Odchodził od tradycji, która była ograniczeniem wolności twórczej. Celem podejmowanych działań projektowych była tutaj funkcja, standaryzacja. Degradowano pojęcie formy dla formy, czerpano inspiracje z malarstwa abstrakcyjnego. 0 2
  • 3. E W O L U C J A P O J Ę C I A P R Z E S T R Z E N I Nowa Typografia była również bardziej oryginalna niż przedwojenna a jej ideologia miała charakter o podłożu kognitywnym. Wśród kolorów pierwszeństwo zyskała czerwień, która tworzy najsilniejszy kontrast z tradycyjną czernią. Pod uwagę brane były również odcienie żółci i niebieskiego jako barwy, które nie ulegają rozproszeniu. Porzucono dekoracyjną funkcję koloru na rzecz jego specyficznych właściwości psychofizycznych. Nadrzędne znaczenie zyskała również przestrzeń negatywna, która służyła do wzmocnienia lub osłabienia określonych efektów. 0 3
  • 4. K I E L I C H B E A T R I C E W A R D E "Wyobraź sobie butelkę wina. Niech to będzie twój ulubiony gatunek i rocznik, niech wino przyjemnie połyskuje głębokim karmazynem. Na stole stoją dwa kielichy. Jeden ze szczerego złota z kunsztownymi zdobieniami. Drugi z czystego kryształu, cienkiego jak bańka mydlana i tak jak ona przeźroczysty. Nalewasz i wypijasz; a ja na tej podstawie stwierdzę, czy jesteś koneserem wina. Jeżeli bowiem sam trunek nie dostarcza ci dość wrażeń, będziesz chciał mieć poczucie, że pijesz z naczynia wartego tysiące funtów; jeśli zaś należysz do ginącego gatunku miłośników tego napoju bogów, wybierzesz kryształ, gdyż on nie skrywa, lecz ujawnia piękno tego, co zawiera„ 0 4
  • 7. F U N K C J A B I A Ł E J P R Z E S T R Z E N I Pojęcia white space czy negative space odnoszą się do przestrzeni między elementami kompozycji. Wbrew nazwie przestrzeń ta nie musi być biała czy nawet pusta. To tło, próżnia o niewielkim lub zerowym obciążeniu kognitywnym dla użytkownika , która wymusza jego uwagę na pozostały kontent, stanowi jego uzupełnienie i nieodzowną część. W grafice projektowej kluczową rolą czystej przestrzeni jest budowanie hierarchii wizualnej między elementami UI oraz kierowanie wzroku użytkownika na strategiczne punkty interakcji. Co więcej, jeśli w projekcie mamy do czynienia z typografią, white space pozwala poprawić funkcjonalność i czytelność tekstu. 0 7
  • 8. O B S Z A R Y D Z I A Ł A N I A Harmonijny rozkład pustej przestrzeni wpływa na efektywność z jaką człowiek skanuje tekst w witrynach internetowych. Zachowanie prawidłowych odległości między znakami wpływa na wygodę oraz szybkość z jaką człowiek rozpoznaje i łączy litery. S K A N O W A N I E C Z Y T E L N O Ś Ć Biała przestrzeń spełnia ważną rolę w wizualnym zagospodarowaniu powierzchni, a więc przekłada się bezpośrednio na estetykę projektu. Natłok bodźców wizualnych kojarzy się nam podświadomie z zaciętą konkurencją, walką o przestrzeń reklamową i co za tym idzie obniżaniem kosztów oraz jakości produktu. E S T E T Y K A W R A Ż E N I E J A K O Ś C I 0 8
  • 11. K L A S Y F I K A C J A Dotyczy większych odległości między elementami. Oddziałuje na flow wizualne użytkownika, czyli kolejność percepcji. Dotyczy mniejszych odległości między elementami. Wpływa przede wszystkim na czystość i przejrzystość projektu, M A K R O P R Z E S T R Z E Ń M I K R O P R Z E S T R Z E Ń Otoczenie pustką elementu o nadrzędnym znaczeniu oraz umiejscowienie go w centralnej części kompozycji to skuteczna metoda skierowania na niego uwagi. Minimalna odległość elementów niezbędna do prawidłowej nawigacji, dostrzegania aktywnych elementów interfejsu oraz przeglądania kontentu bez frustracji. P R Z E S T R Z E Ń A K T Y W N A P R Z E S T R Z E Ń P A S Y W N A 1 1
  • 16. Ź R Ó D Ł A Landing page produktu Oculus rift [na:] https://www.oculus.com/en-us/rift/ [dostęp: 22.05.2016] Okładka Elementare Typografi: Typografischen Mitteilungen, 1925 [na:] http://www.typolexikon.de/typographie/ [dostęp: 22.05.2016] Okładka Épreuve des caractères de la fonderie de Briquet, 1757 [na:] http://luc.devroye.org/fonts-40550.html [dostęp: 22.05.2016] Serwis ecommerce marki OVER [na:] https://overclothing.com/ [dostęp: 10.01.2017] Strona internetowa [na:] theafrix.com [dostęp: 10.01.2017] Zdjęcia kielichów [na:] zarahome.com [dostęp: 10.01.2017] 1 7 Ź R Ó D Ł A O N L I N E
  • 17. Ź R Ó D Ł A Cao Jerry, Ellis Matt, Stryjewski Krzysztof, Zięba Kamil, Consistency UI Design. Creativity without confusion, UXPin, Gdynia 2015. Cao Jerry, Ellis Matt, Stryjewski Krzysztof, Zięba Kamil, White Space in Web UI Design: Mastering the Power of Nothing, UXPin, Gdynia 2015. Tidwell Jenifer, Projektowanie interfejsów. Sprawdzone wzorce projektowe, Helion, Gliwice 2012. Tschichold Jan, Nowe życie druku, [w:] Widzieć/Wiedzieć, wybór Jacek Mrowczyk, Krakter, Kraków 2011. Warde Beatrice, Kryształowy kielich, czyli druk powinien być niewidoczny, [w:] Widzieć/Wiedzieć, wybór Mrowczyk Jacek, Krakter, Kraków 2011. Weinschenk Susan, 100 rzeczy, które każdy projektant powinien wiedzieć o potencjalnych klientach, Helion, Gliwice 2013. Ź R Ó D Ł A P I S E M N E 1 8 O P R A C O W A N I E : J A K U B P A N I Ą C Z Y K