20 przykładów wykorzystania białej przestrzeni w projektowaniu stron internetowych
Powiedzmy, że jesteś w bibliotece. Wcale nie byłoby miło, gdybyś nie mógł się poruszać z powodu przepełnionych półek i korytarzy, podczas gdy bibliotekarz nieustannie podpowiadał ci o najnowszych książkach, które przybyły. Tak samo jest z białą przestrzenią używaną w projektowaniu stron internetowych: daje ona przestrzeń do oddychania wielu elementom witryny.
Biała przestrzeń jest niezwykle ważna w projektowaniu stron internetowych ze względu na użyteczność i czytelność oraz podkreśla poszczególne elementy. Wyobraź sobie, jak by to było, gdyby było wiele słów sklejonych razem. User experience z pewnością byłoby bardzo nieprzyjemne, a zrozumienie komunikatów na stronie wymagałoby wiele wysiłku.
Biała przestrzeń jest również znana jako „przestrzeń ujemna” i odnosi się do pustej przestrzeni wokół i między kilkoma elementami projektu lub układu strony. Jest również znana jako „pomieszczenie do oddychania”. I nie musi być biała. Właściwie każda kolor będzie pasował, o ile tworzy czysty i ładny projekt. Nawet jeśli przestrzeń ujemna niczego nie zawiera, może zdefiniować i uwydatnić przestrzeń pozytywną.
Biała przestrzeń – element aktywny
Przestrzeń negatywowa została uznana za element pasywny, ale odgrywa niezwykle ważną rolę w zwiększaniu ekspozycji marki i poprawianiu całego układu wizualnego. Tworzenie i dostarczanie wspaniałego doświadczenia użytkownika to coś więcej niż używanie białej przestrzeni, ale nie możemy zaprzeczyć ogromnemu znaczeniu tego elementu. Prowadzi użytkowników po stronie, tworzy wyrafinowany i harmonijny układ, komunikuje, co wymaga większej uwagi na stronie internetowej i ułatwia skanowanie.
Biała przestrzeń jest używana między kilkoma elementami, takimi jak paski boczne, teksty, stopki, nagłówki i obrazy. Zagracona strona, zwłaszcza jeśli w tekście nie ma hierarchii, pogarsza szybkość czytania i rozumienia.
Negatywna przestrzeń może stać się równie cenna jak sama treść. Dotyczy to szczególnie ważnych marek, ponieważ dodaje nuty elegancji.
Rola białej przestrzeni w projektowaniu stron internetowych
Istnieją dwa rodzaje białej przestrzeni: biała przestrzeń mikro i makro. Mikro biała przestrzeń to przestrzeń między tymi mniejszymi elementami: między literami, słowami, elementami listy, między obrazem a podpisem. Pomyśl na przykład o gazecie internetowej. Musi mieć miejsce wokół znaków i między akapitami, aby treść była łatwa do odczytania i nadawała gazecie wrażenie przejrzystości i lekkości.
Makroprzestrzeń oznacza przestrzeń między większymi elementami, która jest bardzo wykorzystywana na przykład w przypadku witryny Google. Ma przejrzysty projekt, skupiając się na głównym celu strony, podczas gdy inne aspekty nie są tak podkreślane.
Adobe Kuler jest odpowiednim narzędziem do sprawdzenia, jak tworzona witryna wygląda pod względem kolorów. Możesz tworzyć, edytować i przesyłać różne schematy kolorów.
Ponadto, jeśli masz wątpliwości i nie wiesz, jakie czcionki byłyby bardziej odpowiednie, wypróbuj Google Webfonts. Wybierz różne czcionki i zobacz, jak przeplatają się z białą przestrzenią.
Jeśli nie masz pewności, gdzie i jak używać białych znaków podczas tworzenia i dostosowywania witryny, Balsamiq może być pomocny. Pomaga pracować szybciej i łatwiej, odtwarzając szkic na tablicy, ale za pośrednictwem komputera.
Ponieważ wszystkie strony internetowe mają formularze internetowe. Niezwykle ważne jest, gdzie je umieścisz i jak wykorzystasz ujemną przestrzeń w tym kontekście. A ponieważ tworzenie formularzy internetowych zwykle wiąże się z kodowaniem, potrzebujesz narzędzia, które uprości pracę i zaoszczędzi Twój czas. Narzędzie do tworzenia formularzy internetowych 123ContactForm nie wymaga kodowania i jest idealne również wtedy, gdy do zbudowania formularza internetowego używasz białej przestrzeni.
Biała przestrzeń może być aktywna i pasywna. Aktywna negatywna przestrzeń prowadzi czytelnika od jednego elementu do drugiego, tworzy harmonię i może znacznie lepiej pozycjonować markę. Biała przestrzeń pasywna to w rzeczywistości biała przestrzeń otaczająca zewnętrzną stronę strony lub puste obszary wewnątrz treści, co czasami jest uważane za zły projekt.
Przestrzeń ujemna zapewnia równowagę, dobry ogólny przepływ i wpływa na czytelników, sprawiając, że dłużej pozostają na stronie. Dotyczy to nie tylko gazety internetowej, ale każdej strony internetowej. Czasami projektanci stron internetowych mają do czynienia z różnymi platformami, rozdzielczościami ekranu lub przeglądarkami. Dlatego istnieją ćwiczenia kompozycyjne dla studentów projektowania stron internetowych. Te ćwiczenia pomagają im uświadomić sobie znaczenie negatywnej przestrzeni i jak efektywnie z niej korzystać.
Przestrzeń ujemna ma ogromny wpływ. Dowiedz się dlaczego!
Biała przestrzeń daje mózgowi wizualne wskazówki dotyczące tego, które elementy są oddzielone, a które należą do siebie. Najlepszy przykład składa się z kilku wierszy numerów telefonów lub adresów e-mail w witrynie oddzielonych spacją, co sygnalizuje mózgowi, że każdy z nich to inna sekwencja i niezbyt długa liczba.
Jeśli jest więcej białej przestrzeni, strona internetowa będzie wyglądać bardziej elegancko. Takie użycie negatywnej przestrzeni jest powszechne w drogich i eleganckich magazynach dla kobiet. Prawie wszystkie reklamy mają dużo białej przestrzeni, jest wystarczająco dużo miejsca na zdjęcia w tle, a tekstów jest mało.
Przeciwnym przykładem jest bezpośrednia reklama e-mailowa, którą wszyscy otrzymaliśmy przynajmniej raz. Pamiętasz, że było tak mało negatywnej przestrzeni w połączeniu z wieloma i dużymi blokami tekstu, które nie wyglądały dobrze? Ma więc ogromny wpływ. Dlatego projektanci stron internetowych muszą o tym pamiętać przed utworzeniem i dostosowaniem konkretnej witryny.
Istnieje kilka podstawowych zasad tworzenia dobrego projektu strony internetowej. Ujemna spacja powinna oddzielać elementy takie jak nagłówek, stopka i nawigacja. Następnym razem, gdy będziesz projektować stronę, przeanalizuj bardziej marginesy i dopełnienie, zamiast zastanawiać się, ile miejsca potrzebujesz na jakiś tekst.
Klienci powinni również rozumieć znaczenie białej przestrzeni
Jeśli masz wątpliwości lub jeśli Twoi klienci nie do końca rozumieją znaczenie negatywnej przestrzeni, oto co możesz zrobić: zbudować swój projekt na dwa różne sposoby. Jeden z mniejszą ilością negatywnej przestrzeni, aby przekazać bardziej praktyczny i tańszy ton, a drugi z większą ilością białej przestrzeni, aby uzyskać wyrafinowane wrażenie. Pamiętaj, że powinieneś użyć tych samych elementów w swoich dwóch projektach. Jedyne, co powinieneś zrobić inaczej, to zmienić odstępy między wszystkimi tymi elementami.
Być może najlepszym sposobem, aby zobaczyć, jak wykorzystywana jest biała przestrzeń i dowiedzieć się więcej o jej znaczeniu, jest przyjrzenie się kilku stronom internetowym. Mogą inspirować i pomagać w przyszłych projektach. Wystarczy spojrzeć na poniższe strony internetowe, uwolnić swoją wyobraźnię, a efekty będą doskonałe!
Madebysofa.com wykorzystuje białą przestrzeń, aby stworzyć czysty, minimalistyczny wygląd. W ten sposób nacisk kładzie się na kategorie stron internetowych i linki.
Vertigo Visual zachowuje prostotę i wykorzystuje dużo białej przestrzeni, aby dodać odrobinę stylu i osobowości.
Cultured Code to przykład, w którym biała przestrzeń nie jest biała, ale jasnoniebieska. Istnieje również kilka kolorowych elementów geometrycznych, które poprawiają niektóre kategorie.
Philip House NYC ma dużo białej przestrzeni. Celem jest przyciągnięcie uwagi i ulepszenie niektórych obrazów i kategorii prezentowanych na stronie internetowej.
Zbudowany przez Buffalo bardzo mądrze wykorzystuje białą przestrzeń. Podkreśla wszystkie kategorie i logo. Na środku strony znajduje się kilka kolorowych sekcji, które prowadzą do ważnych informacji. Podczas przewijania w dół można zauważyć, że nadal dominuje spacja, ale uwaga nadal skupia się na innych sekcjach.
Ditto to także strona internetowa, która wykorzystuje białą przestrzeń, aby dodać wyrafinowania i elegancji. Jednocześnie przestrzeń ujemna służy lepszej prezentacji produktów.
Metta Skincare ma elegancki wygląd. Nacisk kładziony jest na produkty, USP i kategorie stron internetowych.
Fell Swoop zawiera białą przestrzeń, aby wywołać emocje i zwiększyć zaangażowanie użytkowników.
Attitude Design łączy białą przestrzeń z „kolorową” białą przestrzenią, aby zwrócić uwagę na kilka kluczowych punktów na stronie internetowej. Proste ale efektywne!
Witryna Super Real ma nutę elegancji i wyrafinowania dzięki białej przestrzeni. Przestrzeń ujemna służy tutaj do uwydatnienia głównych kategorii.
Handiemail ma prosty, biały układ, który przyciąga uwagę odwiedzających. Wszystko jest tak łatwe do odczytania dzięki tak przejrzystemu projektowi.
Suki to strona internetowa, która niemal natychmiast przyciąga Twoją uwagę. To niesamowite, jak negatywna przestrzeń przeplata się z obrazami, filmami i wezwaniami do działania. Tylko spójrz!
Tom Reinert to strona internetowa, na której przewaga białej przestrzeni rozdziela wiele elementów. Ogólne wrażenie to czysta, piękna i łatwa do odczytania strona.
Webydo wykorzystuje negatywną przestrzeń, wykorzystując ją wokół obrazów, kolumn i wezwań do działania, aby zaprezentować różne części witryny, dane kontaktowe i nie tylko.
PlainWhite to kolejny świetny przykład białych znaków używanych w projektowaniu stron internetowych. Jak widać tutaj, prowadzi wzrok i przyczynia się do ładnego i przewiewnego projektu. W ten sposób wszystkie kategorie witryn są pięknie wyświetlane.
Beanstalk to świetny przykład na to, że biała przestrzeń jest nie tylko „biała”. Tworzy harmonię, równowagę, sprawia, że strona wygląda na uporządkowaną i podkreśla treść.
Pulp Fingers pokazuje również skuteczność „kolorowej” negatywnej przestrzeni. Tutaj mamy odważny kolor, który podkreśla wiadomości, wezwania do działania, przyciski mediów społecznościowych, pola kontaktowe i kategorie witryn.
No Leath ma białą przestrzeń, która w rzeczywistości jest jasnoszarym odcieniem w połączeniu z dużą grafiką, aby jak najlepiej zaprezentować swoje produkty.
Dropbox jest zwolennikiem negatywnej przestrzeni. Ta strona pokazuje, że mniej znaczy więcej. A osiąga się to poprzez zachowanie tylko tych elementów, które są naprawdę ważne. Biała przestrzeń zwiększa czytelność i użyteczność, dzięki czemu wszystko na stronie jest niezwykle łatwe do odczytania i zrozumienia.
Something Splendid ma dużo białej przestrzeni połączonej z kolorowymi elementami. Dzięki temu strona jest niezwykle łatwa w nawigacji. Dodatkowo interakcja z taką witryną jest przyjemnym doświadczeniem. Każda kategoria jest bardziej zauważalna, bez zaśmiecania projektu.
To tylko kilka z tych stron internetowych, które dobrze wykorzystują białą przestrzeń. Chociaż biała przestrzeń jest kontrowersyjnym elementem, znajdziesz wiele witryn, które z niej korzystają, ze względu na jej zalety. Jeśli jest używana tak, jak powinna, ujemna przestrzeń przyczynia się do wspaniałych doświadczeń użytkowników.
Biała przestrzeń często powoduje tarcia między projektantami stron internetowych a ich klientami. Czasami klienci nie chcą widzieć pustego miejsca na swojej stronie, myśląc, że trzeba je zapełnić treścią. Dlatego projektanci muszą tłumaczyć swoim klientom rolę negatywnej przestrzeni.
Wyartykułowanie wpływu tego może być trudne, przynajmniej dla początkujących. Niemniej jednak nie myśl o białej przestrzeni jako o „pustej przestrzeni”, bez znaczenia. Tak, może wyglądać na puste i zwyczajne, ale pamiętaj, że użyłeś go przede wszystkim dlatego, że naprawdę poprawia ogólny projekt, a nie dlatego, że nie było tam nic więcej do dodania. Wyjaśnienie tego klientom może być trudne, ale mam nadzieję, że ten artykuł Ci w tym pomoże.