Руководство дизайнера по работе со стилями и стилем плитки
Создание фирменный стиль это не простая задача. Это требует больших усилий, но это также одна из самых полезных творческих задач. Веб-проекты часто смешать брендинг с дизайном интерфейса. Это может сбивать с толку, потому что так много нужно сделать в обеих областях. Руководства по стилю а также стиль плитки являются отличными ресурсами для веб-дизайнеров, и хотя они звучат похоже, они достигают две разные задачи.
В этом посте я хотел бы вникнуть в оба вопроса и рассказать о преимуществах, которые вы можете получить от этих творческих ресурсов. Не всем понадобится (или что-то подобное) создать руководства по стилю или плитки стилей. Но каждый дизайнер должен хотя бы понимать, что это такое и как они работают..
Руководства по стилю для Интернета
Я читал разные мнения о руководствах по стилю. Некоторые говорят, что это цифровые макеты, а другие говорят, что руководства по стилю на основе кода являются наиболее полезными.
В любом случае, цель руководства по стилю для веба такая же, как и для любого другого проекта. Определяет согласованные шаблоны, модули пользовательского интерфейса и творческие предпочтения используется в процессе проектирования. Вы можете получить очень конкретные и предусмотреть точные измерения для определенных элементов, или вы можете остаться свободными и предложить рекомендации с визуальными примерами.
Не существует единственного правильного способа составить руководство по стилю. Единственный неправильный способ - создать ресурс, который просто не могут быть поняты другими.
Цель состоит в том, чтобы создать актив, который будет выдерживать испытание временем. Так должно быть открыт для редактирования если новые ресурсы созданы. Любой, кто присоединится к команде, также должен быть доступен для легкого погружения в руководство..
Руководство по стилю должно быть настолько подробно, насколько это необходимо для проекта. Обычно включает повторно используемые активы, такие как типография, кнопки, образцы цветов, текстуры и общие элементы страницы.
Мы недавно освещали инструменты руководства по стилю жизни это может помочь вам с нуля создавать руководства по стилю жизни. Эти живые руководства больше предназначены для разработчиков интерфейсов, но они могут быть так же полезны для дизайнеров. Вы можете прочитать больше на эту тему в этом сообщении Smashing Magazine.
Мой самый любимый ресурс - StyleGuides.io. Это покрывает основы стилевых руководств для веба, в том числе живые примеры а также тематические исследования.
Библиотека шаблонов MailChimp - один из лучших примеров, которые вы можете найти на StyleGuides.io. Это интерактивный путеводитель по стилю, который определяет сетку, типографику и элементы страницы MailChimp.
Когда вы разрабатываете руководство по стилю для веб-компании, обычно все размещают в Интернете, но вы также можете создавать внутренние направляющие, и держать их в локальной интрасети или разместить их в частном порядке за страницей входа пользователя. То, как вы получаете доступ к руководству по стилю, действительно не имеет значения. Все они служат той же цели передачи определенных цветов, рисунков и визуальных эффектов, которые соответствовать теме веб-проекта.
Чтобы узнать больше об этой теме, ознакомьтесь со следующими постами в руководствах по стилю:
- Руководства по стилю (24ways.org)
- Создать руководство по стилю сайта (Creativebloq.com)
- Как сделать идеальное руководство по стилю веб-дизайна (Dtelepathy.com)
Ветвление в плитки стиля
Стиль плитки совсем другой зверь. Эти плитки креативные активы, используемые на ранней стадии проектирования при попытке придать конкретный эстетический.
Сайт Style Tiles был создан Самантой Уоррен и на нем есть все, что вам, возможно, понадобится знать. Есть нет конкретного шаблона для разработки стиля плитки. Но примеры Саманты используют заголовки и типы абзацев, ссылки, шаблоны, а также возможный выбор цвета вместе с фирменный логотип.
При работе со стилевыми плитками ваша цель в конечном итоге состоит в том, чтобы представить 2-3 разных стиля плитки клиенту или креативному директору. Эти плитки более подробный, чем доска настроения, еще гораздо менее подробный, чем полный макет.
Плитки должны быть достаточно подробными, чтобы дать представление о индивидуальность и настроение сайта. Саманта поощряет используя прилагательные описать каждую плитку в деталях.
Клиенты могут просматривать различные плитки, а также выбрать свои любимые произведения. это экономит ваше время при разработке, потому что клиент уже видел активы, которые ему нравятся, так что меньше шансов на серьезные изменения.
Вот отличная цитата с сайта Style Tiles:
Сравнение стилей плитки с инструментарием дизайнера интерьера является вполне подходящей аналогией. Вы не хотите вкладывать усилия в макет с идеальным пикселем, только чтобы клиент понял, что он ненавидит большинство цветов и шрифтов..
Вместо этого используйте плитки стиля, чтобы найти общая тема или визуальный язык для использования по всему сайту. Это может включать брендинг / идентичность но также может включать Особенности интерфейса, такие как выпадающие меню или кнопки CTA.
Вы должны использовать их как поставляемые активы в начале процесса. После того, как вы закончите полный макет, вам больше не нужно ссылаться на плитку стиля. Тем не менее, в начале стиль плитки может иметь решающее значение для творческого процесса экономя время дизайнера а также у клиента много вариантов на выбор.
Если хотите углубиться в стиль плитки проверить эти связанные посты.
- Стиль плитки и как они работают
- Стиль плитки: альтернатива полному дизайну Comps
- Создание стилей плитки: легкий подход к направлению дизайна
Руководства по стилю против плитки стиля
Разница между руководствами по стилю и плиткой стиля нечеткая, но определенная. гид по стилю намного больше подробный и должен использоваться как постоянный справочник для творческой команды. стиль плитки может быть использован как Moodboard в изобразить идеи визуально для себя или клиента. Они часто используются для изучать идеи, и как только проект закончен, они не служат большой цели.
Плитки стиля часто намного более грубые по краям, и они используются исключительно в начале творческого процесса. Руководство по стилю предназначено для использования на протяжении всего процесса проектирования а также даже потом для дальнейшего использования для других дизайнеров, которые могут работать на сайте.
Оба имеют свои преимущества и недостатки. Стиль плитки быстро и весело, но эфемерный в природе. Руководства по стилю тщательный а также вести себя как визуальная документация, но они также требует много работы.
Так какой из них вы должны использовать? Это в конечном итоге зависит от проекта.
Меньшие проекты например, для малых предприятий веб-сайты лучше работают со стилем плиток. Создание полного руководства по стилю для сайта малого бизнеса потребовало бы слишком много работы и оплачиваемых часов. Это, вероятно, не стоит затрат для большинства клиентов.
Однако большой проект например, дизайн Нью-Йорк Таймс выиграет от стилей и руководств по стилю.
В поисках языка и настроения Для нового проекта всегда ценный процесс. Это то, что делает стиль плитки идеально подходит практически для любого сценария.
Вы также можете получить по без создания какого-либо из этих активов. Некоторые дизайнеры идут прямо с каркасов в подробные макеты. И некоторые клиенты даже не хотят руководство по стилю, потому что оно не привыкнет.
Работайте на основе проекта и решайте, что лучше для каждого.
Живые примеры
Давайте завернем это, покрывая Примеры из руководства по стилю и плитки стиля. Я нашел эти дизайны во время просмотра Dribbble, и я думаю, что они иллюстрируют качество, которое вы хотели бы видеть в ваших собственных руководствах по стилю или плитке стилей..
Руководства по стилю
Это невероятное руководство по стилю Airbnb было создано Дереком Брэдли. Это очень просто, но это ясно иллюстрирует основные шаблоны, цвета и элементы страницы быть найденным в дизайне.
Вот намного большее руководство по цифровому стилю, созданное дизайнером Наошадом Аламом. Этот пример гораздо более организованный с разделы для цветов, типографики, форм, элементов интерфейса и других функций пользовательского интерфейса.
Более подробные руководства по стилю разместят все эти элементы дизайна в Интернете, и включать фрагменты кода для каждого.
Дизайнер Cupi Wong сделал это руководство для AfterShip. Типография, кнопки, выбор цвета и общие элементы страницы тщательно продуманы, и организованы вместе в разделы.
Это также может быть перенесено в Интернет, и может быть гораздо больше, чем онлайн-справочная документация..
Дизайнер пользовательского интерфейса Грег Длубач поделился собственным руководством по стилю пользовательского интерфейса для веб-проекта. Эта вещь действительно огромна. Полноэкранный предварительный просмотр охватывает 21000 пикселей в высоту!
Абсолютно одно из лучших руководств по цифровому стилю, которое я когда-либо видел. Это также может быть перенесено на страницу онлайн-документации для членов команды.
Стиль плитки
Дизайнер UI / UX Абдус Салам (Abdus Salam) создал эту плитку в стиле для сайта магазина органических продуктов. Это очень простой с плоские элементы дизайна, некоторые незначительные особенности пользовательского интерфейса, и цветовая палитра.
Дизайнер Адриан Кантельми действительно подробно рассказал о своей плитке в стиле расквартирования. Он имеет цвета и типографику, но также включает в себя векторные иллюстрации.
Эти векторы помогают определить бренд, настроение и общую цветовую гамму веб-сайта.
Редизайн World Cup Advisors получил собственный стиль плитки с очень базовыми функциями. Несколько значков, несколько вариантов цвета, а также пара кнопок. Простота это название игры.
Если вы можете почувствовать, как может выглядеть сайт с одного взгляда тогда ты делаешь это правильно.
Вот забавный пример плитки отклоненного стиля, используемой для туристического проекта. Дизайнер Бреннан Глисон предлагает лишь небольшой образец плитки, но вы все равно можете почувствовать атмосферу веб-сайта.
Заключительные слова
Если вы будете искать в Интернете, вы найдете гораздо больше примеров, советов и ресурсов для руководства по стилю и стиль плитки. Но я надеюсь, что эта статья поможет вам понять и создать эти активы для дизайна..
