Entwerfen von Websites für Kinder: Trends und Best Practices

• 12 min read
• Inspiration, Vitrinen, Webdesign, Kinder
• Teilen auf Twitter, LinkedIn

Websites für Kinder wurden in Webdesign-Artikeln und Zusammenfassungen weitgehend übersehen, aber es gibt viele schöne und interessante Designelemente und Layouts, die auf Kinderwebsites präsentiert werden und die einer Diskussion und Analyse würdig sind. Es gibt auch eine Reihe von Best Practices, die ausschließlich für das Webdesign von Websites für Kinder gelten – Praktiken, die normalerweise nicht auf einer typischen Website versucht werden sollten.

Vielleicht möchten Sie einen Blick auf verwandte Artikel werfen:

• Best Practices für Webdesign für Kinder
• Designing For Kids Is Not Child’s Play
• Designing Web Interfaces For Kids
• A Dad’s Plea To Developers Of iPad Apps For Children

In diesem Artikel werden eine Reihe beliebter kommerzieller Websites vorgestellt, die sich an Kinder richten, und Trends, Elemente und Techniken analysiert, mit denen Kinder interessiert und stimuliert werden können.

Design, das die Sinne stimuliert

Menschen werden durch eine Reihe von Faktoren geistig stimuliert, und dies gilt insbesondere für Kinder. Erfolgreiche Kinderwebsites implementieren eine Reihe von Elementen und Gestaltungsprinzipien, die eine Umgebung schaffen, die der Persönlichkeit und den Interessen eines Kindes entspricht.

Helle, Lebendige Farben

Helle farben werden leicht erfassen und halten ein kind der aufmerksamkeit für lange zeiträume. Obwohl die Farbwahl ein Hauptfaktor bei der Gestaltung jeder Art von Website ist, gilt dies insbesondere für die Gestaltung einer Website für Kinder, da Farben einen großen Eindruck auf die jungen Köpfe von Kindern hinterlassen. Farbauswahl und Kombinationen, die beim Entwerfen einer typischen Website wahrscheinlich abgelehnt oder ausgelacht würden, können auf einer Website für Kinder begrüßt werden.

Wie viele der in den folgenden Screenshots verwendeten Farbkombinationen würden auf einer Website für ein erwachsenes Publikum erfolgreich sein? Nicht viele. Wenn Sie also eine Website für Kinder entwerfen, verwenden Sie helle, lebendige Farben, die auf unvergessliche Weise visuell anregen.

PBS KIDS

Hermans Homepage

Funbrain Spielplatz

Gute Laune

Kinder werden sich erinnern und zu einer Website zurückkehren, wenn ihre Erfahrung glücklich ist. Elemente können in das Design integriert werden, um sicherzustellen, dass eine fröhliche, positive Stimmung präsentiert wird.

Mickey Mouse Clubhouse sorgt für gute Laune, indem es Mickey selbst zu einem visuellen Schwerpunkt auf der Seite macht. Sein fröhliches Gesicht und seine Körpersprache tragen dazu bei, dieses glückliche Gefühl zu verstärken und eine willkommene Atmosphäre zu schaffen.

Die Play-Doh-Website sorgt mit einem strahlenden Kind im Mittelpunkt für gute Laune.

Die Fifi and the Flowertots-Website hat einen großen lächelnden Blumentopf-Charakter im visuellen Fokus, der eine fröhliche Stimmung erzeugt.

Elemente aus der Natur

Kinder werden durch erkennbare Elemente angeregt, mit denen sie sich identifizieren können. Da die Lebenserfahrungen von Kindern begrenzt sind, sind einige der Dinge, mit denen sie am besten vertraut sind, in der Natur zu finden. Natürliche Elemente wie Bäume, Wasser, Schnee und Tiere werden auf den unten gezeigten Websites verwendet. In vielen Fällen werden diese Elemente durch Größe oder Einfachheit des Designs überbetont.

Die Disney-Website ändert ihr Thema je nachdem, welches Produkt beworben wird. In diesem Screenshot verwenden sie eine Grand Canyon-ähnliche Landschaft, um ein unvergessliches visuelles Erlebnis zu schaffen.

