Зміст
Ця стаття вперше з’явилася у випуску 229 журналу .net - найпопулярнішого у світі журналу для веб-дизайнерів та розробників.
Однією з найважливіших речей, на якій ви можете зосередитися, коли справа доходить до розміщення сторінки в HTML / CSS, є вертикальний ритм - візуальний шаблон, на який формуються блоки типу або рядки типу під час сканування сторінки.
На цей ритм можуть вплинути інші речі, такі як заголовки, елементи списку, зображення тощо. Хороший вертикальний ритм має першорядне значення, оскільки він допомагає читати та сканувати ваші сторінки.
В Інтернеті є чимало чудових підручників (див., Наприклад, тут і тут), де ви можете дізнатись про те, як технічно досягти правильного вертикального ритму, використовуючи ems для вашої висоти лінії та дізнавшись про те, як підтримувати ваш тип „у фазі“ засоби.
Ієрархія
Основні речі, на які слід звернути пильну увагу, - це висота рядків між елементами та загальна візуальна ієрархія на сторінці. Встановлення належних пропорцій висоти лінії може бути залученою вправою дизайну, але важливо освоїти. Важлива також ієрархія, оскільки зображення та текстові елементи повинні візуально гармоніювати між собою - найважливіші речі, як правило, більші і стоять на першому місці на сторінці.
Дизайнери друку працювали з ідеєю вертикального ритму протягом багатьох років, і лише недалекому минулому веб-дизайнерам довелося справді зайнятися цим. З урахуванням постійно зростаючої потреби створювати веб-сайти з використанням макетів сітки та звертати увагу на реагуючі реалізації, що враховують різні ширини екранів, це зараз важливіше, ніж будь-коли раніше, з точки зору візуального дизайну, можливо, більше, ніж просто технічного.
П’ять прикладів для перевірки
1. Елементи друкарського стилю Ця книга Роберта Брінгхерста є стандартом для вивчення типографіки. Прочитайте, споживайте, вливайте у свій мозок, як тільки можете.
2. Френк Хімеро Окрім абсолютно дивовижного загалом, нещодавній редизайн особистого веб-сайту дизайнера Френка Чимеро демонструє чудовий вертикальний ритм. Він використовує ефект паралаксу, щоб допомогти повернути ритм додому, коли ви також прокручуєте сторінку вниз.
3. Ден Седерхольм Хороший приклад чудового типографського вертикального ритму загляньте в блог Дена Седерхольма. Висота рядка копії та заголовків ідеально пропорційна.
4. Фокусна лабораторія Фірма веб-дизайну та брендингу Focus Lab спритно використовує ієрархію, щоб допомогти повідомити про найважливіше для відвідувача.
5. Typofonderie Веб-сайт студії друкарні Typofonderie має чудовий вертикальний ритм із зображеннями та текстом. Інтервал між елементами пропорційний на всьому веб-сайті, і ієрархія між основним зображенням та додатковими зображеннями / розділами є досконалою.
Відкрийте для себе 10 дивовижних прикладів експериментального дизайну на Creative Bloq.
