Сценарии для сайтов и приложений

Курсы веб-дизайнаLeave a comment


Как написать пользовательский сценарий?

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

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

Из чего состоит сценарий:

  1. Цель, которую мы преследуем.
  2. Основной сценарий.
  3. Альтернативные сценарии, дополнительные.
  4. Конечный результат.

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

Во-первых, на примере приложения для РЖД(рис.1)

Цель этого приложения — попасть на поезд без бумажного билета.

 

Сценарии для сайтов и приложений

Рис.1 Приложение РЖД

Сценарии для сайтов и приложений

 

Рис.2. Шаг первый

Все начинается с того, что человек просто покупает билет на сайте РЖД (рис.2).

 

Сценарии для сайтов и приложений

Рис.3 Шаг второй

Следующим шагом пользователь должен увидеть эту поездку в приложении (рис.3). Он видит активные элементы, с датами, городом и временем.

 

Сценарии для сайтов и приложений

Рис.4. Шаг третий

Дальше на  человек на вокзале должен найти свой поезд, путь и вагон (рис.4). Видно поезд, время, путь (определяется непосредственно на вокзале), вагон, место. То есть человеку не нужно распечатывать и доставать бумажные билеты и вся информация, которая ему нужна в данной ситуации видна на экране.

Сценарии для сайтов и приложений

 

 

Рис. 5 Альтернативный сценарий

Во-вторых, может быть альтернативный сценарий (рис.5). Человек может захотеть вызвать такси до вокзала и здесь есть ссылка на такси. И может получить push-уведомление, чтобы не пропустить поезд за какое-то время.

Сценарии для сайтов и приложений

 

Рис.6 Шаг четвертый

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

Сценарии для сайтов и приложений

 

Рис.7  Шаг пятый

Дальше мы уже в поезде. Человек может найти свое место в поезде.На последнем экране, что важно (рис.7).

 

Сценарии для сайтов и приложений

Рис.8 Шаг шестой

Есть альтернативный сценарий (рис.8). То есть мы заботимся о человеке больше и думаем не только о том, как ему добраться до дома, т.к. это его конечная цель, в свою квартиру, отель и т.д. И мы даем альтернативный сценарий: сообщить по смс друзьям,родственникам, что все ок и где, во сколько будет встреча. Можно вызвать такси с вокзала. И подключить вайфай. То есть заботимся о человеке чуть больше, делая следующий шаг. И даем ему с комфортном добраться домой (рис.9).

Сценарии для сайтов и приложений

 

Рис. 9 Шаг седьмой

Важно развивать лишь те сценарии ,которые позволяют продвигаться вперед и не плутать в излишних деталях.

Здесь (рис.9) немного деталей, некоторый вещи можно еще глубже детализировать (каждый альтернативный сценарий,например). Сценарий не должен быть громадным и подробным, необходимо помнить про ключевые точки. Помнить о контексте, откуда человек попадает в приложение, где она находится в данный момент, в какой ситуации. Наше приложение не кончается на поиске места в вагоне, а помнит о следующем шаге.

Сценарий –стратегия. Описывайте ключевые точки процесса глобально, от начала до конца.

Инсайт: что это?

Курсы веб-дизайнаLeave a comment

Инсайт – это наблюдение за поведением человека.
Возможно, это наблюдение за поведением, возможно наблюдение за какими-то мыслями.

Понятие инсайт. Как найти инсайт?

Рис.1 Инсайт

Термин «инсайт» набирает свою популярность, сейчас это слово у всех на слуху, но редко кому удается в двух словах выразить всю его суть. Очень  сложно найти инсайт в том случае, если иметь неточное представление о том, что он собой представляет.
Интуиция в этом вопросе вряд ли поможет, ведь одной ее недостаточно. Существует большое количество суррогатных и лжеинсайтов, поэтому важно знать четкие критерии поиска и отбора.
Инсайт – что это такое? Это неожиданное озарение, понимание, которое приходит в результате интеллектуального размышления. Пришедшая на ум внезапная догадка помогает раскрыть суть возникшей проблемы и найти путь ее решения. Инсайт не лежит на поверхности, в его поиске нужно отказаться от различных банальностей и штампов. Общеизвестные факты не могут быть инсайтом.

Инсайт: что это и как его найти?

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

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

