Тенденции веб-дизайна в 2012 году

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

1. Реагирующий веб-дизайн.

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


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

2. Фиксированное навигационное меню.

Мы все используем эту технологию на некоторых сайтах, в основном на персональных сайтах или в индивидуальных блогах. В 2010-211 гг. было небольшое снижение в этой тенденции, но за последние месяцы направление возродилось.
Если ваш сайт не имеет обширного меню навигации, то вам нужно отобразить лишь несколько ссылок. Так почему бы их не сделать видимыми все время? Это увеличит производительность сайта и с легкостью позволит внедрить меню сайта в общий макет страницы. В общем, меню можно оставлять на одном и том же не зависимо от скроллинга страницы.


jQuery позволяет очень быстро достичь этого эффекта. Хотя это можно сделать и с помощью CSS. Большинство статичных навигационных меню в 2011 году следовали за навигацией пользователя от страницы к странице. И все же в новом примере Саймон Уитс (Simon Wuyts) вывел фиксированное навигационное меню на новый уровень.


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

3. Круги

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


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


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

4. Векторная графика.

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


За примером далеко ходить не надо — на сайте MozillaFirefox можно увидеть маскотов, и это только верхушка айсберга. Ещё один великолепный пример — MailChimp. Обезьяна-почтальон преследует вас по всему сайту, и даже в приложениях iOS и Android.


А вот другой сайт с персонажем — Freelanceswitch. Этого маленького учёного на сайте можно найти множество раз, причём в самых разных вариациях. Этот тренд выделяет совершенно новое направление эстетики при создании сайта. И, если 2011 год показал нам хотябы что-то, то 2012 год будет полон этих весёлых векторных логотипов.

5. Многоколоночные меню.

Бывает, что сайт содержит огромное количество ссылок. Как следствие, стандартный тип навигации становится перегруженным ссылками. Поэтому наверху страницы располагайте ключевые ссылки.


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


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

6. jQuery/CSS3/HTML5-анимация.

Старайтесь не использовать jQuery-эффекты в больших количествах. Веб- дизайн должен охватывать пользовательский опыт, эстетику и дополнять всё это анимацией. К счастью, прогресс библиотеки jQuery, а также CSS3 позволяют делать это, не перегружая кодом страницу.
jQuery прекрасен в разработке эффектов интерфейса браузеров, но, к сожалению, похвастаться 100% поддержкой. Но если использовать резервный вариант с CSS, вы обеспечите универсальность сайта.

7. Графические ленты и баннеры.

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


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

Смотрите также Тренды в веб-дизайне: ленты и значки

8. Произвольные шрифты

Бесплатная онлайн-библиотека шрифтов Typekit предоставляет бесплатную пробную версию любому заинтересованному веб-дизайнеру. С помощью этого инструмента вы добавите JavaScript, который позволит вам использовать почти любой пользовательский шрифт в CSS-шаблон. В 2011 году популярность этого тренда росла, особенно среди дизайнеров на WordPress, которые пытались подчеркнуть индивидуальность шаблонов.
Раньше у Typekit не было нормальной поддержки и было довольно много багов. Сейчас им помогли в GoogleWebFonts, что сделало их очень популярными. Вы просто подбираете понравившийся шрифт и получаете код, который вам нужно подключить. Затем просто ссылаетесь на нужный шрифт в свойстве CSS font-family.


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

9. Инфографика.

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


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

10. Акцент на простоте.

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

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

Заключение.

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

via

Читателям также нравится:

Обратите внимание!

Запущена новая версия сообщества для творческих людей — TopCreator, которое мой блог всячески поддерживает. Мы верим, что проект нужен российским дизайнерам, иллюстраторам и фотографам — мы хотимы быть вам полезны! Очень интересный проект, будьте среди первых. Заходите сюда

Комментарии

  1. 19 Дек
    Sintel

    спасибо за хорошую статью

  2. 19 Дек
    naikom

    Всегда пожалуйста

  3. 19 Дек
    Макс

    Отличная статья! Большое спасибо =)

  4. 20 Дек
    Даня

    Информативно ! Спасибо !

  5. 08 Янв
    MyArt

    Выражаю благодарность за проделанную Вами роботу!

  6. 08 Янв
    naikom

    Спасибо)

  7. 10 Янв
    Juli

    http://webdesignledger.com/tips/web-design-trends-in-2012

  8. 10 Янв
    naikom

    )) Вы, наверное, удивитесь, но ссылка на источник указана в конце статьи)

  9. 19 Янв
    gege

    Оо, благодарю за интереснейшую статью!
    Всегда читаю ваши труды с бесконечным удовольствием)

  10. 19 Янв
    naikom

    Спасибо, для таких читателей как вы, приятно стараться!

  11. 12 Фев
    Коля infoboss

    Михаил, ты великолепный человек

  12. 12 Фев
    naikom

    Спасибо) Очень приятно

  13. 19 Апр
    Павел

    Реально классный блог) Весь день читал, много нового почерпнул. Спасибо!

Оставить комментарий:

Anti-Spam Protection by WP-SpamFree


  • Kevin Durant Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Nike Lebron James Shoes
  • Derrick Rose Shoes
  • D Rose Shoes
  • KD 7 Shoes
  • Kobe X Shoes
  • Kobe 10 Shoes
  • KD 7
  • Kevin Durant Shoes
  • KD Shoes
  • Nike KD Shoes
  • Kobe 10 Shoes
  • Discount Kobe Shoes
  • Kobe Shoes
  • Kobe Bryant Shoes
  • KD 7 Shoes
  • Kyrie Irving Shoes
  • Lebron 12
  • Lebron James Shoes
  • Lebron Shoes
  • Nike Free
  • Nike Free Run
  • Air Max Shoes
  • Cheap Air Max Shoes
  • Lebron James Jersey
  • Kobe Bryant Jersey
  • Kevin Durant Jersey
  • Air Jordan Shoes
  • Michael Jordan Jersey
  • Blake Griffin Shoes
  • Russell Westbrook Shoes
  • Rose Shoes
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Shoes
  • Kyrie 1 Shoes
  • Nike Free 5.0
  • Nike Free 5
  • kevin durant shoes
  • kd 7
  • kd new shoes
  • KD Shoes
  • Kyrie 1
  • Jeremy Scott shoes
  • Jeremy Scott Adidas
  • Tenis Adidas Springblade
  • Kevin Durant Shoes
  • Kobe Bryant Shoes
  • KD Shoes Store
  • KD Sneakers
  • Lebron Basketball Shoes
  • Adidas Porsche Design
  • kd shoes
  • Cheap Herve Leger Dress
  • Cheap Lebron Shoes
  • Adidas Porsche Design
  • Lebron James Shoes
  • Coach Retail Store
  • nba jerseys
  • louis vuitton handbags
  • Cheap Lebron 11
  • Kobe Bryant Shoes
  • Kevin Durant Shoes
  • louis vuitton belts
  • kobe shoes
  • Lebron James Shoes
  • Kevin Durant Shoes
  • Los Angeles Clippers Jerseys
  • Toronto Raptors Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • KD Shoes
  • Lebron James Shoes
  • KD 7
  • Westbrook Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Air Max Shoes
  • kobe bryant shoes
  • Derrick Rose Shoes
  • Rose Shoes
  • KD 7
  • Kobe X
  • Kobe 10
  • Lebron Shoes 12
  • kyrie irving shoes
  • Nike KD Shoes
  • Cheap Nike Free
  • Nike Free
  • Lebron 12 Shoes
  • Cheap Air Max
  • Cheap Lebron Jerseys
  • Kobe Bryant Jerseys
  • Kevin Durant Jersey
  • Kobe Shoes
  • Griffin Shoes
  • Michael Jordan Jerseys
  • Kobe Jerseys
  • Lebron Jerseys
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Cheap Supra Shoes
  • Supra Shoes
  • Nike Kyrie 1
  • Nike Free Shoes
  • Nike Free Run
  • KD shoes
  • Kyrie 1 Shoes
  • Kevin Durant Shoes
  • Jeremy Scott Wings
  • Jeremy Scott Shoes
  • Lebron James Shoes
  • Adidas Porsche Design
  • Kobe Shoes
  • Cheap Kevin Durant Shoes
  • Kevin Durant Shoes
  • Lebron 11
  • Porsche Design Adidas
  • Cheap KD Shoes
  • Lerbon James Sneakers
  • Cheap KD Shoes
  • Herve Leger Dress
  • Lebron Shoes
  • Porsche Design Shoes
  • Lebron Shoes
  • Nike Shoes
  • Cheap Coach Bags
  • louis vuitton purses
  • cheap nba jerseys
  • Lebron James Shoes
  • Cheap Kobe Shoes
  • Kobe Shoes
  • KD Shoes
  • KD Shoes
  • Sacramento Kings Jerseys
  • Washington Wizards Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Lebron 11
  • Kobe Shoes
  • cheap kobe shoes
  • lebron 12 shoes
  • James Shoes
  • Lebron Shoes
  • Rose Shoes
  • Derrick Rose Shoes
  • Kobe 9
  • NIke KD
  • KD VII
  • KD Shoes 2015
  • kyrie shoes
  • Air Max 90
  • Air Max Shoes Sale
  • Nike Free Shoes
  • Nike Free Run 2
  • Lebron 12
  • Lebron Jerseys For Sale
  • Cheap Kobe Jerseys
  • KD Jersey
  • Jordan Jersey
  • Jordan Griffin Shoes
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Footwear
  • Supra Shoes
  • KD Shoes
  • Kyrie irving Shoes
  • Nike Free Run Shoes
  • nike free run 5.0 women
  • KD Shoes
  • Kyrie Irving Shoes
  • Kevin Durant Shoes
  • KD Shoes
  • Kobe Shoes
  • Kobe Shoes
  • Adidas Wings
  • Kobe Bryant Shoes
  • Porsche Design Adidas
  • Cheap Kobe Shoes
  • KD 6
  • Cheap Westbrook Shoes
  • Kevin Durant Shoes
  • Adidas Porsche Shoes
  • Cheap Lebron James Shoes
  • Kevin Durant Shoes
  • Herve Leger Outlet
  • Lebron James Shoes
  • Adidas Porsche Design Bounce
  • Nike Lebron Shoes
  • Coach Outlet
  • nba jerseys for sale
  • louis vuitton bags
  • Air Jordan 29
  • Nike Lebron Shoes
  • Nike Kobe Shoes
  • Cheap Kobe Shoes
  • Cheap KD Shoes
  • KD 6
  • Utah Jazz Jerseys
  • Philadelphia 76ers Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron New Shoes
  • James Shoes
  • Cheap Lebron 11
  • Lebron James Shoes
  • KD 7
  • Adidas Rose Shoes
  • Rose 5
  • NIke KD 7
  • irving shoes
  • KD Shoes
  • Kobe 9
  • Air Max 95
  • Air Max 2014
  • Nike Free 3.0
  • Nike Free Run 3
  • lebron shoes for sale
  • kobe 2014
  • Cheap Lebron James Shoes
  • Kobe Jerseys
  • Kevin Durant Jerseys
  • Jordan Jerseys
  • Cheap Griffin Shoes
  • Jordan Westbrook Shoes
  • Kobe Jersey
  • Lebron Jersey
  • Supra Online
  • Supra Shoes
  • Kyrie 1
  • Irving Shoes
  • Kyrie Shoes
  • Nike Kyrie 1
  • KD Shoes 2015
  • Kobe Shoes 2015
  • Kobe Shoes 2015
  • Kevin Durant Shoes
  • Nike KD Shoes
  • Nike Kobe Shoes
  • Nike Kobe Shoes
  • Adidas Jeremy Scott
  • Adidas Jeremy Scott
  • KD Shoes
  • Adidas Springblade Shoes
  • Kevin Durant Shoes
  • nba jerseys 2015
  • Porsche Design Shoes
  • KD 6
  • KD Shoes Sale
  • Lebron James Shoes
  • Lebron James Shoes
  • Cheap KD Basketball Shoes
  • Herve Leger Bandage Dress
  • Adidas Porsche Bounce Shoes
  • Cheap Lebron Shoes
  • Cheap Coach Handbags
  • Louis Vuitton Bags Women
  • louis vuitton outlet
  • Kobe Shoes
  • Cheap Jordan Shoes
  • Lebron Shoes
  • Lebron Shoes Sale
  • Kobe Shoes Sale
  • Kobe Bryant Shoes
  • Lebron James Shoes
  • KD 6 Shoes
  • Boston Celtics Jerseys
  • New Orleans Pelicans Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Cheap Lebron Shoes
  • Lebron Basketball Shoes
  • Cheap Lebron Shoes
  • D Rose Shoes
  • Rose 5.0
  • KD Shoes
  • kyrie irving shoes
  • Nike Air Max Shoes
  • Nike Air Max
  • Nike Free 5.0
  • Nike Free Womens
  • nike lebron 12
  • kobe shoes 2014
  • Cheap Lebron Shoes
  • KD 7 EP
  • KD 2014
  • Kevin Durant Shoes
  • Lebron Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • KD Jerseys
  • Cheap Jordan Jerseys
  • Hyperdunk Griffin Shoes
  • Westbrook Shoes 2015
  • Nike Kobe Jersey
  • Lebron Jersey For Sale
  • Nike Supra
  • Supra Shoes
  • Kyrie 1
  • nike free run 5.0 women
  • nike free run women
  • Cheap Kyrie 1
  • Cheap Kyrie Shoes
  • Kyrie Shoes 2015
  • Adidas Shoes
  • Lebron Shoes
  • Porsche Design Shoes
  • Kobe 8
  • KD Shoes
  • Cheap Kevin Durant Shoes
  • Lebron Shoes
  • nba jerseys 2014
  • kd Shoes nba
  • Herve Leger Bandage Dress
  • Nike Lebron 11
  • louis vuitton sale
  • Kobe Bryant Shoes
  • Air Jordan Shoes
  • Cheap Lebron James Shoes
  • Kobe Shoes Sale
  • Lebron Shoes
  • Miami Heat Jerseys
  • Los Angeles Lakers Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Westbrook Shoes Sale
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron James Shoes
  • Lebron James Shoes Sale
  • Lebron James Jerseys
  • Cheap Rose Shoes
  • Rose 5 Shoes
  • Nike Free 6.0
  • Nike Free Sale
  • Kyrie Shoes Sale
  • KD Shoes
  • Air Max 2014
  • Air Max 90
  • cheap lebron shoes
  • lebron shoes
  • Lebron James Jersey
  • Lebron Shoes
  • Cheap KD Jerseys
  • Kevin Durant Jersey For Sale
  • Kobe Shoes
  • Jordan Jersey sale
  • Jordan Blake Griffin Shoes
  • Russell Westbrook Shoes Sale
  • official supra shoes
  • Porsche Design Shoes
  • Cheap Jeremy Scott Wings
  • Kobe Shoes sale
  • Lebron Shoes
  • Herve Leger Sale
  • nba jerseys sale
  • Coach Wallets
  • cheap louis vuitton handbags
  • Air Jordan
  • Nike Lebron Shoes Sale
  • Kobe 9
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • nike free run 5.0 men
  • nike free shoes on sale
  • Supra Shoes
  • LV Handbags Men
  • Kevin Durant Shoes
  • KD VI
  • Adidas Shoes
  • San Antonio Spurs Jerseys
  • Chicago Bulls Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Kevin Durant Shoes
  • Lebron Shoes Sale
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron James Shoes
  • Rose New Shoes
  • Rose Shoes 2015
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron Jerseys sale
  • Nike kyrie shoes
  • Adidas Derrick Rose
  • Adidas Store
  • Adidas Shoes
  • Adidas Derrick Rose
  • lebron james shoes
  • Nike Kyrie Shoes
  • Kyrie irving Shoes For Sale
  • Lebron James Jersey
  • Kobe Bryant Jerseys
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • Supra Shoes
  • Russell Westbrook Shoes
  • Kobe Jersey Sale
  • Cleveland Cavaliers Lebron Jersey
  • OKC Jersey
  • Nike Lebron Shoes
  • Lebron James Basketball Shoes
  • Kevin Durant Shoes
  • Herve Leger Bandage
  • Griffin Shoes Sale
  • nba jerseys store
  • Lebron Shoes 2014
  • cheap louis vuitton bags
  • Cheap Kobe Jersey
  • Lebron Jersey 23
  • Jordan Shoes
  • official nba jerseys
  • NBA Stars Basketball Shoes
  • KD Shoes
  • Air Max Shoes 90
  • Air Max 95
  • KD 2014 Shoes
  • KD For Sale
  • Nike Shoes
  • Nike Free
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • Phoenix Suns Jerseys
  • Customized NBA Jerseys
  • Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Bulls Jordan Jersey
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1