Створення сайтів стає все більш комплексною роботою, яка нерідко виконується не однією людиною. Важливо переконатися, що дизайн оптимізований для досягнення бізнес-цілей і здатний створити хороший досвід для користувачів.
Один із способів переконатися, що весь сайт виконаний в єдиному стилі - створення стайлгайда, або керівництва по стилю.
Це зручно - мати стайлгайд, щоб тримати всі сторінки сайту в єдиному стилі. Це також допомагає переконатися, що майбутня розробка, яку, можливо, будуть виробляти інші люди, буде витримана в стилі бренду і буде сприйматися, як його частина.
Люк Клам торкнувся теми використання стайлгайдов в якості першого кроку в веб-дизайні (прим. Перекладача: англійською) в минулому році, а я хочу докладніше розповісти про створення зручного керівництва по стилю для ваших проектів.
Що таке керівництво по стилю?
Стайлгайд - це колекція попередньо створених елементів і правил, яким дизайнери і розробники повинні слідувати, щоб переконатися, що різні сторінки і частини дизайну виглядають цілісно і виконані в єдиному стилі.
Чому це важливо?
Коли багато дизайнерів працюють над великим сайтом або веб-додатком, надзвичайно важливо переконатися, що їх робота виглядає цілісно, і кожен інтерпретує стиль бренду по-своєму. Це також важливо, коли розмова заходить про розробників: наявність готових елементів сильно полегшить розробникам завдання, якщо вони захочуть використовувати їх повторно.
створення стайлгайда
1. Вивчіть бренд
Спочатку вам потрібно вивчити бренд, щоб зрозуміти, що він собою являє. Дізнайтеся історію бренду, поспостерігайте за командою, уточніть місію і пріоритети компанії. Занурення в бренд - це важливо, тому що з його допомогою створений вами стайлгайд буде візуально й емоційно висловлювати організацію.
Якщо ви дизайнер, який не вміє писати код, просто відкрийте Photoshop і дайте документу назву і невеликий опис. У нього ви будете поміщати елементи.
Якщо ви можете кодувати, буде краще створити html-документ з уже готовими елементами, щоб їх було простіше використовувати.
2. Визначтеся з типографікою
Згідно Оліверу Ріхтенштейну, типографіка - 95% веб-дизайну.
Ви повинні правильно вибрати шрифти, тому що це один з найважливіших способів комунікації між відвідувачами і сайтом.
Задайте ієрархію. Ось типи заголовків: h1, h2, h3, h4, h5, h6. Потім виберіть, як буде виглядати основний текст, його bold- і italic-варіанти. Не забудьте вказати назву шрифту, товщину і колір.
3. Колірна палітра
Почніть із завдання головних кольорів, які будуть домінувати в дизайні сайту. Цих квітів не повинно бути більше, ніж три. Однак, в деяких випадках, вам будуть потрібні головний, другорядний і третьестепенний кольору. Переконайтеся, що ви визначили їх. Також включіть в стайлгайд нейтральні кольори, на зразок білого, сірого і чорного.
Приклад: ви вивчили бренд, перш ніж створювати стайлгайд, і виявили, що він молодий і сучасний. Тоді можна дати бренду "голос". Наприклад, замість "Помилка 404" можна написати "Ох, чувак, ти все зламав. 404 помилка". Якщо бренд більш офіційно себе підносить, не варто так робити.
Пам'ятайте, що краса міститься в деталях.
Іконки існували тисячі років. Вони старше, ніж текст і слова. Використовуйте іконки в своїх проектах, тому що вони допомагають користувачам зрозуміти, що буде, якщо натиснути на якийсь елемент.
Вибір правильних іконок допоможе їм більше, ніж кольорова палітра або графіка. Використовуючи іконки, переконайтеся, що ви подумали про цільову аудиторію, релігії та історії (як би кумедно це не звучало), щоб уникнути непорозумінь і непорозумінь.
Iconfinder - відмінний інструмент для пошуку іконок для ваших проектів.
NounProject створює візуальну мову іконок, який може зрозуміти будь-який
6. Зображення
Форми - це те, що робить сайт або веб-додаток інтерактивним і динамічним; користувач може ввести дані, а ви - розпоряджатися ними.
Кнопки - це суміш кольорової палітри, форм і голоси. Спирайтеся на створені вами раніше частини стайлгайда, щоб створити цілісно виглядають і функціональні кнопки. Не забудьте показати, як вони будуть виглядати в різних станах (при наведенні курсору, при кліці і т.д.).
9. Відстань
Що відстань робить в стайлгайде? Насправді, дуже важливо згадати в керівництві по стилю відстань. Воно може бути виражене у формі сітки, використаної при створенні макета; це може бути відстань між заголовками, кнопками, картинками, формами та іншими елементами.
Завдання правильного відстані - це важливо, тому що воно дає елементам більше повітря, а також робить вашу роботу більш структурованою і професійною.
10. Робіть / Не робіть
Останній, але дуже важливий пункт: не забудьте розділ "робіть / Не робіть" (DOs / DON'Ts). Він чимось схожий на FAQ. У ньому потрібно описати підводні камені використання стилю і описати, як можна і як не можна їм користуватися.
Нижче наведені кращі приклади керівництва по стилю, які можна використовувати в якості натхнення при створенні власного стайлгайда. Пам'ятайте, що на ці керівництва справили величезний вплив організація компанії, їх бачення світу, місія і цінності, і багато речей, які підходять іншої компанії, будуть виглядати нелогічно щодо того, що робите ви, тому не варто сліпо копіювати вид вподобаних елементів.