Grafik von Frauen, die an einem digitalen Design einer Website arbeiten.
inovex Life

Girls’Day 2024 »Informatik trifft Design: Gestalte deine eigene Webseite«

Lesezeit
8 ​​min

Endlich wieder Girls’Day! Am 25.04. fand der offizielle Mädchen-Zukunftstag statt. Natürlich war inovex auch mit dabei, sogar parallel an zwei Standorten! In Erlangen und Karlsruhe durften wir insgesamt 15 Mädchen im Alter von 12 bis 15 Jahren begrüßen und ihnen zeigen, wie spannend und vielfältig unsere Welt der IT ist.

Dieses Jahr drehte sich bei unserem schnell ausgebuchten Angebot alles um Web-Entwicklung und -Design. Unter dem Motto »Informatik trifft Design: Gestalte deine eigene Webseite« durften die Mädchen in kleinen Teams ihren eigenen Blog gestalten und anschließend zum Leben erwecken. Hierbei wurden nicht nur ihre Kreativität im Designprozess, sondern auch ihre technischen Kenntnisse in der anschließenden Umsetzung am Computer gefördert.

Ankommen und Kennenlernen 🤝

Um 9 Uhr ging es los, wir haben die Mädchen an unseren Standorten empfangen. Nach einem entspannten Ankommen und einer Besichtigungstour durch unser Büro konnten wir mit einer kleinen Kennenlernrunde starten. Dazu gab es Brezeln und wir habene bereits einiges über die vielen Hobbys der Mädchen erfahren. Nach ein paar kurzen Worten über inovex und was ein IT-Projekthaus so macht, ging es auch schon los mit dem Design-Part.

Web-Design 🎨

In entspannter Atmosphäre haben unsere Designerinnen Magdalena (Erlangen) und Selina (Karlsruhe) erklärt, was Design ist und worin der Unterschied zwischen User Interface Design und User Experience Design liegt. Es gab eine kleine Einführung in die wichtigsten Gestaltungsprinzipien: Elemente auf einer Webseite sollten beispielsweise konsistent gestaltet, ästhetisch ansprechend und gut strukturiert sein. Außerdem haben die Mädchen die verschiedenen Phasen eines Projekts kennengelernt, die sie an diesem Tag in ihrem eigenen kleinen Projekt alle selbst durchlaufen durften:

  1. Forschung
  2. Konzeption
  3. Design
  4. Entwicklung
  5. Abschluss

Forschung

Nachdem sich die Mädchen in Teams organisiert hatten, fingen sie mit der intensiven Forschung für ihre Blogthemen an. Ein freundlicher Austausch war an der Tagesordnung und es wurde lebhaft darüber debattiert, welcher der vorgeschlagenen Themenbereiche – Lifestyle, Hobbys und Bücher & Filme – am besten zu ihren Interessen passt. Sie brachten eigene Vorstellungen und Perspektiven ein und es wurden viele Ideen für mögliche Unterthemen und Ausrichtungen gesammelt.

Konzeption

Anschließend ging es in die Konzeptionierung, in der die Designerinnen zuerst eine Einführung in die Arbeit mit Wireframes gegeben haben. Dann ging’s zum ersten Mal ans selbst Ausprobieren! Die Mädchen durften endlich mit ihren Papierprototypen loslegen. Dabei haben wir ihnen drei Arten von Layouts zur Wahl gestellt:

Auswahl zwischen drei Designarten. Links ist Option 1 beschrieben mit Sektionen und Bildern seitlich neben den Textbausteinen. In der Mitte ist Option 2 mit Areas und beschreibt Bilder über dem Textbausteinen. Rechts ist Option 3 beschrieben mit nebeneinander liegenden Text- und Bildkacheln in sogenannten Cards.
Auswahloptionen des Seiten-Layouts

Einige Teams haben sich dafür entschieden, ihre Blogbeiträge in klar definierte Sektionen zu gliedern und mit verschiedenen Ausrichtungen der einzelnen Elemente zu spielen (Option 1). Ein anderes Team bevorzugte eine eher fließende Gestaltung mit Bereichen, die nahtlos ineinander übergehen (Option 2). Ein dritter Ansatz war die Verwendung von Cards, um die Informationen kompakt und leicht überschaubar zu präsentieren (Option 3).

Mit großen DIN A3-Papierbögen und Bleistiften bewaffnet, haben die Mädchen damit begonnen, ihre groben Ideen zu skizzieren und die Struktur und Anordnung der verschiedenen Elemente festzulegen. Dabei ging es weniger um die konkreten Inhalte, sondern vielmehr darum, eine ästhetisch ansprechende Gesamtstruktur zu schaffen, die ihnen gefällt.

Design

Als nächster Schritt wurde der Papier Prototyp mit Leben gefüllt. Von den Designerinnen vorbereitete Fotos wurden ausgeschnitten und in die Skizzen eingefügt, konkrete Texte und Inhalte wurden gebrainstormed und festgehalten. Teilweise arbeiteten die Mädchen auch mit Mind Maps und zusätzlichen Recherchen, um ihre Gedanken zu sortieren. Buntstifte und Marker konnten verwendet werden, um Farbe und Details hinzuzufügen. Einige Mädchen experimentierten sogar mit interaktiven Elementen. Hover-Effekte mit der Maus wurden zum Beispiel mit einem farbigen Rand angedeutet.

Foto eines designten Papierprotoypes zum Thema Lifestyle. Man sieht verschiedene Models und es wird eine Kleidungskollektion mit dem Titel "San auren" in Blogform mit Sektionen.
Papier Prototyp zum Thema Lifestyle

Werdegänge 💼

