Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Объединяем медиа и бизнес с помощью контента
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
39
Битрикс24

Битрикс24

www.bitrix24.ru

30
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

11
Flowlu

Flowlu

flowlu.ru

10
GIFTD

GIFTD

giftd.tech

9
Aword

Aword

Приложение для изучения английских слов

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Руководство по визуальному проектированию

3 691 1 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Эта статья для тех, кто не имеет профессиональных навыков в визуальном проектировании. Это значит, что иногда при решении задач, связанных с дизайном, у вас появляется смутное представление о том, чего вы хотите, но вы не можете его сформулировать или реализовать.

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

1. Что такое «чистый» дизайн?

Обратите внимание на две листовки ниже. Какая из них привлекает ваше внимание больше? Какая выглядит «чище»?

Rockinrobin?format=1000wRockinrobinR_visual_design?format=1000w

Если та, что ниже – ура! Я сделал свою работу. Но что же означает «выглядит чище»?

1.1. «Чистый» дизайн уменьшает усилия, необходимые на поиск информации

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

Две листовки содержат одну и ту же информацию. Но в той, что справа, тем не менее, информация расположена более удобно.

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

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

Айкидо. Занятия для начинающих. Начало в воскресенье, 27 апреля 2008 года, 13:00-14:00. 8-недельный курс – 95$. Занятия для взрослых (от 12 лет и старше). Опыт боевых искусств не обязателен. Звоните, чтобы забронировать место. Регулярные занятия. Вторник 19:30. Среда 19:45, суббота 13:00 и 14:15. Приходите. Приглашаем посетить любое из наших занятий, чтобы понять, что айкидо – занятие для вас!

Вот краткий ответ на вопрос «Что такое «чистый» дизайн?»: «чистый» дизайн через визуальное мышление помогает людям найти необходимую им информацию с минимальными умственными усилиями.

1.2. Необходимая информация

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

  1. Актуальность. Меня это волнует?
  2. Обзор. Каковы основные идеи материала? Что в нем самое важное?
  3. Основное понимание. Где в тексте объясняется этот график?
  4. Остаточная информация. Я помню, что-то об орангутангах ... где это было?
  5. Поиск ключевых деталей. Как мне найти это?

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

  1. О чём эта брошюра? Хм ... Похоже, речь идет о френологии. Мне нужен френолог!
  2. Какие услуги они предоставляют? Сертифицированы ли они? Они местные? О Боги – да, да, да!
  3. Как я могу связаться с ними? Слава Богу, здесь есть номер телефона! Я позвоню, когда вернусь домой.
  4. (Позже, дома) Так, где-то был номер…

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

Rockinrobin_visual_design?format=500w

Этот институт реально существует

1.3. Поддержка визуального мышления

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

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

Rockinrobin_visual_design?format=1000w

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

Когда вы создаёте документ, вы пытаетесь устранить эти противоречия между автоматически воспринимаемым значением и фактическим. Оставшаяся часть руководства посвящена именно этому и поясняет 3 визуальных аспекта: размер, расстояние и выравнивание. Также поясняется важный инструмент: сокращение материала. Но перед этим…

1.4. Самое важное, что нужно помнить

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

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

Rockinrobin_visual_design?format=500w

2. Размер

Взгляните ещё раз на листовки про айкидо:

Rockinrobin?format=1000wRockinrobin_visual_design?format=1000w

Как в них используются разные шрифты? Как эти различия способствуют их пониманию (или умаляют его)?

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

2.1. Используйте один и тот же размер шрифта (кегль), чтобы зафиксировать задачи текста

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

А можно ли то же самое сказать о первой листовке? Размер шрифта одного блока текста не сильно отличается от другого, и эти блоки не очень соответствуют друг другу.

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

Rockinrobin_visual_design?format=1000w

2.2. Легко распознаваемые функции помогают пользователю найти информацию

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

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

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

2.3. Выводы по этому разделу

Определите назначение ваших визуальных элементов. Какие цели у разных частей текста? На какие вопросы они помогают отвечать? Заголовки отвечают на вопросы типа «о чем это?» и «где контактная информация?».

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

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

3. Расстояние

Посмотрите на котят внизу:

Rockinrobin_visual_design?format=1500w

Когда вы смотрите на картинку справа, выделяете ли вы 2 группы котят? А как насчёт картинки слева – котята сгруппированы вместе?

3.1. Элементы, расположенные рядом друг с другом, образуют группы

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

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

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

Я знаю, о чём вы думаете: «Почему вы включили в текст эту историю?». А я скажу, почему: теперь вы дважды подумаете, прежде чем неправильно распоряжаться или злоупотреблять расстоянием, работая над дизайном вашего проекта.

3.2. Убедитесь, что группировка объектов очевидна

Посмотрите на фотографии ниже. В левой группе вы не можете точно сказать, к кому относится надпись. У какого парня сложные отношения с хот-догами!? Вы не знаете точно. Может, вы угадаете, глядя на их выражения лиц и исходя из вашего личного опыта поедания хот-догов.

Rockinrobin_visual_design?format=1500w

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

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

3.3. Выводы по этому разделу

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

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

4. Выравнивание

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

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

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

Время примеров! Смотрите!

Rockinrobin_visual_design?format=750w

Небрежное выравнивание

Rockinrobin_visual_design?format=750w

Выравнивание по центру

Rockinrobin_visual_design?format=750w

Выравнивание по левому краю

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

Для нашего мозга связанные по содержанию части должны быть четко выстроены в единую конструкцию. Если что-то не подчиняется этому правилу, наш мозг ищет причину этому. После слов «Trapping hands» строчки выходят вперёд, и наш мозг пытается найти этому причину. И когда он не ее находит, то посылает сигнал-раздражитель, вызывающий химические вещества, которые заставляют нас думать, что реклама сделана небрежно.

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

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

Rockinrobin_visual_design?format=1000w

Часто лучше всего использовать выравнивание по левому или по правому краю. На последнем рекламном объявлении «Акотемия зла» использовано выравнивание по левому краю. Эта листовка, конечно, не заслуживает особых похвал, но выглядит лучше, чем предыдущие две.

4.2. Используйте выравнивание, чтобы всё выглядело круче

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

Rockinrobin_visual_design?format=1500w

Заголовки "A Checklist for Content Work " и "CSS Floats 101" расположены по центру, как и имена их авторов. С другой стороны, заголовок "Content-tious Strategy" выровнен по левому краю.

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

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

4.3. Выводы по этому разделу

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

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

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

5. Сокращение

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

Rockinrobin?format=1000wRockinrobin?format=1000w

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

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

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

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

6. Учите больше!

Можно столько всего сделать! Цвет, типографика, гармония, баланс, симметрия, ритм – можно продолжать ещё и ещё, и всё это очень весело. Лучший способ «создать» дизайн – просто работать над ним.

6.1. Изучение и практика

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

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

Я советую вам взять это в привычку. Спросите себя, что [на увиденных вами примерах] бы вы могли делать по-другому. Могли бы вы сделать этот дизайн «чище»? Что бы вы убрали? Вы можете даже начать с этого веб-сайта. Что можно сделать «чище»? Можно ли улучшить эти листовки?

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

6.2. Материалы для изучения

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

Ниже приведен список книг, которые я читал сам и которые я считаю полезными для новичков.

Rockinrobin?format=300w

Универсальные принципы дизайна

Уильям Лидуэлл, Критина Холден, и Джилл Батлер

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

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

Rockinrobin?format=300w

Книга о дизайне для недизайнера

Робин Уильямс

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

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

Rockinrobin?format=300w

Не заставляйте меня думать

Стив Краг

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

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

Rockinrobin?format=300w

Визуальное мышление для дизайна

Колин Вэр

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

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

Вот еще несколько ссылок, которые я наспех набросал:

7. В завершение

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

+13
Первые Новые Популярные
Александр Маглыш
Начинающим дизайнерам советую ознакомится, чтобы научиться делать хороший дизайн.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать