—»     —»   Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации
  Раздел: Web-дизайн   Комментариев: 2  

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

Что бы вы сделали, имея возможность полностью отдаться красоте и яркости, разрабатывая запоминающийся дизайн, и если бы это дало вам возможность полностью реализовать все свои творческие замыслы, к тому же, если бы не приходилось беспокоиться об удобстве пользования и каких-то определенных стандартах создания сайтов? Вообще, в современном мире редко встретишь такие веб-сайты, разве что, только если вы закажете веб-дизайн для детей!

Веб-сайты, разработанные специально для детей достаточно широко и масштабно обсуждаются в сети и статьях о веб-дизайне, но есть много красивых и интересных элементов дизайна, которые редко или вообще никогда никто не обсуждал и не рассматривал. Также существует несколько лучших вариантов реализации веб-дизайнов для детей – обычные веб-сайты никогда бы не сделали такими.

В данной статье мы предоставим Вам возможность ознакомиться с несколькими популярными коммерческими веб-сайтами, ориентированными на детей, а также некоторые обсуждения тенденций, элементов, и техник, с помощью которых можно заинтересовать детишек.

01. Дизайн, который стимулирует разум

Люди подвергаются множеству различной стимуляции в абсолютно разных областях, а особенно этому подвержены маленькие дети. Успех веб-сайта для детей заключается в применении определенных элементов и дизайна, которые создают среду, соответствующую интересам ребенка.

- Светлые, яркие цвета

Яркие краски всегда интересовали детей, и могут привлечь их внимание на долгое время. Вообще, подбор правильных цветов – это один из важных аспектов при создании сайта любого типа, а в процессе разработки дизайна для детей, этим действием нельзя пренебрегать, так как цвета на сайте образуют впечатления в юных умах. Цвета и сочетания, которые наверняка были бы обсмеяны или отклонены в процессе разработки серьезного типичного веб-сайта, наверняка найдут своё применение в дизайне для детей.

Будет ли успешным применение такого рода цветовых комбинаций на сайте, направленном на взрослую аудиторию? Вряд ли. Итак, при создании веб-дизайнов для детей, всегда используйте яркие и красочные комбинации, которые могут привлечь внимание и запомниться детям.

: PBS KIDS

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Herman’s Homepage

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Funbrain Playground

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Радостное и дружелюбное настроение

Ребенок всегда захочет снова вернуться на вашу страничку, если она запомнилась ему как дружелюбная и веселая, и вызвала у него только лишь положительные эмоции. В дизайн можно интегрировать некоторые элементы, которые могут гарантировать, что ваш веб-сайт достаточно весел и интересен.

: сайт Mickey Mouse Clubhouse оставляет такие положительные эмоции за счет того, что в роли главного героя сайта выступает сам Микки. Его радостное лицо и жесты усиливают положительные ощущения и создают дружелюбную атмосферу.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: сайт The Play-Doh завоевывает положительное отношение за счет сияющего ребенка.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: сайт The Fifi and the Flowertots добился этого же за счет огромного улыбающегося персонажа, который не может не вызывать радости.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Элементы природы

Детей можно стимулировать чем-то таким, с чем они непосредственно встречаются в реальной жизни. Так как жизненный опыт детей в большинстве случаев очень ограничен, можно с уверенностью заявить, что лучше всего они знакомы с природой. На сайтах, приведенных ниже, показаны отличный вариант внедрения элементов природы (деревья, вода, снег, животные, и т.д.). Во некоторых случаях, эти элементы немного увеличены в размерах.

: сайт Disney меняет тему оформления в зависимости от того, какой продукт в настоящее время продвигается. На скриншоте видно, что на сайте используется пейзаж Гранд Каньона, что создает запоминающийся эффект.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте Discovery Kids используются темы подводного мира.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте Club Penguin используется соответствующая тема Арктики.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: сайт CBC Kids использует сезонную систему тем оформления, с использованием простых привлекательных графических элементов.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте PopCap Games используется травянистый пейзаж и большие лучи солнца.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

02. Сказочные и нереалистичные дизайны

Большие элементы дизайна, продемонстрированные в использовании больших шрифтов, больших кнопок, и так далее, уже доказали свою эффективность во всех типах веб-дизайна, и часто им находится применение. Так как дети часто обращают внимание на простые, очевидные вещи, то веб-дизайн, разработанный для ребенка, должен быть насыщен большими элементами дизайна, что может повысить эффективность.

