Brutalistyczne projektowanie stron internetowych, minimalistyczne projektowanie stron internetowych i przyszłość internetowego UX

Opublikowany: 2022-03-11

Czy strony internetowe stają się coraz bardziej chaotyczne, zagracone i niedopracowane? Czy łamane są zasady dobrego projektowania? Czy sieć staje się brzydka? Czy to nowy trend?

Jeśli jesteś jak większość projektantów i zwracasz baczną uwagę na to, co się dzieje, słyszałeś od jakiegoś czasu słowo „ brutalizm ”. Brutalistyczne strony internetowe odchodzą od przyjaznych dla użytkownika interfejsów, które od dawna są najlepszą praktyką w branży, i skupiają się na niedoskonałych, ręcznie zakodowanych stronach HTML. Wygląda na to, że projektanci odrzucają znane nam zasady UX, pozostawiając wszystko nieco chaotyczne.

Założenia eleganckiego, współczesnego designu są tak powszechne, że prawie nie myślimy o nich jako o wyborze stylistycznym. „Dobre” projektowanie stron internetowych to generalnie takie, które przestrzegają zasad minimalizmu. Czyste, proste, czytelne interfejsy — ale nie zawsze tak było. Cofnijmy zegar o kilka dekad.

Narodziny sieci

Projektowanie stron internetowych przeszło długą drogę od 1991 roku, kiedy została opublikowana pierwsza strona internetowa. Rewolucja internetowa rozpoczęła się od pierwszych stron internetowych, które były oparte wyłącznie na tekście przy użyciu pierwszej generacji HTML.

Pierwsza witryna World Wide Web w 1991 roku
Pierwszy w historii „projekt” strony internetowej, który został uruchomiony 6 sierpnia 1991 r.

Potem przyszedł Flash z tymi wszystkimi zwariowanymi animowanymi stronami, które wszyscy z pewnością pamiętają. Nadszedł rozwój CSS (Cascading Style Sheets), dając projektantom stron internetowych jeszcze większą kontrolę nad ulepszeniami, takimi jak kolor tła, rozmiar tekstu i style tekstu w kodzie. JavaScript dał nam rozwijane menu, zaawansowaną nawigację i formularze internetowe ze sprawdzaniem błędów.

Na początku nikt nie wiedział, co tak naprawdę oznacza „projektowanie stron internetowych”, a pionierzy sieci ustalali wzorce projektowe metodą prób i błędów. We wczesnej epoce projektowania stron internetowych używano układów, które nie zwracały uwagi na formalną semantykę i dostępność, stawiając zamiast tego na estetykę nad strukturą.

Witryna Google z 1998 r.
Witryna Google, 1998.

Aby zbudować i ustrukturyzować swoje projekty, projektanci w dużym stopniu polegali na elementach HTML, takich jak tabele, tabele zagnieżdżone i niewidoczne 1-pikselowe pliki dystansujące, dając im możliwość tworzenia bardziej skomplikowanych, wielokolumnowych układów. Stworzyło to dość nudne interfejsy.

Strona CNN.com z 2000 roku
Strona internetowa CNN, 2000.


Strona Enron z 2004 roku
Strona internetowa firmy Enron, 2004.

W połowie 2000 roku narodziły się strony internetowe z bardziej ostrożnym myśleniem za ich strukturą. Nawigacja znajdowała się na górze przeglądarki, a kategorie na lewym pasku. Strony internetowe były krótkie i wąskie, z treścią rozłożoną na wiele stron, aby nie zmuszać użytkowników do przewijania. Projektanci dowiedzieli się, co się sprawdziło i zaczęli tworzyć lepsze witryny, ustanawiając po drodze standardy i najlepsze praktyki.

Wraz z coraz większą liczbą opcji układu pojawiła się mieszanka hałaśliwych interfejsów użytkownika, pełnych obrazów i tekstu. Niektórzy zdyscyplinowani projektanci wciąż jednak stawiali na minimalizm.

Minimalistyczna estetyka

Trendy w projektowaniu przychodzą i odchodzą; jednak minimalizm jest językiem projektowania, który był obecny przez czas. To filozofia projektowania, która skupia się na uproszczeniu formy poprzez wykorzystanie najprostszych, najistotniejszych elementów projektu.

