Зачем стартапам нужен Styleguide

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

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

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

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

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

1. Руководство по стилю делает дизайн конкретным, а брендинг — понятным

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

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

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

2. Руководство по стилю делает ваш дизайн более последовательным

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

1. "Идет дождь; Мне нужен мой зонт.
2. «Идет дождь, мне нужен мой зонт»
3. «Идет дождь, мне нужен мой зонт»

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

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

3. Повторное использование одних и тех же системных компонентов упрощает использование вашего приложения

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

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

4. Руководство по стилю ускоряет разработку вашего приложения в долгосрочной перспективе

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

5. Руководство по стилю способствует повышению эффективности производства и внедрению инноваций

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

Проблемы стартапа, руководство по стилю в Flux

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

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

В среде, которая постоянно развивается, дизайнер обычно изо всех сил пытается создать руководство по стилю, которое должно быть несколько «фиксированным». У дизайнера может не хватить времени, чтобы тщательно продумать все создаваемые компоненты, даже если они все равно попадут в следующую версию приложения. Facebook, как известно, поменял свое меню-гамбургер на навигацию по вкладкам, когда немного повзрослел. Как вы думаете, кто бы ни поместил гамбургер-меню на первое место, он также добавил его в руководство по стилю Facebook?

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

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

Начните с некоторого вдохновения пользовательского интерфейса

Хороший способ начать, особенно если вы не дизайнер, — собрать примеры стилей дизайна, которые вам нравятся, или, что более важно, то, на что, по вашему мнению, отреагируют пользователи. Соберите как можно больше примеров и поместите их в папку/доску InVision/доску Niice/и т.д. Их можно использовать в качестве ориентира и вдохновения наряду с вашей чувствительностью дизайна. Вы можете использовать их позже, чтобы создать библиотеку шаблонов.

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

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

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

Разработка надежных компонентов пользовательского интерфейса

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

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

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

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

Руководство по стилю как живой документ

Вы должны думать о своем руководстве по стилю как о незавершенной работе. Подобно стартапу, разрабатывающему свою стратегию, вы разработаете свое руководство по стилю по ходу дела. Вы будете редактировать и корректировать его с течением времени, пока он не станет основой вашего пользовательского интерфейса. Один из полезных подходов — запустить первый макет одновременно с запуском руководства по стилю. Откройте два файла в вашей любимой программе (в моем случае это Sketch); один называется page name а другой — styleguide . Пока вы работаете над дизайном своего экрана, вы можете начать заполнять свое руководство по стилю элементами, составляющими ваш дизайн.

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

Обычно я создаю раздел под названием «Сделанные значки». Если в какой-то момент кому-то понадобится значок, он сначала должен проверить этот раздел, прежде чем создавать новый.

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

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

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

Заключение

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт