Prostota jest kluczem – odkrywanie minimalistycznego projektowania stron internetowych

Minimalistyczne projektowanie stron internetowych to nie tyle konkretna estetyka projektu, co zbiór zasad lub wytycznych dotyczących projektowania. W praktyce przestrzeganie tych zasad skutkuje prostym projektem strony internetowej, który wykorzystuje tylko najistotniejsze elementy, aby osiągnąć pożądany efekt od odwiedzających.

Wraz z wszechobecną koncepcją „mniej znaczy więcej”, zasady te obejmują stosowanie technik, takich jak ograniczona paleta kolorów i negatywna przestrzeń.

Mniej znaczy więcej z minimalistycznym projektowaniem stron internetowych

„Mniej znaczy więcej” to prawdopodobnie jedno z najczęściej słyszanych motta minimalistycznych, niezależnie od tego, czy mówi się o projektowaniu stron internetowych, czy jakiejkolwiek innej formie minimalizmu. Ale co to tak naprawdę oznacza w kontekście minimalistycznego projektowania stron internetowych?

Czasami łatwiej jest dowiedzieć się, czym jest minimalistyczny design, najpierw przyglądając się temu, co nie jest minimalistyczne. Oto jeden skrajny przykład:

Chociaż strona internetowa Ling's Cars najwyraźniej odnosi niesamowity sukces, regularnie tworzy listy najgorzej zaprojektowanych istniejących witryn. Tyle się dzieje. Każdy może na to spojrzeć i od razu wiedzieć, że nie jest minimalistyczny.

Niemniej jednak istnieje wiele dobrze zaprojektowanych witryn, które również nie są minimalistyczne. Weźmy na przykład ten:

Ta strona jest pięknie zaprojektowana, ale między animacjami, teksturowanym tłem, elementami kolażu i typografią zdecydowanie nie jest minimalistyczna. Niekoniecznie każdy konkretny element sam w sobie sprawia, że ​​nie pasuje on do minimalistycznej definicji projektowania stron internetowych — jest to bardziej połączenie wszystkich tych elementów.

Minimalistyczny design skupia się na tworzeniu atrakcyjnych projektów przy mniejszej liczbie wydarzeń. Jednym z kluczy do osiągnięcia tego jest ciągłe usuwanie elementów, aż projekt się zepsuje. „Przerwy” w tym przypadku należy interpretować jako niespełnienie już potrzeb i pragnień użytkownika.

Minimalny projekt strony internetowej pozwala wyróżnić treść

Jednym z najbardziej przekonujących argumentów przemawiających za minimalistycznym projektowaniem stron internetowych jest to, że pozwala on treści naprawdę wyróżniać się i błyszczeć. Właśnie dlatego prosty projekt strony internetowej jest pierwszym wyborem tak wielu artystów, fotografów, a nawet niektórych pisarzy. Chcą, aby ich kreatywne treści były w centrum uwagi, a nie elementy projektu stworzone przez kogoś innego.

Weźmy na przykład stronę internetową Iana Jonesa. Zajmuje się projektowaniem graficznym i cyfrowym oraz fotografią. Jego strona internetowa skupia się bezpośrednio na treści, a także zawiera kilka interesujących elementów projektu (takich jak tło siatki) i subtelne animacje. Efektem końcowym jest minimalistyczny projekt interfejsu użytkownika, który sprawia, że ​​jego praca błyszczy.

Strona internetowa scenarzysty i reżysera filmowego Artemy'ego Ortusa to kolejny oszałamiający przykład minimalistycznego designu, który skupia się na jego pracy. Element pokazu slajdów tworzy mnóstwo wizualnego zainteresowania bez tworzenia bałaganu projektowego.

Witryna Coopera Perkinsa to kolejny piękny przykład minimalistycznego designu, który wykorzystuje animacje do tworzenia zainteresowania bez bałaganu.

Każda decyzja dotycząca interfejsu użytkownika i UX musi być zamierzona

