4 Essential Layout Trends na 2015 rok
Internet bardzo się zmienił w ciągu ostatniej dekady, a jednocześnie nie zmienił się wcale. Jeśli spojrzymy wstecz za 10 lat, okaże się, że sieć ma bardzo wspólny układ graficzny w większości witryn. Ten wzorzec składa się z nagłówka, stopki, paska bocznego i obszaru zawartości. Był to oczekiwany układ dla sieci. W tym samym czasie powstał Macromedia Flash, który ustąpił miejsca epoce alternatywnych układów. Układy, które nie trzymały się tej ścisłej formuły. I oczywiście z implozją Flash podejście to nieco ucichło ... mówię trochę, bo wróciło z zemsty.
Jeśli obejrzysz jedną z wielu popularnych galerii prezentujących aktualny projekt strony internetowej, z pewnością zauważysz, że podstawowa struktura stron internetowych nie jest niczym poprawiona. Może się wygiąć i zmienić na prawie wszystko, co musi być. Jest to, moim zdaniem, jeden z najlepszych efektów ubocznych responsywnego projektowania stron internetowych. Nową normą jest to, że wydaje się, że w ogóle nie ma ustalonej formuły.
Wszystko to mówi, że możemy zaobserwować kilka trendów wysokiego poziomu w projektowaniu layoutu, które reprezentują to, co uważam za niezwykłe układy. Niezwykłe, ponieważ nie stosują się do ścisłej formuły lub wstępnie zdefiniowanego systemu. Ale są to trendy, ponieważ mogę dostarczyć dziesiątki, jeśli nie setki przykładów wypełniających każdą z tych kategorii.
To, co tu znajdziesz, to ciekawe połączenie trendów i nietypowych układów, które, mam nadzieję, zainspirują Cię do oceny podstawowych struktur, które stosujesz do projektowania stron internetowych. Zanurzmy się i spójrzmy ...
Podziel ekrany
W tej kategorii znajduje się wybór witryn, które dzielą ekran za pomocą podziału pionowego. Być może istnieje wiele powodów, aby to zrobić, a przy badaniu wielu próbek tego typu znalazłem dwa główne powody.
Po pierwsze, czasami projekt może rzeczywiście mieć dwa podstawowe elementy o jednakowej wartości. Wspólnym podejściem do projektowania stron internetowych jest uporządkowanie rzeczy według ważności. Znaczenie to znajduje odzwierciedlenie w hierarchii i strukturze projektu. Ale co, jeśli masz dwie rzeczy do promowania? Takie podejście pozwala nadać im obu znaczenie i pozwolić użytkownikowi na szybki wybór między nimi.
Drugim powodem, dla którego znalazłem to podejście, jest to, że czasami musisz przekazać ważną dualność. Weźmy na przykład stronę ośmiu i czterech. Tutaj chcą przekazać fakt, że ich podstawowymi atutami są ich cyfrowe korzenie i utalentowany personel. To jest to, co je definiuje. Podzielony ekran to wspaniały sposób na zaprezentowanie tego. I szczególnie podoba mi się to, jak ampersand jednoczy obie strony.
Bez chromu!
Jednym z głównych elementów wykorzystywanych w projektowaniu stron internetowych są elementy: pudełka, ramki, kształty i pojemniki wszystkich typów używane do rozdzielania zawartości strony. Rozważ stereotypowy nagłówek, w którym elementy są starannie zawarte i oddzielone od treści. Popularnym trendem jest teraz usunięcie całego tego dodatkowego chromu.
Jest to podejście minimalistyczne, ale idzie o krok dalej i ma kilka interesujących zwrotów akcji.
W tym przykładzie wyeliminowali pojęcie nagłówka i stopki razem. Czuje się raczej jak interaktywny kiosk. Hierarchia treści odbywa się głównie za pośrednictwem organizacji od lewej do prawej, dzięki czemu układ jest bardzo intuicyjny. A chrom do oddzielnej nawigacji od treści po prostu nie jest potrzebny. Zamiast tego przepiękne produkty prześwitują.
Tutaj stwierdzamy, że treść jest mocno podkreślona poprzez usunięcie jakiegokolwiek sensu nagłówka lub stopki. Zamiast najpierw czytać nagłówek, czytasz nazwę firmy i jasne oświadczenie o tym, co robią (i gdzie to robią). Następuje główna nawigacja. To świetny sposób na podkreślenie marki, zanim zachęcisz ludzi do nawigacji. Zapewnia elegancki przepływ. Co ciekawe podczas przewijania strona dostaje nagłówek i dotyk chromu. Piękny i efektowny układ, który w inspirujący sposób wykorzystuje ten wzór.
Modułowe lub oparte na siatce
Następnie mamy układy zbudowane na strukturach modułowych lub gridowych. W tych projektach każdy moduł jest przeznaczony do flexu na podstawie rozmiaru ekranu. To nie jest zupełnie nowe podejście, ale wprowadzenie responsywnego projektowania stron internetowych sprawiło, że jest jeszcze bardziej użyteczny. Wskazuje to na rodzaj adaptowalnych układów, które można utworzyć za pomocą wtyczek takich jak Masonry.
Ten przykład doskonale ilustruje ideę. Projekt jest całkowicie responsywny. Wraz ze zmianą rozmiaru ekranu każdy moduł dostosowuje się i dopasowuje rozmiary do przestrzeni. Dzieląc przestrzeń równomiernie, łatwiej jest dostosować projekt. Otrzymują oni dodatkowe punkty za wprowadzenie elementu (przy większych rozmiarach ekranu), który przełamuje sztywne bariery pomiędzy modułami.
Ten przykład jest dość intensywną wersją wzorca. Obejmuje to oczywiście podejście modułowe, które pozwala na łatwe wprowadzanie i wyprowadzanie zawartości w razie potrzeby. Ale tutaj jest ważny element projektu, którego poprzedni przykład zabrakło. Wielkość modułów zmienia się, aby odzwierciedlić kolejność ważności i jej miejsce w hierarchii. Ryzyko takiego modularnego podejścia sprawia, że wszystko jest tej samej wielkości, co oznacza, że naprawdę niczego nie podkreślasz. W przeciwieństwie do tego, ten przykład wyraźnie nadaje pierwszorzędne znaczenie.
Wypełnianie jednego ekranu
Wreszcie mamy witryny wykorzystujące podejście, w którym projekt dostosowuje się do całkowitego wypełnienia ekranu. Jest to podzbiór responsywnego projektu, który dostosowuje się do rozmiaru ekranu. Ale w tej niszy projekty adaptują się w taki sposób, że całkowicie wypełniają ekran i nie wytwarzają pasków przewijania. Ten brak przewijania oznacza, że treść musi być bardzo skoncentrowana, a hierarchia treści wyraźnie ustalona. Uważam, że ostrość i przejrzystość tych witryn jest odświeżająca.
Wniosek
Podczas gdy ja osobno przeanalizowałem każdy z tych trendów tutaj, rzeczywistość jest taka, że stanowią one klocki. A te bloki można łączyć na wiele różnych sposobów. W rzeczywistości wiele z prezentowanych tutaj próbek można przenieść do wielu kategorii, które omówiliśmy. Różnorodność układów w nowoczesnej sieci oraz fakt, że są one użyteczne, sprawia, że sieć jest ekscytującym medium do pracy.