Различают следующие из них:
● Детальное изучение пользователя, его интересы и потребности, при этом следует уделить внимание чувствам и ощущениям;
● Глубокое погружение в проблему и анализ полученных сведений. Это поможет обозначить возможные пути решения проблемы;
● Обдумывание намеченных вариантов, это помогает отбросить несостоятельные идеи;
● На завершающем этапе проводится тестирование.

Что такое Инсайт и как его использовать?

— Инсайт у кошатников такой: «я купил кошке штуку для царапанья, а она все равно дерет ковер». Это определенный инсайт. Но инсайт не может быть про всех. Он может быть на какую-то категорию: для парней, для кошатников, для пилотов. Это какое-то наблюдение.
В твоем случае, не знаю найдем мы ли какой-то инсайт сходу про музыку. Допустим, я перед тем, как куда-то пойти, жду пока моя песня загрузится в телефон и тогда я выхожу, чтобы идти по улице и слушать трэк. То есть, жду пока они загрузятся с домашнего вай-фая, чтобы пока иду до метро, успеть их прослушать. Вот это мое наблюдение, и оно есть инсайт.
— И как его использовать?
— А дальше креативщики на этом инсайте используют какой-то креатив. То есть, если я увижу в принте, что «чувак, тебе больше не надо ждать пока твои песни загрузятся от вай фая и вот тебе 4g и симкарта, держи.». К примеру, я сегодня опоздал на работу, потому что песни скачивал.
— А мы потом на last.fm решаем эту проблему?
— Типа того. Вот это наблюдение – это инсайт.
— А дальше ты уже в принте или как-то креативным слоганом эту ситуацию обыгрываешь.
— И если действительно я так делаю, опаздываю на работу, потому что песни скачивал, то это только для меня. Остальные не поймут вообще.
— И тогда можно наделать разных инсайтов? Те, кто опаздывал, кто еще что-то?
— Да, да.
— И потом разом это запускается?
— Последовательно. Потому что если раньше было, то сейчас все делятся по маленьким сегментам, кусочкам по нишам. Вот почему инсайт, это какая-то небольшая категория людей, но которую ты очень хорошо понимаешь. И ту уже не можешь взять рупор и сказать кому эти хот доги, тебе нужно подойти и каждому сказать, что они для программистов. В рупор все, потому что орут. А задача инсайта подойти и лично каждому сказать, что ему нужно.

Итак, что такое инсайт? Он запускает механизм формирования мысленных образов и ощущений, которые относятся к каким-то давно забытым воспоминаниям или переживаниям.

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

Онлайн-курсы по дизайн-мышлению

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

Кстати, рекомендую посмотреть бесплатный мастер-класс о профессии веб дизайнера.

Frontend и backend: что это такое?

Курсы веб-дизайнаLeave a comment

Все слышали в программировании про эти понятия. Простыми словами я расскажу о Frontend и Backend:  что это такое? Давайте быстро пробежимся.

Frontend и backend, чем они отличаются?

Есть допустим стартовая страница Яндекса (рис.1). Мы видим на ней дизайн, видим страницу.

Что такое backend и frontand

Рис.1 Страница Яндекса ( дизайн)

Если нажать код этой страницы, мы увидим код этой страницы в браузере (рис.2).

Что такое backend и frontand

Рис.2 Frontend

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

Backend – это огромные сервера, которые располагаются в самом Яндексе (рис.3).

Что такое backend и frontand

Рис.3 Backend

Frontend или Backend, что выбрать?

Для ответа на этот вопрос важно понять, чем отличается frontend от backend. Давайте на примере разберем.

Я в браузере пишу поисковой запрос, нажимаю на кнопочку и на этом frontend кончается, дальше мой запрос уходит на сервер яндекса, происходит какая-то магия и я вижу выдачу результата. И я вижу все это на фронтенде. А сами алгоритмы поиска яндекса, они на бэкэнде.

 Поэтому frontend —  это:

  • html
  • css
  •  java script
  • frameworks
  • Jquery, Angular, Backbone, Closure, Extj

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

Backend:

1. Php
2. Rails
3. Ruby
4. Python
5. C#
6. Java
7. .NET
8. SQL
9. Node.js
10. Django
11. Xamarin
12. Swift

Frontend и Backend в работе веб-дизайнера

Дизайнеру важно знать Frontend и иметь представление о работе backend. Нужно просто понимать как это работает, какие данные мы понимаем. И лучше держать под боком программиста, который в backend соображает.

Инсайт в рекламе

Курсы веб-дизайнаLeave a comment


Инсайт – «озарение», невысказанная в явном виде мысль про товар или его свойства, с которой можно легко согласиться, но о которой раньше потребитель не думал в явном виде. Как применяется инсайт в рекламе?

3 признака того, что перед вами рекламный инсайт

  1. «Да, это про меня!» — всегда скажет человек на правильный инсайт. Инсайт в рекламе должен быть близок человеку. Он является его неотъемлемой частью жизни. То есть в инсайте человек узнает себя.
  2. Правда. Правильный рекламный инсайт передает настоящие и иногда скрытые переживания человека, истинные мотивы покупки товара.
  3. Открытие. Инсайт в рекламе раскрывает что -то новое из жизни человека, позволяет взглянуть на вещи под новым углом, стимулирует переоценку существующих знаний и опыта.

Один из примеров хороших рекламных инсайтов рассмотрим ниже.

Инсайт в рекламе P&G

P&G: Почему вы покупаете стиральный порошок?

Мама: Потому что я хочу, чтобы одежда была чистая.

P&G:Почему вы хотите, чтобы одежда была чистая.

Мама: Потому что я хочу, чтобы мой ребенок опрятно выглядел в школе

P&G: Почему вы хотите ,чтобы ваш ребенок опрятно выглядел в школе?

Мама: Потому что я хочу ,чтобы о нем хорошо думали.

P&G:Почему вы хотите, чтобы о нем хорошо думали?

Мама: Потому что если о моем ребенке хорошо думают, значит я хорошая мама!

Что такое рекламный инсайт?

Рис.1 Инсайт в рекламе от P&G

В этом ролике (рис.1), суть в том , что P&G не продает просто порошок, а продает мамам гордость их детей, ощущение “хорошей мамы”. Именно на этом построены их рекламы.

Инсайт в рекламе отвечает на вопросы:

  1. Как думает человек?
  2. Что думает человек?
  3. Почему он себя ведет именно так?
  4. Что он по-настоящему чувствует?

Еще один пример инсайта в рекламе Axe.

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

Что такое рекламный инсайт?

Рис.2 Инсайт Axe

Что такое рекламный инсайт?

Рис.3 Ролик Axe

Что такое рекламный инсайт?

Рис.4 Ролик Axe

Axe продает мужчинам не только дезодорант, а привлекательность для женщин. (рис.2,3,4).

Где искать рекламный инсайт

  1. Заблуждения
  2. Противоречия
  3. Неудовлетворенные потребности
  4. Тайные удовольствия
  5. Использование не по назначению
  6. Раздражение

5 способов найти инсайт для рекламы

1. Хорошие рекламные инсайты описывают цели и аудиторию, а не товар или услугу

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

Что такое рекламный инсайт?

Рис.5 Инсайт в рекламе от компании Большая Медведица

Что такое рекламный инсайт?

Рис. 6 Инсайт в рекламе от компании Большая Медведица

2. Хорошие инсайты в рекламе основаны на преимуществах категории, а не бренда.

Люди покупают стальные входные двери ради спокойствия. Это инсайт, который использовался компанией дверей в своей рекламе. (рис.7). И дальше (рис.8) Мы продаем спокойствие, то есть обыгрывается преимущество их категории, их дверей .

Что такое рекламный инсайт?

Рис.7 Инсайт в рекламе компании дверей

Что такое рекламный инсайт?

Рис.8 Преимущество компании дверей как рекламный инсайт

3. Хороший инсайт в рекламе объясняет то , как люди хотят себя чувствовать, а не то, как они думают.

У многих россиян существует такое обсуждение – «для своих всегда делают лучше».

Что такое рекламный инсайт?

Рис.9 Ролик «для своих всегда делают лучше»

Есть стереотип, который тоже в этой компании обыгрывается. Есть человеческое убеждение, что для своих всегда лучше и человек в этом себя узнает (рис.9).

4. Хорошие рекламные инсайты фокусируются на постоянных, а не на сиюминутных ценностях.

Carhartt — бренд, который гордится тем, что он не подвержен влиянию моды. 100 лет эта компания делала спецодежду. Рабочие знали этот бренд именно таким (рис.10).

Что такое рекламный инсайт?

Рис. 10 Бренд Carhartt

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

Что такое рекламный инсайт?

Рис.11 Распространение моды на бренд

Оставаясь верным своим ценностям, бренд становится сильнее, не подвергаясь влиянию модных течений (рис.11)