Discovery Kids verwendet ein Unterwasserthema.

Club Penguin präsentiert ein arktisches Thema.

CBC Kids verwendet ein saisonales Thema, das auf simplen, auffälligen Grafiken basiert.

PopCap Games verwendet eine Graslandschaft vor großen Sonnenstrahlen.

Überlebensgroßes Design

Große Designelemente haben sich in allen Arten von Webdesign als effektiv erwiesen, was sich daran zeigt, dass große Typografie, große Schaltflächen und große Call-to-Action-Bereiche im modernen Design alltäglich geworden sind. Da Kinder von Natur aus von einfachen, offensichtlichen und erkennbaren Objekten angezogen werden, erhöhen Websites für Kinder ihre Effektivität durch die Verwendung großer Designelemente.

Animierte Charaktere

Große, animierte, sprechende Charaktere sind eine faszinierende und fesselnde Art, die Aufmerksamkeit eines Kindes zu erregen und zu halten. Viele Websites für Kinder verwenden dieses Element effektiv.

Barbie

Mr. Rogers ‚ Nachbarschaft

Disney Prinzessin

Thomas der Panzermotor

Barney & Freunde

Tiefe im Design

Kinder lassen ihrer Fantasie in einer Welt freien Lauf, die echt aussieht und sich auch so anfühlt. Diese Art von Atmosphäre kann durch Tiefe in Designelementen erzeugt werden. Dies kann extrudierte Formen, Schatten, Landschaften, abgeschrägte Effekte, glänzende Verläufe oder schwebende Objekte umfassen. Oft sind viele dieser Elemente in Cartoon-ähnlichen Displays vorhanden, wie unten gezeigt.

Das Webkinz „Adoption Center“ verwendet Schatten, einen lebensechten Charakter und andere 3-dimensionale Elemente, um ein Design mit Tiefe zu erstellen.

Poisson Rouge schafft eine tiefe, realistische Atmosphäre mit einem Fenster, das nach draußen in die Sonne schaut, zusammen mit einer Reihe anderer 3-dimensionaler Elemente.

Rainbow Magic schafft Tiefe in ihrem Design durch eine Flash-animierte Landschaftsszene, die sich bewegt, wenn der Benutzer über verschiedene Elemente schwebt.

Navigations- und Call-to-Action-Bereiche, die auffallen

Bei jedem Website-Design sollten Navigations- und Call-to-Action-Bereiche im Mittelpunkt stehen. Website-Designer für Kinder können diese Bereiche stark vereinfachen, sodass Kinder leicht navigieren können. Textbasierte Navigation auf Kinderwebsites wäre nicht so effektiv wie große Schaltflächen und Grafiken, da ihnen der visuelle Fokus auf einer Seite fehlt.

Peppa Pig verfügt über eine horizontale Navigationsleiste mit großen Symbolen und leicht lesbaren Beschreibungen für jedes Element.

Die Winnie The Pooh-Website integriert ihre Navigationsleiste in ihr „Wald“ -Thema und verwendet große grafische Holzelemente, die vom Benutzer nicht übersehen werden.

Die Sesamstraße verfügt über eine leicht zu lokalisierende horizontale Navigationsleiste sowie große Call-to-Action-Bereiche.

My Little Pony verwendet eine textbasierte Navigation, wodurch eine weniger grafische Erfahrung entsteht, die es ermöglicht, sich auf die Inhaltselemente zu konzentrieren. Dies mag in einigen Situationen ideal sein, aber auf einer Kinderwebsite ist eine grafikbasierte Navigationsleiste eher effektiv.

Benutzerinteraktion

Wahrscheinlich ist eine der wichtigsten Möglichkeiten für den Erfolg einer Kinderwebsite, Elemente einzuschließen, die es einem Kind ermöglichen, auf irgendeine Weise mit der Website zu interagieren. Kinder wollen nicht intensiv lesen oder forschen; Sie wollen spielen und unterhalten werden.

