—»     —»   Современные тенденции в веб-дизайне 2011-2012
  Раздел: Web-дизайн   Комментариев: 8  

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

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

Дизайнеру веб-сайтов для успешной работы нужно быть в курсе последних веяний в веб-дизайне. Тенденции и приёмы дизайна всё время меняются, а веб-дизайнеры обожают экспериментировать, придумывать различные ухищрения и новшества для привлечения посетителей. 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

Nespresso

Современные тенденции в веб-дизайне 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 год, дизайнеры по всему свету уже думают о новых проектах. Надеюсь, данный обзор наиболее заметных и набирающих силу тенденций в веб-дизайне окажется вам полезным. Уделите, пожалуйста, нам ещё минуту и оставьте ваш комментарий, поделитесь собственными соображениями, расскажите о тенденциях, которые мы проглядели, или о чём-то ещё, будем вам очень признательны.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: дизайн сайтов, веб-дизайн
Опубликовал Design FactoRy   Прочитано (раз): 26825   |   Оставлено комментариев: 8
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 декабря 2011 @ 16:32
Написал: vasiliy0s — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Мне понравился обзор. Потратил на усвоение всех новых впечатлений более часа и почерпнул для себя немного опыта. Но, самое главное - определил курс в развитии. Буду теперь пристальнее следить за тенденциями!
Комментарий #2: 9 декабря 2011 @ 22:00
Написал: Vlipachello — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Особенно впечатлил сайт с крылатым львом. Правда, в портфолио этой студии работы уже не такие яркие - да, аккуратные и стильные, но по броскости фасаду сайта уступают smile
Комментарий #3: 10 декабря 2011 @ 23:21
Написал: ALexxxD — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Огромное спасибо за труд.
очень порадовала объемность за счет разной скорости движения объектов, а главное простота в исполнении.
2012 скорее всего для меня, это адаптация в мобильной среде. опять эти маленькие экраны, низкие мощности, неизвестные браузеры,тольоко еще теперь и тач=)
Комментарий #4: 21 января 2012 @ 15:08
Написал: Светалана — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо огромное за труд. Когда я почитала статью - мне пришло в голову, что в эволюции кнопки уже можно что-то дописывать - это я о рассчете при создании сайта на тач-скрин.
Комментарий #5: 1 февраля 2012 @ 12:11
Написал: mixermf — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А что, HTML5 стал языком программирования?
Комментарий #6: 1 февраля 2012 @ 12:25
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3312   |   Комментариев: 500
ICQ: --- не указано ---
mixermf, переведено согласно оригиналу, где написано следующее:
This programming language is all about giving developers more flexibility, connecting data / drawings / videos / audio, and delivering designs faster.

Комментарий #7: 11 июня 2012 @ 14:43
Написал: Сергей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хороший обзор, интересные примеры. Половину из вышеуказанного замечал сам второй половиной как раз собирался пользоваться:)
Комментарий #8: 16 марта 2013 @ 06:01
Написал: kikobait — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Мне интересно что же нас ждет дальше wink
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2020    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31