ТЕНДЕНЦИИ WEB-ДИЗАЙНА НА 2012 ГОД.

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

Вряд ли кто-то поспорит, что еще 5-10 лет назад веб-дизайн был совсем иным, тогда все верстали таблицами (часто во FrontPage), вставляли флеш-заставки и круто было использовать WML, FBML и WAP. Средства и технологии живут от силы по 5 лет — это на данный момент.

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

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

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

1. CSS3 + HTML5

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

Пример сайта, сделанных с помощью данных технологий.

www.jetcooper.com

2. Богатство типографики

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

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

http://carsonified.com/


http://www.justdot.gr/

3. Крупные изображения, иконки, заголовки, хедеры и футеры

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

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

www.amuki.blogspot.com


www.branded07.com

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

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

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

http://www.motionoto.com/


http://www.wideview.rs/

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

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

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

http://foodsense.is/


http://www.laufbild-werkstatt.de/

6. Удобство навигации с сенсорного экрана

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

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

http://www.spoonjuice.com/


http://www.interexpresso.pt/

7. Смещённая прокрутка, ощущение глубины? текстурный фон

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

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

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

http://www.sensisoft.com/


http://www.egopop.net/


http://www.cakesweetcake.co.uk/

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

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

http://www.miraclestudios.in/


http://cpeople.ru/

9. Интерактивность: анимация и наложение

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

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

http://www.keystone-logistics.com/

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

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

http://imagemechanics.com.au/#!/pages/our-story

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

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

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

http://www.yast.com/

11. QR-коды

Коды Quick Response — одна из самых последних ярких тенденций в сфере маркетинга. С их помощью пользователь смартфона мгновенно попадает на ваш сайт. QR-коды растут, как грибы, на визитках и плакатах, в магазинах, метро и на остановках транспорта, в холлах и даже лифтах. Если ваш сайт оптимизирован для мобильных (а он должен быть таковым), специалисты советуют поместить QR-код на саму страницу, для удобства создания закладок.

12. Изысканный дизайн

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

http://webdesignerwall.com/


http://wildridexm.com/

А теперь самое главное! В данной статье предложены такие тенденции, которые редко можно увидеть на Тульских сайтах. Тем не менее! Будьте смелее.

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

Заказать смелый дизайн

При написании статьи использовались материалы портала dejurka.ru и coolwebmasters.com