тренды веб-дизайна 2011/12

Мы вступили в новое десятилетие, и направления веб-дизайна тоже обновились.

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

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

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

1. CSS3 + HTML 5

Одной из самых неожиданных тенденций последних месяцев стало расширение использования CSS3 и HTML5. Большинство веб-дизайнеров отказываются от Flash в пользу HTML5. HTML5 подавали как средство снижения нагрузки на Flash, но HTML5 не заменит Flash при конструировании нестандартных элементов эскиза. HTML5 сейчас применяется с Firefox 3.5 и более поздними версиями, Chrome, Safari, Opera и Internet Explorer 8. Предназначение этого языка программирования состоит в обеспечении большей гибкости возможностей разработчиков и связного единства данных/изображений/видео/аудио, а значит, и в ускорении процесса построения эскизов.

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

Ниже приведены несколько примеров:

jetcooper

Современные тенденции в веб-дизайне 2011-2012

sundaybestdesigns

Современные тенденции в веб-дизайне 2011-2012

chirp.twitter

Современные тенденции в веб-дизайне 2011-2012

2. Простые цветовые схемы

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

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

WideView

Современные тенденции в веб-дизайне 2011-2012

Motionoto

Современные тенденции в веб-дизайне 2011-2012

3. Совместимость с мобильными устройствами

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

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

Google

Современные тенденции в веб-дизайне 2011-2012

G-Shock

Современные тенденции в веб-дизайне 2011-2012

Dolce & Gabbana

Современные тенденции в веб-дизайне 2011-2012

4. Смещённая прокрутка — Parallax Scrolling или эффект Parallax

В 2012 году эффекты объёмности и глубины станут более обиходными, а веб-дизайнеры будут стараться усилить ощущение пространственности в эскизах их веб-сайтов, и это самая перспективная тенденция веб-дизайна-2012. Пока она лишь просматривается в приёме смещённой прокрутки. Эффект смещения плоскостей или смещённая прокрутка задаётся веб-дизайнером путём расслоения изображений переднего и заднего плана, движущихся с разной скоростью, за счёт чего и достигается ощущение перспективы/зрелищная и оригинальная иллюзия трёхмерности пространства. Она создаётся с помощью нехитрых CSS-уловок, дополнительных модулей jQuery, средствами HTML5, javascript и даже Flash.

Egopop Creative Studio

Современные тенденции в веб-дизайне 2011-2012

Head2Heart

Современные тенденции в веб-дизайне 2011-2012

Webdesign Karlsruhe

Современные тенденции в веб-дизайне 2011-2012

5. Эскизы веб-сайтов, пригодных для просмотра на сенсорных экранах

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

Interexpresso

Современные тенденции в веб-дизайне 2011-2012

6. Типографика

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

Forefathers

Современные тенденции в веб-дизайне 2011-2012

Carsonified

Современные тенденции в веб-дизайне 2011-2012

7. Крупные изображения и фото-фон

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

Cpeople

Современные тенденции в веб-дизайне 2011-2012

Miraclestudios

Современные тенденции в веб-дизайне 2011-2012

8. Текстурный фон

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

Cake Sweet Cake

Современные тенденции в веб-дизайне 2011-2012

Alpine Meadows

Современные тенденции в веб-дизайне 2011-2012

Organic Supermarket

Современные тенденции в веб-дизайне 2011-2012

9. Одностраничные сайты

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

Ryanscherf

Современные тенденции в веб-дизайне 2011-2012

Imagemechanics

Современные тенденции в веб-дизайне 2011-2012

10. Возможность пересылки страницы по социальным сетям

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

yast.com

Современные тенденции в веб-дизайне 2011-2012

Заключение

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

12 комментариев

  1. 2-3 колоночная верстка, а иногда и 1. К этому возвращаются.

  2. Спасибо. это интересно и сайт не часто обновляется но полезной информации достаточно много, спасибо.

  3. Интересная информация))
    Хочется посмотреть что будет в дальнейшем..
    Если у кого есть или кто знает где скачать купить хорошие качественные шаблоны подскажите пожалуйста:) а то свой сайт mylittleworld.ru не во что одеть..

  4. Есть общая тенденция к упрощению и увеличению размеров

  5. Очень полезная информация, спасибо огромное. Нашла много длоя себя полезного

  6. Спасибо. Много полезного в одном месте.

  7. Спасибо. Прочитал с интересом, и вообще полезный у Вас блог

  8. Добавил в закладки. Теперь буду почаще читать!

  9. Автор всё чётко подметил

  10. Хороший пост! Почерпнул для себя много нового и интересного! Пойду ссылку другу дам в аське

  11. Восхитительно

  12. Спасибо. Прочитал с интересом, и вообще полезный у Вас блог

Add a comment

*