Zawartość
Ten artykuł pojawił się po raz pierwszy w numerze 229 magazynu .net - najlepiej sprzedającego się magazynu na świecie dla projektantów i programistów stron internetowych.
Jedną z najważniejszych rzeczy, na których możesz się skupić, jeśli chodzi o układanie strony w HTML / CSS, jest rytm pionowy - wizualny wzór, w który formują się bloki tekstu lub wiersze tekstu podczas skanowania w dół strony.
Na ten rytm mogą wpływać inne rzeczy, takie jak nagłówki, elementy listy, obrazy i tak dalej. Dobry rytm pionowy jest najważniejszy, ponieważ poprawia czytelność i zdolność skanowania stron.
W Internecie jest sporo świetnych samouczków (patrz tutaj i tutaj, na przykład), w których możesz dowiedzieć się, jak technicznie osiągnąć właściwy rytm w pionie, używając em do wysokości linii i dowiedzieć się, jak utrzymać swój typ „w fazie” znaczy.
Hierarchia
Podstawowe rzeczy, na które należy zwrócić szczególną uwagę, to wysokość linii między elementami i ogólna wizualna hierarchia na stronie. Ustawienie odpowiednich proporcji wysokości linii może być wymagającym ćwiczeniem projektowym, ale ważne jest, aby opanować. Hierarchia jest również ważna, ponieważ obrazy i elementy tekstu powinny być ze sobą w harmonii wizualnej - najważniejsze rzeczy są generalnie większe i zajmują pierwsze miejsce na stronie.
Projektanci druku zajmowali się ideą rytmu wertykalnego od wielu lat i dopiero w niedawnej przeszłości projektanci stron internetowych musieli naprawdę się w to zaangażować. Ze względu na stale rosnącą potrzebę tworzenia witryn internetowych przy użyciu układów siatki i zwracania uwagi na responsywne implementacje w celu dostosowania do wielu szerokości ekranu, jest to ważniejsze niż kiedykolwiek z perspektywy projektowania wizualnego, prawdopodobnie bardziej niż tylko technicznego.
Pięć przykładów do sprawdzenia
1. Elementy stylu typograficznego Ta książka Roberta Bringhursta jest standardem w badaniach typografii. Przeczytaj, skonsumuj, wlej do swojego mózgu, jak tylko możesz.
2. Frank Chimero Poza tym, że ogólnie jest absolutnie niesamowity, niedawne przeprojektowanie osobistej strony internetowej projektanta Franka Chimero wykazuje wspaniały pionowy rytm. Używa efektu paralaksy, aby pomóc wyprowadzić rytm do domu, gdy przewijasz stronę w dół.
3. Dan Cederholm Aby zobaczyć dobry przykład typograficznego rytmu pionowego, zajrzyj na blog Dana Cederholma. Wysokość wiersza tekstu i nagłówków jest w idealnych proporcjach.
4. Focus Lab Firma Focus Lab zajmująca się projektowaniem i budowaniem marki stron internetowych zręcznie wykorzystuje hierarchię, aby pomóc w komunikowaniu się odwiedzającemu o tym, co jest najważniejsze.
5. Typofonderie Strona internetowa Studia Typografii Typofonderie ma świetny pionowy rytm z obrazami i tekstem. Odstępy między elementami są proporcjonalne w całej witrynie, a hierarchia między obrazem głównym a obrazami / sekcjami drugorzędnymi jest idealna.
Odkryj 10 niesamowitych przykładów eksperymentalnego projektowania w Creative Bloq.