5. Хорошие инсайты в рекламе стимулируют создание новых идей , а не культивируют старые.

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

Что такое рекламный инсайт?

Рис.12 Рекламный инсайт о боязни потерять прав

Он боится встретить полицейских, которые отберут у него права. А это означает потерю работы или комфортного способа передвигаться. Здравствуй метро, автобус, маршрутка и так далее.То есть инсайт в рекламе еще и честный, так как человек просто боится потерять права (рис.12).

Как найти инсайт для рекламы

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

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

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

Сущности в веб-дизайне и интерфейсах

Курсы веб-дизайнаLeave a comment

Что такое сущности в интерфейсе?

Сущность — это атом интерфейса (рис.1).

Сущности в веб-дизайне и интерфейсах

Рис.1 Сущность — атом интерфейса

В этом примере с яндексом, сущность – это кнопка, краеугольная плоскость.

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

Есть сущность, которую мы максимально используем и в нашем интерфейсе адаптируем. На примере логотипов можно увидеть эту сущность (рис.2). Логотип фольксваген менялся со временем, но у него есть определенная узнаваемость.

Сущности в веб-дизайне и интерфейсах

Рис.2 Сущность на примере логотипов автомобилей

Даже у apple, все время сохранялся этот логотип яблока (рис.3).

Сущность на примере логотипов автомобилей

Рис.3 Сущность на примере логотипов 

И у RENAULT всегда был ромб, он менялся, исчезли полоски, но сущность ромба всегда сохранялась (рис.4).

Рис.3 Сущность на примере логотипов

Рис.4 Сущность на примере логотипов 

В природе, есть лапка птицы (рис.5). И она по сути везде одинаковая. Единственное, что она изменяется в зависимости от породы птиц. В зависимости от того, где эта птица обитает. Сущность одинаковая, но она адаптирована под разные условия.

Рис.4 Сущность на примере логотипов

Рис.5 Сущность на примере лапок птиц

Про рыб, ровно тоже самое (рис.6). Набор плавников, дальше есть разная форма, разное количество плавников. Но сущность рыбы, она есть, она ясна и понятна.

Рис.5 Сущность на примере лапок птиц

Рис.6 Сущность на примере плавников рыб

Поэтому не создавай разных сущностей без необходимости, а по-разному создавай то, что есть.

Ну а если тебе интересен веб дизайн, то посмотри мой бесплатный мастер-класс об этой профессии:

А / Б тестирование

Курсы веб-дизайнаLeave a comment

А/Б тестирование – это маркетинговый инструмент для повышения эффективности работы интернет-ресурса.

C помощью АБ тестов повышают конверсию посадочных страниц, подбирают оптимальные заголовки объявлений в рекламных сетях, улучшают качество поиска (рис.1).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.1 Как работает А/Б тест

А/Б тестирование и A/B тесты

А/Б тест – это просто две страницы. Очень похожие, у них есть одно какое-то изменение. У одной серенькая кнопочка, у другой красненькая. На нее заливаются люди, трафик так называемый. И дальше мы уже смотрим результаты. В оригинальной версии – это 1 %. То есть, то количество людей, которые нажали эту кнопочку. На другую нажали 4,5% из 100. То есть этот вариант выиграл.

Сейчас по шагам. Этапы А/Б тестирования:.

  1. Определить цель.
  2. Выдвинуть гипотезы
  3. Создать два варианта страницы.
  4. Настроить эксперимент в сервисе.
  5. Запустить трафик.
  6. Определить победителя.

У нас может быть идея, давайте покрасим иконку в красный цвет, потому что красный яркий цвет, привлечет внимание и будут чаще кликать (рис.2).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.2 Журнал А/Б тестирования

Цель АБ тестирования

Цель у нас  — регистрация. И результат измеряется в измени процента. У вас должна быть идея, что сделать реально на сайте. И предположение зачем вы это делаете.

Есть сервис Google Analytics (рис.3).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.3 Google Analytics Experiments

При А/Б тестировании эксперименты располагаются во вкладке поведение. Нажимаем создать «Эксперимент». Выбираем цель, то есть ту метрику, о которой мы говорили. Дальше нажимаем «далее» и мне предлагают выбрать две страницы. Здесь у вас должны быть сверстаны заранее страницы, на которые вы будете направлять людей. Он находит эти две страницы, у меня они две одинаковые.

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

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

Дальше проходит какое-то время, вы запускаете трафик, людей, и видите результаты (рис.4).

 

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.4 Анализ результатов

Совет. Запускать не больше двух версий сайта, потом еще пару, а затем выбирать победителя. Тест – это игра на выбывание.

Сервисы для А/Б тестирования (рис.5).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.5 Сервисы для А/Б тестирования

Google Analytics – он бесплатный, есть Optimizely  — это западный сервис, VWO, Unbounce (рис.6)

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.6 Сервисы для А/Б тестирования

Принцип у них похожий. Единственное, что в Google Analytics странички уже должны быть готовыми, сверстанными, мы просто подставляем код. В других сервисах можно подвигать блоки уже в самом сервисе. Но они опять же платные.

Некоторые дизайн-задачи невозможно решить интеллектуально —  нужны эксперименты. И это нормально. Предлагайте это заказчикам и клиентам.

Ну а если тема веб дизайна вам интересна, но вы пока еще новичок, то рекомендую посмотреть мой бесплатный мастер-класс о профессии веб дизайнера.

Основы дизайна: преобладание, точки фокуса и иерархия

Основы дизайна: преобладание, точки фокуса и иерархия

Ui / Ux дизайн, , , , , Leave a comment

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

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

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

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

Примечание: Это пятый пост в серии, посвященной основам дизайна. Вы можете найти первые четыре поста здесь:

Преобладание

Сравните два любых элемента в дизайне. Либо элементы будут равны во всех отношениях, либо один будет в некоторой степени преобладать над другим. Преобладающий элемент будет привлекать глаз. Его будут замечать в первую очередь. Он даже может в определенной степени контролировать подчиненный ему объект.

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

Круг преобладает над квадратом из-за их относительных размеров. (Полная версия)

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

Как установить преобладание

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

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

Ваша цель заключается в создании элементов с заметной разницей визуального веса.

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

  • размер,
  • форма,
  • цвет,
  • соотношение света и тени,
  • глубина,
  • текстура,
  • плотность,
  • насыщенность,
  • ориентация,
  • локализованное пустое пространство,
  • внутренний интерес,
  • предполагаемый физический вес,

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

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

В идеале вам нужен один преобладающий элемент.

Преобладающий элемент

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

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

Ваш доминирующий элемент является отправной точкой истории, котрую вы хотите рассказать. Это точка входа в ваш дизайн. Следует привлечь посетителей к первому месту, на который вы хотите, чтобы они посмотрели.

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

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

Точки фокуса

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

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

Три из четырех квадратов, также красноватого цвета, хотя и не такие яркие, как круг. Они того же размера, что и другие квадраты на изображении, но они выделяются среди серых квадратов из-за своего цвета.

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

Красный круг и квадраты – точки фокуса. Круг является преобладающим  элементом или доминирующей точкой фокуса. (Полная версия)

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

Уровень преобладания

Если вы создаете точки фокуса и делаете одну из данных точек доминирующим элементом, то вы начинаете создавать различные уровни доминирования. Доминирующий элемент будет находиться на одном уровне. Он будет замечен раньше всех остальных. Остальные точки фокуса будут находиться на другом уровне. Сколько уровней доминирования можно реально создать в дизайне?

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

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

  • Доминантный
    Это уровень с наибольшим визуальным весом. Уровень, который получает наибольшее внимание. Ваш доминирующий уровень будет, как правило, состоят из одного элемента на переднем плане.
  • Субдоминантный
    Это уровень точек фокуса, за исключением преобладающего элемента или доминирующей точки фокуса. Он получает средний акцент. Элементы на этом уровне получают меньше внимания, чем доминантный уровень, но больше, чем подчиненный уровень.
  • Подчиненный
    Это уровень с наименьшим визуальным весом. В некоторой степени, он должен отводиться на задний план. Этот уровень, как правило, содержит тело текста.

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

Визуальная иерархия

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

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

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

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

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

Перевернутая пирамида

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

Перевернутая пирамида написания (Изображение: Wikipedia) (Полная версия)

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

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

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

Опять же, я рекомендую применять три уровня преобладания или иерархии, хотя можно установить четыре или пять.

Принципы гештальта и визуальная иерархия

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

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

Такие законы, как содержательность (prägnanz) и симметрия, способствуют созданию порядка, и делают вещи проще и понятнее. Именно это вы делаете, когда вы строите иерархию в дизайне. Вы организуете элементы дизайна, чтобы создать ощущение порядка.

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

