7 основных современных тенденций веб-дизайна в 2013 году

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

За последние два года доля просмотра сайтов с помощью мобильных устройств — смартфонов и планшетов — увеличилась втрое, и на январь 2013 года, по данным Computerworld, составила 13% от общего числа просмотров.

Теперь быть подключённым к сети Интернет можно не только с помощью настольного компьютера, ноутбука на работе или дома. На сайте TribalCafe.co.uk приводится статистика использования компьютеров, планшетов и смартфонов:

• Утром больше пользуются смартфонами (особенно в будний день) и планшетами
• В рабочее время больше пользуются компьютерами
• Вечером больше пользуются планшетами (особенно на выходных) и смартфонами

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

1. Адаптивный дизайн

Сайт с адаптивным дизайном создаётся с учётом того, что его могут просматривать на экранах разных устройств. Некоторые сайты сделаны таким образом, что когда пользователь просматривает их на экране настольного компьютера, ему предлагают одну версию сайта. Когда он просматривает сайт с мобильного устройства, загружается другая версия сайта. Это не адаптивный дизайн — разработчикам приходится создавать два разных сайта с одинаковой информацией, поддерживать их по отдельности, синхронизировать наполнение. Приходится делать больше работы, за которую надо платить дополнительно.

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

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

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

Адаптивный дизайн используется в дизайне следующих сайтов:

• Информационно-новостные сайты
  • http://www.time.com/ ,
  • http://www.siliconrus.com/,
  • http://www.harvard.edu/,
  • http://thenextweb.com/.
• Специализированные интернет-магазины
  • http://www.abookapart.com/,
  • http://goodmoments.com.ua//
• Сайты компаний и фрилансеров
  • http://zurb.com/,
  • http://www.microsoft.com/,
  • http://www.sony.com/,
  • http://happycog.com/,
  • http://www.knockknockfactory.com/, 
  • http://plastika.pirogov.ru/.
• Промо-сайты
  • http://www.greygoose.com/
• Все сайты, которые не ленятся предоставлять посетителю свою информацию и сервисы в любом месте и в любое время, когда бы такая потребность ни возникла.

2. Весь сайт на одной странице

Скорость загрузки сайта напрямую влияет на скорость доступа посетителя к информации. В офисах и квартирах появился доступ к сети Интернет с приемлемой скоростью (до 100 Мбит/с), и загрузка сайта не требует от посетителя долгого ожидания. Скорость доступа к Интернету с помощью услуг мобильных операторов ниже. Например, специальное приложение для замера скорости Speedtest показывает 0,12 Мбит/с для получения и 0,09 Мбит/с для передачи данных (показатели могут быть другими в зависимости от загрузки сети и местоположения).

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

Сайты с единственной целью делают адаптивными, и всё содержание помещают на одну страницу. Таким образом, при низкой скорости соединения сайт загружается один раз, и посетителю доступна вся информация сразу.

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

• http://www.deepblue.com/,
• http://www.billykick.com/,
• http://expeditions.terre-marine.org/,
• http://www.biamar.com.br/,
• http://www.tornobambino.com/,
• http://www.dominion.ru/, 
• http://www.avast.com/,
• http://journey.lifeofpimovie.com/,
• http://www.spendeeapp.com/,
• http://www.zensorium.com/tinke/.

3.  Плоский интерфейс

После заявления компании Microsoft о выпуске операционной системы Windows 8 с интерфейсом «Metro» на выставке CES (Consumer Electronic Show) в 2011 году стали появляться сайты, перенявшие идею упомянутого выше интерфейса:

• http://poslugy.gov.ua/,
• https://www.portmone.com.ua/,
• http://builtbybuffalo.com/,
• http://etchapps.com/.

4. Фиксированная навигация

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

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

• http://www.nd.edu/,
• http://www.coolappse.com/,
• http://thenextweb.com/,
• http://abduzeedo.com/.

5. Эффекты CSS3

С тех пор, как браузеры начали поддерживать CSS3, у разработчиков сайтов появилась возможность:

• Задавать радиус скругления границ и генерировать тень объектов без использования графических файлов
• Размещать несколько фоновых изображений
• Использовать дополнительные параметры в работе с текстом и шрифтами
• Анимировать объекты на странице и изменять их в двух и трёх измерениях

Примеры сайтов:

• http://vintage.com.ua/,
• http://etchapps.com/,
• http://www.carlosousa.net/,
• http://spigotdesign.com/,
• http://www.reverenddanger.com/, 
• http://www.aupetitpanisse.fr/,
• http://annasafroncik.it/.

6.  Параллакс

С помощью возможностей CSS3 и JavaScript можно создавать эффект параллакса. Вы могли видеть этот эффект в аркадных играх: различные фоновые элементы двигаются с разной скоростью относительно героя игры, создавая ощущение объёмна. Например, облака и звёзды относительно героя двигаются медленнее, чем лес, на фоне которого происходят события игрового мира.

В веб-дизайне эффект параллакса тоже используется для придания объёмности изображения. Обычно это промо-сайты, сайты, продающие какой-то продукт, портфолио:

• http://moto.oakley.com/,
• https://www.onnit.com/,
• http://lesingefume.com/,
• http://www.thepororoca.com/,
• http://vitalivovnenko.com/,
• http://www.iutopi.com/,
• http://www.qb-interactive.ru/.

7. Большие изображения

Большие изображения — это не просто фоновая фотография, на которой расположено содержимое сайта. Такие изображения являются первым, что привлекает внимание посетителя сайта. Они позволяют вызвать у него определённое настроение. После загрузки сайта за доли секунды становится понятно, что посетителю ждать от пребывания на сайте. Как говорят, одна картинка стоит тысячи слов.

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

• http://www.dimond.com.au/,
• http://makeup.heatherconlan.com/,
• http://cropp.com/,
• http://sofyaginger.com/,
• http://www.wildexpeditions.com/,
• http://lunevmusic.ru/,
• http://abacuslighting.work.goodde.ru/,
• http://www.google.com/culturalinstitute/home,
• http://www.action.dontabak.ru/.

Заключение

Нововведения в деле создания сайтов обусловлены не только новыми техническими возможностями и идеями разработчиков, но и следованию главной цели сайта — донести пользователю необходимую ему информацию. Сейчас, когда мобильные устройства стали неотъемной частью жизни современного человека (на момент написания статьи добавлю «городского»), ударение ставится на предоставление пользователю необходимой информации в любой момент времени и в любом месте, где бы он ни находился.

Выполнение этой задачи видно в применении адаптивного дизайна, сайта на одной странице и использования CSS3.