Projekt strony Figma

Cel: Stworzyć nowoczesny, funkcjonalny i atrakcyjny design dla strony IEOS (Institute for European Online Studies) w języku niemieckim.

link do wersji roboczej: https://docs.google.com/document/d/1oPEtg2P0O4e39c2Sh94i1tPSAvyDvk6P/edit

Język strony: niemiecki.

Prace prowadzone są od razu w Figma.

1. Ogólne wymagania:

• Styl designu: nowoczesny, europejski, minimalistyczny.

• Paleta kolorów

• Czcionki

• Design responsywny: konieczna poprawna adaptacja na urządzenia mobilne i tablety.

2. Struktura stron:

Strona główna

• Nagłówek:

  • Logo IEOS

  • Menu nawigacyjne: Home, Studiengänge, Studienablauf, Förderung, Über uns, Blog, Kontakt

  • Przycisk szybkiego kontaktu

• Sekcja hero:

  • Obraz: międzynarodowa nauka online

  • Nagłówek i przyciski akcji: "Mehr erfahren" i "Jetzt bewerben"

• Sekcja z zaletami IEOS (3-4 punkty z ikonami)

• Sekcja "Für wen ist unser Studium geeignet":

  • Opis grup docelowych: Berufstätige, Quereinsteiger*innen, Personen ohne Abitur

  • Krótki opis każdej grupy i ich korzyści z nauki w IEOS

• Sekcja Studiengänge:

  • Elektrotechnik, Psychotherapie, MBA – bloki powinny być klikalne i prowadzić do odpowiednich stron wydziałów

• Sekcja Studienablauf:

  • Krótki wizualny opis kroków (Anmeldung, Immatrikulation, Studium, Abschluss)

  • Przycisk "Weiterlesen" do przejścia na stronę z szczegółowym opisem

• Sekcja Förderung:

  • Wykaz dostępnych opcji wsparcia finansowego

  • Przycisk "Weiterlesen" do przejścia na stronę ze szczegółami

• Sekcja Über uns:

  • Krótki opis instytutu i jego misji

  • Przycisk "Weiterlesen" do przejścia na stronę z bardziej szczegółowymi informacjami

• Sekcja opinii studentów (zdjęcie, imię, krótka recenzja)

• Sekcja Blog:

  • Podgląd trzech ostatnich artykułów (tytuł, krótki opis, data)

  • Dla każdego artykułu przycisk "Weiterlesen"

  • Ogólny przycisk "Mehr Artikel" do przejścia na stronę bloga

• Stopka: dane kontaktowe, linki do social media, polityka prywatności, impressum.

Strona Studiengänge

• Wprowadzenie (krótki tekst)

• Trzy kierunki w formie oddzielnych bloków:

  1. Elektrotechnik

  2. Psychotherapie

  3. MBA

Strona Studienablauf

Wyraźnie wyróżnione kroki procesu nauki (4 kroki z grafiką):

• Anmeldung

• Immatrikulation

• Studium

• Abschluss

Strona poszczególnych kierunków (np. Elektrotechnik)

• Wprowadzenie i opis kierunku

• Szczegóły dotyczące specjalizacji

• Wymagania rekrutacyjne

• Informacje o długości i formie nauki

• Koszty i opcje płatności

• Formularz zapisów na konsultację

Strona Förderung

• Lista dostępnych wsparć finansowych i dotacji

• Konsultacje finansowe (formularz)

Strona Über uns

• Informacje o misji, zespole i partnerach

• Sekcje ze zdjęciami zespołu i krótkim opisem

Blog

• Lista artykułów (tytuł, podgląd, data publikacji)

Strona kontaktowa

• Formularz kontaktowy

• Telefon, e-mail, adres

• Mapa lokalizacji (Kraków, Polska)

3. Funkcje designu i UX:

• Przyjazne formularze rejestracji i zgłoszeń

• Wyraźne i atrakcyjne przyciski CTA (jaskrawe, widoczne)

• Użycie ikon i ilustracji dla ułatwienia percepcji

• Starannie wykonane i nieinwazyjne animacje i przejścia

4. Wymagania techniczne:

• Design tworzony od razu w Figma

• Design musi uwzględniać prostotę późniejszej realizacji i integracji

5. Referencje stylowe:

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

• https://www.akad.de/

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

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