Webdesign-Portfolio

Schule

Projekt: Website Grundschule Bergstedt

Projektübersicht

Kunde: Schule Bergstedt Hamburg
Projekt: Gestaltung einer neuen Schul-Website

Projektziele

Die Website wurde mit dem Ziel gestaltet, eine übersichtliche und einladende Plattform für Schüler, Eltern und Lehrer zu schaffen. Der Fokus lag auf Klarheit, Zugänglichkeit und einer positiven Nutzererfahrung. Hier sind einige Schlüsselaspekte des Designs:

Design-Konzept

Logo Design

Ein zentrales Element des Projekts war die Gestaltung eines neuen Logos für die Grundschule Bergstedt. Das Logo vereint das Leitmotiv der Schule (Segeln – Selbst Gesteuertes Lernen) mit dem Buch als Symbol des Lernens. Es zeigt eine spielerische und freundliche Ästhetik, die die Werte und den Charakter der Schule widerspiegelt. Die Farben und Formen des Logos wurden so gewählt, dass sie harmonisch mit dem Gesamtfarbschema der Website harmonieren.

Desktop mit einem Bild der Schulhomepage mit aufgeklappten Untermenü, Headerbild und Text, sowie Sidebar

Desktop mit der Darstellung eines Teils der Homepage inkl. Menü und Teil der Sitebar

UX-Design

Die Website besitzt ein funktionales und benutzerfreundliches UX-Design, das sowohl Eltern, Schüler als auch Lehrer anspricht. Die klare Struktur der Navigation ermöglicht es den Nutzern, schnell und einfach die gewünschten Informationen zu finden. Das Hauptmenü ist übersichtlich angeordnet und bietet direkten Zugang zu wichtigen Bereichen wie dem Stundenplan, aktuellen Nachrichten und Kontaktinformationen.

Die Integration von aktuellen Nachrichten und Veranstaltungen auf der Startseite sorgt dafür, dass Eltern und Schüler stets über die neuesten Entwicklungen und Angebote informiert sind. Auch die Bereitstellung von wichtigen Dokumenten und Formularen zum Download ist ein praktischer Service.

Farben und Typographie

Die Website verwendet ein freundliches und harmonisches Farbspektrum. Verschiedene Grüntöne mit Akzenten eines großen Farbspektrums schaffen eine fröhliche Atmosphäre, während die sorgfältig ausgewählten Schriftarten eine moderne, kindliche und leicht lesbare Präsentation gewährleisten, was passend für die Darstellung einer Grundschule ist.

Farbschema der Website mit 12 bunten Farben und einem Grauton

Farbskala der Website

Desktop mit Bild einer Schulwebsite mit Headerbild "Schulkreiden in einer Reihe in der ganzen Farbskala" Sowie drei Schulfotos

Desktop mit der Darstellung eines Teils der Homepage, wobei Logo, Icons und auch Bilder zu sehen sind

Visuelle Elemente

Durch den Einsatz hochwertiger Bilder und grafischer Elemente wird das Schulumfeld lebendig und einladend dargestellt. Die Fotos der Schule, der Schüler und der Lehrer wurden sorgfältig ausgewählt, um eine authentische und positive Darstellung der Schulgemeinschaft zu gewährleisten.

Funktionalität

Responsivität

Um den unterschiedlichen Bedürfnissen der Nutzer gerecht zu werden, wurde die Website responsiv gestaltet. Das bedeutet, dass sie auf allen Geräten – von Desktops über Tablets bis hin zu Smartphones – optimal dargestellt wird. Dies gewährleistet eine konsistente Benutzererfahrung, unabhängig vom Endgerät.

Desktop mit einem Ausschnitt der Homepage, der einen Ausschnitt des Terminkalenders in Form eines Sliders zeigt

Desktop mit der Darstellung eines Teils des Termin-Sliders

INformationsbereiche

Informative Bereiche wie einen Veranstaltungskalender und aktuelle Nachrichten fördern die Kommunikation und halten die Besucher stets auf dem Laufenden über die neuesten Entwicklungen und Ereignisse an der Schule. Der Terminkalender ist in mehreren Bereichen der Website zu finden, u.a. auch als Download PDF, da er für alle Nutzer das wichtigste Element widerspiegelt.

Kontakt

Neben der von mir erstellten Skizze der Lage bietet die Website verlinkte E-Mail-Adressen und von mir entworfenen Schnell-Kontakt-Buttons. So kann auf einfache Weise mit der Schule kommuniziert werden.

Lageplan der Schule Bergstedt

Barrierefreiheit

Besondere Aufmerksamkeit wurde der Barrierefreiheit gewidmet. Die Website erfüllt die grundlegenden Anforderungen für barrierefreies Webdesign, um sicherzustellen, dass alle Nutzer, einschließlich Menschen mit Einschränkungen, problemlos auf die Inhalte zugreifen können.

Fazit

Das Design der Website für die Schule Bergstedt kombiniert eine moderne Ästhetik mit praktischen Funktionen und trägt dazu bei, dass die Online-Präsenz der Schule sowohl informativ als auch benutzerfreundlich ist. Diese Webseite hilft der Schule, ihre Informationen klar und ansprechend zu präsentieren und bietet einen positiven Einstieg für alle Besucher.