Minimalizm nie ogranicza się wyłącznie do projektowania stron internetowych. Pomyśl o wszystkich otaczających Cię elementach, które obejmują ten ideał projektu; łatwo połączyć minimalistyczne projekty z Nestem, Apple, Hermanem Millerem i wieloma innymi, które zainspirowały wielu minimalistycznych projektantów.

Minimalistyczny design Urządzenia domowe Nest
Nest pyszni się dyskretnym, prostym projektem produktu.


Herman Miller Eames Rosewood 670/671 Lounge Chair i osmański minimalistyczny design
Ponadczasowy, niezastąpiony klasyczny fotel biurowy Eames.


MacBook Pro od Apple minimalistyczny design
Elegancki, minimalistyczny styl to wizytówka Apple.

Co sprawia, że ​​wzornictwo Hermana Millera wciąż jest wspaniałe? To po prostu dobrze zaprojektowane przedmioty o ponadczasowym wyglądzie. Jego projekty bardzo dobrze sprawdzają się we współczesnych domach i wnętrzach – nadal są świeże i nowoczesne. Wiele jego prac ma minimalistyczny wygląd i nie można ich wiązać z konkretną modą. Nadal wytrzymują próbę czasu.

Minimalistyczne projekty jednego z najbardziej znanych grafików swojej epoki, Josefa Mullera-Brockmanna, są bardzo podobne do tych autorstwa Hermana Millera: ponadczasowe . Muller-Brockmann przyjął i opanował minimalizm w latach 40. i 50. XX wieku w postaci szwajcarskiego stylu projektowania.

Z jego projektu graficznego usunięto wszelkie zbędne lub zbędne dekoracje; każdy element jego planów miał swój cel. Myślenie projektowe stojące za tym podejściem sprawia, że ​​minimalistyczne projekty cyfrowe działają dziś bardzo dobrze.

Plakaty Josefa Mullera Brockmanna
Czysta, nowoczesna typografia i projekt plakatu autorstwa Josefa Mullera Brockmanna.

Jak minimalizm ugruntował się w epoce cyfrowej?

Historia zawsze znajduje sposób, aby nas dogonić. Podobnie jak w przypadku projektowania druku, minimalizm i stojąca za nim filozofia dogoniły projektowanie stron internetowych i inne cyfrowe artefakty. Pomyśl o tym, jak wyglądały witryny zaledwie kilka lat temu z błyszczącymi przyciskami, liniami i akapitami tekstu, a wszystko krzyczało o uwagę.

Potem pojawił się trend skeuomorficzny, w którym projektanci projektowali elementy naśladujące rzeczywiste przedmioty w przestrzeni cyfrowej. Pamiętasz skórzaną wyściółkę w Apple iCal?

Minimalne projekty są właściwie zamierzone. Jest to podejście projektowe, które usuwa wszystko, co niepotrzebne i skupia się na elementach, które mają przyciągnąć maksymalną uwagę – kładąc nacisk na treść.

Minimalistyczny ekran główny do projektowania stron internetowych
Skupienie się na mocnych stronach agencji cyfrowej za pomocą trzech prostych słów. (Konwój)


Strona główna ekranu z Chylak
Ten minimalistyczny projekt eCommerce kładzie nacisk na ubranie, usuwając wszelkie niepotrzebne elementy rozpraszające uwagę. (Odzież Chylak)


Minimalistyczny projekt aplikacji na iOS
Bez dodatkowego bałaganu użytkownicy mogą skupić się na kluczowych elementach interfejsu użytkownika dzięki minimalistycznemu projektowi aplikacji Invstr.

Korzyści z minimalistycznego designu

Minimalistyczne podejście projektowe przyjęło się z wielu innych powodów niż tylko wygląd. Nasze lepsze zrozumienie zachowań użytkowników, procesów myślenia projektowego oraz rozwój procesów projektowania zorientowanych na treść pomogły posunąć to myślenie do przodu. Niedawny ogromny wzrost użytkowników mobilnych był silnym punktem przyspieszenia w kierunku minimalizmu, z większym naciskiem na UX i użyteczność.

