Візуальний напрямок вмісту, що потрібно знати
The візуальний напрямок змісту є менш широко обговорюваним, але важливим аспектом високопродуктивного веб-дизайну. Кожен відвідувач "вбирає" новий сайт на першу сторінку завантаження - чи роблять вони це свідомо чи ні.
Естетика відіграє певну роль, але це більше про загальне відчуття дизайну. Це відчуття може впливати на простір, типографію, симетрію, але в основному відносини між елементами сторінки.
Дизайнери хочуть відвідувачів залишитися на сторінці і продовжуйте прокручувати захопивши їхню увагу і зацікавившись сайтом. Принципи проектування повинні завжди зосереджуватися на функцію перед формою. Це означає, що дизайн повинен доповнюють зміст, не засуньте його у запізнення.
У цій публікації я хотів би показати вам кілька порад про те, як ви можете покращити макети та потоки візуального вмісту на вашому сайті.
Зосередитися на композиції
Кожен фрагмент веб-сайту будується на загальний план. Цей загальний макет створює композицію, яка слідує правилам гештальт-теорії, яка стверджує, що ціле завжди більше, ніж сума частин.
Окремі ділянки сторінки об'єднуються утворюють ціле. Елементи дизайну необхідно побудувати гравітаційне тяжіння про зміст; все на сторінці має бути природно направляти відвідувачів далі, поки вони не досягнуть нижньої частини сторінки.
Саме тому відносини між різними частинами контенту (візуальні ефекти, текст, кнопки, тощо) мають велике значення для оформлення.
Ваша мета повинна бути заохочення людей переглядати сайт з власного нахилу. Легше сказати, ніж зробити, але ви можете багато чому навчитися вивчення реальних прикладів.
Домашня сторінка Monkop є прекрасним прикладом візуальної ієрархії як текст, так і візуальні зображення. Багато простору використовується між елементами, а типографіка доповнює фірмові ілюстрації.
Як ви прокручуєте, ви помітите прямі горизонтальні блоки сторінок розділені на кольори, межі та графіку. Вони побудовані з дизайн шаблонів на увазі послідовність пропозицій по всій сторінці.
До дна ви знайдете розщеплення двох стовпців з зображеннями з одного боку, текст з іншого. Зображення також сторони підкачки у вигляді правого-лівого-правого-лівого. Це привертає увагу і розпадається одноманітність типової сторінки збереження природного потоку у змісті.
A подібний дизайн естетичний можна знайти на веб-сайті Picjumbo, цільовій сторінці для фотодобавок для користувачів Photoshop та Sketch.
Домашня сторінка фокусується на логотипі та відео попереднього перегляду. Під час прокрутки ви помітите спеціальні анімації, які переміщуються по всій сторінці. Ця анімація дійсно захоплює увагу, і отримує глядача зацікавлені у продовженні прокрутки.
Загалом, сторінка відчуває відчинено і легко переглядати. Вміст є розділені на горизонтальні блоки з чітким типографіки і чисті іконки.
Розглянемо спосіб різних елементів сторінки баланс разом, простір між елементами, контраст між кольорами і різні форми. Всі ці речі відіграють певну роль у загальній композиції. Кожен сайт природно притягує певний вагу до вмісту.
Немає абсолютної відповіді, оскільки вона відрізняється для кожного сайту. Наприклад, деякі навігаційні посилання виглядають краще, коли вони великі та великі. Інші підходять краще, коли вони малі з великими літерами.
Я пропоную вам вивчити інші веб-сайти у вашій ніші. Дійсно проаналізуйте, як вони зібрані. Навіть спробуйте відновити макети, щоб побачити, які елементи нарешті роблять дизайн "зібратися".
Питання дизайну типу
Те, як ви створюєте свою типографію впливають на напрямок вмісту на вашому сайті. Це пов'язано з ієрархією типів і стилі дизайну різних елементів сторінки як абзаци, заголовки, маркіровані списки, цитати та спеціальні елементи макета, такі як стовпці або таблиці.
Візуальні зображення також може вплинути на макет, тому добре розробляти вміст з природним прогресуванням. Напишіть вміст таким чином спускається по сторінці, і тримає людей читати через кожен абзац.
Найбільшим інструментом, який ви маєте у своєму розпорядженні, є ваше око для дизайну. Навчіться розпізнавати відмінності в друкарських елементах і як вони стосуються інших елементів сторінки. Створюйте відносини між розділами сторінки, щоб розрізняти області вмісту.
Деякі речі:
- Розмір тексту
- Сімейство шрифтів
- Колірний контраст
- Відносини розділу розділу
- Висота рядка та поля абзацу
- Відстань між літерами та верхній / нижній регістр
Наприклад, перегляньте домашню сторінку Монітора кампанії. У верхній частині навігації використовуються всі ковпачки з невеликими буквами. Інші заголовки на сторінці дотримуйтесь цього ж дизайну всіх шапок котрий створює відчуття рівномірності.
Інші великі заголовки на сайті набагато помітніше, і вони дійсно стрибають зі сторінки. Просто розглядаючи типовий дизайн заголовка, він повинен бути легким сказати різницю між заголовком і його парним тілом.
Стилі друкарського оформлення в Моніторі кампанії є вишуканими, і вони природно вписатися в макет. Для досягнення такого результату потрібна практика, але чим більше ви намагаєтеся, тим легше буде.
Щоб довідатися трохи більше, я рекомендую перейти за такими посиланнями:
- Принципи проектування: візуальний вага і напрямок
- Робота з візуальною вагою у ваших проектах
- 19 Фактори, що впливають на складний баланс
Довідковий вміст
Зрозумійте це різні типи веб-сайтів є різні методи для керівництва відвідувачами сайту. Наприклад, цільові сторінки хочуть направляти відвідувачів ласощі інформації, маленькі іконки, скріншоти, і відгуки.
Інші сайти, такі як блоги, зазвичай не приводять людей на головну сторінку відразу. Більшість людей земля на сторінці статті, тому макети дописів блогу призначені для виділіть заголовок, і малювати людей далі в зміст. Це коли якісні копірайтингу вступає в гру, тому що ви хочете читачів відвисає кожне слово.
Потрібні соціальні мережі та веб-програми якісний досвід користувачів, отже, це трохи інша тема, але врахуйте, як призначений канал Facebook заохочувати прокрутку та взаємодію з користувачем.
Методи проектування, які ви використовуєте, щоб тримати людей на сайті змінюються з часом. Але взагалі, ваша мета - це гіди відвідувачів з візуальним напрямком вмісту.
Давайте подивимося на a цільової сторінки а дизайн блогу щоб виявити відмінності.
Кактус - це статичний генератор сайтів для OS X. Їхня домашня сторінка уважно стежить за дизайном Apple - багато пробілів і тонких шрифтів без засічок.
Вміст організований у колони, блоки та фрагменти тексту з простим графічним зображенням. Такі ж естетики є спільні з продуктами Apple, так що користувачі Mac можуть насолоджуватися цим стилем дизайну.
Інформація про продукт - включаючи функції та налаштування - наведено на головній сторінці. Сама сторінка заохочує прокручування за допомогою унікального вмісту, основних піктограм та змінного шаблону стовпців блоків вмісту ліворуч / праворуч.
Метою тут є надання інформації існуючих користувачів, і продавати нових користувачів ідея Кактус.
Тепер порівняйте цей дизайн з домашньою сторінкою для наступної мережі. Вміст є значно спорадичніше на домашній сторінці блогу, тому що є багато різних поштових тем.
Прямокутники створюють систему сітки, яка інкапсулює кілька повідомлень в єдину версію. Мета тут полягає в тому, щоб отримувати читачами вміст на сайті. Не має значення, якщо відвідувачі завантажують що-небудь, але це важливо, якщо вони залишитися, щоб прочитати щось.
Шлях до людей читає чудові фотографії і помітні заголовки. TNW робить велику роботу з цього, і їх макет побудований для перегляду людей з пов’язаними ескізами публікацій у бічній панелі та області після вмісту.
Націлювання відвідувачів на певну дію відрізняється на кожному сайті. Але ви можете багато чому навчитися, вивчаючи, що роблять інші успішні сайти, і навчившись копіювати.
Довіряйте своїм очам
Індивідуальні конструктивні властивості можна пояснити аналітично, але зміни впровадження для кожного сайту. Зображення героя з посиланням "Прокрутити далі" не виконує те ж саме на всіх веб-сайтах.
Навчання дизайну дуже багато візуальний процес. Ваше око для дизайну є найважливішим аспектом. Тобі потрібно бачити речі належним чином щоб визначити це візуальна ієрархія. Якщо ви можете побачити це на інших веб-сайтах, ви зможете повторити його на своїх сайтах.
Краща порада, яку я маю, - це просто довіряй своїм очам. Створіть список ваших улюблених веб-сайтів і витрачіть 5 хвилин на перегляд кожного з них. Запишіть улюблені елементи на сторінці і як вони впливають на дизайн. Це допоможе вам інтерналізувати ці концепції з точки зору UI / UX, радше, ніж з точки зору користувача.
Також не бійтеся спробувати матеріал! Ніхто не отримав хорошого дизайну просто читаючи статті про дизайн. Так, вони допомагають - вони можуть реально допомогти. Але ти необхідності до створюйте речі з нуля, щоб дізнатися, що працює і що ні.
Тренуйте своє око, вивчаючи макети сайту, які вам подобаються, і відтворюйте їх. З часом ви будете створювати бібліотеку зразків, що полегшує розробку нових сайтів.
Підведенню
Сподіваємося, ці поради допоможуть вам розпочати роботу і дадуть вам основні дорожні карти. Це не просто стати веб-дизайнером, але світ потребує таланту, і ніколи не було легше навчити себе цим фундаментальним поняттям.
Вивчення найкращі приклади веб-сайтів з елементами сторінок, якими ви користуєтеся. Поїзд ваше око, щоб розпізнати відносини, і ви швидко розвиватися необхідні навички повторювати ті відносини у вашій роботі.
