Figma website design

Goal: Create a modern, functional, and attractive design for the IEOS (Institute for European Online Studies) website in German.

Link to draft: https://docs.google.com/document/d/1oPEtg2P0O4e39c2Sh94i1tPSAvyDvk6P/edit

Website language: German.

Work is conducted directly in Figma.

1. General requirements:

• Design style: modern, European, minimalist.

• Color palette

• Fonts

• Responsive design: proper adaptation for mobile devices and tablets is mandatory.

2. Page structure:

Home page

• Header:

  • IEOS logo

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

  • Quick contact button

• Hero block:

  • Image: international online learning

  • Headline and call-to-action buttons: "Mehr erfahren" and "Jetzt bewerben"

• Advantages block of IEOS (3-4 points with icons)

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

  • Description of target groups: Berufstätige, Quereinsteiger*innen, Personen ohne Abitur

  • Brief descriptions of each group and their benefits when studying at IEOS

• Studiengänge block:

  • Elektrotechnik, Psychotherapie, MBA – blocks should be clickable and lead to the respective faculty pages

• Studienablauf block:

  • Brief visual description of steps (Anmeldung, Immatrikulation, Studium, Abschluss)

  • "Weiterlesen" button to navigate to the detailed description page

• Förderung block:

  • List of available financial support options

  • "Weiterlesen" button to navigate to the detailed page

• Über uns block:

  • Brief description of the institute and its mission

  • "Weiterlesen" button to navigate to the detailed information page

• Student testimonials block (photo, name, brief testimonial)

• Blog block:

  • Preview of the three latest articles (title, brief description, date)

  • For each article, a "Weiterlesen" button

  • General "Mehr Artikel" button to go to the blog page

• Footer: contacts, social media links, privacy policy, imprint.

Studiengänge page

• Introduction (short text)

• Three fields of study as separate blocks:

  1. Elektrotechnik

  2. Psychotherapie

  3. MBA

Studienablauf page

Clearly highlighted steps of the learning process (4 steps with graphics):

• Anmeldung

• Immatrikulation

• Studium

• Abschluss

Individual program pages (example Elektrotechnik)

• Introduction and description of the program

• Details about specializations

• Admission requirements

• Information about duration and format of study

• Cost and payment options

• Consultation booking form

Förderung page

• List of possible financial supports and subsidies

• Financial questions consultation (form)

Über uns page

• Information about mission, team, and partners

• Blocks with team photos and short descriptions

Blog

• List of articles (title, preview, publication date)

Contact page

• Feedback form

• Phone, e-mail, address

• Location map (Kraków, Poland)

3. Design and UX features:

• Convenient registration and application forms

• Clear and attractive CTA buttons (bright, noticeable)

• Use of icons and illustrations to facilitate understanding

• Neat and unobtrusive animations and transitions

4. Technical requirements:

• Design is developed directly in Figma

• Design should consider ease of subsequent development and integration

5. Style references:

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

• https://www.akad.de/

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

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