Аналітика і дизайн як єдине ціле

Багатьом здається, що дизайнер – це примхливий художник, який вічно натхненно спрямовує томний погляд вдалину і іноді вимовляє перед клієнтом проникливі промови про порушення всій його задуми, адже «саме цей зелений символізує гармонію, а на два тони темніше, як пропонує замовник, – вже екологічність». Але ні, це стереотип.

Дизайн – це в першу чергу рішення конкретної задачі. Наприклад, перед клієнтом стоїть завдання – підвищити конверсію сайту, значить, дизайнер буде робити все, щоб замовник був задоволений. Якщо клієнтові потрібен запам’ятовується сайт, викликає довіру користувача, дизайнер це завдання буде вирішувати інакше, ніж попередню.

У цій статті ми розповімо про етапи підготовки дизайну і загальним принципам роботи з візуальної складової сайту.

Дизайн – це не помахи пензлем і не політ творчості, це в першу чергу аналітика.
Як будь-який проект, робота починається з визначення головної задачі дизайнерського продукту. Що клієнтові потрібно від сайту? Підвищення продажів? Більше довіри до бренду? Впізнаваність?
Коли клієнт визначився з основним завданням, а дизайнер приблизно розуміє суть роботи, наступає другий етап – робота з цільовою аудиторією (далі ЦА). Найчастіше ЦА визначена ще на етапі аналізу та проектування, але для дизайнера також важливо скласти портрет типового користувача, і чим точніше буде портрет – тим краще вийде фінальний продукт.

Давайте розглянемо приклад роботи з ЦА. Уявімо, що замовник продає дитячий одяг в інтернеті. Ми знаємо його продукт, його сильні і слабкі сторони і приходимо до висновку, що типовий представник ЦА для цього продукту – заміжня жінка Ірина, їй близько 30 років, дохід трохи вище середнього, є вища освіта. Найімовірніше, до народження дитини у молодої мами була кар’єра. Ірина сидить у декретній відпустці і займається дитиною. Що для неї важливо? Ми думаємо, здоров’я дитини і сімейне благополуччя – значить, продукт її буде цікавити якість матеріалу і рівень сервісу. Що цікаво Ірині? Ірина днями і ночами читає блоги інших матусь, можливо, сама ділиться своїм досвідом в інтернеті. Її цікавить її дитина – як він розвивається, як він бачить світ. Фінальний питання – що ми можемо дати Ірині, чого не можуть інші?

Так ми плавно підходимо до конкурентного аналізу. Дизайнер обов’язково буде дивитися сайти конкурентів – що у них погано, а головне – що у них добре, і як він у себе це може поліпшити. Чому Ірина вибере наш сайт, а не сайт конкурента? Аналіз конкурентів проходить ретельно і детально – від креативної концепції бренду до кольору і розташування кнопок і іконок на екрані.

Читайте також  Реалізація BottomAppBar. Частина 3: Поведінки для Android

Коли дизайнер прописує для себе все, що продукт може Ірину підкорити і відвести з інших сайтів, починається наступний етап – складання мудборда. Це складне слово всього лише означає, що дизайнер накидає концепцію сайту, визначається з кольорами, шрифтами, манерою подачі інформації. Буде це яскравий сайт з соковитими кольорами і яскравими ілюстраціями? Навряд чи, адже ми пам’ятаємо, що Ірина цінує якість продукту, та її може налякати безліч квітів і кричущих написів, як спроба пустити пил в очі і «втюхати» неякісний продукт. Ми пам’ятаємо, що Ірина в декреті і нікуди не поспішає, також Ірина розумна і вміє аналізувати, вона буде уважно вчитуватися і шукати підступ. Напевно, наш уявний дизайнер в цій ситуації вибере пастельні тони, можливо, акварельні мотиви, як у дитячих книжках, шрифт буде нейтральним, що дозволить Ірині без праці отримувати інформацію. Ілюстрації будуть світлі і спокійні, ймовірно, повні ніжності і ласки. Нагадуємо, що все це – лише уявна ситуація, щоб пояснити вам суть роботи. На жаль, в дизайні немає однозначних рішень, і ми не можемо дати вам строгий принцип роботи з тією або іншою ЦА.

Паралельно дизайнер надихається. Як справжній художник, дизайнер дивиться роботи своїх колег на спеціальних сайтах і зазначає цікаві рішення. Тобто – краде ідеї. Це можуть бути сайти зі схожою тематикою, можуть бути зовсім іншої спрямованості, але будь-яке цікаве і незвичайне рішення може надати сайту родзинку і стане тим самим фактором, чому Ірина не піде до конкурента, а буде купувати наш продукт. Але якщо дочитавши до цього моменту, ви потерли ручки і вирішили, що просто скопіюєте потрібний вам сайт і заживете розкошуючи, поспішаємо вас засмутити – найімовірніше це просто не спрацює. У іншого сайту головний користувач — не Ірина, а Світлана, а тут вже зовсім інша історія. Ні, дизайнер просто зазначає деталі і акуратно вписує їх у свій проект.

Читайте також  Хлопці, давайте жити дружно або про поле «Пароль» при реєстрації

Далі дизайнер приступає до безпосередньої роботи в спеціальних програмах. По суті робота включає в себе повну промальовування кожної унікальної сторінки сайту. Найбільше часу йде, звичайно, на головну сторінку, адже це перше, що побачить користувач і саме тут сформується його ставлення до продукту. Це стане дизайн-концепцією всього сайту.
Будь-який блок, будь-яка деталь дизайну повинна нести в собі сенс. Дизайнер – це такий божевільний, який постійно запитує себе: навіщо я це роблю? Навіщо я роблю кнопку темніше? Навіщо тут використовую цю фотографію, а не іншу? Навіщо в футері я ставлю спочатку значок ВК, потім ФБ і лише потім ОК, а не в іншому порядку? І якщо відповідь не з’являється, краще відразу відмовитися від рішення, тому що все-таки дизайн – це не картина, так як тут є чіткі критерії оцінки.

Чули слово KPI? Так от воно не застосовується до будь-якого твору мистецтва – наприклад, безглуздо говорити, що шедевр Мікеланджело підвищив відвідуваність Сікстинської Капели і є ефективним інструментом залучення нових людей. Але для дизайну найчастіше є дуже конкретні KPI, а тому роботу можна і потрібно оцінювати.

Є безліч літератури з веб-дизайну з нескінченними правилами і принципами. Насправді, все залежить від конкретного сайту і завдання, але є кілька загальних правил:

1. Принцип контрастності

Це стосується всіх елементів сайту. Чим менше контрастність – тим складніше сприймається і відокремлюється один від одного інформація. За рахунок контрасту можна виділяти одні деталі і заглушати інші, вибудовувати ієрархію веб-сторінки і акцентувати увагу користувача на головних елементах.

2. Принцип акцентування

Цей пункт тісно взаємопов’язаний з попереднім. Грамотна розстановка акцентів – гарантія ефективності сайту. Головне тут – не захоплюватися, а чітко розуміти, на чому ставити акцент, адже якщо виділяти все, вся ідея загубиться.

3. Принцип однаковості і повторення елементів

Цей принцип здається очевидним, але вимагає окремої згадки. Повторювані елементи і колірна гамма, спосіб вирівнювання, розмір шрифту, міжрядковий інтервал, відступи і кут скривления кутів – все це створює те саме одноманітність, яке полегшує користувачеві роботу з сайтом і збиває з пантелику, якщо цей принцип порушений. Наприклад, ви читаєте статтю на інформаційному сайті і знаєте, що стрілка «назад» внизу сторінки відправить вас назад на головну сторінку. А тепер уявіть, що ви читаєте не статтю, а дивіться всі статті розділу, хочете повернутися на головну сторінку, а стрілку «назад» не виявляєте. Чи виявляєте, але не таку і в іншому місці. Це тільки збило з пантелику, викликало роздратування і, може навіть змусити вас піти на більш зручний сайт конкурента.

Читайте також  Суд заборонив вільне розповсюдження зброї CAD-файлів, тому творець почав продавати їх

4. Вирівнювання за модульним сіток

Звучить цей пункт страшно, але насправді це всього лише принцип вирівнювання та розбиття сторінки на блоки. Модульна сітка – це інструмент, який допомагає вирівняти блоки відносно один одного і розташувати їх рівно і чисто. Нижче типовий приклад використання модульної стеки для вирівнювання елементів:

5. Принцип зручності сприйняття інформації

Цей пункт як би підводить підсумок над усім, що ми обговорили раніше. Людина – істота консервативне і до всіх нововведень ставиться насторожено і заздалегідь негативно, особливо, коли зміни не входили в його плани. Є звичні шляхи отримання інформації – наприклад, сторінку найчастіше користувачі будуть читати зліва направо зверху вниз. Не змушуйте користувача губитися в потоці інформації і здійснювати зайві дії.

Людина, до того ж, істота лінива, і занадто багато текстової інформації можуть збити з пантелику будь-якого користувача. Порівняйте два способи подачі одного і того ж тексту:

На цьому прикладі добре видно, як розташування тексту впливає на сприйняття. Чому нам простіше читати текст у другому випадку, хоча і там, і там текст і його обсяг однаковий.

Звичайно, на сайтах, які беруть премії інтернету і б’ють всі рекорди по KPI, ви можете побачити порушення майже всіх цих принципів, але в цьому-то і полягає прогрес. Дизайнер постійно відстежує нові тенденції в digital і експериментує з різними рішеннями.

Дизайнер працює не один, а в тісній співпраці з командами проектувальників, верстальників і програмістів, адже хороша ідея може прийти в голову будь-якому фахівцю, а ми пам’ятаємо, що кожна дрібниця може стати вирішальною для успіху вашого майбутнього сайту.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *