Ach, dobrze pamiętam te dni ... kiedy wszystko było błyszczącym, cienistym gradientem, zawierającym co najmniej 6 sztuk obiektów clipart i zdjęcie z 5 świątecznych pracowników biurowych. Uwielbialiśmy zdjęcia klawiatur z bezsensownymi przyciskami, a ludzie w 3D trzymali błyszczące symbole.

A potem co się stało? Pojawił się iOS 7. Narzędzie gradientowe na naszych Photoshopach zaczęło gromadzić kurz, a my usunęliśmy ogromną bibliotekę zdjęć.

Płaska konstrukcja przejęła w 2013 roku . Wszystko musiało być jasne, kreskówkowe i, oczywiście, płaskie. W ten sam sposób, w jaki płaska konstrukcja była reakcją na skeomomorfizm, zaczynamy widzieć, że wszystko idzie zupełnie inaczej.

Jaki jest nowy smak roku? Cieszę się, że pytasz: witryny wyglądające jak strona pobierania oprogramowania open source, które przestały działać pod koniec lat 90.

Zostało to udokumentowane przez Brutalistyczne strony internetowe , który podniósł trakcję i zaliczył zasięg Washington Post i Fast Co żeby wymienić parę. Ale na pewno są to tylko strony internetowe od pretensjonalnych agencji projektowych i eksperymentalnych artystów? Na stronie Brutalist Websites, to w większości prawdziwe, ale zaczynamy dostrzegać ten estetyczny przeciek do głównego nurtu. Miły! Nie możemy spojrzeć na elegancki płaski projekt do końca naszych dni, prawda?

Osobiście uwielbiam ten trend. Nie jestem najinteligentniejszym projektantem stron internetowych i nie chcę też używać frameworka - wszystko, co mogę połączyć, jest najlepsze, co mogę zrobić.

Zwykłem spędzać czas na przeszukiwaniu Internetu w poszukiwaniu przestarzałych projektów internetowych, zachowując przyzwoity Times New Roman i niewygodne zestawy ramek. Prawdopodobnie dlatego, że przypomniało mi to o prostszym czasie, w którym ludzie nazywali siebie webmasterami i wszystko było na stałe "W budowie".

Ale, chcąc nauczyć się projektowania stron internetowych od zera zamiast przyjmować motyw WP lub ramy CSS, zawsze byłem zbyt zawstydzony, aby stworzyć prostą, brzydką stronę moich marzeń. "Jaki byłby sens?", Pomyślałem. Pokazanie tego sprawiłoby, żebym wyglądał śmiesznie. Nie mogę użyć go jako portfela do niczego, nie wyglądając jak bałagan.

Widząc strony internetowe bez widocznego JavaScriptu, zyskałem pewność, że muszę przestać pracować na stronach internetowych innych osób i zamiast tego tworzyć własne.

Patrząc na wybór nowych minimalistycznych stron, zauważyłem kilka kluczowych tematów, które wydają się hodować swoje pięknie brzydkie głowy.

Monochromia

Monochromatyczne projekty robią dokładnie to, co powinien zrobić dobry projekt: zwraca uwagę na treść.

001

Bez fanatyzmu CSS

Pamiętasz stare dobre czasy? Kiedy wszyscy mieli stronę internetową i mieli coś do udowodnienia? Podejście nie (lub małe) CSS przywraca te dni i osobiście bardzo mnie nostalgię za prostsze czasy, gdy strona internetowa może być tylko krótkim bio i kolekcją linków.

002

Pochylony / nakładający się tekst

Pochylony tekst trochę wyrzuca użytkownika, a nie w zadziwiający sposób . Zamiast tego jest to coś, do czego użytkownik nie jest przyzwyczajony, więc robi wrażenie.

Sprawdź eksperymentalne miejsce tekstowe, z którego korzysta Loïc jego strona internetowa . Całkowite lekceważenie czytelności daje odwiedzającym poczucie sklepu z modą, który nie ma metek. To jest tak mało informacyjne (i w tym przypadku na uboczu), że jest klasyczne.

004

Mały szacunek dla skali lub wypełnienia

Bloomberg's uzyskać całkiem eksperymentalne w tych dniach i kocham to. Wyobraź sobie próby i udręki, które musiał przejść projektant, aby uzyskać zatwierdzenie z wielkim szefem.

Powodem tego jest niesamowite, że jest tak różne. Nie zwraca uwagi na twarde zasady projektowania: pozostawia wystarczająco dużo miejsca między elementami, utrzymując rzeczy w podobnej skali, a nawet upewniając się, że wszystko jest odpowiednio czytelne na wszystkich urządzeniach.

005

Odniesienia do starszych technologii

