Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Related Articles

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

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

Close