Asymetryczna równowaga w projektowaniu stron internetowych
Kiedy po raz pierwszy omawiałem ideę symetryczne wzorce projektowe tutaj, w Webdesigner Depot, nie miałem zamiaru wdawać się w pojęcie asymetrycznego projektu.
Jednak im więcej o tym myślałem, tym bardziej czułem się zmuszony do omawiania tematu, aby skontrastować niektóre idee obracające się wokół symetrycznych wzorców projektowych.
W asymetrycznym projekcie znajdują się projekty zawierające elementy, które nie tworzą lustrzanego odbicia. Najczęściej te asymetryczne projekty są w rzeczywistości zrównoważone, ale nie przez idealnie podobne połówki.
Ten rodzaj projektowania jest znacznie łatwiejszy do zdobycia, ponieważ większość treści nie nadaje się do doskonałej symetrii.
Rozważmy różne witryny, które wykorzystują to podejście do projektowania i może odkryjemy pewne pomysły, które mogą wpłynąć na twoje prace projektowe.
Wprowadzenie do stosowania asymetrii
Bully Entertainment
Jako wstęp do koncepcji asymetrycznego projektu, ten dramatyczny projekt stanowi raczej przyjemny punkt wyjścia. Chociaż naprawdę nie ma powodu, aby ten projekt nie mógł być rekonfigurowany w celu uzyskania idealnej symetrii, to po prostu nie działałby prawie tak dobrze. Duże, bogato ilustrowane projekty pięknie komponują tekst strony głównej. Ich wielkość zapewnia, że są one bardzo widoczne i są główną wizualną siłą napędową projektu. Ta naturalna równowaga pomiędzy pojedynczym, dużym elementem a gęsto upakowaną alternatywą jest bardzo powszechnym podejściem.
Jorge Rigabert
Ten układ przedstawia dość standardowy układ strony. Mała kolumna boczna zawierająca nawigację kluczową, połączona ze znacznie większą kolumną dotyczącą zawartości witryn. Jest to prawdopodobnie jeden z kilku standardowych układów używanych codziennie przez projektantów. Wierzę, że wiele procesów projektowych w tym przypadku dzieje się automatycznie. Rozważmy w tym przypadku pasek boczny, który asymetrycznie równoważy kolumnę zawartości. Pasek boczny ma ciemniejszy kolor, który pomaga zrównoważyć kanał lżejszych treści. Bez ciemniejszego tła pasek boczny prawdopodobnie by się zgubił i nie wyróżniałby się tak dobrze.
Obrazy do równoważenia tekstu
Innym dość standardowym podejściem do projektowania stron internetowych, które kończy się jako asymetryczny element projektu jest parowanie tekstu z obrazami. Jak widać w przykładach poniżej, każdy ma duży obraz. Ten obraz jest w jakiś sposób sparowany z blokiem tekstu. Ta kombinacja jest niezwykle powszechna.
Sztuczka jest dość oczywista, wystarczy dopilnować, aby dwie uzupełniały się w jakiś sposób. Biorąc pod uwagę, że te dwa elementy zwykle tworzą pętlę dla oczu, ważne jest, aby w jakiś sposób współpracowały ze sobą. Najbardziej oczywistym podejściem jest, aby obraz dosłownie zilustrował lub pokazał, o czym mówi tekst. Inną popularną taktyką jest rozciągnięcie obrazu na ideę przedstawioną w tekście.
Oto kilka próbek do rozważenia.
Ciasto słodkie ciasto
Ta konstrukcja jest z pewnością dobrze zrównoważona, ale wykorzystuje do tego kilka asymetrycznych elementów. Zwróć uwagę na duży obraz ciasta połączonego z tekstem. Zdjęcia są dość oczywiste, ale fundamentalnie ważne. W tym przypadku ciasto nie tylko informuje nas, że jest to sklep z ciastami, ale jaki konkretny styl może zaoferować. Połącz to z tekstem wyjaśniającym, który jest z nim powiązany, i masz dość jasne, wyraźne skoki sprzedaży. To wszystko nie wspomina nawet o niesamowicie smacznym projekcie, w którym ta strona jest zapakowana.
Więcej Soda
W tym przykładzie wykorzystano również asymetryczne elementy projektu oparte na dużym obrazie połączonym z blokiem tekstu. W takim przypadku połączenie nie jest tak jasne. Nie ma tu żadnego oczywistego elementu sprzedaży. Zamiast tego obraz staje się bardziej dekoracyjny i tworzy ogólne poczucie stylu witryny. Moim zdaniem jest nieco mniej funkcjonalny, ale naprawdę trudno powiedzieć, nie wiedząc dokładnie, jak skuteczna jest strona. Wygląda na to, że taki obraz ma wyjątkowy cel, nakłaniający cię do dokładniejszego spojrzenia na to, o co w tym wszystkim chodzi. Rodzaj zwiastuna, jeśli chcesz.
Adaptacyjny projekt strony internetowej
Jak już zapewne wiesz, ten wzór jest tak powszechny jak kolor niebieski. Odważyłbym się spekulować, że prawie każda strona kończy się umieszczeniem takiego wizualnego narzędzia, aby w pewnym momencie zadziałało. Myślę, że to wspólne miejsce natury sprawia, że jest to temat warty omówienia. Często znajduję najwięcej inspiracji i świeżych pomysłów od ponownego przemyślenia rzeczy, które robię w kółko bez zastanowienia.
Ta prosta strona promuje książkę. I oczywiście głównym elementem podczas lądowania jest duży obraz tej książki. Połącz to z dużym blokiem tekstu i masz dobrze zrównoważony obszar, który zawiera wszystkie najważniejsze elementy. Co najważniejsze, jest on zakończony przyciągającym wzrok wezwaniem do działania. Ciągłość tego obszaru jest prosta i na miejscu. Oczy łatwo przepływają przez to i pochłaniają krytyczne informacje. Nie jest mylące, skomplikowane, sprytne ani skomplikowane. Podejście jest proste i jasne.
Elementy pierwszego planu i tła
Jednym ze świeżych podejść do asymetrycznego projektowania jest wykorzystanie elementów tła, które asymetrycznie równoważą pierwszoplanowe. Tego typu podejście tworzy interesującą dynamikę, w której tło pełni bardziej rolę funkcjonalną jako część treści, a mimo to jest nadal częścią tła witryny. Najczęściej odbywa się to poprzez proste nakładanie się, które tworzą iluzję głębi. Oto kilka próbek do rozważenia.
Galeria Petera McLeaveya
Witryny tej galerii są doskonałym przykładem tego pomysłu. Tutaj element tła pełni wiele ról. Po pierwsze, do tego punktu tworzy asymetryczną równowagę z dużym szarym kołem na pierwszym planie. Ta wizualna kombinacja tworzy dwa obszary, które powodują, że oczy odbijają się w tę iz powrotem. To, moim zdaniem, jest dobrą rzeczą.
Element po lewej zawiera główną markę i linki do zawartości strony, natomiast element tła informuje o kontekście witryny. Patrzysz na stronę galerii, a staje się to oczywiste w ciągu kilku sekund od lądowania na stronie. Podoba mi się, że taki informacyjny element, jak tło, może również odgrywać ważną rolę w projektowaniu i ogólnym stylu witryny. Zwłaszcza, gdy doskonale odzwierciedla to kontekst produktu, który oferuje strona. Takie proste podejście, ale bardzo skuteczne.
Aleksandar Grkinic
To proste o mnie strona obejmuje także tę prostą ideę, w której element tła równoważy asymetrycznie pierwszy plan. W tym przypadku tło nie jest jednak całkowicie jasne. I to jest to, co naprawdę uwielbiam. Iluzja głębi jest całkowicie obecna i bez jakiegokolwiek nakładania się, trudno jest zdecydować, czym właściwie jest tło. Przypuszczam, że moglibyśmy argumentować, że osoba skacząca wcale nie jest w tle. Bez względu na to, asymetryczna równowaga jest jasna. Bez pięknej kombinacji różnych elementów strona nie istniałaby. Projekt jest pod wieloma względami oparty wyłącznie na koncepcji asymetrycznej równowagi. Często zdarza się, że niezwykle proste projekty mogą wyglądać nadzwyczajnie z pięknymi kontrastami, takimi jak ten.
Robert Dabi
W tym przypadku tło odgrywa interesującą rolę w projekcie, ale nie tworzy asymetrycznych elementów, które widzieliśmy do tej pory. Moim zdaniem duży obraz jest wyraźnie pierwszoplanowym elementem projektu. To, co kocham, to jak subtelnie zaciera tę linię z czymś tak prostym, jak cień pod obrazem. To skutecznie łączy ją z tłem i tworzy piękną dynamikę. Oczywiście duży obraz jest asymetrycznie zrównoważony kopią obok niego. Przejrzyj strony witryny i przyjemnie się zorientujesz, że tło zmienia się i łączy się z efektami wizualnymi w bardzo interesujący sposób. Wspaniały design, który sprawia wrażenie świeżego, czystego i super gładkiego. Wydaje mi się, że to dobra prezentacja dla witryny z portfolio.
Jeszcze dziesięć projektów
Poniżej przedstawiłem dziesięć dodatkowych projektów wykorzystujących asymetryczne elementy. Jak już wspomniałem, mogłem umieścić wiele stron internetowych w tej kategorii. Dlatego na potrzeby niniejszego artykułu starannie dobieram projekty, które moim zdaniem wykorzystują to podejście w nieco nietypowy i kreatywny sposób. Rozważ każdy projekt w świetle tego tematu i mam nadzieję, że zyskasz kilka nowych pomysłów, które zainspirują Cię do następnego projektu.
Greenluv
Andersson Wise
Prognoza
13 żon
Raffles Institution
Urban Svensson
Karuzela
Purlize
Autobusy w browarze
Humaan
Wniosek
Równowaga jest podstawową częścią procesu projektowania, a użycie asymetrycznych elementów jest równie podstawowe. Zawsze uwielbiam wracać do podstaw projektowania, ponieważ uważam, że zawsze rozumiem to w nowy sposób, który ma wpływ na pracę, którą wykonuję. Istnieje wiele sposobów podejścia do rzeczy, a łamanie naszych wzorów może często prowadzić do nowych i świeżych projektów, które odmładzają naszą pasję do naszych miejsc pracy.
Jakie są twoje ulubione asymetryczne projekty stron internetowych? Kto robi coś innego z asymetrią? Daj nam znać w komentarzach!