Створення логотипу та візуальної айдентики. UX/UI дизайн корпоративного сайту
Індустрія:
LegalTech
Клієнт:
Юридична фірма, що надає послуги з часткової зайнятості внутрішніх юристів для зростаючих бізнесів
Мета
Візуальне оновлення
Рік реалізації:
2024
Передумови
Add.Law — це юридична фірма з Лондону, що спеціалізується на наданні послуг з часткової зайнятості внутрішніх юристів для зростаючих бізнесів. Їхній підхід полягає в інтеграції досвідчених юристів безпосередньо в команди клієнтів, забезпечуючи гнучку та економічно ефективну юридичну підтримку без необхідності найму повноштатного внутрішнього юриста
У цьому проєкті ми виконували роль дизайн-підрядника для нашого партнера — компанії UXIS. Уся комунікація відбувалася безпосередньо з їхньою командою, що жодним чином не уповільнювало робочий процес. Навпаки, всі учасники були максимально залучені та налаштовані на досягнення найкращого фінального результату.
Ключові задачі
айдентика
ux/ui
Послуги:
Створення логотипу, візуальна айдентика, UX/UI design
Іструменти і технології:
Figma, Photosop, Illustartor, Relume
Задача
Клієнт поставив перед нами такі вимоги для айдентики і сайту:
- Сучасний, мінімалістичний логотип, в якому має бути інтегрований знак +
- Зручність використання сайту: інтуїтивно зрозумілий інтерфейс
- Сучасний дизайн: стильний, діловий, естетичний вигляд сайту і айдентики
- Мобільна адаптація: повна оптимізація дизайну сайту для смартфонів.
Етап №1
Дослідження, логотип
Стандартний процес роботи над візуальною айдентикою у нас в студії починається досліджень і розробки логотипу. Цей проєкт не був виключенням.
Один із важливих інсайтів, отриманих під час досліджень, стосувався кольорових рішень конкурентів — більшість із них використовували синю гаму. Щоб допомогти клієнту виділитись на ринку, ми запропонували альтернативні варіанти з зеленим і червоним кольорами. У результаті було обрано зелений.
Для логотипу ми підготували чотири концепції. Клієнт швидко визначився з фаворитом, попросивши лише доопрацювати типографіку. Дивись нижче, що ми отримали у фіналі. 👇
4 запропоновані концепції, перша з яких була обрана клієнтом
Обрана концепція допрацьована по шрифтам
Фінальний логотип і знак
Етап №2
Візуальна айдентика
Ми розробили візуальну айдентику потягом 2 тижнів. Вона має такі складові: логотип, знак, кольори, шрифти, графічні елементи, правила використання логотипу, візуальний стиль для фотографій, графічні техніки для використання айдентики на носіях. І найголовніше - guideline. Це документ, де описані всі правила роботи з айдентикою.
Також було опрацьовано 7 носіїв, які замовник обрав як найважливіші для старту роботи. Впровадженням візуального стилю, впродовж життя бізнесу може займатись будь-який графічний дизайнер, використовуючи зрозумілий і детальний гайдлайн
Нижче покажемо кілька сторінок з гайдлайну, де описані правила
Фірмові кольори
Палітра кольорів складається з основного зеленого кольору, який використовується в логотипі, а також 2 темніших відтінків та 3 світліших відтінків. Палітра також включає всі відтінки чорного кольору від 0 до 100 насиченості. В якості акцентного кольору використовуємо лимонний колір
Графічні елементи
Для створення цілісності бренду треба використовувати однакові графічні елементи на всіх типах носіїв
Графічні прийоми
Графічні прийоми, які ми можемо використовувати в айдентиці бренду.
1. Виділення частини тексту іншим кольором та шрифтом (курсив)
2. Зміщення окремих слів у заголовку
3. Поділ носія на 2 або 4 частини
4. Використання 1/4 частини знаку «плюс» як рамки для фотографій
5. Де потрібно - подовжити знак "плюс"
6. Використовуйте один з графічних елементів як маску для фотографій
Приклад взаємодії
Приклади того, як усі ці атрибути айдентики можуть працювати разом
1. Колір бренду
2. Фірмовий шрифт
3. Графічні елементи
4. Графічні техніки
5. Набір іконок
6. Логотип
айдентика на носіях
Етап №2. Завершення
Передача всіх матеріалів
Після завершення розробки айдентики ми готуємо для передачі всі необхідні матеріали та завантажуємо їх у хмару. Там вони зберігаються безстроково і замовник може в будь-який момент повернутись до початкових файлів
Клієнт отримує такий перелік матеріалів
- Всі версії логотипу (основний, знак, аватарка) в кількох форматах (jpg, png, svg, eps) та двох кольорових моделях (RFB та CMYK)
- Всі друковані матеріали підготовлені до друку
- Guideline у PDF для друку (у високій якості) та для PDF облегшений для взаємодії з підрядниками та всередині компанії
- Окремий Figma файл, в якому все зібрано по сторінках для зручності використання. Там також занесені всі кольорові стилі
Фігма файл з усіма елементами айдентики
Етап №3
UX/UI дизайн сайту. Структура і прототип
На початку роботи над сайтом ми зіштовхнулись з тим, що клієнт ще не мав всього контенту для сайту. Цю проблему ми пішли вирішувати за допомогою ШІ, а саме сервісу Relume. Ми створили структуру та варфрейми. Звісно, знадобилось ще втручання дизайнера для приведення макетів до відповідності вимогам замовника.
На базі створеної структури і варфреймів замовник вже набагато швидше зміг підготувати релевантний контент. Для того, щоб швидше запустити сайт, було прийняте рішення зробити окрім головної сторінки ще 5 внутрішніх. Ще 6 внутрішніх сторінок, які були в початковому ТЗ ми відкинули до кращих часів. Ми затвердили все і перейшли до створення дизайн-концепцій
wireframes
Етап №4
Дизайн концепції
На цьому етапі ми розробили дві унікальні концепції. Одна з них була затверджена і трохи допрацьована.
На базі створеної структури і варфреймів замовник вже набагато швидше зміг підготувати релевантний контент. Для того, щоб швидше запустити сайт, було прийняте рішення зробити окрім головної сторінки ще 5 внутрішніх. Ще 6 внутрішніх сторінок, які були в початковому ТЗ ми відкинули до кращих часів. Ми затвердили все і перейшли до створення дизайн-концепцій
Дві дизайн концепції
Частина фінально затвердженого дизайну головної сторінки
Завершення проєкту
Всі макети були передані на розробку
Даний проєкт для нас завершився на стадії дизайну. Розробкою проєкту займались наші партнери UXIS. І у них це вийшло дуже добре 💪. Подивитись живий сайт можете тут
Якщо вам цікаво більш детально дослідити наші послуги з брендингу, або ux/ui дизайну, то ласкаво просимо на відповідні сторінки послуг