Auf einer typischen Website werden bestimmte Designelemente als störend, unbrauchbar und umständlich angesehen. Auf der Website eines Kindes werden dieselben Elemente als wirksames Mittel angesehen, um Benutzer anzulocken.

Interaktion durch Animation und Sound

Mit Adobe Flash erstellte Effekte und Erlebnisse werden im typischen modernen Webdesign nicht empfohlen, auf Kinderseiten gibt es jedoch fast keine andere Option. Es ist wahr, dass JavaScript-Animationen und -Effekte aufgrund der vielen verfügbaren JavaScript-Bibliotheken einen langen Weg zurückgelegt haben, aber die Leichtigkeit, mit der komplexe Animationen mit Flash erstellt werden können, macht diese Methode zur ersten Wahl für viele kommerzielle Websites für Kinder.

Die Pauly’s Playhouse-Website ist, wie die meisten in diesem Artikel vorgestellten Websites, vollständig in Flash integriert.

Die Hot Wheels-Website enthält ein animiertes „Auto des Tages“, das beim Laden der Seite auf den Bildschirm zoomt und so eine visuelle Interaktion erzeugt.

Brüllen Der Rennwagen hat ein kurzes „Flash-Intro“ mit einer „Skip“ -Taste. Dies ist ein Old-School-Trend im typischen Webdesign, aber ein effektives Mittel, um ein kindliches Publikum anzusprechen. Das Intro animiert durch eine Straße, bis die Charaktere am Horizont erscheinen. Dies gibt dem Benutzer das Gefühl, persönlich in die animierte Welt von Roary einzutreten.

Das Yahoo! Die Navigationsleiste für Kinder wird mit Flash erstellt und erzeugt Soundeffekte und animiert, wenn der Mauszeiger über die Elemente bewegt wird. Dieser Trend ist auf vielen der in diesem Artikel vorgestellten Websites sehr verbreitet.

Interaktion durch Video

Fernsehen ist dafür bekannt, das Kinderpublikum stundenlang zu fesseln, weshalb „Saturday Morning Cartoons“ seit Jahrzehnten ein lukrativer Bestandteil der Sendepläne für viele Fernsehsender sind. In ähnlicher Weise fügt Video auf der Website eines Kindes dem Inhalt einer Website einen unterhaltsamen, interaktiven und lehrreichen Aspekt hinzu.

CBC – Video für Kinder

Yahoo! Kinderfilmführer

National Geographic Kids – Videos

Interaktion durch Spiele

Welches Kind spielt nicht gerne? Eine der effektivsten Möglichkeiten, ein Kind auf einer Website zu unterhalten, zu erziehen oder anderweitig zu beschäftigen, ist die Aufnahme eines Abschnitts „Spiele“. Fast alle Websites, die für diesen Artikel recherchiert wurden, enthalten Spiele, die aufklären, stimulieren und direkte Interaktion ermöglichen, während sie auch viele der bereits diskutierten Designelemente enthalten. Nachfolgend einige Beispiele.

CBeebies – Gordon der Gartenzwerg

Toy Story – Woodys große Flucht

Disney Pixars Welt der Autos benutzer zu erstellen, zu teilen und Rennen ihre eigenen Custom Cars.

Druckbare Elemente

Kinder möchten etwas Greifbares mitnehmen, damit sie sich an ihre Erfahrungen erinnern können. Druckbare Bilder und Malvorlagen ermöglichen es Kindern, ein Andenken an ihre Erfahrungen zu haben, während Website-Besitzer die Möglichkeit haben, ihre Marke außerhalb des Computerbildschirms zu verbessern und zu fördern. Nachfolgend finden Sie einige Beispiele für druckbare Malvorlagen auf Kinderwebsites.

Pingu Malvorlagen

Crayola Digi-Color

Peppa Pig Malvorlagen

Thomas und seine Freunde Malen online

Teletubbies – In Farbe drucken

Unkonventionelle Methoden

Wir haben bereits eine Reihe von Elementen besprochen, die im modernen typischen Webdesign heute als unkonventionell gelten. Sound, Animation und große aufdringliche Grafiken sind im typischen Webdesign oft verpönt. Auf Websites von Kindern helfen diese Elemente der Benutzererfahrung. Andere unkonventionelle Elemente und Gestaltungsmöglichkeiten werden im Folgenden erörtert.

