Дизайн сайту Figma

Мета: Створити сучасний, функціональний та привабливий дизайн для сайту IEOS (Institute for European Online Studies) німецькою мовою.

посилання на чорновик: https://docs.google.com/document/d/1oPEtg2P0O4e39c2Sh94i1tPSAvyDvk6P/edit

Мова сайту: німецька.

Робота ведеться одразу у Figma.

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

• Стиль дизайну: сучасний, європейський, мінімалістичний.

• Кольорова палітра

• Шрифти

• Адаптивний дизайн: обов’язкова коректна адаптація під мобільні пристрої та планшети.

2. Структура сторінок:

Головна сторінка

• Шапка:

  • Логотип IEOS

  • Меню навігації: Home, Studiengänge, Studienablauf, Förderung, Über uns, Blog, Kontakt

  • Кнопка для швидкого зв’язку

• Hero-блок:

  • Зображення: міжнародне онлайн-навчання

  • Заголовок і кнопки дій: "Mehr erfahren" і "Jetzt bewerben"

• Блок з перевагами IEOS (3-4 пункти з іконками)

• Блок "Für wen ist unser Studium geeignet":

  • Опис цільових груп: Berufstätige, Quereinsteiger*innen, Personen ohne Abitur

  • Короткі описи кожної групи та їх переваги при навчанні в IEOS

• Блок Studiengänge:

  • Elektrotechnik, Psychotherapie, MBA – блоки мають бути клікабельними та вести на відповідні сторінки факультетів

• Блок Studienablauf:

  • Короткий візуальний опис кроків (Anmeldung, Immatrikulation, Studium, Abschluss)

  • Кнопка "Weiterlesen" для переходу на сторінку з детальним описом

• Блок Förderung:

  • Перелік доступних варіантів фінансової підтримки

  • Кнопка "Weiterlesen" для переходу на сторінку з деталями

• Блок Über uns:

  • Короткий опис інституту та його місії

  • Кнопка "Weiterlesen" для переходу на сторінку з детальною інформацією

• Блок відгуків студентів (фото, ім’я, короткий відгук)

• Блок Блог:

  • Прев’ю трьох останніх статей (назва, короткий опис, дата)

  • Для кожної статті кнопка "Weiterlesen"

  • Загальна кнопка "Mehr Artikel" для переходу на сторінку блогу

• Футер: контакти, посилання на соцмережі, політика конфіденційності, імпресум.

Сторінка Studiengänge

• Вступ (короткий текст)

• Три напрямки у вигляді окремих блоків:

  1. Elektrotechnik

  2. Psychotherapie

  3. MBA

Сторінка Studienablauf

Чітко виділені кроки процесу навчання (4 кроки з графікою):

• Anmeldung

• Immatrikulation

• Studium

• Abschluss

Сторінка окремих напрямків (приклад Elektrotechnik)

• Вступ і опис напрямку

• Деталі щодо спеціалізацій

• Вимоги до вступу

• Інформація про тривалість та форму навчання

• Вартість та варіанти оплати

• Форма запису на консультацію

Сторінка Förderung

• Перелік можливих фінансових підтримок та субсидій

• Консультація з фінансових питань (форма)

Сторінка Über uns

• Інформація про місію, команду та партнерів

• Блоки з фотографіями команди та коротким описом

Блог

• Список статей (назва, прев’ю, дата публікації)

Сторінка контактів

• Форма зворотного зв’язку

• Телефон, e-mail, адреса

• Карта розташування (Краків, Польща)

3. Особливості дизайну та UX:

• Зручні форми реєстрації та заявок

• Чіткі та привабливі CTA-кнопки (яскраві, помітні)

• Використання іконок та ілюстрацій для полегшення сприйняття

• Аккуратні та ненав’язливі анімації та переходи

4. Технічні вимоги:

• Дизайн розробляється одразу у Figma

• Дизайн має враховувати простоту подальшої розробки та інтеграції

5. Референси за стилем:

• https://www.iu-fernstudium.de/

• https://www.akad.de/

• https://www.wb-fernstudium.de/

• https://steinbeis-academy.de/master-studiengang-finder/