Z pozoru minimalistyczny design wydaje się być łatwiejszy do opanowania niż style projektowe, które wydają się bardziej złożone. W rzeczywistości jest na ogół odwrotnie.

Minimalistyczny design stawia każdy element projektu z przodu i na środku. Każdy wybór dokonany przez projektanta stron internetowych jest widoczny dla każdego odwiedzającego. Podczas gdy bardziej skomplikowane wizualnie projekty mogą powodować drobne błędy lub pomyłki praktycznie niewidoczne (mile widziana korzyść dla wielu początkujących projektantów), proste projekty stron internetowych nie zapewniają takiego samego zasięgu.

Motyw WordPress Narratora jest doskonałym przykładem witryny, w której wiele uwagi poświęcono drobnym elementom, które łączą wszystko ze sobą. Bez dodawania wizualnego bałaganu, linie, symbole strzałek i proste szare tła dla różnych elementów nadają witrynie połysk, którego czasami brakuje w minimalistycznych projektach.

Strona internetowa Inlay na pierwszy rzut oka wydaje się niezwykle minimalistyczna. Przewijanie ujawnia animacje i bardziej złożone ekrany, ale ogólna ekstremalna minimalistyczna atmosfera utrzymuje się przez cały czas.

Aplikacje mogą również czerpać korzyści z minimalistycznego wyglądu. Prosta konstrukcja tej aplikacji Word Counter sprawia, że ​​bardzo łatwo można zobaczyć wszystkie oferowane przez nią funkcje bez konieczności bardziej formalnego wdrażania. Łatwo powiedzieć, że każda podjęta decyzja projektowa była zamierzona, z naciskiem na użyteczność.

Wykorzystaj negatywną przestrzeń

Prawdopodobnie jednym z najważniejszych elementów dobrego minimalistycznego projektowania stron internetowych jest wykorzystanie negatywnej przestrzeni. Minimalistyczny design dotyczy zarówno tego, czego nie ma, jak i tego, co jest.

Negatywna przestrzeń, zwana również „białą przestrzenią”, to pusta lub otwarta przestrzeń wokół elementów projektu i/lub treści, która nadaje im definicję. To prawda, że ​​czasami ta przestrzeń nie zawsze jest naprawdę pusta i może być wypełniona teksturą tła, wzorem lub kolorem. Ale to wciąż przestrzeń, która nie jest „używana” w tym samym sensie, co inne elementy witryny.

Platoon Branding Studio wykorzystuje dużą negatywną przestrzeń wokół typografii w nagłówku, dzięki czemu wyróżnia się i natychmiast przyciąga wzrok.

Nagłówek Nohau jest podobny, z dużą ilością białych przestrzeni otaczających ich typ.

Negatywną przestrzeń można również wykorzystać do tworzenia interesujących kształtów lub obrazów w projekcie, który może nie być od razu oczywisty.

To logo z The Bronx Zoo i bawi się przestrzeniami między nogami żyraf. To sylwetki drapaczy chmur.

Twórz dramat za pomocą fotografii, typografii i kontrastu

To, że projekt jest prosty lub minimalistyczny, nie oznacza, że ​​nie może być również dramatyczny. Niektóre z najczęstszych sposobów tworzenia dramatu w minimalistycznym projekcie obejmują użycie fotografii, typografii i kontrastu (zarówno pod względem koloru, jak i między elementami projektu).

Duże zdjęcia, w tym tła fotograficzne, to świetny sposób na dodanie wielu wizualnego zainteresowania do projektu, a jeśli zostaną zrobione dobrze, z pewnością pasują do minimalistycznej estetyki projektu. Aby uzyskać jak największy efekt, najlepiej unikać zdjęć, które są naprawdę zajęte. Zdjęcia w minimalistycznym designie same w sobie powinny być przynajmniej nieco minimalistyczne (łącznie z prostą paletą kolorów i wykorzystaniem negatywnej przestrzeni).

