Дизайн сайту - диво або передбачуваний процес? | блог Evergreen 8 Дизайн сайту - диво або передбачуваний процес? | блог Evergreen 9 Дизайн сайту - диво або передбачуваний процес? | блог Evergreen 10

Дизайн сайту - диво або передбачуваний процес?

#UI/UX дизайн

Одне з питань, на які доводиться відповідати дизайнеру, це як створюється концепт дизайну сайту? Звідки з'являються ідеї і як це відбувається? Дуже багато хто вважає, що творчий процес не можна структурувати і отримувати результат в обумовлені терміни.   Але при правильному поході, цей процес можна зробити цілком передбачуваним. Давайте розберемося, як це відбувається в Evergreen.

Прототип допомагає визначити структуру сторінки  

Почнемо з того, що відповідно до техпроцесу в нашій Команді, проект переходить до дизайнера з вже готовою структурою матеріалу і компонуванням - все це показано в прототипі (читайте докладніше, що таке прототип, і як він допомагає при оцінці та розробці сайту ). Також менеджер обов'язково передає дизайнеру всі наявні графічні матеріали - фірмовий стиль, картинки продукції, поліграфію компанії і інше. Це допомагає дизайнерові зрозуміти обсяг роботи, оцінити свою частину роботи зі створення сайту, і приступити до роботи.

Прототип - основа для концепту дизайну сайту

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

Проектування дизайну сайту, мудборд

Перше що потрібно зробити – синхронізувати бачення дизайнера, очікування клієнта і стандарти дизайну для тематики проекту. Для цього Evergreen використовує інструмент, який називається moodboard (мудборд, від англ. Дошка настрою). Що з себе являє цей інструмент?

Це дошка, на якій збираються:

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

Мудборд (moodbord) дозволяє швидко скласти уявлення про те що потрібно клієнту і показати багато різних ідей

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

Важливо розуміти, що мудборд служить не для того, щоб дизайнер просто зміг скопіювати обраний стиль на проект клієнта. Це потрібно щоб вловити той найтонше «почуття смаку клієнта» і зрозуміти «настрій його проекту».

Гарний дизайн сайту

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

Кілька концептів дизайну сайту, які ми малюємо, щоб вибрати кращі

Головна мета наших проектів – зробити сайт ефективним. Він повинен успішно справлятися з поставленим бізнес завданням: добре продавати, забезпечувати потік дзвінків або приводити користувача до іншого цільовим дії. Щоб це стало можливим ми стежимо за наступними компонентами:

  • Відповідність базовим принципам дизайну: збалансована колірна схема, гармонійне поєднання шрифтів, правильні композиційні рішення і узгодженість із загальноприйнятими поведінковими чинниками. Це важливий фундамент будь-якого успішного проекту дизайну.
  • Правильне управління увагою. Відомий факт, що користувач формує перше враження про сайт, на який він потрапив протягом 2-3 секунд. Важливо, щоб це враження було правильним і щоб користувач був зацікавлений в подальшої взаємодії з сайтом і розумів, що потрібно зробити.
  • Виділення графічними прийомами елементів CTA (call to action) – це такі елементи, які призводять до цільової дії (кнопка купити, подзвонити, відправити і ін.). Допомагає користувачеві прийняти рішення здійснити цільове дію на сайті.

Стилі сайтів

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

Після цього, дизайн відправляється на узгодження клієнту.

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

Що відбувається якщо клієнт не приймає концепт?   Таке трапляється рідко. В процесі розробки концепту як правило є проміжні варіанти, кожен з цих варіантів має різний стиль. Тому тут має сенс показати ті напрацювання, які були, щоб зрозуміти яким має бути подальший напрямок роботи.

Гарний дизайн сайту, який ми погодили

Вже на підставі узгодженого концепту, ми справах безпосередньо отрисовку всіх сторінок сайту. Про те, як ми це робимо, які фішки і технології використовуємо, ми розповімо в наступних статтях. Следкуйте за нашим портфоліо, щоб залишатися в курсі дизайн трендів!

Павло Савеленко, дизайнер Evergreen.

Павло Савеленко

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