«Є три відповіді щодо якості дизайну: так, ні, і WOW! WOW — це те, до чого варто прагнути», — Мілтон Глейзер, американський графічний дизайнер, роботи якого знаходяться в музеях усього світу.

Через велику конкуренцію на ринку компанії посилюють боротьбу за впізнаваність бренду, залучення клієнтів, пошук нових джерел доходу. Потрібно не лише виділятися на тлі конкурентів, але й виправдовувати очікування клієнтів чи навіть випереджати їх. У сучасному цифровому світі важливо використовувати новітні технології, щоб бути серед перших. UI/UX-дизайн дозволить сформувати вашому бренду унікальний фірмовий стиль та сприятиме подальшому зростанню бізнесу.

Чому UI/UX-дизайн важливий для бізнесу

За даними досліджень, 88% користувачів не повернуться на сайт, якщо у нього поганий дизайн чи юзабіліті. Але інколи мало, щоб інтерфейс був максимально зручний. Потрібно, щоб дизайн мав WOW-ефект, захоплював увагу з першої секунди, викликав зацікавленість.

Гарний дизайн — це те, за чим зустрічають будь-який сайт чи лендинг. Від того, яке перше враження він справить, залежить значною мірою, чи залишиться користувач на сайті. А далі — чи стане просто відвідувач вашим клієнтом. Естетично привабливі продукти викликають позитивні емоції та створюють приємні спогади, які збережуться протягом тривалого часу, збільшать довіру та ймовірність того, що користувач захоче знову взаємодіяти із сайтом.

Вдалий дизайн органічно поєднує 3 елементи:

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

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

Сьогодні пропонуємо кейс компанії My Infinity Games, для якої дизайнер Freelancehunt створив дизайн сайту з WOW-ефектом.

Про компанію

Стартап My Infinity Games працює перший рік. Компанія надає послуги з розробки цифрових продуктів — ігор, сайтів, мобільних додатків, дизайну різних напрямків. Замовник — Давид Под. Продукт розрахований на західну аудиторію.

Конкурентні переваги компанії:

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

Цільова аудиторія — малий та середній бізнес.

Завдання

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

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

Бюджет

Вартість інтерфейсу сайту — 22 000 грн (еквівалент $600).

Реалізація

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

Етапи роботи над проєктом

Робота над проєктом складалася з кількох етапів:

  1. Знайомство з технічним завданням, щоб зрозуміти, який саме сайт потрібен, яка його цільова аудиторія.
  2. Спілкування з потенційними користувачами, щоб дізнатися їхні потреби.
  3. Підбір варіантів дизайну інтерфейсів.
    На першому етапі фрилансер запропонував замовнику на вибір 3 варіанти головного блоку в абсолютно різних стилях. Для Дмитра важливо надати такі варіанти, які подобаються йому, тоді надалі з будь-яким з них він працюватиме із задоволенням. Бо без натхнення не вийде отримати гарний результат.
  4. Після того, як клієнт затвердив концепцію, розпочалася скрупульозна робота безпосередньо з вибраним варіантом. Спочатку дизайнер робить desktop-версію дизайну, а потім адаптивну версію під мобільні пристрої та планшет.
Порада фрилансерам будь-якої спеціалізації: якщо ви справжній професіонал, відстоюйте свою точку зору. Ви берете гроші за свою роботу, тому маєте порадити замовнику, яке рішення буде кращим.

Для роботи Дмитро використовує програму Adobe XD. Переваги для нього — зручний інтерфейс та дуже багато варіантів прототипування.

Особливості проєкту

Під час реалізації були використані найновіші тенденції у дизайні. Інтерфейс створений у стилі Glassmorphism. Основні особливості цього стилю:

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

Завдання — органічно поєднати на сайті 4 різні напрямки:

  • блокчейн,
  • розробку ігор,
  • розробка мобільних додатків та сайтів,
  • графічний та вебдизайн.

Робота проводилася поетапно над кожним блоком. Було заплановано активну комунікацію з обговорення кожного етапу, це допомогло досягнути поставленої мети.

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

1. Перший блок: стисла інформація «Хто ми».

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

Оскільки в цьому дизайні використовується мало блоків, такий яскравий фон допомагає додатково наповнити сайт, щоб він не виглядав порожнім. Дизайнер водночас закрив два завдання: підкреслив ефект матового скла та додав об'єму сайту.

0:00
/

2. Другий блок: реалізували поєднання 4 напрямків на одному екрані. Кожен сегмент має свій окремий блок. Завдяки багатошаровості складається враження, ніби об’єкти плавають у просторі. Яскраві контрастні кольори фону підкреслюють розмиту прозорість плашок.

3. Третій блок: інформація «Про нас».

4. Четвертий блок: кожна картка детальніше описує конкретний напрямок та як це працює. Картки інтерактивні, можна вибирати будь-яку для подальшого ознайомлення із сегментами.

5. П'ятий блок: форма замовлення.

Результат

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

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

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

Сайт посів 1 місце в рейтингу як сайт дня на майданчику Web Guru Awards.

Інтерв’ю із замовником

— Виконавець проєкту надав вам 3 різні варіанти сайтів на вибір. Чому ви обрали саме цей дизайн для подальшої розробки?
— Спочатку я хотів отримати більш класичний дизайн сайтів, але після обговорення з Дмитром зрозумів, що такий дизайн не підійде для нашої тематики. Тому зробили саме такий варіант, який зараз є.

— Чи задоволені ви результатом?
— Дуже задоволений результатом та співпрацею з Дмитром на цьому проєкті. Він професійно захищав свої ідеї. У кінцевому підсумку в нас вийшла хороша колаборація, й ми отримали чудовий результат.

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

З погляду трендів та дизайну ми зробили все за останнім словом моди. У нашій сфері діяльності дуже важлива візуальна привабливість, і тут вона на першому місці.

— Чому ви прийшли саме на фриланс із цим завданням?
— У нашій ніші послуги фрилансерів досить популярні, оскільки не завжди доцільно тримати співробітників у штаті, платити їм зарплату. Вигідніше звернутися на фриланс. У цьому конкретному випадку в мене не було необхідності тримати штатного дизайнера, тому фриланс став чудовою можливістю виконати це завдання.

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

— Чи зверталися ви до інших фрилансерів з різними завданнями?
—Так, я звертався до різних спеціалістів на Freelancehunt. Я збираю для себе пул фрилансерів, з якими у мене вже був позитивний досвід співпраці. Надалі планую працювати з перевіреними спеціалістами.

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

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

Дякуємо Давиду за цікаве та змістовне інтерв'ю. Бажаємо удачі в розвитку бізнесу!

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