Witryna Wildsmith Skin używa dużego zdjęcia na ekranie startowym wraz z inną uderzającą typografią. Od razu rzuca się w oczy, a podzielone zdjęcie to wybór rzadziej spotykany.

Iglucraft to kolejny doskonały przykład strony, która wykorzystuje duże zdjęcia, nie tylko na głównym ekranie, ale w całej witrynie. Animacje przejścia są brane pod uwagę i zwiększają ogólne wrażenia użytkownika.

Oprócz dużych fotografii, duże ilustracje i filmy można również wykorzystać w minimalistycznych projektach internetowych.

Witryna In Focus wykorzystuje w ich tle animacje, ilustracje i filmy. Chociaż strona nie jest od razu intuicyjna, jej odkrywanie i używanie jest bardzo zabawne.

Typografia to kolejny obszar, w którym minimalistyczni projektanci robią naprawdę fajne rzeczy.

Weźmy pod uwagę typografię KANEKO, organizacji non-profit zajmującej się kulturą i sztuką. Wzór i kolor nakładki na czcionkę w ich nagłówku są tak samo stymulujące wizualnie, jak wiele zdjęć lub ilustracji, ale w zupełnie inny sposób.

Production Portugal wykorzystuje mieszankę typografii jednolitej i liniowej na dużych tłach wideo, wykorzystując dwie techniki, które dodają dramatyzmu.

Witryna Kobu ma nie tylko dobry kontrast między kolorami używanymi na każdym ekranie, ale także między różnymi ekranami używanymi w całym tekście. Wyróżnia każdy projekt jako odrębną cechę.

Hierarchia typograficzna

Ponieważ każda decyzja musi być przemyślana w minimalistycznym projekcie strony internetowej, ważne jest, aby poświęcić czas na stworzenie jasnego poczucia hierarchii typograficznej. Hierarchia typograficzna jest szczególnie ważna, gdy typ musi rozróżniać różne typy treści bez większej pomocy innych elementów projektu.

Na przykład, gdy osoba odwiedza minimalistyczną stronę internetową, powinna być w stanie natychmiast rozpoznać tytuł, nagłówki, treść i nawigację, bez konieczności czytania treści. Najlepszym sposobem na osiągnięcie tego jest wyraźny kontrast między tymi elementami.

Blog InVision Inside Design wykorzystuje przejrzystą hierarchię typograficzną, aby oddzielić tytuł, nagłówki i treść.

Chociaż rozmieszczenie i techniki, takie jak używanie różnych kolorów dla różnych elementów typograficznych, znacznie przyczyniają się do osiągnięcia tego celu, określenie różnych elementów za pomocą rozmiaru, wagi i stylu jest co najmniej równie ważne.

Motyw Stills WordPress wykorzystuje przejrzystą hierarchię typograficzną, aby odróżnić nagłówki od treści.

Nawet najbardziej minimalistyczne projekty powinny generalnie zawierać co najmniej trzy poziomy hierarchii typograficznej: nagłówki (które można również wykorzystać w tytule), podtytuły oraz treść lub kopię tekstu. Często istnieje wiele poziomów podtytułów, ale w żadnym wypadku nie jest to wymagane. Niektórym witrynom uchodzi na sucho używanie dwóch poziomów (a niektóre nawet wybierają tylko jeden, choć w większości przypadków nie jest to zalecane).

Prosta nawigacja

Jednym z obszarów, w którym załamuje się wiele minimalistycznych witryn, jest tworzenie przyjaznej dla użytkownika nawigacji. Jest to szczególnie powszechne w przypadku bardziej złożonych witryn z dużą liczbą stron.

Najlepsze paski nawigacyjne są nadal podstawą minimalistycznego designu. Najczęściej spotykane są proste linki tekstowe, czasem z podmenu. Typografię, kolory, kształty i inne elementy projektu można dostosować do ogólnego wyglądu i stylu witryny. Ale są inne opcje.

