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

1656570643 sovety po dizajnu kotorye sleduet pomnit vsem razrabotchikam

от Wiki Chaves

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

g5NVfF3Jrz8otBKGOkgZYjhckRW7LEbBzlNj
Мозговой штурм на Airbnb

Контекст

Я дизайнер продуктов с разным опытом. Я работал в разных отраслях от образования и рекламы до розничной торговли и технологий.

Я всегда считал роли строгим пределом между моими обязанностями и тем, чем они не являются. Как дизайнер, я бы отвечал за дизайн, а инженеры отвечали бы за кодирование. Это помогло мне определить свою роль, а также иметь определенный контроль над своими обязанностями.

В прошлом году, когда я работал в Airbnbтехнологическая компания, известная своей культурой дизайнаЯ столкнулся с большим испытанием. После рабочей недели я попал в команду из 12 инженеров, одного PM, одного специалиста по данным, одного исследователя и только меня как дизайнера. Я немного испугался. Как я собирался удовлетворить потребности своей команды?

Я думал о трех возможных решениях.

  1. Работать больше часов. Это был мой первый инстинкт. Если бы мне пришлось разрабатывать дизайн для более чем вдвое большего количества идеальных инженеров, мне пришлось бы работать гораздо больше. Это серьезно повлияло бы на мой баланс между жизнью и работой и, наконец, меня выгорит.
  2. Замедление. Если бы я хотел продолжать работать в своем привычном темпе, я бы в конечном счете стал человеческим узким местом. Запросы на дизайн начали накапливаться, и я никогда не успевал догнать (что бы серьезно негативно повлияло на цели нашей команды).
  3. Отпустить. Как дизайнеру это трудно отпустить. Мы гордимся тем, что являемся экспертами с опытом. Разрешить дизайн всей команды чувствовать, что я не выполняю свою работу должным образом, и, конечно, это повлияло на мой эго. Но с течением времени это оказалось лучшим подходом.

Каждый – дизайнер

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

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

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

0rXhrb5apSdF2GUZf5qWvLZERteie6hbzQqC
Фото rawpixel

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

Возможные сценарии

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

Сценарий 1 – Нет дизайнера.

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

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

Сценарий 2. Приблизительно на 10 разработчиков есть только один конструктор.

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

Сценарий 3. На каждые 4-6 разработчиков приходится один дизайнер.

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

Советы по дизайну для разработчиков

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

Мышление дизайнера

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

Пользователь на первом месте.

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

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

lSXMZN4hcPkloa4AOU2wcV24wbih2a3mDibL
Фото Уильяма Айвена

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

Постройте план

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

9RaKOdw0XHsbx5BZ0nT9exFmNX90f4wuH89a
Фото rawpixel

Бальзамик является хорошим инструментом для быстрого создания каркаса. Вы можете использовать Sketch или Figma для всего процесса проектирования от каркаса до производства.

Начните с каркаса

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

i2MhQGoQbZdIhWEsGEdRxHbTgV4Jw815fIDI
Основная документация

Если вы создаете нативное приложение, я настоятельно рекомендую вам придерживаться рекомендаций Material Design для Android и Human Interface для iOS. Начните с максимально точного соблюдения встроенных шаблонов, если вы явно не хотите создать уникальный пользовательский интерфейс, как Snapchat, или игру. Только после того, как вы доминируете над шаблонами и компонентами по умолчанию, вы можете приступать к настройке.

Проектные системы

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

Берегись!

Это может занять много времени, и оно того стоит только тогда, когда вы быстро масштабируетесь и вам приходится поддерживать несколько программ с одним визуальным языком. Отличным инструментом для построения системы проектирования является Pattern Lab.

rUXKmH1pT-WoVyUztB4jRXRiynyH-6sDTaWV
Система языка дизайна Airbnb

Брендинг

