Что бы вы сделали, имея возможность полностью отдаться красоте и яркости, разрабатывая запоминающийся дизайн, и если бы это дало вам возможность полностью реализовать все свои творческие замыслы, к тому же, если бы не приходилось беспокоиться об удобстве пользования и каких-то определенных стандартах создания сайтов? Вообще, в современном мире редко встретишь такие веб-сайты, разве что, только если вы закажете веб-дизайн для детей!
Веб-сайты, разработанные специально для детей достаточно широко и масштабно обсуждаются в сети и статьях о веб-дизайне, но есть много красивых и интересных элементов дизайна, которые редко или вообще никогда никто не обсуждал и не рассматривал. Также существует несколько лучших вариантов реализации веб-дизайнов для детей – обычные веб-сайты никогда бы не сделали такими.
В данной статье мы предоставим Вам возможность ознакомиться с несколькими популярными коммерческими веб-сайтами, ориентированными на детей, а также некоторые обсуждения тенденций, элементов, и техник, с помощью которых можно заинтересовать детишек.
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-анимацию
* Внедряйте подвижность и звуковое сопровождение
* Не забудьте про раздел с играми
* Меняйте стандартный курсор на более красочный и детский
* Озвучьте разделы в навигационном меню
* Рассчитывайте как на детей, так и на их родителей
Любой дизайнер, которому приходилось разрабатывать веб-сайт для детей, без промедления скажет вам, что это была его самая веселая и интересная работа. Если у вас когда-нибудь появится идея создания веб-сайта для детей, то не забудьте воспользоваться идеями и примерами, предложенными в нашей статье. Скорее всего, вас ждет успех в этом!
Раздел: Web-дизайн Комментариев: 2
Работка дизайна для детского веб-сайта: Тенденции и лучшие варианты реализации
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Подробности здесь
Опубликовал Mysterious Master Прочитано (раз): 22034 | Оставлено комментариев: 2
Источник материала / оригинал статьи Распечатать
Источник материала / оригинал статьи Распечатать