![](https://alice.praktikum.kastanieeins.de/wp-content/uploads/2019/07/ohrenspitzer.png)
Relaunch Ohrenspitzer
Es handelt sich bei der Webseite um ein Projekt für Kinder, das ihnen das aufmerksame Zuhören beibringt. Die Webseite stellt dafür verschiedene Materialien zur Verfügung. Unter anderem eine Datenbank an Hörspielen, Erklärvideos oder den Ohrenspitzerkoffer. Die Zielgruppe der Webseite sind dabei Pädagogen, die diese Materialien mit Gruppen nutzen können.
Für den Relaunch der Ohrenspitzer Webseite überlegten wir uns ein neues Konzept um mehr Bilder und Grafiken zu zeigen und ein generell moderneres Design der Seite zu erreichen. Dabei wurde das vorhandenen Corporate Designs berücksichtigt und darauf aufgebaut.
Moodboard
![](https://alice.praktikum.kastanieeins.de/wp-content/uploads/2019/07/ohrenspitzer_9-1024x660.png)
Farben
Bei den Farben gibt es zusätzlich zu dem vorhandenen Rot, hell Gelb und Orange die Ergänzung eines frischen Grüns und kräftigen Gelb. Dabei war es uns wichtig, dass die Farben harmonisieren und trotzdem genügen Kontrast haben, um bei der Verwendung in gestalterischen Elementen gut unterscheidbar zu blieben.
![](http://alice.praktikum.kastanieeins.de/wp-content/uploads/2019/07/ohrenspitzer_4-1024x659.png)
Icons
Die Icons behalten den selbstgezeichneten Style der vorherigen Icons bei. Durch die gleichbleibende Strichstärke und abgerundeten Ecken werden klarere Formen erreicht. Die Formen orientieren sich dabei an der Handschrift des Logos.
![](https://alice.praktikum.kastanieeins.de/wp-content/uploads/2019/07/ohrenspitzer_7-1024x576.jpg)
Gestaltungselemente
Für die Grafiken wurde die Thematik der Tonwellen aufgegriffen. Diese können in vielfältigen Weisen auf der Webseite dergestalt werden. In einer Kreisform angelehnt an einen Musikplayer, als Wellenform zum Unterteilen verschiedener Sektionen oder als Hintergrundelemente. Zusätzlich besteht die Möglichkeit diese auch zu animieren und somit mehr Interaktionen einzubinden. Durch das beibehalten abgerundeter Ecken der Linien passen die Elemente auch mit den neuen Icons zusammen.
Schrift
Für die Schriften war eine gute Lesbarkeit auf Bildschirmen und eine harmonische Einbindung in die Gestaltung wichtig. Auch bei den Schriften tauchen die abgerundeten Ecken auf was zum einen die Schrittkombination vereint und zum andern mit den anderen Elementen der Seite in Einklang bringt.
Design
Für das Design der Webseite gab es verschiedene Ansätze. Ein Punkt war es mit Tonwellen zu arbeiten und diese als Gestaltungselemente einzusetzen. Die ersten Designs waren dabei aber nicht sehr stimmig. Die farbigen Blöcke wirkten etwas zu wuchtig und die Übergänge zum nächsten Block ist nicht sehr flüssig. Eine weitere Idee war es, die Inhalte in Blöcke zu unterteilen durch eine Gestaltung die an Puzzleteile erinnert wir das spielerische Thema aufgegriffen.
![](https://alice.praktikum.kastanieeins.de/wp-content/uploads/2019/07/ohrenspitzer_8-1024x487.png)
Finales Design
![](https://alice.praktikum.kastanieeins.de/wp-content/uploads/2019/07/ohrenspitzer_10-365x1024.png)
Das könnte dich auch interessieren
![](https://alice.praktikum.kastanieeins.de/wp-content/uploads/2019/04/pritaeterBackendIcons.png)
Icons für Backend der Paritätischen Seite
10. April 2019![](https://alice.praktikum.kastanieeins.de/wp-content/uploads/2019/04/Homeoffice-500x380.png)
Home Office
5. April 2019![](https://alice.praktikum.kastanieeins.de/wp-content/uploads/2019/07/das_passt_Umsetzung_4-500x380.png)