Danach haben sich beide Standorte zusammen geschlossen. Fünf Kolleginnen aus unterschiedlichen Fachbereichen bei inovex haben per Videokonferenz von ihrem beruflichen Werdegang und ihrem Alltag bei inovex erzählt. Vertreterinnen aus den Bereichen Design, Data Engineering und Agile waren dabei sowie eine Bachelorthesistin. Die unterschiedlichen Einblicke haben gezeigt, dass Softwareentwicklung kein starrer festdefinierter Karrierepfad ist, sondern – je nach Interessen – viele Entfaltungsmöglichkeiten bietet.

In der verdienten Mittagspause bei Pizza und Limo wurden viele Fragen zu Karrierewegen und Projekten beantwortet. Beispielsweise hat eine Kollegin von ihrem Projektalltag in der Medizintechnikbranche berichtet und erklärt, wie Software sowohl Patient:innen, Ärzt:innen und das Pflegepersonal im Alltag unterstützen und diesen verbessern kann.

Web-Entwicklung 💻

Nach der Mittagspause ging es los mit dem Coding der zuvor designten Webseite. Zuerst gab es eine kurze Einführung durch Nina (Karlsruhe) und Anja (Erlangen) in HTML, um die Textstruktur der Webseite zu definieren.  Anschließend wurde gezeigt, wie man mit CSS das erstellte Design zum Leben erwecken kann. Mithilfe eines kleinen Code-Grundgerüsts könnten die Mädchen direkt mit der Implementierung starten und im Zuge von „Learning by Doing“ ihre ersten Erfahrungen in der Programmierung sammeln.

Zwei Mädchen sitzen vor dem Laptop und implementieren in einer Entwicklungsumgebung ihren Blog
Voller Eifer wurde die Webseite programmiert

Hierbei wurde ähnlich wie im ersten Teil zuerst die Grundstruktur mit HTML geschaffen und die Texte und Bilder eingefügt. Danach wurde die Webseite mit CSS gestaltet und das Design aus dem Prototypen umgesetzt. Unterstützt durch die inovex-Kolleg:innen wurden die Mädchen im Verlauf des Tages bei Codingkonzepten beraten und gecoacht. Dabei nutzten sie die W3Schools-Webseite, um die nötigen HTML Tags und CSS Styles herauszufinden. Nebenbei wurde spielerisch gelernt, wie ein Webbrowser den geschriebenen Code interpretiert und wie viel Aufwand hinter einer Webseite mit augenscheinlich nur Texten und Bildern steckt. Zum Schluss hat jedes Mädchen noch einen USB-Stick bekommen, um die programmierte Webseite auch mit nach Hause nehmen zu können. So haben sie die Möglichkeit, auch noch außerhalb des Girls’Day an der Seite arbeiten zu können.

Mehrere Mädchen sitzen an Bildschirmen und suchen dort ihre Wunschfarben für ihre Gestaltung des Blogs
Digitale Farbauswahl für den Blog

Abschluss 🍪

Um 15 Uhr war der Tag auch schon leider wieder vorbei. Die Mädchen mussten förmlich gebremst werden in ihrem Eifer, den die Programmierung der Webseite ausgelöst hat. Zum Abschluss gab es einen kleinen Ausklang mit Keksen und jedes Mädchen hat ihre Erfahrungen und Learnings aus diesem Tag aufgeschrieben. Hier ein Auszug aus dem Feedback:

Auf dem Bild ist das rundum positive Feedback der Teilnehmerinnen abgebildet. Folgendes Feedback wurde gegeben: Aufgaben sehr gut nachvollziehbar erklärt; Sympathische Betreuerinnen; Willkommmen gefühlt; Man hat in zweier Gruppen gearbeitet und nicht allein; Möglichkeit jederzeit Fragen zu stellen; Cool,dass man zu Hause weiter machen kann; Viel Freiheit;
Feedback der Teilnehmerinnen

Recap 💭

Wir hatten einen tollen Tag, der sowohl für die Mädchen, aber auch für alle Betreuerinnen total inspirierend und bereichernd war. Es war schön zu sehen, mit welcher Sorgfalt, Begeisterung und Motivation die Mädchen durch den Tag gegangen sind und vor keiner Herausforderung Halt gemacht haben. Die Verbindung zwischen Kreativität und Technik hat den meisten besonders gut gefallen. Sie haben sich sogar gewünscht, beim nächsten Mal noch freier in den Themen sein zu dürfen und beispielsweise mit eigenen Fotos und Themen zu arbeiten.

In Karlsruhe fiel uns ein Mädchen auf, das mit ihrer offenen Neugierde auch die anderen inspirierte. Ihre Fragen regten auch bei den anderen großes Interesse und führten zu anregenden Diskussionen. Für das nächste Mal nehmen wir uns vor, auf jeden Fall noch mehr Zeit für das „Plaudern“ einzuplanen. So konnten wir unsere Begeisterung für den Job noch leichter vermitteln und ihnen viele weitere Insights aus dem Alltag geben.

Das Prinzip vom „Learning by Doing“ im Coding-Teil hat super gut funktioniert und hat es den Mädchen ermöglicht, selbstständig zu arbeiten und schnell zu lernen. Durch diese Methodik hatten sie auch viel leichter die Möglichkeit, zu Hause weiterzuarbeiten. Da die Zeit am Girls’Day selbst leider nur begrenzt war, haben wir uns umso mehr gefreut, dass wir sie dazu motivieren konnten, eigenständig weiter machen zu wollen.

Wir freuen uns schon sehr aufs nächste Jahr!

Nina und Anja [Vertreterinnen für alle am Girls’Day Beteiligten]

Hat dir der Beitrag gefallen?

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert