Три категории дизайна: что заставляет взаимодействовать с продуктом
Мнение основателя студии «Логомашина» Романа Горбачёва.
Когда ты — основатель студии, которая сделала больше всех логотипов в России, тебе достаются отнюдь не слава и женщины. Тебе достаётся толпа людей, которые показывают свои сайты и логотипы с вопросом: «Это хороший дизайн или нет?»
Вопрос довольно сложный, потому что в дизайне мало объективного и много вкусовщины. За годы работы я видел, наверное, миллион знаков, визиток и сайтов. Чтобы не сойти с ума, каждый раз погружаясь в детали дизайна, мне была необходима нативная и универсальная система оценки. И я её придумал.
Дизайн всегда про взаимодействие. Не бывает сферических логотипов в вакууме, бывают визитки, вывески, сайты. Всегда есть объект, с которым мы взаимодействуем: кладём визитку в карман, ищем ресторан по вывеске, заполняем форму на сайте.
Поэтому я придумал такую систему: буду делить весь дизайн, который встречаю, по впечатлению от взаимодействия. Получилось три больших категории.
Дизайн, который мешает взаимодействию
Этого добра у нас навалом: нечитаемые шрифты с тенями, иллюстрации из выдачи Google, полотна равномерного текста. Всё это отталкивает от взаимодействия: чтения, использования, погружения. С сайта хочется поскорее уйти, визитку засунуть в общую кучу, а объявление даже читать неохота.
«Хороший» пример — эта афиша.
Не знаю как вам, а мне совершенно не хочется продираться сквозь эти пляшущие шрифты, чтобы понять, в чём суть. Такую афишу не хочется разглядывать. Все элементы как будто созданы, чтобы, наслаиваясь друг на друга, создавать хаос. Вёрстка случайная, поэтому непонятно, что основное, а что второстепенное. Дизайн афиши мешает взаимодействию с ней.
Пример из сети.
У меня плохое впечатление от этого экрана: я вижу бездушные блоки текста, который неудобно читать из-за выравнивания по центру. Картинки мелкие и невыразительные — неинтересно разглядывать. Мне с таким сайтом взаимодействовать не хочется.
Дизайн, который помогает взаимодействию
Простой сайт с логотипом в левом углу, аккуратная визитка, понятное объявление. Там сразу ясно, как взаимодействовать, на что нажимать, в каком порядке читать. Иллюстрации в тему. Производит приятное впечатление. Это можно назвать хорошим дизайном.
Пример из реального мира.
Вёрстка чёткая, помогает читать текст в правильном порядке, понятная структура. Иллюстрации взяты не из Google по запросу «тётка в пальто сток», а сфотографированы в студии специально для книги. Цветовой круг иллюстрирует, о чём идёт речь в тексте.
Пример из виртуального мира.
Мне с таким дизайном легко взаимодействовать: я вижу структуру и понимаю, как работают элементы. Иллюстрации большие и яркие, сделаны специально для сайта. Кнопки контрастные, элементы управления крупные.
Дизайн, который приглашает к взаимодействию
Тут я приведу побольше примеров, потому что это редкий гость, особенно в России. Главный критерий: такой дизайн приглашает к взаимодействию с объектом, даже если сам объект вам даром не нужен, и вы просто мимо проходили. Такой дизайн привлекает, добавляет стоимость и приводит к успеху. Про него говорят: «Делали с душой».
Хороший пример — эта соковыжималка для цитрусовых.
Вряд ли много кому необходима такая соковыжималка, да и она не очень удобная. Но дизайн превращает её в арт-объект, с которым хочется взаимодействовать: покрутить в руках или поставить на кухню как украшение. Именно дизайн составляет всю её ценность.
Пример попроще — интерактивный сайт histography.ru.
Дизайн, с которым хочется взаимодействовать. Это можно было упаковать в сто страниц скучного текста с картинками. Но интерактивный скролл по векам с изменяющимися границами России приглашает к взаимодействию, даже если вы зашли случайно и не интересуетесь историей. Удачный дизайн составляет ценность этого сайта.
Пример из мира логотипов — анимированные знаки.
Нескромно показывать работу, которую делали мы, но она отлично иллюстрирует ситуацию: сам логотип не бросается в глаза, в нём нет чего-то особенного, но анимация заставляет разглядывать его и производит хорошее впечатление. Поэтому мы анимируем большинство логотипов. Анимация как раз приглашает к взаимодействию с логотипом.
Отличный пример одновременно из промдизайна, техдизайна и веба.
Эстетичный дизайн и прекрасные фотографии с сайта «Лапки». Ребята делают датчики окружающей среды для iPhone и много внимания уделяют дизайну. Часть датчика сделана из настоящего дерева. Выглядит стильно, такую вещь хочется купить. Именно из-за чувства стиля стартап «Лапка» купил абсолютно непрофильный Airbnb. Так дизайн принёс им реальные и, наверное, неплохие деньги.
Что в итоге
Эта простая система координат помогает мне быстро отвечать на вопрос: «Это хороший дизайн или нет?» Я просто спрашиваю себя: «Хочу ли я взаимодействовать с этим объектом?» А дальше можно углубляться: что именно мешает взаимодействию, как это исправить и улучшить.
Конечно, это всё завязано на опыте и художественном вкусе, и это тоже надо развивать.
И как всегда: успехов вам и вашим проектам.
Комментарий удален модератором
Долго пытался понять к чему это, а потом прочёл коммент ниже и тут стало смешно)
Комментарий удален модератором
Круто ребята. А можете оценить "дизайн" нашего сайта? https://lowtrip.ru/
На мой вкус, к сожалению, ближе к первой категории. Блоки сверстаны неряшливо, много шума, не хочется во все это вчитываться. Сравните, к примеру, тоже экран с персонажем, но более простой для восприятия:
Роман, вот и идея прилетела - экспресс оценка дизайна )...
Работы - непаханное поле
А я люблю рисовать квадратики.
Да, типа того.
И персонаж не обрублен, и эмоция его понятнее.
Второй вариант выглядит очень не стыдно. Есть какие-то советы для использования этих квадратных сечений? Сам от дизайна далек, делаю все на "мне нравится", вместо каких-то общепризнанных вариантов, хотелось бы углубиться.
Если будет не сложно, хотелось бы узнать что-то подробнее по конкретно одному скриншоту, насколько он удобен и информативен.
https://pp.userapi.com/c837437/v837437532/315c8/h_dIAzB3MNg.jpg
Это называется «верстка» и по ней много книг написано. Не путать с html-версткой)
По вашему скриншоту все плохо(
Хуже только так:
Спасибо хоть на этом)
Модульная сетка - гуглите
Добротная статья
Комментарий удален модератором
Пользователи этой штуки признали, что эта соковыжималка охрененно неудобная. Но согласен, красивая.
Роман, здравствуйте! Спасибо за материал, очень кстати!
Есть вопрос. Сейчас занимаемся разработкой сайта (ищем исполнителей). Собственно, думали обратиться в вашу компанию для разработки фирменного стиля. Но так и не поняли в чем заключается суть услуги. Что там будет в итоге: только логотип и правила, как его применять? А уже со всем этим нужно искать исполнителей, кто сделает на основе этого сайт и визитки?
Имеет ли смысл заказывать фирменный стиль до заказа сайта? Чтобы сайт разрабатывали уже с учетом этого фирменного стиля?
Занимаетесь ли вы разработкой сайтов или, возможно, у вас есть какие-то партнеры, которых вы рекомендуете. Спасибо.
Привет!
В тариф входит полная разработка — просто присылаете наши файлы в типографию и они вам все напечатают. Можно набрать нас, все расскажем: 8 800 777-04-75
Да, есть смысл определиться с цветами, шрифтами и фирменными формами, чтобы сайт «дружил» со всем остальным оформлением. Так реклама и СММ будут работать лучше.
Нет, мы делаем только фирменные стили, но можем нарисовать примерный образ будущего сайта. Порекомендовать, к сожалению, никого не можем.
Комментарий удален модератором
Комментарий недоступен
Евгений, я не понял, какой предмет вы ищите)
Полное портфолио из 250+ стилей тут:
https://www.behance.net/logomachine
Комментарий недоступен
Моя фирма только фирстили делает
Комментарий недоступен