6.3: Веб-дизайн
- Page ID
- 16057
Веб-дизайн - це процес створення всіх візуальних аспектів інтерфейсу. Це охоплює макет, колірну схему, зображення, логотипи, тип, елементи дизайну (такі як кнопки і посилання), і все інше, що ви можете побачити.
Інтернет є візуальним середовищем, тому дизайн є важливою частиною створення активів, які є одночасно привабливими та ефективними. Дизайнерам необхідно мати на увазі технічні аспекти дизайну, при цьому приділяючи пріоритет людському фактору. Цифрові властивості не повинні бути просто красивими. Вони повинні створити хороший досвід для відвідувача та відповідати бізнес-цілям, таким як збільшення продажів, створення послів бренду, а також заохочення реєстрацій та, врешті-решт, конверсій.
Візуальна ідентичність та дизайн для переконання
Візуальний інтерфейс або дизайн веб-сайту - це те, що користувач бачить і взаємодіє з. Це візуальне представлення всієї важкої роботи, яка йде в розробці веб-сайту. Це те, що спочатку буде оцінений сайт і є початковим кроком у створенні чудового користувальницького досвіду. Це дуже важливо.
Існує тісний зв'язок між UX і візуальним дизайном. В ідеалі візуальний дизайнер використовуватиме документи, створені UX-дизайнером, і додасть візуальний скін, але часто дизайнеру доводиться керувати як UX-дизайном, так і візуальним дизайном. Дизайн - це не лише естетика, хоча зовнішній вигляд дуже важливий.
Дизайн - це візуальні підказки, які ми даємо користувачам, щоб вони знали, що робити далі. Це гарантує нашим відвідувачам нашого авторитету і перетворює їх на клієнтів.
Хороший дизайн інтерфейсу передбачає багато речей, але ось кілька основних міркувань. Вони тісно пов'язані з UX, і візуальний дизайнер відіграє ключову роль у їх визначенні.
- Навігація: вивіски сайту, що вказують користувачам, де вони знаходяться і куди можуть перейти.
- Макет: як контент структурований і відображається.
- Заголовки: елемент з фіксованою позицією у верхній частині кожної сторінки. Вона зазвичай включає в себе всі основні елементи навігації, які повинні бути представлені на кожній сторінці, такі як головне меню, логін і пошук.
- Нижні колонтитули: зазвичай узгоджена нижня частина сторінки.
- Довіра: повідомляючи користувачам, що ви є тим, ким ви говорите.
Візуальна ідентичність
Візуальна ідентичність відповідає на питання: «Як користувачі знають, що це ми?» Певні елементи дизайну повинні бути продемонстровані на всіх веб-активах, створених для бренду, а також друкованих і традиційних засобів комунікації. Часто керівні принципи візуальної ідентичності для Інтернету кодифікуються в цифровий документ керівництва стилю, щоб забезпечити узгодженість між різними агентствами, дизайнерами та командами. Цей документ може містити вказівки щодо створення всіляких веб-ресурсів, включаючи банери, вміст соціальних медіа та елементи дизайну веб-сайтів.
Логотип - це найвідоміший спосіб зміцнити свою ідентичність бренду на веб-сайті. Логотип є частиною фірмового стилю бренду (CI).
Основний шрифт зазвичай використовується для помітних заголовків на сайті, тоді як основна копія часто встановлюється стандартним веб-шрифтом, який точно відповідає основному шрифту.
Стиль меню та кнопок, а також іконки також є частиною візуальної ідентичності сайту. Навіть коли користувач переглядає невелику частину сайту або сторінки, він повинен виглядати так, ніби він належить сайту в цілому.
Теорія дизайну
Дизайн може бути досить точною наукою, і є багато досліджень про те, що робить для ефективного дизайну. Багато також здоровий глузд і практика, заснована на прийнятих веб-стандартах. Теорія дизайну обговорюється в розділі Дизайн користувацького досвіду.
Збір та компонування проектних активів
Такі елементи, як ваш логотип і кольори бренду, представляють ваш бренд і є частиною вираження вашого бренду. Останні версії цих активів бренду повинні бути доступні дизайнеру або маркетинговому агентству, що розробляє ваш веб-сайт.
Отримання правильних активів бренду дизайнерам у форматі хорошої якості, до якого вони можуть легко отримати доступ, економить час і дозволяє уникнути дорогих помилок. Ось список активів бренду, які потрібні дизайнеру для початку роботи над сайтом. Якість, формат (або тип файлу) і розмір файлу є важливими міркуваннями. Вам необхідно надати:
Рекомендації щодо бренду або керівництво по стилю створюватимуться в Illustrator, PS або Sketch, але збережені для клієнта як PDF-документ.
- Рекомендації щодо бренду або керівництво по стилю. У форматі Adobe Reader (PDF).
- Логотип та інші ключові елементи бренду. Вони можуть бути у форматі Illustrator (ai) або у форматі Photoshop (psd). Найкраща практика полягає в тому, щоб ваш логотип був розроблений з використанням векторної графіки. Якщо ваш логотип або інші активи бренду створені в такому форматі, їх можна збільшити без втрати якості. Якщо у вас немає векторної версії вашого логотипу, то вам слід переконатися, що ваше зображення має ширину не менше 1 000 пікселів.
- Бібліотеки зображень. Фотографії та зображення можуть бути розміщені в Інтернеті, де дизайнер може отримати доступ до них за допомогою логіна. Їх також можна відправляти через хмарні файлообмінники. Переконайтеся, що зображення мають достатню якість. Найкраще надавати зображення, які мають 300 dpi. Хоча всі зображення в Інтернеті відображаються зі швидкістю 72 dpi, зображення вищої якості дасть вашому дизайнеру можливість оптимізувати та змінювати розмір та обрізати або вирізати зображення там, де це необхідно. Також може знадобитися розглянути різні зображення для мобільних пристроїв проти настільних комп'ютерів, оскільки точка зору на мобільних пристроях набагато менша. Можливо, вам доведеться розглянути можливість використання набагато менше зображень для мобільних пристроїв або навіть жодного взагалі.
Якщо ви не володієте зображенням та його авторським правом, використання зображення на вашому сайті без дозволу власника є незаконним. Якщо вам потрібні ці зображення, їх можна придбати в онлайн-бібліотеках, таких як iStock або Shutterstock. Уникайте використання зображень із пошуку зображень Google на своїх сторінках.
- Папка «Шрифти». Вам потрібно буде надати як Apple Mac, так і для ПК версії шрифтів, перерахованих у вашому посібнику зі стилю. Багато дизайнерів працюють на комп'ютерах Mac, які використовують різні версії шрифтів від тих, що читаються ПК.
- Брендові кольори потрібно надавати цифровим дизайнерам у форматі RGB. RGB означає червоний, зелений і синій і є стандартом для кольорів в Інтернеті.
- Будь-які існуючі творчі ресурси, створені для вашого бренду з плином часу, такі як:
- Друк дизайнів
- ТВ-реклама
Копія сайту повинна бути доступна до того, як буде потрібно остаточний дизайн. Це запобігає затримки, викликані дизайнерами в очікуванні матеріалу. Це стосується будь-яких додаткових ресурсів, які можуть знадобитися вашому дизайнеру, які можуть бути завантажені або надіслані, наприклад, ваші цінові посібники або описи продуктів.
Шрифти
Копія передає повідомлення вашого бренду вашому клієнту або клієнту і повинен бути легко читається і зручним для пошукових систем. CI виражається за допомогою шрифтів, також відомих як гарнітури.
Друкарський макет може привернути увагу до змісту, який користувачі повинні побачити в першу чергу. Вкажіть, які фрагменти інформації мають пріоритет. Важливість може бути позначена розміром тексту, кольором, вагою, великими літерами та курсивом. Розміщення також сприяє тому, наскільки важливим є текст.
Деякі шрифти є загальними для всіх користувачів комп'ютера. Ці шрифти відомі як веб-безпечні шрифти. Кожен, хто звертається до веб-сайтів, які використовують ці шрифти, зможе переглядати їх як задумано дизайнером, і пошукові системи зможуть легко шукати ці веб-сайти.
Деякі безпечні веб-шрифти: Times New Roman, Arial, Helvetica, Courier New та консоль Lucida. Повний список дивіться тут: www.w3schools.com/cssref/ css_websafe_fonts.asp.
Щоб сприяти впливу, дизайнери, як правило, вважають за краще не обмежуватися використанням лише безпечних веб-шрифтів, а рекомендації щодо бренду в більшості випадків не враховують безпечні веб-шрифти. Це означає, що шрифти повинні бути вбудовані розробником за допомогою таких інструментів, як Typekit, або завантажуватися динамічно з таких інструментів, як Google Fonts.
Ви також можете використовувати Google Fonts в якості альтернативи, які є більш стильними, ніж стандартні шрифти, але які все ще доступні для перегляду більшості людей. Розробнику потрібно буде їх реалізувати. Дивіться www.google.com/шрифти.
