![](https://cdn.cases.media/image/wide/4ab59c64-838e-443b-9ffd-7a961e573037.png)
Створення головного сайту із соціального підприємництва в Україні
Проєкт
Найбільший в Україні проєкт із розвитку соціального бізнесу. За фінансової підтримки Європейського Союзу проєкт втілює консорціум із восьми організацій громадянського суспільства України, Литви та Латвії на чолі з Українським форумом благодійників.
socialbusiness.in.ua розвиває професійний потенціал соціальних підприємців, формує суспільну думку, будує екосистему для розвитку, адвокатує сприятливе законодавство, займається онлайн-консультаціями для соцбізнесу (для цього залучаються фахові юристи, маркетологи, фінансисти).
![](https://cdn.cases.media/image/original/6364dfaf-c92b-413c-9d5d-88900aaa72d7.gif)
Завдання
Зробити неймовірно зручний та зрозумілий ресурс та не вплутати його у хаотичний клубок ролей, тегів та величезної кількості інформації? А ще додати трохи анімації і можливість публікації всіх матеріалів самими відвідувачами? Завдання не з легких, але такі виклики ми дуже любимо!
Процес
Основними етапами при створенні сайту були:
- UI design;
- Front-end та back-end;
- наповнення та тестування;
- інтеграції та синхронізації.
Для того щоб дати людям те, що їм дійсно потрібно, ми провели UX-дослідження і визначили, які інформація і функціонал є необхідними. Виявлені болі та проблеми користувачів допомогли нам зрозуміти, що слід акцентувати на простоті, легкості дизайну та зручності у навігації. Платформа містить багато розділів та сторінок, у яких відвідувачі легко заблукають, якщо ми ретельно не пропрацюємо користувацький досвід. Розуміння аудиторії стало стартовою точкою і основою для дизайну та розробки.
Кольори та шрифти
Ці дві складові грають важливу роль в ідентифікації сервісу, його впізнаваності. Кольори були підібрані відповідно до брендбуку, побажань клієнта та функціоналу інтерфейсу. Важливо, щоб користувач міг візуально відрізнити і швидко знайти те, що він шукає. При виборі шрифту ми теж керувалися цими вимогами, проте головною була читабельність на будь-яких моніторах, екранах і їх розширеннях. Raleway став оптимальним вибором.
![](https://cdn.cases.media/image/original/75cb1f7a-b793-4de0-b5ff-6df700973536.gif)
Wireframes
Wireframe - етап перед створенням повноцінного інтерфейсу в редакторі. Його завдання полягало в тому, щоб у максимально короткі терміни відобразити структуру сторінок: як будуть розташовуватися блоки з інформацією і супутніми зображеннями. Ми зрозуміли, що все сплановано правильно, елементи на своїх місцях і ніде немає смислових прогалин. Можна рухатися далі.
![](https://cdn.cases.media/image/wide/3780cd23-5e94-4b45-b67e-2a7962383920.png)
Мобільна версія
Дослідження цільової аудиторії показало, що більше 81% людей збираються користуватися веб-сайтом через мобільні пристрої. Саме тому ми зробили все, щоб забезпечити бездоганну взаємодію з сайтом для мобільних користувачів.
![](https://cdn.cases.media/image/wide/7e9169de-7db5-499e-8ef3-6a4d6ba965b4.png)
![](https://cdn.cases.media/image/wide/22c420da-c1af-49ce-b4a6-f3c3d6e3530f.png)
Результат:
Цей ресурс перевершив будь-які сподівання. Створений у стилістиці Material Design та зі струнким UX-ом, проведеним ще на початку, цей сайт став найбільшою базою знань для соціальних підприємців всієї України. Зручна система тегів та напрямків, велика кількість відвідувачів та просте модерування – ось головні складові успіху платформи.
![](https://cdn.cases.media/image/wide/039f1bdd-b291-4606-af20-f475d93557fd.png)