Что разработчикам, продакт-менеджерам и фаундерам стоит знать о дизайне

Любому программному продукту нужна красивая обёртка, а создание приятного минималистичного дизайна не требует сверхъестественных способностей. Достаточно соблюдать простые правила и не делать явных ошибок. Команда Mail.ru Cloud Solutions перевела гайд фулстек-разработчика Пола Копплстоуна, в котором он делится опытом, накопленным за годы практики.

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

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

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

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

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

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

Он должен состоять из двух частей: пиктограмма и текст/название.

Площадь. Убедитесь, что картинка равномерно вписывается в квадрат. Это важно, потому что она станет фавиконом или, возможно, значком приложения.

Симметрия. Пиктограмма должна равномерно распределяться по пространству внутри квадрата. Логотипы выглядят немного странно, если прижаты к одной стороне или в какой-то части квадрата осталось много места.

Простота. Это самое важное правило. Иконка не бывает слишком простой: чем проще — тем лучше. Убедитесь, что она читается при уменьшении до 32×32 пикселей. В таком размере иконка отобразится на вкладке браузера. Придерживайтесь простых цветов: можно использовать разные цвета, но лучше только один.

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

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

Обычно я начинаю проект с одного цвета, который называю «стартовым синим». Вероятно, вы видели этот цвет на миллионах различных технических сайтов. Его шестнадцатеричный код где-то рядом с #2B70F6. На это есть много причин, но главное, что это абсолютно безопасный цвет в дизайне. После создания сайта не стесняйтесь поиграть с оттенками.

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

Для начала полезно знать, что:

Здесь я могу дать три рекомендации:

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

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

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

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

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

Вот лучшие бесплатные сайты, которые я обычно использую:

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

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

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

Недавно появились действительно отличные ресурсы с бесплатными иллюстрациями для начала:

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

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

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

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

Лучшие сайты, которые я использую для поиска фотографий:

Здесь важно помнить только одно — согласованность. Чтобы продукт ощущался цельным, все элементы должны быть согласованы друг с другом:

Не попадайтесь в ловушку «разного дизайна для разных частей сайта». В начале проектирования кажется, что каждый раздел сайта должен выглядеть немного иначе. На самом деле всё наоборот. Старайтесь везде использовать одни и те же макеты. Когда человек видит что-то впервые, возникает определенная когнитивная нагрузка: мозг пытается быстро распознать на странице важную информацию. Если на сайте повторно используют одни и те же макеты, когнитивная нагрузка уменьшается, пользователи почувствуют дискомфорт только один раз.

Если вы создаете веб-сайт, рекомендую отдельно использовать фреймворк CSS и фреймворк JS. Избегайте «закрытых» фреймворков вроде ReactStrap, вместо этого выбирайте фреймворки CSS с классами. Когда вы освоите их, ваши проекты можно будет реализовать на чем угодно: HTML, React (тут подробнее о разработке на нем), Vue или любом другом фреймворке.

Я бы также рекомендовал придерживаться «утилитарных» фреймворков CSS. Выберите Bulma или Tailwind, потратьте день на их изучение. Это окупится сполна — прототипирование с любым из них быстрее, чем проектирование, а затем реализация с нуля. Избегайте использования тега style. Просто везде применяйте классы — от макета до внешнего вида.

Figma. Это всё, что нужно. Забудьте Sketch и Invision. В Figma есть векторный редактор, кликабельные прототипы, комментарии и совместная работа. И она бесплатная с некоторыми ограничениями: три проекта, два редактора, история за 30 дней. Выделите немного времени на изучение — здесь очень полезны видеоуроки — а затем делайте там всю дизайнерскую работу.

Онлайн-сервис Figma для разработки интерфейсов и прототипирования с возможностью совместной работы в реальном времени. Источник.

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