{"id":14262,"url":"\/distributions\/14262\/click?bit=1&hash=8ff33b918bfe3f5206b0198c93dd25bdafcdc76b2eaa61d9664863bd76247e56","title":"\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u041c\u043e\u0441\u043a\u0432\u0435 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e 1,5 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"726c984a-5b07-5c75-81f7-6664571134e6"}

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

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

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

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

«Чувство дизайна»

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

  1. Зайдите на сайт Dribbble и подпишитесь на еженедельный информационный бюллетень.
  2. Получив рассылку, нажмите на ссылку «Самые популярные кадры» (Most Popular Shots).
  3. Просмотрите первую страницу с самыми популярными примерами работ за неделю.
  4. Сохраните в закладки всё, что вам понравится.

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

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

Создание логотипа

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

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

Дизайн пиктограммы

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

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

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

Дизайн текста и названия

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

Цвета

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

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

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

Шрифты

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

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

  1. Попробуйте ограничиться одним или двумя шрифтами, максимум тремя, если это абсолютно необходимо.
  2. Шрифт без засечек самый безопасный для заголовков, лучше если он жирный и симметричный.
  3. Основной контент можно оформить шрифтом с засечками, но вполне нормально смотрится и шрифт без засечек. Первые якобы легче читать в длинных абзацах, потому что маленькие «хвостики» на буквах помогают глазам цепляться за текст. Но это скорее работает в печатных СМИ, чем на пиксельных экранах.

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

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

Пиктограммы

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

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

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

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

Фотографии и иллюстрации

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

Иллюстрации

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

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

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

Фотографии

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

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

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

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

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

Брендирование

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

  1. Выберите один цвет и используйте его везде. Для всего остального используйте черный или темно-серый.
  2. Выберите один шрифт и используйте его везде.
  3. Размер текста везде должен быть одинаковым, за исключением заголовков. Не делайте один абзац 12px, а другой 14px.
  4. Используйте общий стиль иллюстраций.
  5. Всё выровняйте. Когда человек что-то видит впервые, ему легче воспринять информацию в меньшем количестве «блоков». Для этого мы группируем и выравниваем объекты.

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

Использование фреймворка CSS

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

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

Дизайнерские инструменты

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

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

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

Дополнительная информация, советы и инструменты

  1. Обсуждение этой статьи на HN. В комментариях много отличных советов.
  2. «Целевые страницы» от Джулиана Шапиро»: лучшее руководство, которое я видел, для создания целевых страниц (лендингов). Один дополнительный совет: если размещаете в верхней части страницы броскую начальную секцию (hero-unit), установите высоту всего 70vh и кнопку «Далее» («Еще», «Больше») в нижней части. Это значит, что секция займёт 70% экрана по высоте. Слишком многие сайты ставят значение height на 100vh, и пользователь не сразу понимает, что страницу можно прокрутить вниз.
  3. Дизайнерские инструменты для всех: огромный список инструментов. Меня он немного пугает, но если вы способны прочесать список целиком, то там найдется что-то полезное для каждого.
  4. Printable Mockups: удивительный ресурс для создания и распечатки макетов пользовательского интерфейса и шаблонов каркасов.
  5. Иногда ваши идеи CSS-макетов выходят за пределы возможностей Bulma или Tailwind. Для обучения верстке на Grid можно порекомендовать ресурсы testdriven.io/blog/css-grid и every-layout.dev.
Как вы думаете, должны ли разработчики и продакт-менеджеры разбираться в дизайне?
Да, хотя бы азы дизайна нужно знать.
Нет, пусть этим занимаются эксперты-дизайнеры.
Ваш вариант в комментарии.
Показать результаты
Переголосовать
Проголосовать
0
16 комментариев
Написать комментарий...
Artyom Petrovich

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

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

я прям в недоумении (
беременный бородач на иллюстрации никого не смутил? )

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

Проверка пройдена, вы приняты в mailru

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

А как называется стиль дизайна, когда статуи в очках и т.д.?

Ответить
Развернуть ветку
Sasha Demidov
Ответить
Развернуть ветку
Андрей

Благодарю

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

на https://mcs.mail.ru/career/ половина вакансий ведёт на 404

Ответить
Развернуть ветку
Andrey Pshenichnov
Автор

Спасибо ) Сейчас уберём лишние

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

Заголовок даёт посыл не связанный со статьей. Вот теперь я все это узнал и что ? Увидел что дизайнер придерживается клеше или берет ‘материалы’ с указанных ресурсов, то хвалить и уважать ? А если нет, то ругать? Или как обычно для product owner зашёл и все сделал сам..

Ответить
Развернуть ветку
Лай Псов

Зачем разработчикам, продактам и тем более фаундерам эта информация? Тем более от разработчика.
Почему он, как разработчик, не пытается их научить тому, в чем наверняка разбирается лучше - разработке?

Ответить
Развернуть ветку
Александр Добровольский

Зачем? Лучше учить тому, в чем не разбираешься)

Ответить
Развернуть ветку
Александр Добровольский

Если не знаешь, лучше не учить. Очень сомнительное руководство.

Ответить
Развернуть ветку
Дмитрий Прозоров

С чем конкретно вы не согласны?

Ответить
Развернуть ветку
Александр Добровольский

Автор предлагает в дизайне идти по шаблону... В дизайне... По шаблону. У меня все)

Ответить
Развернуть ветку
Дмитрий Прозоров

Понятно.

Ответить
Развернуть ветку
Дмитрий Ольшевский

«Забудьте sketch, invision...»  Давай досвидания!

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