Создавая свою структуру, вы, вероятно, начнете принимать решения, которые определят ваш бренд. Не пугайтесь этого! Брендинг – это веселое упражнение, которое вы точно можете сделать. Бренд, который вы в конечном итоге создадите, не закрепится, и вы, вероятно, наймете дизайнера, если ваш MVP будет успешным или если вы получите больше ресурсов. Мой друг Марк написал веселую статью о том, как сделать логотип примерно через 5 минут.

HviIeqrski6djtQGwQ6SPzzT6arNgP-4ewMu
5-минутный логотип от Марка Хэмеона

Типография

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

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

4DZtSOh7ijnFRtaMqq1L4dRuVkQmfspOYqz3
Futura PT – мое любимое оружие для брендинга

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

Создавая фреймворк, помните о количестве различных размеров используемых шрифтов. Опять-таки, будьте просто. По возможности используйте минимальное количество вариаций. Старайтесь избегать значения ниже 16 pt для большого количества текста. Многим людям, как мне, будет трудно читать под таким размером!

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

Цвет

Подобно типографике, оставайтесь простыми. Распространенным методом является выбор основного цвета, который чаще всего отображается в вашем приложении, и вспомогательного цвета, который дает больше способов подчеркнуть и выделить ваш продукт. Для вдохновения вы можете использовать эту страницу цветовых комбинаций, созданную Тобиасом ван Шнайдером, или воспользоваться цветным инструментом Material Design, чтобы поиграть с цветовыми комбинациями. Для более сложных комбинаций можно использовать цветовой круг Adobe.

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

tBlFlCwKhY-jX-vN49U5CtEbKQ4ty9lnSDgF
Неприятная вибрация цвета

Наконец, подумайте о цветовом контрасте и доступности. Для MVP вам не нужно полностью соответствовать WCAG. Но с небольшим вниманием можно добиться определенной минимальной степени соответствия. Есть много инструментов для проверки коэффициента контрастности цветов, как этот.

Иконопись

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

D7G7v-YRCCUXKlmJ6PLnja-58bmSat0-PLyN
Проект существительного с более чем миллионом пиктограмм

Хорошими источниками для иконок являются существительное Project, значки Material Design и Streamline.

Иллюстрации

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

Gpr7Rp7NiFOGvbE1wS1X7mbNwNYLsLRaUXjm
Великолепный момент High Five от MailChimp

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

фотография

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

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

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

dFZNRTlEUg3EhhDNEMBPBKIf4oufHHKkZLLw
Использование фотографии во время вступительных туров может помочь передать ценность

Прекрасным источником бесплатных изображений является Unsplash. Если вы хотите разместить свой продукт в контексте, доступным вариантом является Placeit.

Прототипирование

В какой-то момент можно создать прототип для тестирования идеи или потока. Вы можете протестировать макет даже на этапе каркаса!

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

9tKsNg-PzyUPMO3Rxnva226EEN0kxYOAqY5b
Создание прототипов с помощью Craft, интеграции Sketch в InVision

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

Тестирование пользователями

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

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

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

К примеру, если вас спросят: «Что произойдет, если я нажму эту кнопку», вы можете ответить: «Что бы вы ожидали?» Иначе, если вы ответите им, вы не научитесь на их опыте.

WbgfxIiLjZR-RXab1KQw2qSmfg1LjHGwA-Gn
Тестирование пользователями с записывающим устройством. Фото кредит StartUX

Может помочь третье лицо для документирования сессии. Трудно быть модератором и делать заметки одновременно. Если вы не можете найти третье лицо, чтобы помочь, вы можете записать свой сеанс на видео.

Повторяйте

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

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

0IpchSu1gnGwa5i4UABpshQId4UGntChOon9
Дизайн никогда не делается Кари Нойбергер

Открытый разговор

Надеюсь, эти советы вам будут полезны и применимы в повседневной работе.

FBymClf5pHdar49kxfqIOeHCy33cs8IRFVav
Фото Агустина Перретта

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *