3 заметки с тегом

школа маркетеров

Теория близости и правило внутреннего и внешнего

«Объекты, расположенные близко друг к другу, воспринимаются связанно. Этот простой принцип лежит в основе всякого осмысленного дизайна.»

Из Ководства Артемия Лебедева



Закрепим на похожем примере. Эта пара собирается в путешествие:





Тут чемодан у мужика, а тетка без чемодана:





Здесь тоже пара путешественников, но чемодан принадлежит мужу:





А здесь пара либо забыла чемодан, либо он вообще не их:





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

Цветом. Пара из первого примера, но чемодан принадлежит мужику:





Прозрачностью или яркостью. Не смотря на близость объектов, чемодан связан с девочкой. Близость парня к чемодану добавляет новый смысл — чемодан принадлежит девочке, но понесет его мальчик:





Размером:





А вот пример, где расстояние говорит одно, а размер — другое. Получается, что Гулливер украл у лилипута чемодан:





Теория близости — частный случай общего правила внутреннего и внешнего. Это правило об использовании антипространства. Оно работает на всех уровнях от одной буквы до этажей страницы.

Возьмем мягкий знак:





Поместим его в ряд букв:





Внутреннее расстояние между вертикальными штрихами «Ш» больше расстояний до соседних букв. Это объединило мягкий знак с первым штрихом «Ш» и в середине слова появилась «Ы». Воздух исправляет ситуацию:





Теперь всё хорошо. Добавим второе слово:





Расстояние между словами сравнимо с расстоянием между буквами. Такой текст читать тяжело. Он слипается в одно сплошное слово. Исправляем:





Попробуем перенести слово на вторую строку:





Расстояние между строками меньше расстояния между буквами в одном слове. Это нарушение правила внутреннего и внешнего. Исправляем:





Добавим подпись:





На новом уровне появляется новая проблема. «ТЕАТР» стоит ближе к подписи, чем к слову «БОЛЬШОЙ». Опять нарушение правила. Должно быть так:





Идем на следующий уровень: помещаем надпись в рамку:





Теперь межстрочные расстояния больше общего внешнего пространства до края рамки. Надписи тесно. Правильно так:





И так можно продолжать до бесконечности, добавляя новые элементы.

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

Принцип контраста и правило внутреннего — два базовых знания дизайнера.

Эта заметка — калька с совета о правиле внутреннего и внешнего.

Чередование ритма и принцип контраста

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

Каталоги почти всегда выглядят скучно из-за своей монотонности.

Скучный каталог


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

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

Чередование ритма


Чередование ритма — это частный случай общего принципа контраста.

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

То же самое происходит в композиции. Контраст элементов несет в себе энергию.

Берем текст:

Неконтрастный текст


А теперь просто увеличиваем контраст между элементами:

Фактоиды


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

Фактоиды в Главбухе:

Журнал Главбух

Фактоиды на сайте башни Федерации:

Сайт башни Федерации



Если добавить к существующей композиции еще один контрастный элемент, станет еще интересней:

Сайт башни Федерации



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

иллюстрация из совета Миши Нозика


Этот принцип поможет уже на уровне микропрототипов продумать как будет представлена информация на этажах страницы и сразу исправить проблемные места.

Читай дальше про микропрототипы.

Микропрототипирование

Микропрототипы — это прототипы, только маленькие.

Микропрототипы

Маленький размер не позволяет погрузиться в детали, что резко сокращает время их создания. Главный секрет: прототипчики максимально похожи на будущую страницу. Иллюстрация — квадратик, текст — полосочки-черточки, всплывающее окно — квадратик на затемненной странице.

Основная задача микропрототипов — показать структуру сайта и структуру каждой отдельной страницы.

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

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

Так выглядели микропрототипы сайта Игоря Манна:

Микропрототипы сайта Игоря Манна


Подход похож на прототипирование жирным маркером. Смысл тот же: маркер позволяет выплеснуть идеи в форме здоровенных толстых фигур. Когда рисуешь ручкой или карандашом, хочется достичь максимального разрешения и красоты. А толщина маркера заставляет игнорировать мелочи.

Прототип жирным маркером. Страница веб-аналитики ЛидМашины:

Микропрототип страницы веб-аналитики ЛидМашины

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

2017   Игорь Манн   ЛидМашина   микропрототипы   школа маркетеров