Три категории дизайна: что заставляет взаимодействовать с продуктом

Мнение основателя студии «Логомашина» Романа Горбачёва.

Когда ты — основатель студии, которая сделала больше всех логотипов в России, тебе достаются отнюдь не слава и женщины. Тебе достаётся толпа людей, которые показывают свои сайты и логотипы с вопросом: «Это хороший дизайн или нет?»

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

Дизайн всегда про взаимодействие. Не бывает сферических логотипов в вакууме, бывают визитки, вывески, сайты. Всегда есть объект, с которым мы взаимодействуем: кладём визитку в карман, ищем ресторан по вывеске, заполняем форму на сайте.

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

Дизайн, который мешает взаимодействию

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

«Хороший» пример — эта афиша.

Афиша с сайта kapustadizain.ru

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

Пример из сети.

syktyvkar-reklama.ru

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

Дизайн, который помогает взаимодействию

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

Пример из реального мира.

Разворот книги «Волшебный гардероб», которую верстал Игорь Штанг

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

Пример из виртуального мира.

qlean.ru

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

Дизайн, который приглашает к взаимодействию

Тут я приведу побольше примеров, потому что это редкий гость, особенно в России. Главный критерий: такой дизайн приглашает к взаимодействию с объектом, даже если сам объект вам даром не нужен, и вы просто мимо проходили. Такой дизайн привлекает, добавляет стоимость и приводит к успеху. Про него говорят: «Делали с душой».

Хороший пример — эта соковыжималка для цитрусовых.

Соковыжималка дизайна Филиппа Старка

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

Пример попроще — интерактивный сайт histography.ru.

Интерактивная карта изменения границ России

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

Пример из мира логотипов — анимированные знаки.

Логотип Cozy Lounge

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

Отличный пример одновременно из промдизайна, техдизайна и веба.

mylapka.com

Эстетичный дизайн и прекрасные фотографии с сайта «Лапки». Ребята делают датчики окружающей среды для iPhone и много внимания уделяют дизайну. Часть датчика сделана из настоящего дерева. Выглядит стильно, такую вещь хочется купить. Именно из-за чувства стиля стартап «Лапка» купил абсолютно непрофильный Airbnb. Так дизайн принёс им реальные и, наверное, неплохие деньги.

Что в итоге

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

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

И как всегда: успехов вам и вашим проектам.

0
20 комментариев
Написать комментарий...

Комментарий удален модератором

Развернуть ветку
Reb Rending

Долго пытался понять к чему это, а потом прочёл коммент ниже и тут стало смешно)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Ruslan Ibragimov

Круто ребята. А можете оценить "дизайн" нашего сайта? https://lowtrip.ru/

Ответить
Развернуть ветку
Роман Горбачёв
Автор

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

Ответить
Развернуть ветку
Aleksey Lapunou

Роман, вот и идея прилетела - экспресс оценка дизайна )...

Ответить
Развернуть ветку
Aleksey Lapunou

Работы - непаханное поле

Ответить
Развернуть ветку
Владимир Скай

А я люблю рисовать квадратики.

Ответить
Развернуть ветку
Роман Горбачёв
Автор

Да, типа того.
И персонаж не обрублен, и эмоция его понятнее.

Ответить
Развернуть ветку
Ксандер Гусаров

Второй вариант выглядит очень не стыдно. Есть какие-то советы для использования этих квадратных сечений? Сам от дизайна далек, делаю все на "мне нравится", вместо каких-то общепризнанных вариантов, хотелось бы углубиться.
Если будет не сложно, хотелось бы узнать что-то подробнее по конкретно одному скриншоту, насколько он удобен и информативен.
https://pp.userapi.com/c837437/v837437532/315c8/h_dIAzB3MNg.jpg

Ответить
Развернуть ветку
Роман Горбачёв
Автор

Это называется «верстка» и по ней много книг написано. Не путать с html-версткой)
По вашему скриншоту все плохо(
Хуже только так:

Ответить
Развернуть ветку
Ксандер Гусаров

Спасибо хоть на этом)

Ответить
Развернуть ветку
Reb Rending

Модульная сетка - гуглите

Ответить
Развернуть ветку
Vlad Mira

Добротная статья

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Александр К

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

Ответить
Развернуть ветку
Оксана Константинова

Роман, здравствуйте! Спасибо за материал, очень кстати!

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

Имеет ли смысл заказывать фирменный стиль до заказа сайта? Чтобы сайт разрабатывали уже с учетом этого фирменного стиля?

Занимаетесь ли вы разработкой сайтов или, возможно, у вас есть какие-то партнеры, которых вы рекомендуете. Спасибо.

Ответить
Развернуть ветку
Роман Горбачёв
Автор

Привет!
В тариф входит полная разработка — просто присылаете наши файлы в типографию и они вам все напечатают. Можно набрать нас, все расскажем: 8 800 777-04-75

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

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Роман Горбачёв
Автор

Евгений, я не понял, какой предмет вы ищите)
Полное портфолио из 250+ стилей тут:
https://www.behance.net/logomachine

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Роман Горбачёв
Автор

Моя фирма только фирстили делает

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
17 комментариев
Раскрывать всегда