Не вказано
11 ставок
1. Загальні вимоги до дизайну та станів елементів
Дизайнеру необхідно розробити сучасну UX/UI концепцію сторінки маркетплейсу для вибору послуг. Інтерфейс повинне мати мінімальне навантаження, забезпечуючи швидкий доступ до фільтрації та пошуку бажаної послуги. Усі інтерактивні елементи (кнопки, перемикачі, інпути, картки) повинні мати промальовані візуальні стани: Default (Звичайний): Базовий вигляд елемента. Hover (Наведення): Зміна кольору, поява тіні або підсвічування при наведенні курсору. Active/Pressed (Натиснуто): Статичний відгук у момент кліку. Focus (Фокус): Стан для інпутів та кнопок при навігації з клавіатури або введенні тексту (акцентна рамка). Disabled (Заблоковано): Неактивний стан елемента, якщо функція недоступна.
2. Глобальна шапка сайту (Header) Логотип: ліва частина. Навігаційне меню: Пункти "Пункт 1", "Пункт 2", "Пункт 3", "Підтримка". Пункти "Пункт 1", "Пункт 2" та "Пункт 3" мають випадаючі списки (Mega Menu) з підпунктами, іконками та коротким описом. Наприклад: підпункт "Медична допомога" супроводжується медичною іконкою та описом "Перша допомога та виклик екстрених служб". Пункт "Підтримка" в майбутньому буде відкривати діалогове вікно (зараз не робимо). Блок авторизації (права частина). Стан неавторизованого користувача: Кнопки "Увійти" та "Зареєструватись". Стан авторизованого користувача: Кнопка-посилання "Перейти в кабінет", аватар користувача пункти меню
3. Права панель фільтрації (Sidebar Filter)
Панель працює в режимі автоматичного застосування (без кнопки "Застосувати"). Будь-яка зміна стану оновлює контент лівої частини автоматично.
Цей блок уже є реалізований. Треба буде лише доопрацювати для відкриття на мобільних пристроях
4. Основна (ліва) частина: Панель результатів пошуку
4.1 Основна (ліва) частина: Панель результатів пошуку Довідкова інформація (Рядок 1): Текст ліворуч — "Ми підібрали [X] послуг", текст праворуч у цьому ж ряду — "У [Y] організаціях". Локаційний блок (Рядок 2): Текст за замовчуванням "Організації по всій Україні". При кліку активується поле з автокомплітом для пошуку населеного пункту. Дизайн автокомпліту: Опції у випадаючому списку відображають назву населеного пункту (введену користувачем) жирним, а під нею — повну адміністративну ієрархію: наприклад, с. Лебідь (Лебідська ТГ, Лебідський р-н., Рівненська область) або Голосіївський район (м. Київ). Для міст зі спеціальним статусом (Київ) вища ієрархія відсутня. Перемикач виду відображення: Toggle-кнопка для вибору режиму: "Списком" або "На мапі"
4.2. Вміст карток послуг (Режим списку)
Картки розділяються на два візуальні типи: Класична картка та Виділена картка. Виділена картка має яскравішу рамку/фон та містить акцентні маркери-лейбли: РЕКОМЕНДОВАНА ПОСЛУГА або ВИБІР КОРИСТУВАЧІВ.
Обов'язкові компоненти кожної картки: Брендінг автошколи: Логотип, назва організації, верифікаційна зелена галочка (для перевірених організацій). Соціальний доказ: Середня оцінка зірками (наприклад, 4.8), кількість відгуків (у вигляді клікабельного посилання, що веде на блок відгуків організації) та відсоток успішності надання послуг. Параметри послуги: Назва (наприклад: "Послуга з надання послуг"). Адреса/Локація (повна назва, наприклад: "Рівненська обл., Сарненський р-н, Дубровицька ТГ, с. Озерськ, вул. Степана Бандери, 14"). Поруч кнопка "Показати на мапі", яка відкриває локацію в модальному вікні. Теги переваг огранізації (наявність укриття, знижки для ветеранів, тощо), вибрані користувачем у фільтрі. Завелику кількість можна ховати під кнопку "Показати все". Категорії, що входять у програму. Наведення на категорію викликає тултіп. Навчальні модулі: Блоки "Модуль 1" та/або "Модуль 2". Відображають кількість годин надання послуги та їх тип — академічні або астрономічні. Поруч розміщується іконка знаку питання з тултіпом поясненням різниці між цими годинами. Інтерактив та збереження: Кнопка-іконка (сердечко, або інша) для додавання програми в "Обране" (має стани Default та Active-filled). Фінансовий блок: Повна вартість (великий акцентний шрифт) Блок розтермінування: Кількість місяців та сума щомісячного платежу. Оформлюється компактним блоком із міні-логотипами доступних банків (ПриватБанк, Монобанк тощо), цифрою та пояснювальним тултіпом. Медіа та опис: Короткий текстовий опис програми, блок мініатюр фото/відео з можливістю розгортання в галерею (Lightbox) при кліку. Додатково (якщо дозволяє вільне місце): Графік роботи організації, кнопка розгортання прямих контактів. Головна цільова дія (CTA): Акцентна, велика кнопка "Залишити заявку"
Потрібно показати вміст сторінки з картками, та бзе карток. Коли цільові програмі згідно фільтру не знайдено
4.3. Нижній блок сторінки
Під основним списком карток по центру розміщується кнопка "Показати ще" для пагінації. В самому низу сторінки інтегрується додатковий контентний блок "Переглянуті програми" з компактними картками самих брендів організацій.
Проект поки на ранній стадії розробки, тому я зараз дуже обмежений по бюджету. Я сам програміст та фрилансер, тому чудово розумію що робота має оплачуватись гарно, але поки шукаю компроміс по ціні. Дякую за розуміння
Додаткову та більш детальну інформацію надам потенційному виконавцю.