- 12 min læsning
- Inspiration, udstillingsvinduer, design, børn
- Del på kvidre, LinkedIn
om forfatteren
Louis er en front-end udvikler, forfatter og forfatter baseret i Toronto, Canada. Han kuraterer nyhedsbrevets Internetværktøjer ugentligt og teknisk produktivitet og blogger om … mere om Louis ↬
e-mail nyhedsbrev
ugentlige tips om front-end & UK.
betroet af 190.000 folk.
hjemmesider designet til børn er stort set blevet overset i artikler og roundups, men der er mange smukke og interessante designelementer og layouts præsenteret på børns hjemmesider, der er værd at diskutere og analysere. Der er også en række best practices, der er eksklusive til internetdesign til børns hjemmesider-praksis, der normalt ikke bør forsøges på en typisk hjemmeside.
du kan tage et kig på relaterede artikler:
- bedste praksis for Internetdesign til børn
- design til børn er ikke børns leg
- design af Internetgrænseflader til børn
- en fars bøn til udviklere af iPad Apps til børn
denne artikel viser en række populære kommercielle hjemmesider rettet mod børn med en analyse af tendenser, elementer og teknikker, der bruges til at holde børn interesserede og stimulerede.
Design, der stimulerer sanserne
mennesker er mentalt stimuleret af en række faktorer, og dette gælder især for børn. Succesfulde børns hjemmesider implementerer en række elementer og designprincipper, der skaber et miljø, der passer til et barns personlighed og interesser.
lyse, levende farver
lyse farver vil nemt fange og holde et barns opmærksomhed i lange perioder. Selvom farvevalg er en primær faktor i udformningen af enhver form for hjemmeside, Dette er især tilfældet, når designe en hjemmeside for børn, da farver gør et stort indtryk på børns unge sind. Farvevalg og kombinationer, der ville sandsynligvis blive afvist eller lo ved udformningen af en typisk hjemmeside kan hilses velkommen på en hjemmeside for børn.
hvor mange af de farvekombinationer, der bruges i skærmbillederne nedenfor, ville lykkes på en hjemmeside rettet mod et voksent publikum? Ikke mange. Så når du designer et sted rettet mod børn, skal du bruge lyse, levende farver, der visuelt stimulerer på en uforglemmelig måde.
PBS KIDS
Hermans hjemmeside
Funbrain legeplads
et godt humør
børn vil huske og vende tilbage til en hjemmeside, hvis deres oplevelse er glad. Elementer kan indarbejdes i designet for at sikre, at et muntert, positivt humør præsenteres.
Mickey Mouse Clubhouse skaber en glad stemning ved at gøre Mickey selv til et visuelt fokuspunkt på siden. Hans glade ansigt og kropssprog hjælper med at forbedre denne glade følelse og skaber en velkommen atmosfære.
Play-Doh-hjemmesiden skaber en glad stemning ved hjælp af et strålende barn som omdrejningspunkt.
Fifi ‘ s og blomsternes hjemmeside har et stort smilende Blomstertegn i visuelt fokus, hvilket skaber en glad stemning.
elementer fra naturen
børn stimuleres af genkendelige elementer, som de kan forholde sig til. Fordi børns oplevelser i livet er begrænsede, findes nogle af de ting, de er mest fortrolige med, i naturen. Naturlige elementer som træer, vand, sne og dyr bruges på nedenstående hjemmesider. I mange tilfælde overbelastes disse elementer gennem størrelse eller enkelhed i design.
Disney-hjemmesiden ændrer sit tema afhængigt af hvilket produkt der promoveres. I dette skærmbillede bruger de et Grand Canyon-lignende landskab til at skabe en mindeværdig visuel oplevelse.
Discovery Kids bruger en undersøisk tema.
Club Penguin præsenterer et arktisk tema.
CBC Kids bruger en sæsonbestemt tema baseret på forsimplede, iøjnefaldende grafik.
PopCap Games bruger et græsklædt landskab foran store solstråler.
design med større levetid
Store designelementer har vist sig at være effektive i alle typer Internetdesign, demonstreret af det faktum, at stor typografi, store knapper og store opfordringsområder er blevet almindelige i moderne design. Fordi børn er naturligt tiltrukket af enkle, indlysende og genkendelige objekter, vil hjemmesider designet til børn øge deres effektivitet gennem brug af store designelementer.
animerede figurer
store, animerede, talende figurer er en fascinerende og fængslende måde at få fat i og holde et barns opmærksomhed. Mange steder designet til børn bruger dette element effektivt.
Barbie
Mr. Rogers ‘ Kvarter
Disney Princess
Thomas Tankmotoren
Barney & venner
dybde i design
børn kan lide at lade deres fantasi løbe vild i en verden, der ser ud og føles ægte. Denne form for atmosfære kan skabes gennem dybde i designelementer. Dette kan omfatte ekstruderede former, skygger, Landskaber, skrå effekter, skinnende gradienter eller flydende objekter. Ofte er mange af disse elementer til stede i tegneserielignende skærme, som vist nedenfor.”Adoption Center” bruger skygger, en livlignende karakter og andre 3-dimensionelle elementer til at skabe et design, der har dybde.
regnbue magi skaber dybde i deres design gennem en Flash-animeret landskabsscene, der bevæger sig, når brugeren svæver over forskellige elementer.
Navigation og opfordring til handling områder, der skiller sig ud
i enhver hjemmeside design, navigation og opfordring til handling områder bør være fokuspunkter. Børns hjemmeside designere kan forenkle disse områder, så børn kan navigere nemt. Tekstbaseret navigation på børns hjemmesider ville ikke være så effektiv som store knapper og grafik, fordi de ville mangle visuelt fokus på en side.
Peppa Pig har en vandret navigationslinje, der indeholder store ikoner og letlæselige beskrivelser for hvert element.
Peter Plys hjemmeside inkorporerer deres navigation bar i deres “skov” tema, ved hjælp af store træ grafiske elementer, der ikke vil blive overset af brugeren.
Sesame Street har en let at lokalisere vandret navigationslinje, sammen med store opfordring til handling områder.
min lille Pony bruger tekstbaseret navigation, hvilket skaber en mindre grafisk oplevelse, som giver fokus på indholdselementerne. Dette kan være ideelt i nogle situationer, men på en børns hjemmeside er en grafisk baseret navigationslinje mere tilbøjelig til at være effektiv.
brugerinteraktion
sandsynligvis en af de vigtigste måder for en børns hjemmeside at lykkes er at inkludere elementer, der tillader et barn at interagere med hjemmesiden på en eller anden måde. Børn ønsker ikke at gøre intens læsning eller forskning; de ønsker at spille og blive underholdt.
på en typisk hjemmeside ses visse designelementer som distraherende, ubrugelige og besværlige. På et barns hjemmeside ses de samme elementer som et effektivt middel til at tiltrække brugere.
interaktion gennem Animation og lyd
effekter og oplevelser oprettet med Adobe Flash frarådes i typisk moderne Internetdesign, men på børns sider er der næsten ingen anden mulighed. Det er rigtigt, at JavaScript-animation og effekter er kommet langt på grund af de mange tilgængelige JavaScript-biblioteker, men den lethed, hvormed komplekse animationer kan oprettes med Flash, gør denne metode til det første valg for mange kommercielle hjemmesider designet til børn.
Paulys Playhouse-side, som de fleste af de hjemmesider, der findes i denne artikel, er bygget helt i Flash.
Hothjulets hjemmeside indeholder en animeret “dagens bil”, der springer på skærmen, når siden indlæses, hvilket skaber visuel interaktion.
Roary racerbilen har en kort “flash intro” med en “skip” – knap. Dette er en gammeldags tendens i typisk Internetdesign, men er et effektivt middel til catering til et barnbaseret publikum. Introen animerer gennem en vej, indtil tegnene vises i horisonten. Dette hjælper brugeren med at føle sig som om de personligt går ind i Roarys animerede verden.
Yahoo! Kids navigation bar er skabt med Flash og gør lydeffekter og animerer, når dens elementer er svævede over. Denne tendens er meget almindelig på mange af de sider, der findes i denne artikel.
interaktion gennem Video
tv er kendt for at fange børnepublikum i timevis, hvorfor “Saturday morning cartoons” i årtier har været en lukrativ del af udsendelsesplanerne for mange TV-netværk. På samme måde tilføjer video på et barns hjemmeside et sjovt, interaktivt og lærerigt aspekt til et hjemmesides indhold.
Kids ‘CBC-Video
Yahoo! Børn Film Guider
National Geographic Kids – Videoer
interaktion gennem spil
hvilket barn nyder ikke at spille spil? En af de mest effektive måder at underholde, uddanne eller på anden måde besætte et barn på en hjemmeside er at inkludere en “spil” sektion. Næsten alle hjemmesider undersøgt for denne artikel omfatter spil, der uddanner, stimulere, og tillade direkte interaktion, samtidig med at indarbejde mange af de designelementer allerede diskuteret. Nedenfor er nogle eksempler.
CBeebies – Gordon The Garden Gnome
Toy Story – Toy ‘s Big Escape
biler giver brugerne mulighed for at oprette, dele og køre deres egne brugerdefinerede biler.
printbare elementer
børn kan lide at have noget håndgribeligt at tage med sig for at hjælpe dem med at huske deres oplevelse. Printbare billeder og farvesider giver børn mulighed for at få et minde om deres oplevelse, samtidig med at hjemmesideejere får mulighed for at forbedre og promovere deres brand uden for computerskærmen. Nedenfor er nogle eksempler på printbare farvesider på børns hjemmesider.
Pingu farvelægningssider
Crayola Digi-Color
Peppa Pig farvelægningssider
Thomas og venner online farvelægning
Teletubbies – Print til farve
ukonventionelle metoder
vi har allerede diskuteret en række elementer, der i moderne typisk Internetdesign nu betragtes som ukonventionelle. Lyd, animation og store påtrængende grafik er ofte ildeset i typisk Internetdesign. På børns hjemmesider hjælper disse elementer brugeroplevelsen. Andre ukonventionelle elementer og designvalg diskuteres nedenfor.
ændring af markøren
dette er absolut ses som en dårlig praksis i standard hjemmeside design, men kan være en sjov, effektiv måde at tilføje en legende element til en kids’ hjemmeside tema. Dette kan gøres ved hjælp af dynamisk HTML, men gøres oftere via Flash.
markøren på Discovery Kids hjemmeside bliver til en snapping Bjørn fælde grafik.
markøren på Sesame Street hjemmeside efterfølges af en gul stjerne, når den svæver over standard HTML elementer, og bliver til en gul stjerne omgivet af mindre animerede stjerner, når markøren flyttes over klikbare Flash elementer.
Talking Navigation
nogle gange vil en navigationslinje producere lydeffekter, men i andre tilfælde vil navigationslinkene lyde ud, hvad de repræsenterer i en munter stemme.
PBS KIDS navigationslinjen taler ved hjælp af børns stemmer, når brugeren svæver over den.
CBeebies navigationslinje bruger en stemme til at lyde destinationen for hvert navigationselement.
Bob Builder navigationslinjen taler til brugeren på mouseover.
Fifi og Blomstertotterne har en talende navigationslinje.
Breaking the Grid
mens traditionelle moderne designteknikker har omfavnet fordelene og æstetikken ved netbaseret design, kan børns hjemmesider bryde fri fra et alt for struktureret layout for at skabe en unik verden, som et barn vil nyde at opleve.
dette betyder ikke, at det er forkert at bruge et gitter som grundlag for designet. Det kan være en fordel at starte med et gitter og derefter designe elementer uden for gitteret på en kontrolleret måde. Denne fleksibilitet i design og layout er demonstreret på en række af de steder, der allerede er diskuteret, men er også tydeligt i navigationslinjerne i eksemplerne nedenfor.
navigationslinjen på SvampeBob Firkant hjemmeside er skrå, går imod konventionen i typisk netbaseret NetDesign.
Hannah Montana hjemmeside funktioner navigation bar grafik, der bryder nettet.
The In The Night Garden hjemmeside har en meget usædvanlig navigation bar design, der bærer megen lighed med det, der findes i en konventionelt struktureret design.
nedenfor er nogle eksempler på hjemmesider, der bruger et mere stift, gitterbaseret format, og som et resultat ikke er så unikke, mindeværdige eller fængslende som nogle af dem, der allerede er overvejet i denne artikel.
børn er stive, og ikke så mindeværdige.
Crayola hjemmeside er noget old-school med sin grid format og lodret navigation.
Neopets er også designet på et mere struktureret gitter.
indrømmet, i nogle tilfælde ville et stærkere gitterbaseret design være nødvendigt, hvis publikum var et ældre barn publikum, som det er tilfældet med SI Kids, vist nedenfor.
at tage ansvar
hvis du forsøger at nå sind og hjerter af unge, påvirkelige mennesker gennem en online oplevelse, er du betroet en vægtig ansvar. Børn er mentalt skrøbelige og påvirkes let af det, de ser, hører og rører ved. Der er visse faktorer, der skal behandles på alle børns hjemmeside, for at sikre, at der ikke bringes skade til børnene.
fremme af uddannelse
spil og andre interaktive elementer skal oprettes ikke kun for at fremme din virksomheds brand og identitet, men for at hjælpe med at uddanne og træne unge sind på en gavnlig og positiv måde. Fremme af uddannelse gennem spil og aktiviteter vil vise, at din virksomhed bekymrer sig om brugeren, og hvordan deres online oplevelse kan påvirke dem i fremtiden.
online læringsspil fra Fisher Price inkluderer spil, der varierer alt efter aldersgruppe.
Funbrain fremmer sig selv som “internettets #1 uddannelsessted for K-8 børn og lærere.”
Information til forældre
forældre vil holde øje med deres børns internetvaner. Mange børns steder er opmærksomme på dette, så de indeholder oplysninger, der er rettet mod forældre. Nogle gange er dette i form af et tip, som det er tilfældet med Sesame Street games hjemmeside, eller blot et navigationselement, der peger på en forældres sektion.
Sesame Street Games indeholder en “forælder Tip” boks.
BEN 10 har et “Parent Stuff” link i deres primære navigationslinje.
Thomas Tankmotoren indeholder et” forældre ” link.
brugbarhedstest
endelig er en af de bedste måder at hjælpe med at opbygge en vellykket online oplevelse for børn ved at se børn navigere og interagere med din sides spil og andre unikke funktioner. Ikke alle virksomheder har budgettet til omfattende test, men næsten alle har evnen til at udføre mindst en minimal mængde test — selvom det kun er med et barn. Dette giver dig mulighed for at se siden gennem et barns øjne og foretage de nødvendige ændringer, det samme som det ville ske i enhver brugbarhedstest.
virksomheder som Disney, Sesame Street og PBS har selvfølgelig studeret børns adfærd i årevis, så mange af de eksempler, der er vist ovenfor, kunne bruges til at danne grundlag for en vellykket børns hjemmeside, selvom der ikke udføres nogen brugbarhedstest.
konklusion
her er en oversigt over både konventionelle og ukonventionelle bedste praksis for at designe en hjemmeside for børn:
konventionel bedste praksis
- Opret elementer, der er store og visuelt mindeværdige
- brug lyse, levende farver, der stimulerer sanserne
- Indarbejd elementer fra naturen
- Opret dybde i designet
- Tilføj navigationselementer, der er store og lette at finde
- brug video
- Inkluder udskrivbare elementer
- bryd gitteret
- foretag ændringer baseret på brugbarhedstest
ukonventionel bedste praksis
- opret en glad, legende stemning
- brug animeret tegn
- brug graphic-heavy navigation bars
- brug Flash animation rigeligt
- Integrer bevægelser og lyde, der udløser på sidebelastning
- Inkluder en “spil” sektion
- Skift markøren for at bidrage til temaet
- Tilføj stemmer til navigationsoverførsler
- Vær opmærksom på ansvarlig over for både børn og forældre
en internetdesigner, der har arbejdet på en børns hjemmeside, vil sandsynligvis sige, at det var et af de mest sjove og interessante projekter, de har haft privilegiet at arbejde på. Hvis du nogensinde har mulighed for at skabe en brugeroplevelse, der er rettet mod børn, skal du sørge for at følge nogle af de dokumenterede metoder, der er demonstreret på mange af de sider, der diskuteres her, og din hjemmeside vil have en god chance for at blive et stort hit med børn.