Всем привет!
Хотел бы поделиться с Вами наиболее полной информацией о тенденциях и направлениях веб-дизайна уже в нынешнем 2013 году.
Хабрахабр, 22 января 2013
25 основных трендов веб-дизайна в 2013 году по версии DesigNonstop
Присутствие достаточно многих трендов обусловлено стремительным и массовым развитием мобильного интернета.
Минимализм
За последние полгода это направление стало очень популярным среди дизайнеров, особенно в дизайне сайтов-визиток. Суть этого тренда заключается в простоте элементов, но в тоже время функциональном интерфейсе. В минимализме часто используются черно-белые тона, углы без скруглений (в большинстве случаев), чтобы показать точность стиля. Здесь можно использовать минимум картинок, но зато наложить побольше различных эффектов. Для разработки идеально подходит всем известный Bootstrap.
Адаптивный дизайн
Куда же без него! В прошлом году, когда многие разработчики и дизайнеры только начинали изучать эту технологию, а многие и вовсе не знали что это, один известный front-end разработчик сказал:
«Я верю в тот день, когда прекратятся разговоры об адаптивном дизайне, и не потому что он исчезнет, а потому что он станет самим собой разумеющимся»
И этот день уже близок. С каждым днем сайтов с адаптивным дизайном как и мобильных устройств становится все больше и больше. Но пока эта технология остается в тренде.
Фиксированное меню
Использование position: fixed; для навигационного меню или sidebar стало хорошей традицией, особенно для сайтов с адаптивным дизайном, т.к. теперь по сайту стало передвигаться намного удобнее, к тому же это довольно стильно смотрится. Плюс отпала надобность в кнопке «подняться наверх».
CSS3 фильтры
Только на Хабре эта тема за последние несколько месяцев обсуждалась раз 10, не говоря о мировом сообществе, поэтому эту технологию с уверенностью можно назвать трендом этого года. Но, к сожалению, на сегодняшний день эту фишку поддерживают только webkit браузеры, поэтому будем надеяться, что в этом году она получит более широкую поддержку.
CSS3 анимация
С помощью свойства transition и transform теперь дизайнерам можно с легкостью делать классные эффекты, которые раньше можно было сделать только с использованием JS. В 2012 году данная технология получила большую поддержку среди разработчиков и дизайнеров, поэтому она безусловно относится к трендам этого года.
Фото как background для сайта
Эта тенденция как и адаптивный дизайн не является новой, но в последнее время ее все чаще можно увидеть на сайтах-портфолио различных студий. Данная техника также подойдет для сайтов автосалонов, туристических фирм, модельных агентств и т.д. Такой прием очень притягивает внимание пользователей, а так же дает возможность дизайнеру экспериментировать над макетом сайта.
Нестандартная геометрия
Мы привыкли видеть стандартное построение элементов интерфейса, но такие сайты ломают эту традицию и удивляют своим креативом. Довольно интересный подход! Мне кажется, стоит обратить на него внимание.
Дизайнерская типографика
Благодаря обилию web и иконочных шрифтов теперь можно создавать интересные эффекты, например, 3D текст или кнопку в виде букв. Кстати, в последнее время на многих сайтах появились большие заголовки, возможно это станет новым трендом.
Заключение
Идти в ногу со временем, это конечно хорошо, но помните, что тренды приходят и уходят, и это всего лишь рекомендации для реализации Ваших идей. Главное, следуйте своему стилю и подаче, и только тогда Ваш дизайн всегда будет интересен публике.
Итак, настало время разобраться, какие тренды веб-дизайна будут востребованы в 2013 году. Сразу, на вскидку могу сказать, что тон везде будет задавать адаптивный или реагирующий веб-дизайн. Вообще, присутствие достаточно многих трендов обусловлено стремительным и массовым развитием мобильного интернета. Еще один устойчивый тренд — это использование HTML5, CSS3 и jQuery технологий для создания необычных эффектов оформления. Среди основных фаворитов вертикальная и параллакс прокрутка. Из года в год держат марку минимализм, текстурный дизайн и затейливая типографика сайта.
Тотальное распространение всевозможных мобильных гаджетов и прочих смартфонов, планшетов и нетбуков с разными разрешениями экранов заставляют современного веб-дизайнера позаботиться о том, чтобы сайт правильно смотрелся на любом экране. Для этого прописывается несколько стилей, которые применяются в зависимости от применяемого устройства, и внешний вид сайта адаптируется под разрешение, при этом не теряя своей функциональности.
Очень эффектный тренд, при котором осуществляется постраничная вертикальная прокрутка содержимого сайта. Опять-таки, здесь тон задает распространение мобильных устройств, на которых вертикальный скроллинг является наиболее удобным способом просмотра содержимого сайта.
Параллакс эффект достигается за счет того, что при прокрутке содержимого сайта разные элементы дизайна движутся с разной скоростью относительно друг друга. Поэтому возникает эффект трехмерности. А в сочетании с вертикальным скроллингом получаются очень и очень интересные решения.
Очень распространенный тренд на сегодняшний день. Дизайнеры с удовольствием используют большую фотографию на заднем фоне. Это всегда необыкновенно сильно воздействует на зрителя. А сама картинка становится главным действующим лицом, вокруг которого выстраиваются все остальные элементы дизайна.
Типографика все больше становится важной частью любого проекта. Шрифты несут не только смысловую нагрузку, но и при грамотном и креативном использовании становятся настоящим украшением сайта.
Еще одно веяние распространения мобильного интернета. Для комфортного просмотра сайта на мобильных устройствах необходимо, чтобы функциональные кнопки были достаточно крупного размера.
В минувшем году многие сайты частенько использовали большие слайдеры с эффектными фотографиями. Думаю, эта тенденция сохранится и в наступившем году. Поскольку, однозначно, смена крупных картинок на широком экране монитора смотрится впечатляюще.
Бесконечная вертикальная прокрутка достаточно далеко может увести пользователя от основного меню навигации. Для того, чтобы каждый раз не возвращаться наверх используются закрепленные элементы, когда меню всегда остается в верху экрана.
Большинство современных сайтов благодаря технологии HTML5, CSS3 и jQuery стало очень интересно разглядывать и изучать, открывая все новые и новые динамические эффекты анимации при наведении мышкой или прокрутке.
Если раньше одностраничные сайты делались на Flash технологии, то сейчас с помощью HTML5, CSS3 и jQuery можно сделать динамически скомпонованный одностраничный сайт. Когда, например, при нажатии на пункт меню происходит плавный скроллинг в нужное место сайта.
Минмимализм по-прежнему не уступает своих позиций. Сайты, сделанные по принципу простоты, ясности и минимального количества оформительских элементов, в настоящее время пользуются большой популярностью.
Оформление сайтов в виде динамической сетки из блоков разного размера с картинками и различной дополнительной информацией, а также с лаконичным хедером и удобной навигацией — еще один популярный тренд веб-дизайна.
В минувшем году появилось достаточно много сайтов, использующих в своем дизайне нестандартную геометрию. Это косые или изломанные линии, сделанные с помощью HTML5 и CSS3 технологий или различные блоки в виде относительно несложных геометрических фигур.
В современном дизайне используется прием, при котором при наведении на обычный пункт меню всплывает удобное мега меню в виде выпадающего списка. Особенно это характерно для магазинов. Как правило пункты выпадающего меню более детальны и зачастую снабжены картинками и дополнительной информацией.
Не знаю, как вы, но я не в восторге от этого тренда. Конечно, в поведенческом плане, когда посетитель бесконечно долго остается на сайте, это может быть и хорошо. Но иногда просто невозможно остановится, это выматывает и приходится практически волевым усилием закрывать ленту Вконтакта, Твиттера или Фейсбука.
Еще один не самый любимый мой тренд. В какое то время я заметила, что некоторые крупные сайты стали использовать такой способ представления информации. Есть подозрение, что это удобно для маркетинговых целей, когда визуальная реклама больше времени остается в поле зрения и внимания пользователя.
Очень удобный тренд. Для того, чтобы войти на сайт с помощью классического метода, надо помнить логин и пароль. В ситуации с постоянно открытыми страничками в социальных сетях, все значительно упрощается. Достаточно лишь нажать соответствующую кнопку и вы уже авторизованы на нужном сайте.
По этой же причине комментарии из соцсетей весьма удобны. По опыту ведения блога DesigNonstop.com могу сказать, что за последний год комментарии вообще очень сильно сместились в сторону социальных сетей.
Западные эксперты ожидают, что в наступившем году дизайнеры будут больше фокусироваться на бренде, с характерными бизнес-логотипами, цветовыми схемами и прочей визуализацией компании, а не просто делать красивый сайт.
Выход мобильной ОС Windows Phone 7 и в дальнейшем флагманского пакета Windows 8 задал новый тренд в веб-дизайне. Его отличительной особенностью является минимализм и характерная визуализация информации с помощью разноцветных и равномерных квадратов навигации.
Текстурный дизайн также удержит свои позиции в нынешнем году. Присутствие текстур будет минимально и ненавязчиво. Они будут гармоничным дополнением всего дизайна, придавая сайту едва ощутимую тактильность.
Видео все успешнее завоевывает свои позиции в веб-дизайне с помощью новых форм и приемов. Так, стало обычным делом использовать видео в слайдерах, или же, например, использовать небольшой фрагмент видео во всплывающей подсказке.
Визуализация информации в виде инфографики стала уже доброй традицией. В этом году этот тренд также продолжит свое успешное существование, заставляя дизайнеров и художников придумывать все новые способы представления контента.
Современные технологии позволяют абсолютно по-разному оформлять различные разделы сайта. Например, для улучшения восприятия можно сделать кастомный дизайн для отдельных страниц или категорий сайта.
Это пугающее, на первый взгляд, слово на самом деле означает оформление мобильных пользовательских интерфейсов в виде различных реалистичных объектов и текстур из повседневной офлайновой жизни. Например, заметки в виде обычного блокнота, или музыкальный проигрыватель в виде кассетника.