Dwa inne bardzo popularne wzorce projektowania nawigacji, które można znaleźć w minimalistycznych projektach internetowych, to menu hamburgerów i kebabów. Menu hamburgerów składa się z trzech lub czterech poziomych linii (wariacje czasami używają pionowych linii, ale idea jest taka sama), podczas gdy menu kebabu składają się z trzech kropek.

Pomimo problemów z użytecznością, niesławne menu hamburgerów — które stało się uniwersalnym skrótem do ukrywania nawigacji — jest tutaj na miejscu, ponieważ zmniejsza bałagan wizualny.

Nilton Clothing wykorzystuje trzy linie offsetowe do stworzenia swojego menu hamburgerów, wybór, który stał się popularną alternatywą dla trzech pasujących linii.

Umieszczenie kolorowego tła za menu hamburgerów RFTB sprawia, że ​​się wyróżnia.

Najczęściej menu hamburgerów będzie używane do głównej nawigacji, podczas gdy menu z kebabem mogą być używane do takich rzeczy, jak menu ustawień lub inne typy podmenu. Chociaż oba stają się coraz bardziej powszechnymi elementami nawigacyjnymi, niektórzy projektanci wciąż dodają tekst wskazujący, że hamburger jest menu. Jest to szczególnie przydatne, jeśli witryna nie jest skierowana do użytkowników obeznanych z technologią.

Minimalistyczne palety kolorów

Istnieje wiele szkół myślenia na temat tego, co składa się na minimalistyczną paletę kolorów. Wiele minimalistycznych witryn używa tylko dwóch kolorów. Inni używają trzech, czterech lub więcej. Sama paleta kolorów nie stworzy ani nie zepsuje minimalistycznego projektu strony internetowej.

Witryna Pittori di Cinema używa trzykolorowej palety dla swojej strony głównej (kursor jest czerwony, a tło jest żółte z czarną czcionką).

Witryna Zeusa Jonesa zawiera wiele kolorów, a każda sekcja ma inny kolor dopełniający. Bloki kolorów wyraźnie wyznaczają sekcje, pozostając minimalistyczne.

Witryna Dot Lung wykorzystuje żywą paletę fioletu, czerwieni i bieli. Tworzy poczucie energii i nowoczesności przy zachowaniu minimalistycznej kolorystyki.

Witryna Flowowa korzysta z dwukolorowej palety, ale kolor tła stale się zmienia. To wyjątkowe podejście do bardzo minimalistycznej palety.

Istnieje wiele możliwych podejść do stworzenia palety kolorów dla prostego projektu strony internetowej. Ale podobnie jak wszystkie elementy minimalistycznego projektu, każdy wybór musi być zamierzony i poprawiać ogólne wrażenia użytkownika.

Wniosek

Największym wyzwaniem związanym z minimalistycznym designem jest to, że projektanci nie mają się za czym ukryć. Każdy element projektu musi udowodnić swoją wartość. Każdy element musi być wybrany celowo i perfekcyjnie zaimplementowany, aby sam projekt się wyróżniał.

Projektanci stron internetowych, którzy podchodzą do minimalistycznego projektowania jako łatwiejszego niż inne style projektowania, często są zaskoczeni ilością wysiłku, czasu i umiejętności wymaganych do stworzenia produktu, który może osiągnąć swoje cele pod względem zachowania i doświadczenia użytkownika przy zachowaniu prawdziwie minimalistycznej estetyki.

• • •

Dalsza lektura na blogu Toptal Design:

• Brutalistyczne projektowanie stron internetowych, minimalistyczne projektowanie stron internetowych i przyszłość internetowego UX
• Skeuomorfizm, Płaska konstrukcja i rozwój projektowania pism
• Przestań robić śmieci: przewodnik po projektowaniu trwałych interfejsów
• Skorzystaj ze swojej inspiracji – przewodnik po tablicach nastroju
• Sztuka kradzieży: jak zostać mistrzem projektantów