Design101: Wykorzystanie silnych linii trasowania
Dziś zbadamy jedną z najbardziej podstawowych zasad projektowania: wyrównanie. Ten zwodniczo prosty temat jest w rzeczywistości dość złożony i należy do najbardziej brakujących umiejętności projektantów.
Silne zrozumienie tego, jak i kiedy korzystać z niektórych wyrównań, natychmiast uczyni cię lepszym projektantem i pozostanie fundamentalnym fundamentem wszystkiego, co stworzysz przez resztę swojej kariery.
Poznaj elementy Envato
Wprowadzenie do wyrównania
Dla wielu dyskusja na temat wyrównania może wydawać się arbitralnym ćwiczeniem. Taka podstawowa teoria projektowania jest z pewnością tylko dla osób, które nigdy w życiu niczego nie projektowały, a nie dla społeczności zawodowej, która często odwiedza takie witryny. Dobrze?
Ja sam popieram argument, że taka dyskusja jest dla początkujących, stwierdzając, że solidne zrozumienie wizualnego wyrównania jest bezkonkurencyjnym fundamentem dla wszystkich typów projektów. Jest to rodzaj wiedzy, którą po opanowaniu wykorzystasz na każdym układzie, który stworzysz jako projektant.
Jednak pomimo idei, że te koncepcje leżą u podstaw tego, co robimy jako projektanci, dostosowanie wydaje się być głównym źródłem większości złych projektów, które widzę dzisiaj w Internecie.
Samouczący się projektanci często intuicyjnie rozumieją, jak korzystać z linii trasowania, ale może to i nie powiedzie się bez wyraźnej wiedzy na poparcie tego.
Wykładanie rzeczy
Podstawową ideą wyrównania jest zdumiewająco prosta myśl: ułożyć rzeczy w szeregu. Poza organicznym projektem, który jest zupełnie innym tematem, każdemu elementowi, który umieszczasz na stronie, powinien towarzyszyć logiczny proces przemyślenia co do jego umiejscowienia.
Ponownie, to są podstawowe rzeczy, prawda? Wszyscy już to robią… prawda? Źle. Rozważ następującą witrynę, która została niedawno przesłana do naszej galerii CSS. Używam tego nie jako złośliwego przykładu, ale jako narzędzie dydaktyczne. Projektant to niesamowity facet, który dopiero zaczyna. Codziennie poprawia swoje umiejętności i chętnie się uczy.
Ten przykład jest niezwykle typowy i jest dokładnie tym, co widzimy na co dzień w naszych zgłoszeniach do galerii. Wartość estetyczna tutaj nie jest zła. Jasne kolory i ciekawe faktury przyciągają twoją uwagę. Jednak wyrównanie tutaj naprawdę nie trafiło w sedno.
Problemy tutaj mogą być trudne do wykrycia dla wielu osób. Z tego powodu zawsze zalecam uproszczenie projektu w celu zbadania podstawowych kształtów. Zobaczysz mnie, jak to robię w kilku artykułach, które piszę o projektowaniu i zdecydowanie powinieneś wypróbować to na kilku własnych projektach.
Teraz, gdy widzimy obiekty graficzne w stanie uproszczonym, możemy lepiej przeanalizować zajmowaną przestrzeń i rozwiązać wszelkie problemy z wyrównaniem.
Zauważ, że nagle elementy na stronie wydają się rozproszone. Główny obszar zawartości u dołu nie pokrywa się z wiszącym sztandarem w lewym górnym rogu lub rozproszonymi elementami w prawym górnym rogu. Co więcej, logo Facebooka wydaje się małe i samo z siebie odcięte, a nagłówek jest przesunięty z dala od krawędzi nawigacji, która jest przesunięta z dala od krawędzi treści.
Chociaż ten projekt wydawał się całkiem przyzwoity, gdy go po prostu wyczuwaliśmy, teraz widzimy, że może on wymagać wiele restrukturyzacji. Stąd są dwie kluczowe rzeczy, które należy rozwiązać: Wyrównanie i ujemna przestrzeń.
Te koncepcje są ze sobą ściśle powiązane. Praca z przestrzenią ujemną ma wiele wspólnego z koncentrowaniem się na lukach i stosowaniem podstawowej symetrii. Aby uzyskać więcej informacji na temat właściwego postępowania w odniesieniu do przestrzeni ujemnej, przeczytaj mój Przewodnik po przestrzeni ujemnej w Six Revisions.
W tym artykule przejdziemy dalej, skupiając się bardziej na tym, jak korzystać z podstawowych dopasowań, które znasz w złożonych układach.
Wyrównanie do środka
Wyśrodkowane układy są metodą wyboru dla prawie każdej osoby na planecie… z wyjątkiem projektantów. Z jakiegoś powodu centrowanie elementów na stronie wydaje się po prostu tym, co powinieneś zrobić. Z pewnością głównym zadaniem projektanta jest po prostu wyśrodkowanie przedmiotów!
Wpadłem na ten problem kilka lat temu, kiedy przekazałem projekt, który stworzyłem, programistom w celu kodowania. Kiedy pokazał mi gotową wersję, wszystko zostało przesunięte z wyrównania do lewej do wyrównania do środka! Wyjaśnił po prostu, że zawsze wolał wszystko wyrównywać do środka „żeby ładnie wyglądało”.
Rzeczywistość jest taka, że wyśrodkowanie każdego elementu jest najsłabszym wyborem, jaki możesz zrobić.
Nie ma żadnych ostrych krawędzi do naśladowania, więc twoje oczy muszą wykonać znacznie więcej pracy, aby zarówno przyjąć ogólny układ i wchłonąć określoną zawartość.
Kiedy użyć
Nie oznacza to wcale, że należy zawsze unikać centrowania. Sam używałem ich w wersjach demonstracyjnych tej właśnie strony. Kluczem jest wiedzieć, kiedy ich użyć.
Uważam, że najlepszym możliwym scenariuszem dla wyrównania do środka jest sytuacja, gdy na stronie jest bardzo mało. Im bardziej skomplikowany układ, tym mniej działa wyrównywanie środkowe. Jeśli na danej stronie nie dzieje się wiele, wyrównywania w środku mogą być potężnym stwierdzeniem.
Wyrównanie do lewej
Lewe wyrównania, choć prawdopodobnie nudne, są solidne i powinny być twoim domyślnym wyrównaniem dla większości pracy, którą wykonujesz.
Jesteśmy przyzwyczajeni do oglądania treści uporządkowanych w lewo. Roztrzaskaj książkę lub gazetę, a znajdziesz wiele lewych pozycji. Przejrzyj reklamy w swojej śmieciowej wiadomości, ponownie, wiele lewych wyrównań. Zobaczysz je na Facebooku, wynikach wyszukiwania Google, strumieniach na Twitterze i każdej innej głównej stronie.
Lewe wyrównania rządzą światem, a przynajmniej te społeczeństwa, które czytają od lewej do prawej. Nie powinieneś całkowicie polegać na lewym wyrównaniu do wszystkiego, po prostu wiedz, że jest to bezpieczna droga.
Kiedy użyć
Używaj w różnych sytuacjach, ale szczególnie, gdy jest dużo tekstu. Wystarczy spojrzeć na stronę, którą teraz czytasz. Gdyby to było wyśrodkowane, byłby to koszmar.
Pamiętaj, że szczególnie w Internecie wyrównanie do lewej strony czegoś nie oznacza, że nie możesz go wyśrodkować. Na przykład div HTML często zawiera kilka wyrównanych do lewej akapitów i obrazów, ale następnie jest wyśrodkowany na stronie za pomocą CSS.
Właściwe wyrównanie
Prawe wyrównania są prawdopodobnie najrzadsze. Ponieważ czytamy od lewej do prawej, dziwne jest, że coś przylega do prawej krawędzi.
Jest to jednak bardzo mocne wyrównanie, które można dokładnie wykorzystać w swoich projektach, szczególnie w druku (jest to jeszcze bardziej nieoczekiwane w Internecie).
Kiedy użyć
Często, choć nie zawsze, właściwe wyrównanie da poczucie wyjątkowości. Jeśli projektujesz coś, co musi się wyróżniać i czuć się inaczej, właściwe dostosowanie jest doskonałym miejscem na rozpoczęcie.
Uzasadnienie usprawnień w Internecie
Wyrównanie, które pominęliśmy, jest oczywiście uzasadnione. Jest to szczególnie ważne, gdy połączysz całą witrynę jako element koncepcyjny.
Interesującą rzeczą w projektowaniu dla Internetu jest to, że często wiąże się to z mieszanką dopasowań. Prawdopodobnie słyszałeś, że projektanci sugerują, aby nigdy nie mieszać linii trasowania, ale ta rada po prostu nie działa w prawdziwym świecie.
Zamiast tego musisz podejmować decyzje dotyczące zarówno elementów na stronie, jak i elementów strony jako całości. Zwróć uwagę, jak rozpocząłem tę dyskusję, patrząc na przykład wyświetlania wyrównania witryny jako całości, a następnie przystąpiłem do omawiania wyrównania poszczególnych elementów.
Gdy już zdecydujesz się na wyrównanie tekstu i obrazów na swojej stronie, zebranie wszystkiego razem często wiąże się z rzuceniem wszystkiego na stronie w uzasadnione wyrównanie. Chociaż możesz mieć nierówną krawędź, uzasadnienie wszystkiego może dodać wykończenie, którego brakowało w oryginalnym przykładzie.
Zauważ, że na powyższej stronie jest silne wyrównanie do lewej, ale wszystko po prawej stronie również zostało wyrównane, aby stworzyć spójny, uzasadniony wygląd. Mały przycisk logowania wyrównuje się z obrazami przeglądarki, które są z prawej strony ikony kalendarza.
To jest czysty, profesjonalny design. To może nie być odpowiednie dla wszystkich projektów, ale często widzę, że projektanci starają się to osiągnąć i kończą się niepowodzeniem, i chciałem zająć się niektórymi prawdopodobnymi przyczynami.
Jest to jeden z powodów, dla których systemy gridowe są tak popularne. Rzucanie wszystkiego na siatkę zapewnia, że twoje wyrównania są mocne i łatwe do naśladowania.
Wniosek
Podsumowując, w miarę możliwości używaj silnych wyrównań, które ułatwiają Twojemu oku śledzenie przepływu informacji. Wyrównanie środkowe jest dopuszczalne, ale trudniejsze do prawidłowego wdrożenia wraz ze wzrostem zawartości strony.
Pamiętaj, że wyrównanie odnosi się do określonych elementów na stronie, a także do rozmieszczenia obiektów jako całości. Spędził czas na każdym projekcie, upewniając się, że wszystkie elementy są odpowiednio dopasowane do wszystkiego na stronie. Dotyczy to w pionie i poziomie wzdłuż wszystkich krawędzi projektu.
