Руководство дизайнера по работе со стилями и стилем плитки

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

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

Рекомендуемое чтение: как оптимизировать CSS с помощью руководств по стилю кода

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

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

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

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

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

Мой самый любимый ресурс StyleGuides.io, Он охватывает основы руководств по стилю для Интернета, включая живые примеры и тематические исследования.
Библиотека шаблонов MailChimp это один из лучших примеров, которые вы можете найти на StyleGuides.io. Это интерактивное руководство по стилю, которое определяет сетку, типографику и элементы страницы MailChimp.
Когда вы разрабатываете руководство по стилю для веб-компании, обычно все размещают в сети, но вы также можете создавать внутренние руководства и хранить их в локальной интрасети или размещать их в частном порядке за страницей входа пользователя. То, как вы получаете доступ к руководству по стилю, на самом деле не имеет значения. Все они служат одной и той же цели передачи определенных цветов, рисунков и визуальных элементов, которые соответствуют теме веб-проекта.

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

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

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

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

Вот отличная цитата с сайта Style Tiles:

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

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

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

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

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

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

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

Так какой из них вы должны использовать? В конечном итоге это зависит от проекта.

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

Однако такой крупный проект, как перепроектирование NY Times, выиграл бы как от стилей, так и от руководств по стилю.

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

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

Работайте по каждому проекту и решайте, что лучше для каждого.
Живые примеры
Давайте подведем итоги, приведя примеры как стилевых руководств, так и стилей. Я нашел эти проекты во время просмотра Dribbble, и я думаю, что они иллюстрируют качество, которое вы хотели бы видеть в ваших собственных руководствах по стилю или плитке стилей.
Руководства по стилю
Это невероятно Руководство по стилю Airbnb был создан Дереком Брэдли. Это очень просто, но наглядно иллюстрирует основные шаблоны, цвета и элементы страницы, которые можно найти в дизайне.
Вот намного больше руководство по цифровому стилю созданный дизайнером Наошад Алам. Этот пример гораздо более организован с разделами для цветов, типографики, форм, элементов интерфейса и других функций пользовательского интерфейса.

Более подробные руководства по стилю разместят все эти элементы дизайна в Интернете и будут включать фрагменты кода для каждого из них.
Дизайнер Купи Вонг сделал это руководство для AfterShip, Типография, кнопки, выбор цвета и общие элементы страницы тщательно обработаны и объединены в разделы.

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

Абсолютно одно из лучших руководств по цифровому стилю, которое я когда-либо видел. Это также может быть перенесено на страницу онлайн-документации для членов группы.
Стиль плитки
Создан UI / UX дизайнер Абдус Салам этот стиль плитки для сайта магазина органических продуктов. Он очень простой, с плоскими элементами дизайна, некоторыми незначительными функциями пользовательского интерфейса и цветовой палитрой.
Дизайнер Адриан Кантельми действительно подробно рассказал о своих плитка для продажи, Он имеет цвета и типографику, но также включает в себя векторные иллюстрации.

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

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

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>