Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Но как же создать что-то такое, что предназначается для детей, но оценить смогут даже взрослые?

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

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

Дети и интернет

Еще лет семь назад казалось, что ребенок 3-5 лет с планшетом в руках или мобильником – это некий нонсенс. Но сейчас уже достаточно часто родители покупают и детские планшеты, и мобильники. Чем они отличаются от обычных? Набором приложений, игр, детских книг, приложений-раскрасок, загруженными мультфильмами и многим другим. Или сами родители добавляют все это, чтобы было больше или если нет вообще.

Мы не будем останавливаться на моменте: хорошо это или плохо для развития ребенка. Мы отметим факт – дети используют мобильные устройства и даже вместе с родителями посещают интернет или играют на РС/консоли. А поскольку такое существует, то и сайты появляются для детей. Логично, что возникает необходимость создания соответствующего веб-дизайна, проекта, верстки и прочее.

Возрастные группы

При проектировании детского сайта главный вопрос: «для какого возраста создается проект». Возраст ребенка очень сильно влияет на содержание сайта, на дизайн в целом, поскольку восприятие у разных по возрасту детей тоже разное. Поясним, если создается сайт для малышей до 5 лет, то изображения должны содержать крупные объекты, яркие и понятные (как мультфильмы про «Смешариков» или "Бернарда", например). А для детей постарше, около 7-9 лет, можно уже и принцесс рисовать с мелкими деталями, более сложную анимацию создавать.

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

  • Очень молодые (3-5 лет) – лучше всего реагируют на яркий цвет, добрых персонажей и темы природы. Палитру цветов все же стоит использовать минимальную и не превращать дизайн сайта в аляповатую «кашу». Текста – мало, ибо читать по большей части они еще толком не умеют, хотя и могут разбирать отдельные буквы, слоги, и то не всегда. Но зато отлично воспринимается ими графика и звук, крупные элементы.
  • Молодые (6-8 лет) – любят, когда есть текст, ибо получают возможность продемонстрировать и потренироваться в навыках чтения. Да и просто они уже способны разбирать слова и понимать их значение. Графика и изображения уже используются более реалистичные, с минимум мультяшности, с преобладаем людей или очеловеченных героев, а цветовая палитра более насыщенная, с большим количеством цветов и оттенков. Типографика же простая, без элементов декора, хотя допускается инициал или буквица (первая украшенная буква).
  • Старшие (9-12 лет) – зачастую ребята используют тематические сайты для обучения чему-либо, для дополнительных занятий по школьной программе или для отдыха и саморазвития. Посему концепция сайта приближается к аналогу взрослой аудитории, где текст и графика тесно переплетаются между собой. Хороший вариант – интерактивные игры, причем, как размещение их в онлайн-варианте, так и в вариантах для оффлайна (правила, наборы и пр.). Веб-дизайн обычно простой, спокойные цвета, но палитра может быть еще более расширена.
  • Подростки (от 13 и выше) – интересуются уже почти взрослым контентом. Но все еще имеют непоседливость и не способны долго концентрироваться на чем-то одном. Поэтому анимация и тексты не должны быть долгими и длинными. Типографика может быть сложной, цветовая гамма насыщенная.

А что же родители?

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

По факту, на сайте дети обучаются, развиваются, что-то узнают. Поэтому почти каждый элемент веб-дизайна должен этому способствовать, дабы у мамы возник вопрос: «Малыш, а какие знакомые цвета ты видишь здесь?» или «Смотри-ка, а не радуга ли здесь побывала?»

Цветовая палитра

Цвет – один из самых впечатляющих элементов веб-дизайна детского сайта. Она – яркая, веселая и забавная, но не раздражительна для глаз. Темные оттенки лучше не использовать, как не нужно и тонировать изображения. Самыми же популярными цветами являются фиолетовый, синий, желтый, зеленый, красный, синий и голубой. То есть все цвета радуги – яркие и насыщенные. Что касается количества цветов, то лучшим считается 5-7 оттенков, чем только 2-3 цвета. В то же время нужно избегать пастельных тонов и светопереливов, мерцания, как у драгоценностей. Одни «невидимы» детским взглядом, а другие – раздражительны для них.

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

Посмотрите проект «Улицы Сезам и маппетов», National Geographic для детей, Мурзилка, Веселая Наука, Fifi and the flowertots, LEGO. Все они создавались для разных возрастных категорий и по цветовой гамме, и по образам.

Типографика

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

Цветовая палитра для шрифтов также ограничена. Для молодежи – один цвет и шрифт, для старших групп – уже можно по два. Что же касается оформления, то лучше отказаться от теней, различных обводок и прочего. Лучше менять размер, стиль (жирный/обычный), но без сложных эффектов. Буквы должны легко восприниматься, не теряться на фоне. Детям еще сложно читать по книге, а на мониторе будет и тем более.

Вед-дизайн kidsdinos как раз использует немного текста и небольшие изображения. Этот проект не для малышей, но, тем не менее, шрифт строгий, четкий и понятный.

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

Аналогично выглядит и сайт Disney, причем и для северо-американского региона и для российского.

Язык и речь

Язык, речевые обороты, сложность фраз и предложений не менее важны для детского сайта, чем все остальное. Каждая возрастная группа обладает своими ключевыми принципами понимания речи и взаимодействия. Для малышей главное – изображения и рисунки; понятные и не  требующие текст для расшифровки. Правило здесь одно: чем моложе ребенок – тем текста меньше. И уровень навыка чтения здесь совершенно не важен.

Но есть и еще некоторые нюансы:

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

Сайт Disney создан для всех возрастов, поэтому здесь можно найти и игры, и тексты, изображения, фотографии и многое другое.

«Улица Сезам» предлагает посмотреть видео, порисовать, поиграть, а потому много текста здесь и не нужно. Родители подскажут куда нажимать, а дальше уже малышу будет понятно и наглядно.

LEGO и Мурзилка также понятны и наглядны.

Поиграем?

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

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

Боб-строитель, Улица Сезам, Disney (создали радио), FiFi

Анимация и мультяшность

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

Но опять же, анимация должна бать простой и понятной. Ребенок не будет долго искать, куда нажать мышкой или куда должен отправить герой.

Посмотрите проекты seussville с интерактивными элементами, Мурзилка, Lego, Эрнест и Селестина

Выводы

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

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

Разумеется, что некоторые особенности детского развития были условны и усреднены. Кто-то начинает читать рано, кто-то позже, кто-то знает медвежонка Бернарда, кто-то только Винни-Пуха. Но принципы работы дизайнеров все равно остаются общими и базируются на детской психологии восприятия и познания мира. А еще мы рекомендуем посмотреть некоторые мультфильмы и увидеть воочию и шрифт, что в них используется, и размеры персонажей и предметов, палитры цветов. Полистать журналы «Мурзилка» и «Веселые картинки».  

Как вам материал?