- Анимированные персонажи

Большие анимированные разговаривающие персонажи – это отличный способ произвести впечатление и привлечь внимание ребенка. Многие сайты пользуются данным методом.

: Barbie

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Mr. Rogers’ Neighborhood

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Disney Princess

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Thomas the Tank Engine

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Barney & Friends

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Глубина дизайна

Дети очень любят мечтать, и в своих мечтах изменять реальный мир. Такая же атмосфера может быть создана в дизайне посредством придания глубины. Можно использовать вытянутые фигуры, тени, пейзажи, выпуклые эффекты, сверкающие градации и плавающие объекты. Часто все эти вещи представляются в мультяшном виде, как вы можете наблюдать ниже.

: на сайте «Центра усыновления» The Webkinz® используются тени, оживленные персонажи и другие трехмерные элементы, которые придают дизайну глубину.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Poisson Rouge создает глубокую, реалистичную атмосферу за счет окна, за которым виднеется солнце, а также другие трехмерные элементы.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на Rainbow Magic реалистичность достигнута за счет Flash-анимированного пейзажа, который шевелиться соответственно движениям курсора мыши.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Выделение навигации и побуждающих элементов

В любом дизайне стоит выделять эти элементы. Дизайнерам веб-сайтов для детей стоит особенно упростить систему навигации, чтобы дети не путались. Текстовая навигация будет не так эффективна на детском сайте, как скажем, большие графические кнопки, потому что дети любят рисунки, а не текст.

: на сайте Peppa Pig горизонтальное меню навигации с большими иконками и описаниями разделов, которые можно легко прочитать.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте The Winnie The Pooh навигация объединена вместе с «лесной» темой оформления веб-сайта при помощи древесных графических элементов, которые сложно не заметить.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте Sesame Street размещена горизонтальная панель навигации, вместе с большими побуждающими элементами.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: сайт My Little Pony имеет текстовую навигационную панель, что уменьшает привлекательность к навигации, но сосредотачивает внимание на самом содержимом. Это, конечно, хорошо в некоторых случаях, но в веб-дизайне для детей лучше все же пользоваться графическими иллюстрированными навигационными панелями.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

03. Взаимодействие с пользователями

Наверное одним и важных аспектов в создании сайта для детей, это внедрение возможности ребенку повлиять на сайт и взаимодействовать с ним. Дети не ищут объемные и интересные тексты в сети, им нужно играть и развлекаться.

На обычном веб-сайте, конкретные элементы дизайна часто вовсе даже не нужны, на них никто не обращает внимания. На детском же веб-сайте, эти элементы и играют самую важную роль по привлечению внимания посетителей.

- Взаимодействие посредством анимации и звуков

Эффекты на обычных сайтах, созданные с помощью Adobe Flash, часто обескуражены и лишены внимания. Но если речь о сайте для детей, то без таких эффектов вряд ли обойдется хотя бы один сайт. Конечно же, есть возможность внедрения анимации на javascript, но более легким способом считается внедрение анимации, разработанной на Flash, что делает эту программу наиболее используемой в процессе разработки коммерческих веб-сайтов, разрабатываемых для детей.

: сайт The Pauly’s Playhouse, как и большая часть сайтов, представленных в данной статье, разработан на Flash.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: сайт The Hot Wheels включает в себя анимированный элемент «автомобиль дня», который увеличивается на всю страницу, пока идет загрузка.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте Roary the Racing Car используется вступительная загрузка, которую можно пропустить. Это считается старомодным в сфере обычных дизайнов, но ведь это все еще может быть эффективно для детских дизайнов. Загрузка представляет собой некое движение по дороге с появляющимися персонажами. Это создает некоторое ощущение того, что пользователь перемещается в анимированный мир Roary.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте The Yahoo! Kids используется навигационная панель с со звуковым сопровождением разработана на Flash. К тому же, при наведении курсором, включается анимация. Такой метод можно наблюдать на многих сайтах, представленных в данной статье.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Взаимодействие посредством видео

Как известно, телевизор может часами завлекать детей, именно поэтому по ТВ все еще идут мультфильмы по субботам. Видео имеет не меньший эффект, если мы будем применять его в дизайне веб-сайтов для детей – оно прибавит веселья, взаимодействия, а также можно внедрить образовательные видео-фрагменты.