Ändern des Cursors

Dies wird im Standard-Webdesign absolut als schlechte Praxis angesehen, kann jedoch eine unterhaltsame und effektive Möglichkeit sein, einem Website-Thema für Kinder ein spielerisches Element hinzuzufügen. Dies kann mit dynamischem HTML erfolgen, wird jedoch häufiger über Flash durchgeführt.

Der Cursor auf der Discovery Kids-Website verwandelt sich in eine schnappende Bärenfallengrafik.

Dem Cursor auf der Sesame Street-Website folgt ein gelber Stern, wenn er über Standard-HTML-Elementen schwebt, und verwandelt sich in einen gelben Stern, der von kleineren animierten Sternen umgeben ist, wenn der Cursor über anklickbare Flash-Elemente bewegt wird.

Sprechende Navigation

Manchmal erzeugt eine Navigationsleiste Soundeffekte, aber in anderen Fällen klingen die Navigationslinks mit fröhlicher Stimme aus, was sie darstellen.

Die PBS KIDS-Navigationsleiste spricht mit Kinderstimmen, wenn der Benutzer den Mauszeiger darüber bewegt.

Die CBeebies-Navigationsleiste verwendet eine Stimme, um das Ziel jedes Navigationselements auszuloten.

Die Bob the Builder-Navigationsleiste spricht beim Mouseover mit dem Benutzer.

Die Fifi und die Flowertots verfügt über eine sprechende Navigationsleiste.

Breaking the Grid

Während traditionelle moderne Webdesigntechniken die Vorteile und Ästhetik des rasterbasierten Designs nutzen, können sich Kinderwebsites von einem übermäßig strukturierten Layout befreien, um eine einzigartige Welt zu schaffen, die ein Kind gerne erleben wird.

Dies soll nicht darauf hindeuten, dass die Verwendung eines Gitters als Grundlage für das Design falsch ist. Es kann vorteilhaft sein, mit einem Raster zu beginnen und dann Elemente außerhalb des Rasters kontrolliert zu gestalten. Diese Flexibilität in Design und Layout zeigt sich auf einer Reihe der bereits diskutierten Websites, zeigt sich aber auch in den Navigationsleisten der folgenden Beispiele.

Die Navigationsleiste auf der Spongebob Schwammkopf-Website ist schräg und widerspricht den Konventionen im typischen rasterbasierten Webdesign.

Die Hannah Montana-Website bietet Navigationsleistengrafiken, die das Raster durchbrechen.

Die Website von In the Night Garden verfügt über ein sehr ungewöhnliches Navigationsleistendesign, das wenig Ähnlichkeit mit einem konventionell strukturierten Design aufweist.

Im Folgenden finden Sie einige Beispiele für Websites, die ein starreres, rasterbasiertes Format verwenden und daher nicht so einzigartig, einprägsam oder fesselnd sind wie einige, die bereits in diesem Artikel behandelt wurden.

Kids WB ist starr und nicht so einprägsam.

Die Crayola-Website ist mit ihrem Rasterformat und der vertikalen Navigation etwas altmodisch.

Neopets ist auch auf einem strukturierteren Raster ausgelegt.

Zugegeben, in einigen Fällen wäre ein stärkeres gitterbasiertes Design erforderlich, wenn das Publikum ein älteres Kinderpublikum wäre, wie dies bei SI Kids der Fall ist, siehe unten.

Verantwortung übernehmen

Wenn Sie versuchen, die Köpfe und Herzen junger, beeindruckbarer Menschen durch eine Online-Erfahrung zu erreichen, werden Sie mit einer gewichtigen Verantwortung betraut. Kinder sind geistig zerbrechlich und leicht von dem betroffen, was sie sehen, hören und berühren. Es gibt bestimmte Faktoren, die auf jeder Kinderwebsite angesprochen werden müssen, um sicherzustellen, dass den Kindern kein Schaden zugefügt wird.

Förderung der Bildung

