Daycare

Ausgangsszenario:

Die Auftraggeberin ist eine Tagesmutter, 40, Mutter zweier Kinder und ausgebildete Erzieherin. Im Zuge ihrer Karenz kam der Wunsch auf, sich selbständig zu machen. Aus diesem Grund hat sie die erforderlichen Kurse absolviert und um Genehmigung beim Land OÖ zur Betreuung von maximal acht Kindern (davon vier gleichzeitig) angesucht. Die gesamten Rechtsvorschriften für die Kinderbetreuung finden sich im RIS unterhttp://www.ris.bka.gv.at/GeltendeFassung.wxe?Abfrage=LROO&Gesetzesnummer=20000460

Zielgruppe sind klarerweise Eltern, die aus welchen Gründen auch immer nicht auf staatliche Kinderbetreuungseinrichtungen zurückgreifen wollen oder können. Da Eltern grundsätzlich schon vor dem ersten persönlichen Kontakt nähere Informationen zur Tagesmutter im Internet suchen, hat sich die Auftraggeberin dazu entschlossen, sich und ihre Arbeit Online zu präsentieren. Dadurch sollen potentielle "Klienten" einen ersten Einblick in die Abläufe während der Betreuung erhalten. Die Webseite soll daher wie folgt umgesetzt werden.

Design:

Die Seite wird voraussichtlich nur relativ wenige Informationen in textueller Form enthalten. Zum Einen, da die wichtigsten Punkte wie Tagesablauf und Essen in wenigen Worten beschrieben werden können, zum Anderen, da die Seite ja grundsätzlich nur einen ersten Einblick in die Kinderbetreuung der Auftraggeberin bieten soll. Der Kontakt zwischen Eltern und der Auftraggeberin soll im besten Fall persönlicher Natur sein. Da die Auftraggeberin aber weiß, dass Eltern die potentielle Betreuerin ihrer Kinder schon im Vorfeld kennen lernen wollen (oder besser gesagt "googeln", will sie dem Wunsch entgegenkommen, vor allem, da sie selbst bestimmen will, welche Informationen über sie verfügbar sind. Eltern sollen sich nicht ausschließlich auf die Informationen Dritter verlassen müssen.

Deshalb und weil das Projekt klare Strukturen aufweisen soll, wird das Projekt als Single Page konzipiert. Dabei werden die einzelnen Sektoren anhand von unterschiedlichen Hintergrundfarben abgegrenzt. Es werden zwei Hintergrundfarben genutzt, nämlich weiß und grau (#e7e7e7). In diesen Sektoren wird ein kurzer und prägnanter Text  Informationen zum jeweiligen Punkt liefern. Unterstützt werden die Texte von jeweils einem selbst fotografierten, bearbeiteten und freigestellten Foto, das thematisch passend zur jeweiligen Sektion ausgewählt wurde. Am oberen Rand des Bildschirms wird eine Navigationsleiste angezeigt, die beim Scrollen der Seite immer fest am oberen Rand verankert bleibt, sodass der Nutzer jederzeit auf die Leiste zugreifen kann. So müssen die Nutzer nicht lange suchen und finden sich sofort zurecht, egal wo auf der Seite sie sich gerade befinden. Die Leiste hat ebenfalls eine graue Hintergrundfarbe. Die ausgewählte Sektion ist jeweils in einem dunkleren Grau im Gegensatz zur restlichen Leiste hinterlegt. Dieses dunklere Grau ist die selbe Farbe, die in den Sektionen zum Einsatz kommt.

Menüpunkte:

Folgende Menüpunkte werden mit Hilfe passender Bilder dargestellt und textuell näher erläutert:

·         Startseite (Home)

·         Über mich

·         Essen

·         Leistung

·         Tagesablauf

·         Empfehlung (Mit Video)

·         Kontakt

Der erste Entwurf zur Seite:

Verwendete Bilder:

Die verwendeten Bilder des jeweiligen Navigationspunktes sollen in Bezug auf die dort angesprochene Thematik inhaltlich passend konzipiert sein. So wird zum Beispiel der Menüpunkt "Essen" mittels Schneidebrett und Holzspielzeug, welches Essen darstellt, bildlich gezeigt. Die einzelnen Fotomotive werden dabei abwechselnd links und rechts gruppiert, der dazu passende Text ebenfalls abwechselnd auf der dazu passenden rechten bzw. linken Seite des Bildes platziert. Ein Beispiel findet sich im Anschluss. Sämtliche Fotos werden selbst mit einer Spiegelreflexkamera fotografiert und im Anschluss mit GIMP bearbeitet. Sollte dies wider Erwartet nicht funktionieren bzw. keine zufriedenstellenden Ergebnisse liefern, kann unter Umständen auf Stock-Fotos zurückgegriffen werden. Dies aber nur in Ausnahmefällen. Lediglich das passende Bild in der "Über mich" Sektion wird aus Datenschutzgründen ein Stock-Foto sein.

Farben:

Die Fotomotive werden grundsätzlich auf einfärbigen Hintergründen platziert. Hier wird sich im Zuge der Fotografie noch zeigen, welche zum jeweiligen Fotomotiv am besten passen. Darauf aufbauend wird in weiterer Folge die passende Schriftfarbe für jeden thematischen Bereich ausgewählt. Da die Hintergrundfarbe zum jetzigen Zeitpunkt noch nicht genau definiert ist, kann daher noch keine Aussage zur richtigen Farbwahl für den Text getroffen werden. Wichtig hierbei wird jedoch auf jeden Fall der richtige Kontrast sein. Der Text muss immer lesbar bleiben.

Schriftart:

Verwendete Schriftart ist Source Sans Pro. Diese findet sich in den Google Fonts, abrufbar hier: https://www.google.com/fonts/specimen/Source+Sans+Pro

Video:

Das knapp einminütige Video soll einen typischen Tagesablauf der Kinderbetreuung darstellen. Eingebettet ist dieses Video in der Sektion "Tagesablauf". Folgende Szenen werden dafür aufgenommen:

·         Kind wird zur Tagesmutter gebracht

·         Kind beim Frühstück / bei der Jause

·         Pädagogisches Kinderprogramm bzw. Spielplatz: Entweder Kind beim Spielen in der Wohnung oder Kind draußen unterwegs zum Spielplatz, auf der Rutsche, auf der Schaukel, ...

·         Gemeinsames Kochen (wird mittels Fotosequenz dargestellt) + Mittagsschlaf

·         Nachmittag Spiel (Spielzeug in Bewegung; Fahrendes, blinkendes, schaukelndes Spielzeug oder Sequenz spazieren gehen -> Fluß, ...)

·         Kind wird abgeholt und verlässt die Wohnung

Update Video:

Aus Datenschutzgründen und weil die geplante Hauptdarstellerin des Videos in keinster Weise dazu zu bewegen war, das Gesicht von der Kamera abzuwenden, musste ich einen anderen Weg gehen.

Für das neu geplante Video "spiele" ich einen Vater, der sein Kind bei der Auftraggeberin in Betreuung hat(te) und nun eine klare Empfehlung für die Tagesmutter ausspricht. Das Video ist ein single-shot Video, es gibt also nur eine Szene. Der Eindruck der dadurch vermittelt werden soll ist Authentizität, da es bei mehreren Schnitten unter Umständen so aussehen würde, als wäre der Text auswendig gelernt.

Für die Umsetzung des im ersten Beitrag vorgestellten Konzepts wurden folgende Tools, Frameworks und Entwicklungsumgebungen genutzt:

Programmierung (Html + CSS)

Brackets.io

Bootstrap

Javascript

Google fonts

Bildbearbeitung

Gimp

TinyPic

Videoschnitt

HD Writer LE 1.1

Windows Movie Maker

Die Website wurde mit folgenden Betriebssystemen und Browsern getestet:

Windows 8 + Chrome

Windows 8 + Internet Explorer 11

Windows Phone 8.1 + Internet Explorer Mobile

Android 4.4 + Standard Android Browser

iOS 5 + Safari

iOS 8 + Safari

Auf allen getesteten Geräten funktionierte die Website sowie das Video einwandfrei. Auch das responsive Design funktionierte wie gewünscht.

Anmerkung: Es wurden von mir im Gegensatz zur präsentierten Erstversion einige Änderungen eingearbeitet. Dies geschah bei einzelnen Kritikpunkten die meiner Meinung nach gerechtfertigt waren. Als Beispiele hierfür dienen das Bild für die Startseite (Schuhe; Weg vom "braven" Stock-Foto hin zum selbst fotografierten echten Schuh) oder der viel zu große Footer mit den Kontaktdaten, welcher nun dementsprechend verkleinert wurde.