: Kids’ CBC – Video

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Yahoo! Kids Movie Guides

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: National Geographic Kids – Videos

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Взаимодействие посредством игр

Какой ребенок не любит играть в игры? Одним из эффективнейших способов привлечения детского внимания к сайту – внедрить в него игры с элементами веселья и образования. Многие веб-сайты уже давно исследовали вариант внедрения красивых и привлекательных игр, которые также несут в себе образовательный смысл. Ниже мы привели несколько примеров.

: CBeebies – Gordon the Garden Gnome

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Toy Story – Woody’s Big Escape

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте Disney Pixar’s World of Cars дети могут могу создавать собственные машины, а потом делиться ими или участвовать в гонках.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Печатные элементы

Детям нравится сохранять что-то для себя как память о том, что с ними происходило. Возможность распечатать цветные и интересные картинки – это хороший способ для ребенка, чтобы сохранить в памяти радость и впечатление от посещения вашей страницы, а для вас это нечто вроде рекламы вашего бренда за пределами сети интернет. Ниже приведены некоторые примеры печатных страниц и красочных изображений.

: Pingu Coloring Pages

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Crayola Digi-Color

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Peppa Pig Colouring Pages

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Thomas and Friends Online Colouring

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Teletubbies – Print To Color

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

04. Нетрадиционные методы

Раннее мы уже обсуждали некоторые элементы, которые сегодня в современном обычном дизайне считаются нетрадиционными. Звуки, анимация, большие изображения, всего этого обычно избегают при создании обычного веб-дизайна. На детском веб-сайте, эти элементы наоборот улучшают впечатление о посещенных страницах. Еще несколько нетрадиционных способов привлечения внимания предложены ниже.

- Изменение курсора

Это обычно не одобряют в разработке серьезного веб-дизайна, но опять же, если речь идет о детском сайте, то данное действо будет только в плюс к привлечению внимания. Это можно реализовать посредством динамического HTML, но часто используется еще и Flash.

: Курсор на сайте Discovery Kids переделан в капкан.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: К курсору на сайте Sesame Street добавлена еще и желтая звезда, при наведении курсора на обычные HTML-элементы. А при наведении на кликабельные Flash-элементы, эта звезда окружается маленькими анимированными звездочками.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Говорящая навигация

Вы наверняка встречали навигационные панели, при наведении на которые издается характерное звуковое оповещение, но представьте себе панель, при наведении на разделы в которой, его писание произносится радостным голосом.

: на сайте PBS KIDS навигационная панель говорит детским голосом.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте The CBeebies навигационная панель озвучивает названия разделов меню.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте The Bob the Builder навигационная панель начинает говорить, как только пользователь наведет мышью.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте The Fifi and the Flowertots также используется говорящая навигационная панель.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Ломая сетку

Если в разработке дизайнов для строгих и серьезных сайтов принято придерживаться пропорциям и сетке, то в процессе создания веб-дизайна для детей, вовсе не обязательно держаться данной тенденции. Вы можете создать некий уникальный мир для детей.

Мы не говорим, что сетку необязательно использовать. Можно просто начать с сетки, а потом постепенно отклоняться её в пределах разумного. Такие методы уже продемонстрированы на некоторых сайтах, представленных выше.

Навигационная панель на сайте Spongebob Squarepants немного скошена, что как раз противоречит тенденции придерживаться сетки.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

На сайте The Hannah Montana в навигационной панели также присутствуют графические элементы, которые отклоняются от сетки.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

На сайте In the Night Garden разработали очень необычную навигационную панель, что имеет мало общего со стандартными навигационными панелями.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

Ниже представлены примеры сайтов, при создании которых, разработчики более уважительно к сетке, и как результат, вы можете видеть, что веб-сайты не такие уникальные и запоминающиеся, как те, которые были представлены раннее.

: Kids WB имеет более серьезный дизайн и поэтому не такой запоминающийся.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: The Crayola представляет собой нечто более старомодное, с соблюдением сетки и вертикальным меню навигации.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: Neopets представляет собой еще один веб-сайт, при создании которого придерживались сетки.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: SI Kids – в некоторых случаях, особенно, если дети уже взрослые, такого типа дизайн, может, был бы к месту.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

