Как сделать топовую работу на Behance или как найти порядок в хаосе
Последние года 2 я заходила на Behance, любовалась работами с ленточками и хотела так же. Но мне как обычному продуктовому дизайнеру было непонятно, в чем прикол, почему блоки и текст рандомно раскиданы по экрану. Кажется, что это все недосягаемо и у человека просто дар. Вот несколько примеров:
Но сегодня я хочу развеять этот миф и показать, на чем основываются такие дизайны, лэндинги, фестивальные работы и как научиться делать так же.
Прежде всего нужно запомнить базовые понятия:
- направляющие и сетка
- силовые линии/вектор внимания
Направляющие — это вертикальные линии вдоль вашего сайта. Из них как раз образуется сетка. Приведу примеры направляющих и сеток на их основе. Причем колонкам необязательно быть одинаковым! Пример направляющих:
Силовые линии или вектор внимания — по сути путь нашего глаза по экрану. Наш глаз как бы прыгает по элементам на экране, а соединив эти точки и прибавив направление движение — получим вектор внимания или просто стрелочку:
Обычно есть главный вектор внимания и он совпадает с одной из направляющей. Именно вокруг этой направляющей должен строиться контент:
или например так:
Это нужно для того, чтобы глаз пользователя не прыгал туда-сюда по экрану, а плавно двигался вдоль одной линии и периферическим зрением охватывал контент рядышком и если нужно отклонялся от основного вектора внимания читать заинтересовавший его контент.
Рассмотрим на примере. Если внимательно посмотреть то у нас есть главная направляющая и по совместительству главный вектор внимания — зеленая стрелка.
Кроме этого у человека есть периферическое зрение, которым он пользуется для беглого просмотра контента.
И вот пользователь начинает спускать вниз и чаще всего замечает крупные элементы и картинки, поэтому от главного вектора внимания отвлетвляются маленькие. В первую очередь он увидит картинку:
Дальше уже пойдет по остальному контенту — по заголовкам:
Если его заинтересовал заголовок, он начинает читать текст помельче. Предположим, его зацепил раздел Experience. Тогда дальше он пойдет по временным промежуткам или по компаниям (этот вариант тоже уместен, потому что у них шрифт покрупнее, а значит и внимания больше привлекают). Если пользователь выбрал изучать именно по компаниям, тогда его вектор внимания будет направлен опять же сверху-вниз, пользователь будет прыгать по названиям и если захочет прочитает поясняющий текст.
Именно поэтому мне перестало казаться, что такие дизайны невозможно повторить. Ведь на самом деле они подчиняются паре-тройке правил, отреннировав которые можно увидеть результат буквально за 2 работы.
Мой Telegram: @G_sh2403
Мой Behance: https://www.behance.net/kate_designer
