Дизайн сайта 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/