Spiele und andere interaktive Elemente sollten nicht nur geschaffen werden, um die Marke und Identität Ihres Unternehmens zu fördern, sondern auch, um junge Köpfe auf vorteilhafte und positive Weise zu erziehen und zu schulen. Die Förderung von Bildung durch Spiele und Aktivitäten zeigt, dass sich Ihr Unternehmen um den Benutzer kümmert und wie sich seine Online-Erfahrung in Zukunft auf ihn auswirken könnte.

Online-Lernspiele von Fisher Price beinhalten Spiele, die je nach Altersgruppe variieren.

Funbrain bewirbt sich als „Die # 1-Bildungsseite des Internets für K-8-Kinder und Lehrer.“

Informationen für Eltern

Eltern werden die Internetgewohnheiten ihrer Kinder genau im Auge behalten. Viele Kinderseiten sind sich dessen bewusst und enthalten daher Informationen, die sich an Eltern richten. Manchmal ist dies in Form eines Tips, wie es bei der Sesame Street Games-Website der Fall ist, oder einfach eines Navigationselements, das auf den Abschnitt eines Elternteils verweist.

Sesame Street Games enthält eine „Elterntipp“ -Box.

BEN 10 hat einen Link „Übergeordnetes Material“ in seiner primären Navigationsleiste.

Thomas Der Panzermotor enthält einen „Eltern“ -Link.

Usability Testing

Schließlich ist eine der besten Möglichkeiten, ein erfolgreiches Online-Erlebnis für Kinder aufzubauen, die Navigation und Interaktion von Kindern mit den Spielen und anderen einzigartigen Funktionen Ihrer Website. Nicht alle Unternehmen werden das Budget für umfangreiche Tests haben, aber fast alle werden in der Lage sein, zumindest eine minimale Menge an Tests durchzuführen — auch wenn es sich nur um ein Kind handelt. Auf diese Weise können Sie die Website mit den Augen eines Kindes sehen und die erforderlichen Änderungen vornehmen, wie dies bei Usability-Tests der Fall wäre.

Unternehmen wie Disney, Sesame Street und PBS untersuchen natürlich seit Jahren das Verhalten von Kindern, so dass viele der oben gezeigten Beispiele verwendet werden könnten, um die Grundlage für eine erfolgreiche Kinderwebsite zu bilden, auch wenn keine Usability-Tests durchgeführt werden.

Fazit

Hier finden Sie eine Zusammenfassung der konventionellen und unkonventionellen Best Practices für die Gestaltung einer Website für Kinder:

Konventionelle Best Practices

• Erstellen Sie Elemente, die groß und visuell einprägsam sind
• Verwenden Sie helle, lebendige Farben, die die Sinne anregen
• Integrieren Sie Elemente aus der Natur
• Schaffen Sie Tiefe im Design
• Fügen Sie Navigationselemente hinzu, die groß und leicht zu finden sind
• Video verwenden
• Druckbare Elemente einbeziehen
• Raster aufbrechen
• Änderungen basierend auf Usability-Tests vornehmen

Unkonventionelle Best Practices

• Schaffen Sie eine fröhliche, spielerische Stimmung
• Verwenden Sie animierte zeichen
• Verwenden Sie grafiklastige Navigationsleisten
• Verwenden Sie Flash-Animationsleisten
• Betten Sie Bewegungen und Sounds ein, die beim Laden der Seite ausgelöst werden
• Fügen Sie einen Abschnitt „Spiele“ hinzu
• Ändern Sie den Cursor, um zum Thema beizutragen
• Fügen an Kinder und Eltern

Ein Webdesigner, der an einer Kinderwebsite gearbeitet hat, würde wahrscheinlich sagen, dass es eines der lustigsten und interessantesten Projekte war, an denen sie arbeiten durften. Wenn Sie jemals die Möglichkeit haben, eine Benutzererfahrung zu erstellen, die sich an Kinder richtet, Befolgen Sie unbedingt einige der bewährten Methoden, die auf vielen der hier diskutierten Websites demonstriert wurden, und Ihre Website hat gute Chancen, bei Kindern ein großer Erfolg zu werden.