Примеры

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

Это мое мнение. Вы можете видеть дизайны иначе, и это нормально. Критически мыслить о дизайне – важнее, чем соглашаться с тем, что мы думаем.

An Event Apart

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

Скриншот верхней части главной страницы An Event Apart (Полная версия)

Текст «Дизайн-конференция для людей, создающих веб-сайты», вероятно, наиболее важная информация, которую должен знать человек, посещающий сайт. Это весьма четкое заявление о том, что представляет из себя сайт An Event Apart, и для кого предназначен этот сайт. Вероятнее всего, это первое, что должен увидеть новый посетитель сайта.

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

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

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

Paid to Exist

Доминирующим элементом на домашней странице Paid to Exist является изображение рюкзака в верхней части страницы. Это изображение и оно больше, чем все окружающие его элементы. Оно контрастирует с окружающей средой, потому что этот рисунок имеет внутренней интерес и отличается по форме.

Скриншот верхней части главной страницы Paid to Exist (Полная версия)

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

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

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

Подумайте о кругах и тексте с точки зрения визуальной иерархии. Большой красочный круг (который является одним из уровней иерархии) привлекает к себе внимание и ведет вас к информации, которая находится на другом уровне иерархии.

Mandy Sims

Сайт Менди Симс — одностраничник. Самая верхняя часть (не показана на скриншоте) включает в себя фото Мэнди, которое является для меня доминирующим элементом. Имя Мэнди также оформлено крупным шрифтом.

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

Скриншот раздела сайта Менди Симс (Полная версия)

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

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

Vanseo DESIGN

А последний пример – это мой собственный веб-сайт. Этот пост в блоге я написал несколько лет назад. Простите мое снисхождение, но в отличие от других примеров, тут я точно знаю, почему каждый элемент на странице выглядит так, как он выглядит. Преуспел я или нет в других моментах, но я уверен в намерениях.

Скриншот верхней части статьи с сайта Vanseo Design (Полная версия)

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

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

Логотип в верхнем левом и значок RSS в верхнем правом углу были задуманы так, чтобы выделяться немного больше, чем другой текст, именно поэтому они красного цвета. Они оба будут сильнее выделяться благодаря ярко красному цвету, но я не хотел, чтобы люди отвлекались на них. Тот же красный цвет используется для заголовков по всему сайту.

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

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

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

Выводы

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

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

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

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

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

Это была пятая статья из серии, в которой Стивен Брэдли, создатель таких популярных блогов, как: Основы дизайна: элементы, атрибуты и принципы и CSS анимация и современный веб-дизайн, рассматривает принципы гештальта и их влияние на сайтостроение.

Ну а если вам интересна профессия веб дизайнера, то рекомендую посмотреть мой бесплатный мастер-класс.

 

Визуальный вес

Визуальный вес и направление в веб-дизайне

Ui / Ux дизайн, , , , , 1 Comment

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

Мы называем эту силу визуальным весом в веб-дизайне, а подразумеваемое направление визуальных усилий – визуальным направлением. Вы должны понимать два этих важных понятия, если вы хотите создать иерархию, поток, ритм и баланс в своей композиции.

Примечание: Это четвертый пост в серии, посвященной основам дизайна. Вы можете найти первые три поста в серии здесь:

Визуальный вес в веб-дизайне

Физический вес является измерением действия силы тяжести на объект, но двумерные объекты (такие как элементы на веб-странице) не имеют массы и, следовательно, не имеют какого-либо физического веса. Визуальный вес является измерением усилия, прилагаемого элементом для привлечения взгляда. Двумерные объекты могут привлечь внимание. Чем сильнее элемент притягивает взгляд, тем больше его визуальный вес.

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

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

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

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

Как измерить визуальный вес в дизайне?

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

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

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

