Современные веб-сайты должны постоянно реагировать на изменения в технической и визуальной части ведущих веб-проектов, поэтому не секрет, что многие сайты стараются взять что-то наиболее удачное от других сайтов. Именно таким образом рождаются тенденции, которые и закладывают основу для создания будущих веб-страниц.
Как ни странно, но в текущем году большинство тенденций в веб-дизайне обусловлено стремительным развитием рынка мобильных технологий: смартфонов и планшетов. О некоторых из современных трендах подробнее.
Responsive Web Design
В связи с наличием огромного числа различных устройств всевозможных форматов разработчик заранее должен быть уверен, что на всех этих устройствах его сайт выглядит одинаково хорошо, а все его функциональные возможности сохранены. Ранее для решения этой проблемы создавалась отдельная версия сайта для мобильных устройств, что влекло за собой дополнительные затраты. Теперь же с приходом технологии CSS3 появился современный подход - адаптивная верстка. Суть его заключается в том, что в зависимости от размеров экрана устройства применяется отдельное правило CSS, и каждый элемент может выглядеть по-разному на других устройствах.
Еще совсем недавно такой подход был весьма спорным, однако недалек тот день, когда создание адаптивного веб-сайта будет считаться обязательным. При проектировании адаптированного шаблона нужно уделить время на тщательное планирование и тестирование, так ка даже маленькая ошибка в коде может привести к неработоспособности проекта.
Минимализм
Самым популярным трендом в дизайне в настоящее время является минимализм. Многие крупные порталы заново верстают свои шаблоны, уже с упором на минималистичный стиль. Такой сайт содержит в себе чистые цвета и линии. Все реже используются закругления в блоках, однако при этом все чаще используются большие круги, например, для отображения пользовательских аватаров или навигации. С выходом новых мобильных ОС от Microsoft в области веб-дизайна появилось целое направление – Metro UI. Квадратные блоки удобно представляют информацию и при этом полностью соответствуют принципам минимализма.
Вертикальная прокрутка контента
Опять же благодаря мобильным устройствам, на которых удобнее просматривать контент, расположенный именно по вертикали, данный тип расположения информации плавно перекочевал и на большие сайты. Более того, благодаря анимационным возможностям CSS3, HTML5 и jQuery появилась возможность неравномерного перемещения по вертикали отдельных элементов, что придает контенту эффект 3D (данный эффект называется «параллакс-эффект»).
Сюда же можно отнести еще одно направление – бесконечный скроллинг. Оно с успехом применяется на тех сайтах, где содержимого достаточно много, чтобы его можно было выводить практически постоянно. Обычно часть информации загружается в момента загрузки содержимого, но чем ниже по странице опускается пользователь, тем больше информации автоматически загружается ниже. Такой эффект чаще всего используется в социальных сетях, где количество записей очень велико (например, Twitter, Facebook, Instagram и др.)
Fixed position UI
Если страница достаточно велика для вертикальной прокрутки, а после просмотра необходимой информации нужно перейти на другую страницу с помощью меню, то необходимо пользоваться колесом мыши либо полосой прокрутки, либо ведением пальца по экрану. Многие сайты предложили достаточно удобное решение – кнопка возврата наверх страницы. Однако, намного более удобное решение – фиксированное меню. Оно позволяет воспользоваться навигацией сайта из любого места страницы. Это особенно удобно для страниц с очень большим количеством контента.
Фото вместо фона
В последнее время популярным решением для создания впечатляющего «эффекта присутствия» является использование больших изображений в качестве фона страницы. Использование фото вместо фона практикуется уже довольно давно. Но только сейчас, с использованием технологий CSS3, анимации, высокой скорости соединения и минималистичным дизайном эта технология стала действительно востребованной. Использование картинки оказывает сильное влияние на посетителя. А сама картинка становится центральным звеном в дизайне, вокруг которого уже и строятся все остальные элементы. Часто большие фотографии используют для больших слайдеров на главной странице. Они привлекают внимание пользователей, а сайт становится более эффектным.
Декоративная типографика
Благодаря возможностям CSS3 и таким сервисам, как Google Fonts, время, когда на сайте присутствовали лишь Arial и Tahoma ушли в небытие. Теперь текст на сайте может иметь не только смысловую нагрузку, но и стать настоящим украшением сайта, стать его изюминкой.
Авторизация через социальные службы
Проходить регистрацию на сайте – одно из самых нелюбимых занятий пользователя. Потому очень удобно, когда вместо ненужной регистрации с заполнением кучи полей, подтверждением адреса электронной почты, достаточно нажать на кнопку Login with Facebook. Несколько мгновений – и ты уже полноправный пользователь сайта. При этом вся информация о пользователе берется из его аккаунта в социальной сети, а необходимости запоминать имя пользователя и пароль не требуется.
Большие элементы интерфейса
Опять же, благодаря мобильным устройствам в тенденциях современного веб-дизайна прослеживается необходимость создавать крупные элементы интерфейса на странице. Функциональные кнопки обычно делают больше по размерам, так как это будет удобно для касания на смартфонах и планшетах. А заголовки делают заметнее, чтобы даже без зума на маленьком экране они были хорошо читаемы.
Отказ от Flash
Ввиду невозможности поддержки современными мобильными устройствами технологиии Flash (iOS, Android 4+), а также вытеснением современными стандартами в виде CSS3 и HTML5, технология Flash по-настоящему приходит в упадок. Возможно, уже в ближайшее время Flash будет использоваться только на специальных промо-сайтах.
Эмоциональный веб-дизайн
Главная задача эмоционального веб-дизайна – вызвать положительный отклик у пользователя. Позитивные эмоции перерастают в положительное мнение, а дальше в желание использовать ваш продукт в будущем. Обычно это достигается самыми простыми элементами (фразы, изображения эмоций, фотографии), без которых сайт будет функционировать в полную силу. Использование таких приемов часто приводит к тому, что люди по своему собственному желанию рассказывают о продукте своим друзьями и знакомыми. Такой метод взаимодействия с пользователем и называется «эмоциональный дизайн».