Wielu z nas będzie miało miłe wspomnienia dotyczące systemu Windows 98 lub wczesnych systemów operacyjnych Mac. Niektóre strony internetowe wywołują poczucie nostalgii - i, być może, humoru - poprzez odwoływanie się do starego oprogramowania. W końcu wiele brutalistycznych projektów internetowych pochodzi z "dawnych czasów".

Sprawdź ten przykład z Opublikuj HTML (każdy z tych folderów zawiera sztukę eksperymentalną).

006

Co to oznacza dla projektantów

Myśleliśmy, że to płasko = prostota, ale oczywiście nadal potrzebowało mnóstwo prac projektowych, aby to naprawić.

Wraz z pojawieniem się estetyki brutalistów, projektanci będą musieli polegać w mniejszym stopniu na tradycyjnych frameworkach CSS i tworzeniu stron kodowych od zera.

Jednak nie wydaje się, aby firmy stosowały ten trend na swoich stronach. Brutalistyczny projekt - poza Bloombergiem i innymi większymi nazwiskami - jest obecnie ograniczony do agencji projektowych, stron eksperymentalnych i osobistych blogów.

Jeśli chcesz stworzyć własną stronę brutalistów, oto kilka wskazówek ...

Usuń CSS z bieżącej witryny

Podczas gdy niektóre witryny w dużym stopniu polegają na CSS do pozycjonowania poziomego, możliwe jest zgrywanie wszystkich stylów z niektórych witryn i nadal wyświetlają je "poprawnie". Oto przykład:

Jeśli Twoja witryna opiera się na efektownych animacjach, kodzie JavaScript lub fantazyjnym CSS, prawdopodobnie będzie wymagać przerobienia, jeśli chcesz zastosować ten styl. W rzeczywistości powodem, dla którego porzuciłem WordPressa, było to, że nie mogłem znaleźć tematu pasującego do mojej wizji. W efekcie ostatecznie nauczyłem się HTML / CSS, edytując starożytny szablon z początku 2000 roku. Później poczułem się pewny, że zacznę od nowa, zapisując własne niechlujne CSS i robiąc najdalsze rzeczy z wypolerowanej "nowoczesnej" strony.

Cięcie z powrotem do monochromu

Czasami brutalistyczny projekt oznacza prosty projekt. I to zawsze jest świetne dla wygody użytkownika. Ograniczenie obecnej palety kolorów do zaledwie dwóch kolorów (czarny i jeden biały - biały, technicznie), może pomóc zmniejszyć przeciążenie użytkownika i dać mu wyraźniejszy kierunek, w którym kierunku. W końcu nie widać witryn z mnóstwem różnych kolorów w obszarze tekstowym, ponieważ trudno jest skupić się na nich.

Bądź kreatywny dzięki pozycjonowaniu tekstu

Kto powiedział, że wszystko musi być ładnie ustawione? Na przykład strona Loïca Dupasquiera jest odważnym stwierdzeniem, które mówi coś o projektancie. Wyglądanie dokładnie tak samo, jak każdy inny potencjalny wynajem nie jest dobrym wyglądem.

Jeśli nie jesteś najbardziej znanym projektantem w tej dziedzinie, zawsze będziesz drugi najlepszy. Odrzucając tradycyjne "zasady" dotyczące typografii, wyróżniasz się z tłumu.

Ponownie poznaj podstawy i stare sposoby

Dla mnie nie była to kwestia dostosowania projektu lub zestawu umiejętności do nowej mentalności. Nauczyłem się podstaw projektowania stron internetowych, gdy witryny wyglądały tak, jak te, które ci pokazałem, więc wystarczyło szybko odświeżyć i zabrać się do pracy.

Polecam sprawdzenie kodu źródłowego na starych stronach i na stronach Brutalist, stare samouczki HTML , lub ta kopalnia złota zawiera listę najwcześniejszych stron, które wciąż są żywe.

Gdzie ten styl działa dobrze (a gdzie nie)

W końcu strona internetowa to zawsze równowaga między wyrażaniem siebie a tworzeniem najlepszej jakości dla użytkowników.

Na blogu najlepiej jest skoncentrować się na tym, aby treść tekstu była łatwa do strawienia. Zauważysz, że podczas gdy kawałek Bloomberga na Yahoo zaczyna się dość dziwacznie, główny tekst jest łatwy do odczytania.

Tak więc, gdy budujesz bloga, lepiej trzymać się konwencji dotyczących treści artykułu. Na przykład, WIRED Projekt jest dość charakterystyczny, ale jeśli chodzi o same artykuły, używają przyjemnej czcionki i zachowują ją czytelną.

Dla projektanta, który pracuje głównie z duszącymi korporacjami, eksperymentalny portfel może zniechęcić klienta w najważniejszym momencie - pierwszym kontakcie.

W końcu sprowadza się do poznania odbiorców i tego, czy uda ci się uciec całkowicie ignorując konwencje.

Idź naprzód i uczyń coś obrzydliwie genialnego.