Ponieważ użytkownicy mają teraz dostęp do Internetu w ruchu przez cały czas, projektanci produktów muszą skoncentrować się na zapewnieniu tego, co jest absolutnie niezbędne w danej chwili: właściwych rzeczy we właściwy sposób i we właściwym czasie, gdzie projekt jest rozebrany do jego najbardziej fundamentalne cechy.

Korzystanie z urządzeń mobilnych stanowi teraz ponad połowę wszystkich wizyt w sieci, a wskaźnik ten będzie się tylko zwiększał. Responsywne projektowanie zmieniło zasady gry i zmusiło projektantów do „myślenia inaczej”. W dzisiejszych czasach, bardziej niż kiedykolwiek, responsywne lub adaptacyjne projektowanie jest koniecznością w świecie mobilnym, w którym minimalistyczne podejście do projektowania ma kluczowe znaczenie.

Przeciętnemu użytkownikowi minimalizm wydaje się prawdopodobnie najłatwiejszą rzeczą do zaprojektowania. Osiągnięcie idealnej równowagi przy użyciu najmniejszej ilości treści wizualnych i skupienie się tylko na podstawowych elementach z najwyższą elegancją jest w rzeczywistości bardzo, bardzo trudne.

Przyszłość minimalizmu

Powinniśmy myśleć o minimalizmie jako o ponadczasowym koncepcie, promieniującym elegancją i wyrafinowaniem, a nie o aktualnym trendzie lub prostej przemijającej fazie. Choć ponadczasowa i klasyczna, będzie ewoluować i poprawiać się, co widzieliśmy już od czasu jej wdrożenia na początku XX wieku.

Na przykład Material Design firmy Google był jedną z pierwszych głównych ewolucji w inspirowanym minimalizmem podejściu do projektowania „płaskich”. Projektanci Google zachowali prostotę i minimalizm, ale ulepszyli język projektowania za pomocą efektów cieni oraz koncepcji ruchu i głębi. Materiał obejmuje płaską konstrukcję ze specyficznym akcentem: naśladuje materiały ze świata rzeczywistego.

Witryna z wytycznymi Google do projektowania materiałów
Witryna z wytycznymi Google Material Design.

Minusy minimalizmu

Podobnie jak w przypadku innych elementów w życiu, zawsze musimy patrzeć na plusy i minusy. Wielu twierdzi, że dzisiejsze strony internetowe nie mają smaku i są w większości takie same. Wiesz — duży obraz bohatera lub wideo z nakładającym się tekstem, rząd ikon z tekstem i tak dalej. Każdy może poświęcić kilka minut swojego czasu i wymyślić 10 witryn, które wyglądają bardzo podobnie. Czy jest to odzwierciedlenie naszych stale zmieniających się zachowań i preferencji online?

Spójność projektowa i projektowanie pod kątem typowych zachowań użytkowników jest niezwykle ważne w każdym projekcie, ale nie możemy zapomnieć o wartości bycia wyjątkowym. Czy staliśmy się leniwi, czy też przestawiliśmy nasze myśli z unikalności na bardziej efektywną strategię user experience?

Strony docelowe o minimalistycznym designie
Dobrze wykonany, ale brakuje mu oryginalności. Duży główny obraz produktu, trochę tekstu i miniatury z tekstem.

Brutalizm w projektowaniu stron internetowych

Brutalizm może być postrzegany jako reakcja młodszego pokolenia na lekkość, optymizm i frywolność współczesnego wszechobecnego minimalistycznego projektowania stron internetowych.

Niektórzy to uwielbiają, niektórzy nienawidzą, a wielu innych po prostu tego nie rozumie: brutalistyczne strony internetowe.

Weźmy na przykład Craigslist. Craigslist należy uznać za „dziadka” brutalistycznych stron internetowych. Nie jest estetyczny i nigdy nie pojawi się na stronie www.awwwards.com. Czarny tekst, niebieskie linki, białe tło. To nie jest ładne. Nie musi tak być, ponieważ działa – i działa naprawdę dobrze. Znajdziesz to, czego potrzebujesz, aby kupić lub sprzedać bez zamieszania i bałaganu i bez żadnych obcych ruchomych części.

