Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:
КАК ПРЕВРАТИТЬ ТЕКСТ С КАРТИНКАМИ В ПОЛНОЦЕННЫЙ ДИЗАЙН СТРАНИЦЫ

Руководство по созданию веб-страниц UX/UI-дизайнера Оли Черненькой.

card-photo
card-photo
Оля Черненькая

UX/UI-дизайнер

Оля Черненькая была дизайнером в рекламном агентстве OkInternet и арт-директором в Smartica/Skykillers, основала студию дизайна MONO. Сейчас она независимый UX/UI-дизайнер. В своей статье для SKVOT Оля рассказала, как выстраивать композиции страниц с текстом и изображениями.

 

Когда я только начинала работать дизайнером, мне было сложно быстро и правильно расставить элементы на макете страницы. На компоновку уходил целый день, но я все равно не была уверена, что сделала все правильно.

Сейчас я четко понимаю, каким законам подчиняется структура страницы и что нужно, чтобы все ее фрагменты были организованы правильно.

Расскажу, как быстро акцентировать элементы и собирать их в цельную историю, а еще поделюсь, в каких случаях негативное пространство спасает композицию.

В качестве примера возьму неаккуратную страницу с описанием товара и поэтапно на схемах объясню, как она эволюционировала:

Задача дизайнера

Базовая цель дизайнера — подать контент на странице в том виде, в котором его захочется изучать. Кроме этого, важно побудить человека взаимодействовать со страницей. Эти задачи — фундамент любых решений дизайнера.

Текст на странице должен быть структурированным, иначе он выглядит сложно, грузно и непривлекательно. В него не хочется вникать, он не вызывает желания с собой взаимодействовать — переходить по ссылкам, нажимать на кнопки.


Текст слева выглядит не таким аккуратным и считывается хуже, чем текст справа.

Чтобы сделать информацию на странице удобной для восприятия, важно знать, что обеспечивает это удобство. Поэтому сперва разберемся, как мы потребляем цифровой контент.

Как считывается контент

В digital-мире поток информации большой, а люди всегда спешат. Именно поэтому в среднем проводят на одной веб-странице не дольше 10-20 секунд. Если человек поймет, что на странице есть что-то полезное или интересное, то задержится дольше. Но сходу выявить зерно ценности в контенте бывает непросто.

Мы не читаем текст на странице целиком, не рассматриваем все блоки и надписи, а только пробегаем взглядом по самому важному. Это помогает за пару секунд понять, о чем речь, зацепиться за интересное и вчитаться глубже.

Этот способ восприятия контента называют сканированием.

При нем мы:

- пробегаем по заголовкам и подзаголовкам

- смотрим на картинки

- читаем начало абзацев

- просматриваем выделенное жирным или цветом

- обращаем внимание на ссылки и кнопки

Зацепить внимание читателя помогают подзаголовки, разбивка на абзацы, кнопки и выделение цветом.

Но работать на результат эти элементы будут только в одном случае — если их правильно организовать. Без четкой визуальной иерархии на странице управлять вниманием читателя не получится.

Как создать визуальную иерархию

Визуальная иерархия диктует, в каком порядке мы смотрим на то, что находится на странице. Этот порядок обеспечивается контрастом между разными элементами. Чем контрастнее объект, тем больше внимания он притягивает:

Есть три основных типа контраста визуальных элементов:

1. ФОРМА. Форма помогает отделить кнопку от остального текста. Выделяем надпись рамкой.

2. РАЗМЕР. Крупный текст привлекает больше внимания. Чем важнее текст, тем он крупнее. Увеличиваем заголовок.

3. ЦВЕТ. Главный кликабельный элемент на странице — кнопка. Выделяем ее цветом.

Цвет, форма и размер помогут акцентировать внимание, но нужно действовать аккуратно.

Если выделить сразу все, не будет выделяться ничего:

Зачем нужно негативное пространство

Иерархия важна, но на четкость восприятия влияет не только она. Чтобы акценты считывались, они должны находится на нейтральном фоне — в так называемом негативном пространстве. Негативное (пустое) пространство — это участки макета, на которых ничего нет. Оно формирует силуэты букв, отделяет друг от друга слова, абзацы, картинки и другие элементы.

Негативное пространство обеспечивает страницу «воздухом» и помогает читателям быстро сориентироваться. Если его нет, кажется, что элементы склеиваются друг с другом.

Например, так выглядит наша страница с минимальным количеством воздуха:

Негативное пространство — это мощный и универсальный инструмент. Оно спасет, если нужно обратить внимание на предмет на визуально шумном фоне.

Негативное пространство и композиция страницы

Содержание страницы можно разделить на группы элементов: например, карточки товаров, фильтры, меню. Чтобы негативное пространство помогало их воспринимать, расстояния внутри каждой такой группы должны быть меньше, чем расстояния между нею и другими группами.

Чем прочнее элементы связаны логически, тем крепче их нужно связать визуально.

В нашем случае есть три группы: заголовок, описание и кнопка. Расстояния между ними должны быть больше, чем расстояния внутри них.

Это значит, что воздуха между строками текстового блока должно остаться меньше, чем воздуха между текстом, кнопкой и заголовком.

Этот подход можно применять везде. Группируйте элементы по-своему и следите, чтобы расстояния внутри группы были меньше, чем расстояния до остальных групп. 

Если расстояние внутри группы нужно сделать больше, объедините объекты между собой другой фигурой.

Например, так:

Вернемся к странице с описанием товара.

После трансформаций текстового блока и остальных элементов у меня получилась вот такая аккуратная страница:

Выводы

Чтобы плотный текст с картинками стал полноценной страницей, нужно:

- позаботится об иерархии элементов

- сделать их контрастными

- объединить в визуальные группы

- оставить достаточно негативного пространства между группами.

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту