Керівництво дизайнера для роботи зі стилем Керівництво & стиль плитки
Створення a фірмова ідентичність Це нелегке завдання. Це вимагає жорстких зусиль, але це також одна з найбільш корисних творчих завдань. Веб-проекти часто суміш брендингу з дизайном інтерфейсу. Це може призвести до заплутаності, оскільки в обох областях так багато роботи. Стильні напрямні і стиль плитки є великими ресурсами для веб-дизайнерів, і хоча вони звучать подібно, вони виконують дві різні завдання.
На цій посаді я хотів би заглибитися в обидві і покрити переваги, які ви можете отримати від цих творчих активів. Не всім буде потрібно (або подобається) створювати напрямні стилів або плитки стилів. Але кожен дизайнер повинен хоча б зрозуміти, що це таке, і як вони працюють.
Стиль керівництва для Інтернету
Я читав різні думки про керівництво стилем. Деякі кажуть, що це цифрові макети, а інші говорять, що найбільш корисними є кодові стилі.
У будь-якому випадку, мета довідника стилів є такою ж для Інтернету, як і будь-який інший проект. Вона визначає послідовних шаблонів, модулів інтерфейсу користувача та творчих уподобань використовується в процесі проектування. Ви можете отримати дуже конкретні і передбачити піксель-досконалі вимірювання для певних елементів, або ви можете залишатися вільним і пропонувати керівні принципи з наочними прикладами.
Існує не єдиний правильний спосіб зробити стиль керівництво. Єдиним неправильним способом є створення простого ресурсу не можуть бути зрозумілі іншими.
Мета полягає в тому, щоб створити актив, який буде витримайте випробування часом. Вона повинна бути відкрито для редагування якщо створюються нові ресурси. Вона також повинна бути доступною для всіх, хто приєднається до команди, щоб з легкістю пірнати у гіда.
Стиль керівництво має бути як це необхідно для проекту. Це зазвичай включає багаторазові активи, такі як типографіка, кнопки, зразки кольорів, текстури та загальні елементи сторінки.
Ми нещодавно охопили інструменти живого стилю що допоможе вам побудувати живі гіди з нуля. Ці живі провідники більше для розробників інтерфейсів, але вони можуть бути настільки ж корисні дизайнерам. Ви можете прочитати більше на цю тему в цьому Smashing Magazine пост.
Мій абсолютний улюблений ресурс - StyleGuides.io. Він охоплює основи стильних посібників для Інтернету, у тому числі живі приклади і тематичні дослідження.
Бібліотека шаблонів MailChimp є одним з кращих прикладів, які ви можете знайти в StyleGuides.io. Це онлайн жити керівництво, що визначає сітку, типографіку та елементи сторінки MailChimp.
При розробці стилю керівництва для веб-компанії, звичайно ставити все в Інтернеті, але ви також можете створити внутрішні напрямні, і зберігати їх у локальній інтрамережі або розміщувати їх приватно за сторінкою входу користувача. Те, як ви отримуєте доступ до керівництва стилів, дійсно не має значення. Всі вони служать тій самій меті, що передають певні кольори, візерунки та візуальні ефекти відповідати темі веб-проекту.
Щоб дізнатися більше про цю тему, ознайомтеся з цими іншими публікаціями у довідниках про стиль:
- Посібники з стилю інтерфейсу (24ways.org)
- Створіть керівництво по стилю веб-сайту (creativebloq.com)
- Як зробити ідеальний веб-дизайн Керівництво по стилю (dtelepathy.com)
Розгалуження в стилі плитки
Стиль плитки це зовсім інший звір. Ці плитки є творчі активи, що використовуються на ранній стадії проектування при спробі закріпити конкретну естетику.
Веб-сайт Style Tiles створено Самантою Уоррен, і в ньому є все, що вам потрібно знати. існує немає спеціального шаблону для проектування плитки стилю. Але приклади Саманти використовують заголовки та типи абзаців, посилання, шаблони, і можливий вибір кольору разом з фірмовий логотип.
Під час роботи зі стильними плитками ваша мета полягає в тому, щоб представити 2-3 різних плитки стилю клієнту або творчому директору. Ці плитки є Більш детально, ніж дошка настрою, ще набагато менш деталізований, ніж повний макет.
Плитки повинні бути досить деталізованими, щоб дати сенс ідентичність та настрої веб-сайту. Саманта заохочує з використанням прикметників детально описати кожну плитку.
Клієнти можуть перегляньте різні плитки, і виберіть свої улюблені твори. Це економить час при проектуванні, тому що клієнт вже бачив активи, які їм подобаються, тому менше шансів на великі зміни.
Ось чудова цитата з веб-сайту Стилістики:
Порівняння стилю плитки з інструментарієм дизайнера інтер'єру є досить сприятливою аналогією. Ви не хочете перекладати зусилля на піксель-макет тільки для того, щоб клієнт усвідомив, що вони ненавидять більшість кольорів і шрифтів.
Замість цього використовуйте стильові плитки, щоб знайти загальна тема або візуальна мова для використання на всьому сайті. Це може включати брендинг / ідентичність може також включати Функції інтерфейсу користувача, такі як випадаючі меню або кнопки CTA.
Ви повинні використовувати їх як реалізовані активи на початку процесу. Після завершення повної макети дійсно немає необхідності посилатися на стиль плитки більше. Незважаючи на це, плитка стилю може мати вирішальне значення для творчого процесу збереження часу дизайнера і Івінг клієнту багато варіантів на вибір.
Якщо ти хочеш більше заглиблюватись у стиль плитки перевірте ці пов'язані повідомлення.
- Стиль плитки і як вони працюють
- Стиль плитки: альтернатива повного дизайну Comps
- Створення плитки стилів: легкий підхід до дизайну
Стиль Керівництво проти стилю плитки
Різниця між напрямними стилю та стильовими плитками неясна, але визначена. A стиль керівництва набагато більше детально і повинні використовуватися як постійне довідкове керівництво для творчої команди. A стиль плитки може використовуватися як a moodboard до сюжет ідеї візуально для себе або клієнта. Вони часто звикли досліджуйте ідеї, і як тільки проект закінчиться, вони не служать багато чого.
Плитки стилів часто набагато більш грубі по краях, і вони використовуються виключно в ранньому творчому процесі. Керівництво по стилю призначене для використання протягом всього процесу проектування і навіть після цього для подальшого використання для інших дизайнерів, які можуть працювати на сайті.
Обидва мають свої переваги та недоліки. Плитка стилю є швидко і весело, але ефемерний в природі. Керівництво стилю є ретельно і ведуть себе як візуальна документація, але вони також вимагають багато роботи.
Отже, який ви повинні використовувати? Це в кінцевому рахунку залежить від проекту.
Менші проекти такі як для малого бізнесу веб-сайти працюють краще з плитками стилів. Будівництво всього керівництва стилю для сайту малого бізнесу вимагало б занадто багато роботи та оплачуваних годин. Це, ймовірно, не коштує вартості для більшості клієнтів.
Однак a великий проект як перепроектування Нью-Йорк Таймс виграє від стилю плитки і стилю керівництва.
Пошук мови і настрою для нового проекту завжди важливий процес. Саме це робить плитку стилю ідеально підходить для майже кожного сценарію.
Ви також можете пройти без створення цих активів. Деякі дизайнери йдуть прямо з каркасів до докладні макети. Деякі клієнти навіть не хочуть мати стильний посібник, оскільки він не буде використовуватися.
Працюйте за проектом і вирішуйте, що найкраще для кожного.
Живі приклади
Давайте обмотаємо це покриттям приклади як напрямних, так і стилю. Я знайшов ці конструкції під час перегляду Dribbble, і я вважаю, що вони є прикладом якості, яку ви хочете мати у ваших власних довідниках стилів або стилю.
Керівництво стилю
Цей неймовірний керівництво стилю Airbnb було створено Дереком Бредлі. Це дуже просто, але воно чітко ілюструє основні візерунки, кольори та елементи сторінки можна знайти в дизайні.
Ось набагато більший цифровий довідник стилю, створений дизайнером Наошадом Аламом. Цей приклад є набагато більш організовано с розділи для кольорів, типографіки, форм, елементів інтерфейсу та інших функцій інтерфейсу.
Більш детальні посібники стилю поставлять всі ці елементи дизайну в Інтернеті, і включати фрагменти коду для кожного.
Дизайнер Cupi Wong зробив це керівництво для AfterShip. Типографіка, кнопки, вибір кольорів і загальні елементи сторінки ретельно підготовлені, і організовані в розділи.
Це також може бути перенесено до Інтернету і побудовано набагато більше, ніж онлайнова довідкова документація.
Дизайнер інтерфейсу Грег Длубач поділився власним керівництвом стилю інтерфейсу для веб-проекту. Ця річ серйозно величезна. Повноекранний перегляд охоплює високу 21 000 пікселів!
Абсолютно один з кращих цифрових довідників стилю, який я коли-небудь бачив. Це також може бути перенесено на сторінку онлайнової документації для посилання членів команди.
Стиль плитки
Конструктор UI / UX Абдус Салам створив цей стиль плитки для веб-сайту магазину органічних продуктів. Це дуже просто плоскі елементи дизайну, деякі незначні функції інтерфейсу, а Колірна палітра.
Дизайнер Adrian Cantelmi дійсно поїхав детальний з його tivestment стиль плитка. Він має кольори і типографіку, але також включає в себе Векторні ілюстрації.
Ці вектори допомагають визначити бренд, настрій і загальну колірну схему веб-сайту.
Редизайн дизайнерів World Cup Advisors отримав власну плитку стилю з дуже основними функціями. Кілька іконок, вибір кольорів, а також пара кнопок. Простота - назва гри.
Якщо ви можете відчути, як може виглядати сайт з одного погляду тоді ви робите це правильно.
Ось цікавий приклад відхиленої плитки стилю, яка використовується для туристичного проекту. Дизайнер Бреннан Глісон лише надає невеликий зразок плитки, але ви все одно можете відчути атмосферу сайту.
Заключні слова
Якщо ви шукаєте в Інтернеті, ви знайдете багато інших прикладів, порад та ресурсів побудови напрямних і стилю плитки. Але я сподіваюся, що ця стаття може бути грунтовною і на обох, і на те, щоб ви вільно розуміли і створювали ці проекти.