Craigslist strona internetowa w stylu brutalistycznym projektowanie stron internetowych
Craigslist to masa niebieskich linków. Barebone, funkcjonalny interfejs użytkownika.

Od momentu założenia w 1996 r. Craigslist utrzymuje swoją popularność pomimo – a może właśnie dzięki – niezwykle utylitarnego projektu. Projekt nie zmienił się w żaden znaczący sposób przez ostatnie 20 lat.

Być może zainspirowany przykładem Craigslist, brutalistyczny styl powraca. Oto świetne przykłady dobrze wykonanych projektów w stylu brutalistycznym.

Kup witrynę typu brutalist Design School
Szkoła projektowania zakupów przedstawia galerię prac w postaci zagraconego stosu kart na ziarnistym, gradientowym tle.


Przykład brutalistycznego projektu strony internetowej
Konsept83 czerpał inspirację z początków Internetu.


Przykład brutalnego projektu strony internetowej
Creative Show-off Utrecht wykorzystuje odważne kolory z brutalistycznym stylem projektowania.


Przykład strony internetowej brutalistycznego projektu strony internetowej
Nieszablonowy, brutalistyczny układ graficzny na stronie Slugza.

Te brutalistyczne strony internetowe cieszą się dużym zainteresowaniem. Dlaczego te strony internetowe nagle stały się tak popularne? Czy to dlatego, że niektórzy projektanci po prostu znudzili się homogenizacją sieci?

W czasach, w których projektowanie UX ma pierwszorzędne znaczenie, gdzie króluje zachowanie użytkowników i podejście content-first, UX na tych stronach jest (celowo) zły. Wbrew zasadom minimalizmu, projekty te są rzucane w oczy z kolażami tekstu i obrazów, w których układ jest wszędzie (znowu celowo).

Krótka historia brutalizmu

Brutalistyczny styl projektowania nie jest nowy. Szybkie wyszukiwanie w Wikipedii powie ci, że styl faktycznie pochodzi z brutalistycznej architektury z lat 50. do połowy lat 70. XX wieku. Zabawne, że po brutalizmie pojawił się modernistyczny ruch architektoniczny, w którym kluczem był minimalizm .

Le Corbusier był jednym z największych pionierów tego ruchu. Jego kariera trwała pięć dekad z budynkami zaprojektowanymi w Europie, Japonii, Indiach oraz Ameryce Północnej i Południowej.

Termin pochodzi od francuskiego słowa „ brut ” oznaczającego „surowy”, jak Le Corbusier opisał swój wybór materiału „ beton brut ”, surowy beton. Hiperfunkcjonalistyczny projekt wydawał się być zaprojektowany wyłącznie po to, by zapewnić użyteczność – a nie po to, by sprawiać przyjemność – jakby wskazywał na modernizm.

Brutalizm próbuje stawić czoła społeczeństwu masowej produkcji i wydobyć szorstką poezję z pomieszanych i potężnych sił, które działają. Brutalizm do tej pory był dyskutowany stylistycznie, a jego istota jest etyczna. –Alison i Peter Smithson, Nowy brutalizm, projektowanie architektoniczne (kwiecień 1957)

Brutalistyczne projekty całkowicie odrzucają wygląd, przedkładając funkcjonalność nad formę. Brutalistyczni projektanci szczycą się wykonywaniem projektów przy minimalnym wysiłku i najtańszymi dostępnymi materiałami, aby osiągnąć bardziej uczciwy, antymieszczański efekt.

Kompleks mieszkaniowy Habitat 67 w Montrealu zbudowany w stylu brutalistycznym
27 kwietnia 1967 roku miejski kompleks mieszkaniowy Safdie, nazwany Habitat 67, został zaprezentowany na Expo 67, światowych targach odbywających się w Montrealu.

Brutalizm w erze cyfrowej

Bloomberg zaadoptował ten styl na swój własny sposób na swojej stronie z wiadomościami. Projekt jest niemal krzykliwy i wyraźnie skupia się na surowej funkcjonalności.

Brutalna witryna Bloomberg
Strona główna Bloomberga.

Brutalizm powraca. Brzydkie, surowe, zrywające z konwencjonalnym designem, szalone efekty zawisu i powierzchowne zdobienia są wszędzie. Wielu purystów uważa ten trend za surowy, szorstki, surowy, niewygodny, konfrontacyjny i cyniczny. To jest. Celowo.

The Outline - brutalistyczny projekt strony internetowej
The Outline, magazyn internetowy, wybiera jaskrawy, jaskrawy brutalistyczny styl, który przeczy jego ostremu stylowi redakcyjnemu.

Brutalizm ma bardziej prymitywne podejście do projektowania i skupia się z powrotem na samym rdzeniu projektowania stron internetowych: jego kodzie. Brutalizm jest często przedstawiany jako „brzydki” trend w projektowaniu, ale musimy to pominąć. Filozofia stojąca za ruchem brutalistycznym nie polega na tym, aby rzeczy były „brzydkie”, ale surowe i pozbawione ozdób.

Można powiedzieć, że dzisiejsze brutalistyczne witryny są oparte na sieci DIY z lat 90., koncentrując się na podejściu od wewnątrz, zamiast ukrywać funkcjonalność za piękną fasadą.

Projekt interfejsu użytkownika popularnego serwisu społecznościowego Reddit jest wyjątkowo surowy i pudełkowaty, pełen typografii internetowej z późnych lat 90., niewyrafinowanych, ciężkich elementów sterujących i prawie bez pionowej przestrzeni oddechowej.

Reddit
Reddit stawia na funkcjonalność, obejmując jasnoniebieskie linki z wczesnej sieci.

Projektant Pierre Buttin przeniósł brutalizm na nowy poziom dzięki serii przeprojektowanych aplikacji mobilnych. W swoim najnowszym projekcie, zatytułowanym Brutalistyczne przeprojektowania, Buttin renderuje Facebook, Instagram, Twitter i inne popularne aplikacje w brutalistycznym stylu, z układami z dużą ilością tekstu i spłaszczonymi projektami.

Przykładowy projekt aplikacji w stylu brutalistycznym na Facebooku
Aplikacja mobilna Facebooka przeprojektowana w <a href=”https://www.theverge.com/2017/5/31/15717534/brutalist-web-design-app-facebook-google-pierre-buttin


Przykład projektu aplikacji w stylu brutalistycznym na Twitterze
Czysty, lekki styl Twittera, brutalistyczna metamorfoza.

Brutalizm kontra minimalizm

Brutalizmu i minimalizmu nie należy postrzegać porównawczo, ale jako nowy sposób patrzenia na rzeczy i inne podejście do projektowania. Brutalizm sprzeciwia się homogenizacji dzisiejszych witryn i aplikacji, ale zanim projektanci będą mogli zacząć projektować witrynę w brutalistycznym podejściu, muszą najpierw wiedzieć, jakie zasady zamierzają złamać.

Zwykłego, minimalistycznego designu nie zastąpi brutalizm. Musimy patrzeć na brutalizm jako na kulturę projektowania, która kwestionuje status quo – kulturę, która jest zmęczona mówieniem, co jest „najlepsze”.

Przy wyborze tych stylów do następnego projektu nie ma nic złego ani słusznego. Niemniej jednak, zanim skończysz i zaprojektujesz kolejną stronę internetową lub aplikację w brutalistycznym stylu, upewnij się, że znasz swoich odbiorców. Zaryzykuj, jeśli uważasz, że firma i Twoi odbiorcy to docenią.

Brutalistyczne projektowanie stron internetowych przyciąga uwagę, a świadomość marki rośnie niesamowicie szybko. Zasady są po to, żeby je łamać. Odważ się, aby sieć była siecią. Odważ się wyróżnić i bądź trochę odważny, nawet jeśli trochę dziwny.


Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

  • Zasady projektowania i ich znaczenie
  • Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
  • Odkrywanie zasad projektowania Gestalt
  • Adobe XD kontra Sketch – które narzędzie UX jest dla Ciebie odpowiednie?
  • 10 elementów UX, z których korzystają najlepsi projektanci