Давайте начнем с базовых особенностей, которые я упоминал в прошлом посте: размер, цвет, сочетание света и тени, положение, текстура, форма и ориентация.

  • Размер
    Большие элементы обладают большим визуальным весом, чем маленькие.
  • Цвет
    Теплые цвета лучше применять на переднем плане, они обладают большим визуальным весом, чем холодные цвета, которые отступают на второй план. Красный считается самым тяжелым цветом, а желтый – самым легким.
  • Сочетание света и тени
    Более темные элементы обладают большим визуальным весом, чем светлые.
  • Положение
    Элементы, расположенные выше в композиции, воспринимаются более весомыми, чем элементы, расположенные в композиции. Чем дальше от центра или доминирующей области композиции находится элемент, тем больший визуальный вес будет иметь элемент. Элементы на переднем плане имеют больший вес, чем элементы на заднем плане.
  • Текстура
    Текстурированные элементы кажутся тяжелее, чем нетекстурированные. Благодаря текстуре элемент выглядит трехмерным, что придает ему ощущение массы и физического веса.
  • Форма
    Объекты правильной формы выглядят тяжелее объектов неправильной формы. Неравномерность создает впечатление удаления массы из правильной формы.
  • Ориентация
    Вертикальные объекты кажутся тяжелее, чем горизонтальные. Диагональные элементы обладают наибольшим весом.

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

  • Плотность
    Размещение большого количества элементов в заданном пространстве увеличивает визуальный вес пространства. Зритель воспринимает большие и более темные скомбинированные элементы, в отличие от нескольких небольших и более светлых элементов.
  • Локализованное пустое пространство
    Пустое пространство не имеет визуального веса, потому что оно выглядит пустым. Любой объект, находящийся в этом пространстве, будет казаться тяжелее из-за пространства вокруг него.
  • Внутренний интерес
    Некоторые предметы интереснее других. Чем сложнее или запутаннее элемент, тем больший интерес он вызовет и тем больше внимания привлечет. Ваши собственные интересы также играют свою роль. Если вы интересуетесь автомобилями больше, чем самолетами, то изображение автомобиля с большей вероятностью привлечет ваше внимание.
  • Глубина
    Большая глубина резкости повышает визуальный вес элемента, находящегося в фокусе, это происходит из-за контраста между фокусом и нечеткими областями.
  • Насыщенность
    Насыщенные цвета выглядят тяжелее, чем ненасыщенные.
  • Предполагаемый физический вес
    Мы знаем, что дом весит больше, чем ботинок. Изображение дома визуально будет весить больше, чем изображение ботинка, потому что мы предполагаем, что дом весит больше.

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

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

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

Гештальт и визуальный вес в веб-дизайне

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

  • Фигура и фон
    Визуальный вес может быть использован для разделения фигуры и фона, придавая фигуре больше веса, чем фону.
  • Соседство
    Пространство между элементами приводит к различному количеству локализованного пустого пространства и различной плотности объектов в пространстве.
  • Сходство и контраст
    Вы можете использовать визуальный вес, чтобы сообщить о любом из них. Контраст придаст больше визуального веса контрастирующему элементу. Элементы с близким визуальным весом, естественно, выглядят похожими.
  • Основной акцент (следующая тема в серии)
    Точки притяжения в композиции – это основные акценты, и они несут больший визуальный вес по сравнению с другими элементами.
  • Прошлый опыт
    Опыт зрителя будет влиять на его восприятие того, каким внутренним интересом может потенциально обладать элемент.

Визуальное направление в веб-дизайне

Если визуальный вес в веб-дизайне привлекает глаз к конкретному месту, то визуальное направление направляет глаз к следующему месту. Визуальное направление – это предполагаемое направление визуальных сил. Воспринимайте его, как ожидаемое направление движения элемента, если бы он двигался.

Визуальное направление выполняет аналогичную визуальному весу функцию: оно пытается заставить вас заметить определенные части композиции. В то время как визуальный вес кричит: «Посмотри на меня!», визуальное направления говорит «Посмотри туда!»

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

  • Форма элемента
    Форма элемента может создать проходящую сквозь него ось, и эта ось может предложить направление. Основная ось, как правило, рассматривается как параллель визуального направления элемента.
  • Расположение элементов
    Визуальный вес – это сила, которая может привлечь или оттолкнуть соседний элемент. Эта сила будет двигаться в направлении, объединяющем оба элемента.
  • Смысловое наполнение элемента
    Стрелка, указывающий палец, или глаз – все эти символы предлагают смотреть в определенном направлении.
  • Движение
    Элемент может буквально двигаться сквозь ваш дизайн, и его движение будет иметь направление.
  • Структурный скелет
    Каждая композиция имеет структурный скелет, с силами, которые естественным образом его окружают и проходят по различным осям. Это, наверно, стоит объяснить немного подробнее.

Структурный скелет в веб-дизайне

В своей книге «Искусство и визуальное восприятие: Психология творческого взгляда», Рудольф Арнгейм предложил идею структурного скелета в каждом изображении.

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

Структурная сеть Рудольфа Арнгейма

 

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

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

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

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

Гештальт и визуальное направление в веб-дизайне

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

  • Равномерная связность
    Линии, соединяющие элементы, имеют направление. Взгляд создает воображаемую линию между глазом и всем, на что он смотрит.
  • Непрерывность
    Этот принцип относится к элементам, расположенных вдоль линии или кривой, так, будто они движутся в направлении линии или кривой.
  • Общая судьба
    Элементы, рассматриваемые как имеющие общую судьбу, — это те элементы, которые выглядят перемещающимися в одном направлении.
  • Параллелизм
    Для того, чтобы элементы казались параллельными, должны быть заданы их внутренние оси (те же, что задают направление).

Общее направление композиции в веб-дизайне

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

  • Горизонтальное направление заставляет композицию казаться спокойной и стабильной.
  • Вертикальное направление придает ощущение формальности, настороженности и баланса.
  • Диагональное направление предполагает движение и действие.

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

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

Примеры

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

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

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

Bureau

Примечание: Скриншот Bureau был сделан моим браузером, установленным шире, чем на 1280 пикселей. Сделайте чуть меньше, и конструкция сольется в один столбец вместо двух.

 

Скриншот статьи с веб-сайта Bureau

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

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

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

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

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

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

Create Digital Media

При загрузке домашней страницы Create Digital Media, цветные элементы анимируют на месте, привлекая к себе много внимания. Даже если вы пропустите анимацию, вы, вероятно, увидеть эти элементы, так как они обладают наибольшим весом, благодаря своему насыщенному розовому, желтому и синему цвету. Кроме того, эти элементы находятся в одном месте, что создает заполненную область в середине пустого пространства.

Примечание: В промежутке времени между написанием и публикацией этого поста, Create Digital Media закрыли свои двери. Посетите их домашнюю страницу, если хотите узнать, почему это произошло.

 

Скриншот домашней страницы Create Digital Media

 

Изображения в нижней части является следующим самым весомым для меня объектом. Они темные, большие и сложной формы. Они привлекают ваше внимание к каждому из трех разделов, которые содержат следующие наиболее визуально заметные элементы – заголовки разделов.

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

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

Здесь, я думаю, основное направление – горизонталь. Линии проходят по горизонтали, так же, как и главный заголовок и навигация по сайту. Еще один из визуально заметный элемент – выделенный текст – также находится в горизонтальном положении.

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

Javier Marta

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

 

Скриншот домашней страницы сайта Javier Marta

  • Изображения
    Они большие, темные и окружены пустым пространством. Каждое изображение содержит внутренний интерес.
  • Зеленые разделители
    У них есть цвет, они крупнее и, как и изображения, окружены пустым пространством.
  • Пункты меню
    Они темные, большие и, опять же, окружены пустым пространством.

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

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

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

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

На нижнем рисунке, зонтик женщины указывает вправо, но она идет влево – куда я захочу посмотреть далее. Оба рисунка могли бы работать лучше, если бы их направление вело к тексту, а не от него.

Stanford Arts

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

 

Скриншот домашней страницы Stanford Arts

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

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

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

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

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

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

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

Конечно, изображения меняется при наведении указателя мыши на любую из ссылок в блоках. Тем не менее, изображения указывают наружу, а не вовнутрь.

Выводы

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

Визуальное направление – это предполагаемое направление сил, действующих на элементы и оказываемых ими. Направление — это намек для зрителя, поясняющий куда перевести взгляд.

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

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

Это была четвертая статья из серии, в которой Стивен Брэдли, создатель таких популярных блогов, как: Основы дизайна: элементы, атрибуты и принципы и CSS анимация и современный веб-дизайн, рассматривает принципы гештальта и их влияние на сайтостроение.

Основы дизайна: соединение и разделения элементов посредством контраста и сходства

Контраст и сходство в веб-дизайне

Ui / Ux дизайн, , , , , Leave a comment

Стивен Брэдли, создатель таких популярных блогов, как: Основы дизайна: элементы, атрибуты и принципы и CSS анимация и современный веб-дизайн, продолжает рассматривать принципы гештальта и их влияние на сайтостроение.

Continue reading

Основы дизайна: пространство и соотношение фигуры и фона

Соотношение фигуры и фона

Ui / Ux дизайн, Курсы веб-дизайна, , , , , Leave a comment

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

Continue reading