05. Принятие ответственности

Если вы решили заполнить умы и сердца юных и впечатлительных человечков посредством сети интернет, то вы должны понимать, что берете на себя серьезную ответственность. Ведь дети психологически очень хрупкие, и может быть легко попасть под воздействие того, что они слышать, видят и трогают. Существуют некоторые факторы, которые должны быть отмечены каждым веб-сайтом для детей, дабы не нанести вред ребенку.

- Содействие развитию и образованию

Игры и другие интегрированные элементы на странице должны служить не только как реклама и символика вашего бренда, но и вдобавок должны нести в себе некоторую смысловую нагрузку, чтобы дети могли тренировать и развивать мышление. Такой метод заверит посетителей в том, что ваша компания заботится о них.

: Online Learning Games от Фишера Прайса включает в себя игры, соответствующие возрастным группам.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: сайт Funbrain преподносится, как «1-й образовательный интернет сайт для детей и учителей.»

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

- Информация для Родителей

Родители обычно строго следят за тем, чем их дети занимаются в интернете. Много детских веб-сайтов хорошо знакомы с этим и поэтому размещают информацию для их родителей. Чаще всего эта информация представляется в небольшом окошке, как на игровом сайте Sesame Street, но встречается и просто пункт для родителей в навигационном меню.

: пример блока с информацией для родителей на сайте Sesame Street Games.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте BEN 10 в навигационном меню есть ссылка на информацию для родителей.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

: на сайте Thomas the Tank Engine также есть ссылка на информацию.

Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации

06. Тестирование удобства пользования

И наконец, одним из лучших способов, который может способствовать успеху, это процесс, когда настоящий ребенок предварительно просмотрит ваш веб-сайт, с интегрированными в него играми, видео и прочим. Не все компании могут позволить себе стороннее бета-тестирование, но наверняка любая компания сможет минимально протестировать собственный веб-сайт, пусть даже это будет один ребенок. Это поможет вам взглянуть на сайт глазами ребенка и таким образом вы сможете понять, что нужно усовершенствовать и что добавить на страницы.

Такие компании, как Disney, Sesame Street и PBS, конечно же, изучали потребности детей на протяжении многих лет, так что примеры, представленные выше, по сути, представляют собой основу и номинальные модели того, как должен выглядеть сайт для детей.

07. Заключение

Подводим итог как обычных, так и необычных веб-сайтов, разработанных специально для детской аудитории.

- Лучшие примеры традиционных веб-сайтов

* Используйте большие и запоминающиеся элементы
* Используйте яркие, светлые цвета
* Прибавьте немного от природы
* Не забывайте про создание визуальной глубины дизайна
* Создайте навигационные элементы, которые легко заметить и найти
* Внедряйте видео-элементы
* Используйте элементы с возможностью последующей печати
* Не старайтесь придерживаться сетки
* Совершенствуйте веб-сайт, опираясь на тестирование удобства пользования

- Лучшие примеры нетрадиционных решений в веб-дизайне

* Создавайте радостную, шуточную атмосферу
* Используйте анимированные персонажи
* Используйте навигационные меню, наполненные графикой
* Используйте Flash-анимацию
* Внедряйте подвижность и звуковое сопровождение
* Не забудьте про раздел с играми
* Меняйте стандартный курсор на более красочный и детский
* Озвучьте разделы в навигационном меню
* Рассчитывайте как на детей, так и на их родителей

Любой дизайнер, которому приходилось разрабатывать веб-сайт для детей, без промедления скажет вам, что это была его самая веселая и интересная работа. Если у вас когда-нибудь появится идея создания веб-сайта для детей, то не забудьте воспользоваться идеями и примерами, предложенными в нашей статье. Скорее всего, вас ждет успех в этом!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: веб-дизайн, дизайн сайтов
Опубликовал Mysterious Master   Прочитано (раз): 22034   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 декабря 2009 @ 05:57
Написал: Valekas — группа: Читатели  
На сайте с: 21.08.2009   |   Публикаций: 0   |   Комментариев: 70
ICQ: 572686
Великолепнейшая статья! :) Было очень интересно почитать :)


--------------------
Кто говорит, не думая, тот умрет, не болея.
Комментарий #2: 8 июля 2011 @ 03:17
Написал: RomanV — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Кашель да чихота - не своя охота.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031