Завдання: Розробити дизайн головної сторінки сайту (Figma)

Діючий сайт: asnu.net

Загальні вимоги: 

  • Всі сторінки публічної частини мають коректно відображатися на різних пристроях та екранах (десктопи, планшети, смартфони) з підтримкою сучасних браузерів.
  • Чітка і зрозуміла структура меню, розділів і підрозділів, що забезпечує легкий доступ до ключових сторінок.
  • Дотримання корпоративного стилю у всіх елементах інтерфейсу (https://www.asnu.net/pages/237/).

На основі нижче наведених вимог, а також існуючої головної сторінки (https://www.asnu.net) сформувати дизайн головної сторінки (власні пропозиції щодо елементів сторінки заохочуються).

 

Header

Логотип:

Має підтримувати адаптивне масштабування (особливо для мобільних пристроїв).

Головне меню:

Передбачити пункти меню: Головна, Про АФНУ, Навчальна платформа, Обговорення, Консультації, База знань, Блог).

Має бути зручним та доступним для навігації.

Для пункту меню «Про АФНУ» реалізувати спадне меню, яке містить пункти: Керівництво, Структура,  Документи АФНУ)

Пошукова форма:

Повинна включати текстове поле для введення пошукового запиту та кнопку запуску пошуку.

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

Мовна панель:

Повинна містити прапорці або індикатори мов для вибору (українська та англійська).

Мовна панель повинна бути інтуїтивно зрозумілою та зручною для використання на всіх розмірах екрану.

Посилання на сторінки реєстрації та авторизації:

Повинні містити дві кнопки або посилання: "Реєстрація" та "Авторизація".

Можуть бути відображені як іконки або кнопки для зручності.

Після авторизації ці кнопки мають змінюватися на посилання до профілю користувача та виходу з облікового запису.

Посилання на сторінки в соціальних мережах:

Піктограми з посиланнями на профілі в соціальних мережах (Facebook, Instagram тощо).

Піктограми повинні бути яскравими і легко впізнаваними.

Адаптивність:

Header повинен коректно відображатися на всіх пристроях і бути легким для навігації.

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

 

Footer

Контактна інформація:

Має включати основну контактну інформацію, таку як адреса, телефон, електронна пошта.

Контактні дані повинні бути клікабельними (наприклад, для телефонів і пошти) для зручності користувачів мобільних пристроїв.

Опціонально додати карту з розташуванням офісу або інших локацій.

Корисні посилання:

Повинні включати посилання на важливі сторінки, такі як:

Умови користування – правила використання платформи.

Політика конфіденційності – деталі щодо обробки даних користувачів.

Часті питання (FAQ) – відповіді на популярні питання.

Партнерські програми – інформація для партнерів або програми лояльності.

Корисні посилання повинні бути структуровані, наприклад, в колонках, для зручності перегляду.

Форма підписки:

Форма для введення електронної пошти для підписки на новини чи розсилки.

Посилання на соціальні мережі:

Піктограми з посиланнями на профілі в соціальних мережах (Facebook, Instagram тощо).

Піктограми повинні бути яскравими і легко впізнаваними.

Авторські права та інші важливі відомості:

Текст з інформацією про авторські права, наприклад, "© 2024. АФНУ. Усі права захищені".

Адаптивність:

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

Всі елементи футера мають бути легкодоступними та зручними для читання на малих екранах.

 

AI-асистент

Віджет для відкриття AI-асистента

Віджет має розміщуватись у куті екрану (в нижньому правому куті) і залишатись видимим під час прокручування сторінки.

Віджет має відображати піктограму або кнопку з позначкою і текстом "AI-асистент".

Має підтримувати анімацію чи індикатор активності, які вказують на готовність до взаємодії або наявність нової інформації.

 

Body

Блок "Місія, візія та цінності АФНУ"

  • Розташування: Блок має бути розміщений у верхній частині сторінки, оскільки він має справляти перше враження про асоціацію.
  • Контент: Має містити короткий текстовий опис місії, візії та цінностей АФНУ.
  • Дизайн: Контент має бути представлений у вигляді привабливого графічного елементу, який може включати зображення або іконки, щоб підкреслити ключові цінності.
  • CTA: Кнопка з посиланням на сторінку з детальною інформацією про асоціацію.

Слайдер анонсів

  • Розташування: Після блоку з місією АФНУ або у верхній частині сторінки.
  • Функціонал: Слайдер із вкладками для відображення анонсів:
    1. АФНУ (основні події асоціації);
    2. Регіональні відділення (події, що стосуються регіональних відділень);
    3. Комітети (анонси подій комітетів);
    4. Навчальна платформа (анонси навчальних подій).
  • Відображення: Показуються лише анонси подій, які ще не відбулись.
  • Архів: Має бути посилання на сторінку архіву анонсів для перегляду минулих подій.

Слайдер новин

  • Функціонал: Слайдер із вкладками для різних категорій новин:
    1. АФНУ;
    2. Регіональні відділення;
    3. Комітети;
    4. Навчальна платформа.
  • Контент: Відображає до 5 останніх новин у кожній вкладці.
  • Посилання: Має бути передбачено посилання для переходу на загальну сторінку новин, де можна переглянути всі новини.

Блок "Пульс АФНУ"

  • Контент: Має містити загальну статистичну інформацію про діяльність асоціації (кількість членів, регіональних відділень, проведених заходів тощо).
  • CTA: Кнопка або посилання на сторінку з розширеною аналітикою.

Група вкладок

  • Структура: Має бути представлена групою вкладок, кожна з яких містить коротку інформацію та кількість записів з можливістю швидкого переходу на відповідну сторінку.
  • Вкладки:
    1. Реєстри (Реєстр членів АФНУ, Реєстр нагороджених "Золотим знаком АФНУ", Реєстр Сертифікованих Управляючих Нерухомістю (CPM) в Україні тощо).
    2. Заходи (з’їзди, ради, конференції).
    3. Документи.

Блок "Навчальна платформа"

  • Контент: Має відображати ключову інформацію про навчальну платформу (наприклад, опис доступних курсів, програм сертифікації).
  • CTA: Кнопка з посиланням на окрему сторінку навчальної платформи для перегляду повної інформації.

Блок "Сертифікація"

  • Контент: Має містити короткий опис сертифікаційних програм, які пропонує асоціація.
  • CTA: Кнопка з посиланням на сторінку з детальною інформацією про сертифікацію.

Блок "Наші партнери"

  • Структура: Слайдер з логотипами партнерів асоціації.
  • Функціонал: При наведенні курсора має відображатися основна інформація про партнера (наприклад, короткий опис або спеціалізація).
  • Посилання: Логотипи мають бути клікабельними з можливістю переходу на сайт партнера.

Блок "Популярні матеріали"

  • Контент: Відображаються публікації, які є лідерами за кількістю переглядів та рейтингом.
  • Максимальна кількість матеріалів: Не більше 5.
  • CTA: Кнопка для переходу на сторінку з усіма популярними матеріалами або повним списком публікацій.

Інтерактивна мапа

  • Функціонал: Інтерактивна мапа України, яка відображає статистичну інформацію про асоціацію за областями.
  • Вкладки: Вкладки для перемикання між типами інформації (наприклад, члени АФНУ, відділення, навчальні центри).
  • Інтерактивність: При наведенні на певну область має відображатись детальна інформація про статистику в цьому регіоні.
  • Масштабування та навігація: Можливість змінювати масштаб мапи для детальнішого перегляду регіонів.


Інші деталі та тексти

  • Спеціалістам, які бажають долучитись до конкурсу, відповіді на питання будуть надаватись у листуванні.