Тенденции в сайтостроении. Большие и красивые имиджи. Призыв к действию, доступный в любой момент

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

Часть указанных сайтов и ресурсов используется в работе дизайнера ежедневно, другие - не чаще раза в неделю. С их помощью можно оставаться в тренде новостей веб-дизайна всего за 30-60 минут в день!

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

Вдохновение

Awwwards

Первый сайт из списка "места, куда следует приходить за вдохновением". Именно здесь Кристофер ищет новые идеи.

Muzli

Плагин для Google Chrome Muz.li заменяет домашнюю страницу браузера на агрегатор дизайнерских идей, куда попадают примеры с нескольких источников. В частности, плагин подключен к Awwwards.

One Page Love

Если вам нравится минимализм и одностраничники, то One Page Love подарит вам немало удивительных примеров дизайна.

Бесплатные изображения

Freepik

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

Freebiesbug

Freebiesbug раздает тысячи бесплатных PSD-макетов и других полезных в веб-дизайне ресурсов.

Graphic Burger

На Graphic Burger можно найти ежедневную подборку коллекций бесплатных иконок, фотографий, инсценировок и других графических полезностей.

Палитра

Color.

При помощи Color. можно легко собирать и сохранять комбинации цветов. Движения назад и вперед регулируют HUE, вверх и вниз - яркость, колесико - насыщенность.

Pltts

Коллекция часто используемых палитр от Pltts может вызвать самые удивительные ассоциации. Думаю, сегодня я выберу Wasabi Suicide.

Adobe Color CC

Комбинатор палитр Adobe Color CC , переименованный из Adobe Kuler в нечто более осмысленное. Вместе с ребрендингом он получил мощное "колесо цветов", поэтому грех жаловаться.

Мобильные устройства

Pttrns

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

Так, например, выглядят калькуляторы под iOS8.

WTF Mobile Web

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

Если вы попали сюда, надеюсь, Google забудет о вашем существовании.

Capptivate

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

"Просмотр кода элемента" – проверка на поддержку мобильными устройствами

Этот инструмент Кристофер обнаружил совсем недавно, хотя он присутствует в Google Chrome с конца 2013 года. Достаточно щелкнуть правой кнопкой по содержимому страницы и выбрать последний пункт "просмотр кода элемента", либо нажать комбинацию Ctrl+Shift+C. На появившейся панели скраю четко будет видна пиктограмма мобильного устройства, в котором можно выбрать симуляцию любого интересующего вас аппарата.

Econsultancy’s Mobile Web Design Best Practice Guide

Если вы подписаны на Econsultancy, то не помешает скачать книгу с описанием лучших практик мобильного дизайна . 200 страниц чистого знания!

Правила хорошего мобильного приложения от Google

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

Взаимодействие с пользователем

Hover States

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

Little Big Details

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

UXPin

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

Сообщество

Behance

Dribbble

По сути, Dribbble - это сервис "покажи и расскажи" для дизайнеров, на котором можно получить качественные отзывы о своей работе.

Чтиво

Smashing Magazine

На Smashing Magazine публикуют полезные статьи по дизайну и коду, руководства по созданию пользовательских интерфейсов и по работе с Wordpress. Обновляется ежедневно.

Designer News

Что-то вроде Hacker News, но для дизайнеров. На Designer News сообщество профессиональных дизайнеров делится интересными ссылками и собственным опытом с другими.

User Testing Blog

Заглянув на , можно найти огромную коллекцию статей об адаптивном дизайне, которые ответят на все вопросы о мобильной поддержке.

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

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

Что же приготовил нам следующий год? Вывести основные тренды попыталась команда awwwards.com ..

Предупрежу сразу, что ожидать какой-то революции не стоит. Основные тенденции, которые задавали тон в 2015 году, будут продолжать господствовать.

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

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

Распространение UI шаблонов

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

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

Вот несколько моделей, с которыми вы должны быть знакомы:

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

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

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

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

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

Как видим, все те тенденции, которые мы могли наблюдать в течение прошлого года, остаются актуальными.

Богатая анимация

Анимация используется все больше и больше, и делает пользовательский опыт более интерактивным и интересным.

Тем не менее, вы не можете просто применять ее в любом месте, где вам вздумается. Анимация должна служить определенным целям, а не просто быть украшением.

Анимацию можно рассматривать с точки зрения двух групп:

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

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

Мы опишем 7 самых популярных методов анимации:

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

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

- навигация и меню (НЕ скроллинг).

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

- hover-анимации широко используются для создания обратной связи при наведении курсора мыши на объект.

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

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

- прокрутка . Гладкая прокрутка зависит от анимации и дает дополнительный контроль для пользователя, который может определить темп, с которым разворачивается содержимое сайта.

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

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

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

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

Материальный дизайн: богатая альтернатива плоскому дизайну

Целью материального дизайна является создание чистого, модернистский дизайна, который сосредоточится на UX.

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

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

Отзывчивый дизайн

Отзывчивый веб-дизайн стал невероятно популярным в последние годы, благодаря росту использования мобильного Интернета.

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

Отзывчивый веб-дизайн отлично сотрудничает с карточными и плоскими конструкциями.

Плоский дизайн никуда не уходит

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

Забегая вперед, можно предположить, что вполне вероятно, мы увидим следующие тенденции в плоской конструкции в 2016 году. На первый план выходят:

Длинные тени. Они приносят больше глубины плоским конструкциям.

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

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

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

Минимализм позволяет создать лаконичный интерфейс и избавиться от всего лишнего.

Вместо итогов

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

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

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

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

Скевоморфизм

Долгое время Скевоморфизм был основным направлением в дизайне. Итак, что же такое Скевоморфизм? Точный термин из Википедии гласит: ”Скевоморфи́зм - физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами.” Проще говоря - это имитация одной поверхности или объекта с помощью другого.

Все это можно было отнести к web дизайну и мобильным интерфейсам.

В web дизайне у Скевоморфизма был ряд преимуществ.

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

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

3. Общая визуальная красота. Каждая кнопка и элемент интерфейса выглядели как произведение искусства. В свое время создание одной кнопочки или иконки по деньгам приравнивалось к созданию сайта.

Но эволюция не стоит на месте и приходит новый тренд.

FLAT

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

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

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

Баухаус

Нет, это не название паба в Германии. Это высшая школа строительства и художественного конструирования. Учебное заведение, существовавшее в Германии с 1919 по 1933 годы, а также художественное объединение, возникшее в рамках этого заведения.

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

Международный типографический стиль

Швейцарский стиль, как его еще называют. Разрабатывался и использовался в Швейцарии в 1950 годах. Особое внимание было уделено достижению аккуратности набора, удобочитаемости и беспристрастности.

Совокупность этих направлений и подарила нам Flat -  чистый, легкий, лишенный глубоких и объемных теней, дизайн.

Еще немножечко истории

Теперь давайте рассмотрим, что же было крутым и трендовым пару лет назад:

1. Long shadows (Длинные тени)

В 2013–14 годах начинается рассвет длинных теней. Основное их использование - это иконки, иллюстрации и заголовки.

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

2. Яркие цвета, как акценты

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

3. Простая типографика

Типографика становится более удобной, четкой и простой для чтения. Все сводится к единой строке по всей ширине.

4. Призрачная кнопка

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

А теперь давайте рассмотрим, что же будет актуально в ближайшем будущем.

Flat дизайн будет развиваться и эволюционировать, включать в себя все больше и больше новых элементов. Давайте рассмотрим основные плюсы и минусы Flat дизайна.
Основные плюсы таковы:

1. Flat совместим с Responsive дизайном. Пользователю легче пользоваться приложением или просматривать сайт на различных девайсах.
2. Flat легкий по структуре и навигации для пользователей. За счет своей простоты, пользователю легче ориентироваться в навигации по сайту.
3. Flat имеет быстрое время загрузки. За счет своей простоты и отсутствия сложных фотореалистичных элементов, сайт и приложения быстро загружаются.
4. Простая типографика во Flat способствует легкой читабельности. Чем проще и четче текст, тем легче и быстрее он считывается.

Основные минусы таковы:

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

Теперь поговорим о самих трендах. Одним из первых трендов, набирающих все большую и большую популярность в этом году является:

Креативная иконографика

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

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

Резкая типографика

Популяризированная Flat дизайном, типографика сегодня наполняется новыми трендами, становясь главным действующим лицом заголовков.

Возрастает использование приятной типографики, пользовательских шрифтов, целенаправленного леттеринга.

Акцентированные цвета

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

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

Один дизайн один шрифт

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

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

HD картинки в хейдерах

Растет популярность больших HD изображений, поскольку они добавляют нотку реализма в дизайн Flat интерфейсов, без ухода в скевоморфизм.

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

UI карточки

На мой взгляд, это один из самых крутых трендов Flat дизайна за последние пару лет. И в этом году карточки продолжат эволюционировать.

Зародившиеся в Pinterest , а затем популяризированные на сайтах социальных медиа, таких как Facebook и Twitter , UI карточки в сейчас являются одним из наиболее развивающихся layout-ов.

Существуют несколько стилей UI карточек, которые актуальны на данный момент, давайте рассмотрим их:

1. Пины
Созданные в Pinterest, пины - самый узнаваемый layout для карточек сегодня.

В свое время Wordpress собрал лучшие 100 шаблонов, сделанных в Pinterest стиле.

2. Сетка
Фрейморк в виде сетки с равными расстояниями придает карточкам более логическую структуру, что делает контент понятным и легко просматриваемым.

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

UI карточки на данный момент широко применяются в web дизайне и имеют как преимущества так и недостатки, рассмотрим их.
Основные преимущества:

1. Интуитивное понимание того, как их использовать . Пользователь не задумывается о том как это работает, он просто считывает контент и использует элементы UI карточек.
2. Идеально подходят для комбинирования, сочетания разного контента . Пример: на новостных сайтах, использующих UI карточки, разные новости - будь то политика, спорт, искусство - смотрятся органично в едином блоке.
3. Легко просматривать . Контент в UI карточках легко считывается, а сами карточки выглядят гармонично.
4. Универсальность . Карточки могут быть адаптированы практически к любому стилю.

Основные недостатки таковы:

1. Немного надоели . Особенно это касается клонов Pinterest, Facebook.
2. Требуют усилий и креативного UX дизайна . Интерактивность и взаимодействие являются ключевыми компонентами их успеха.
3. Высокий риск того, что создашь хаотичную структуру . В погоне за дизайном и креативностью можно переборщить, нарушить логику и общую визуальную составляющую.
4. Требуется еще больше внимания к визуальному дизайну . Ввиду того, что каждая карточка может отображать несколько типов информации.

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

Иммерсионное воздействие

Или проще говоря - интерактивность, развивается все больше и постепенно занимает главенствующие роли в web дизайне.

“Хороший интерактивный дизайн это то, что происходит в каждый момент взаимодействия между человеком и устройством (или системой или службой), с которым он или она взаимодействует.” Stephen P. Anderson

Интерактивность является лучшим способом достучаться до вашего пользователя. И для этого она использует множество методов:

1. Длинный скроллинг или параллакс скролинг.
2. UI карточки.
3. Видео и анимация.
4. Свайпанье и кликанье.
5. Микровзаимодействия.
6. Push - уведомления.
7. Контроль над скрытием и появлением контента .

Интерактивность должна помочь пользователям двигаться к реализации их целей. Изучите свою аудиторию с помощью “основных действующих лиц ” пользовательских сценариев и карт опыта (Experience map ).

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

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

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

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

Видео и анимация

Это еще одни быстро растущий и набирающий популярность тренд. Что неудивительно- с ростом скорости интернета растет и возможность использовать видео и анимацию. Я не буду углубляться сейчас в то, как развивается анимация и насколько она важна, просто рекомендую вам почитать “12 главных принципов Уолта Диснея”.

Что меняет веб-дизайн?

Прежде чем приступить к прогнозированию трендов, важно понять, из-за чего меняется веб-дизайн.

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

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

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

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

Адаптивный веб-дизайн (Responsive Web Design; RWD), предполагающий загрузку одного и того же HTML-кода на любые устройства и использование CSS для изменения внешнего вида страницы с учетом специфики конкретного девайса, является распространенной технологией, рекомендуемой Google для использования при оптимизации веб-сайтов под мобильные устройства. Именно поэтому многие тренды из списка ниже отражают подходы к веб-дизайну, которые дополняют RWD.

Сам список тенденций на 2016 год выглядит следующим образом:

Минимализм и плоский дизайн 2.0

В 2015 году минимализм был очень востребован. И в 2016 году спрос на эту концепцию будет сохраняться. Это идеальный вариант для использования в связке с RWD, поскольку позволяет избежать путаницы, сосредоточить внимание на наиболее важных элементах и эффективно использовать пространство. Другими словами: меньше значит больше.

Популярным подходом к веб-дизайну, который очень хорошо сочетается с философией минимализма, является так называемый плоский дизайн (он же Flat Design). Сейчас наиболее актуальным является его последнее воплощение в лице Flat 2.0.

Отличное представление о принципах Flat 2.0 дает Google Material Design : отражение материального мира с интересной игрой теней, света и движения, позволяющее пользователям получить визуальные подсказки относительно взаимодействия с веб-сайтом.

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

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

Винтажный стиль прямиком из 80-х

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

Интерактивный и захватывающий опыт

Люди по своей природе любят рассказывать и слушать хорошие истории. Благодаря магии HTML5-элемента canvas , анимации и переходам CSS3 , современным API JavaScript (вроде WebGL и Greensock), а также силе аппаратного ускорения рассказываемые через интернет истории будут становиться еще более захватывающими и интерактивными.

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

Яркие уникальные иллюстрации и иконография

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

Решить эту проблему можно с помощью поддерживаемого современными браузерами формата SVG (Scalable Vector Graphics) и легко реализуемых шрифтов с иконками. Благодаря этим элементам можно ожидать, что в ближайшее время мы увидим больше веб-дизайнерских решений на основе красочных уникальных иллюстраций, стильных нарисованных от руки шрифтов с иконками и SVG-иконок, которые остаются четкими и красивыми при любом разрешении экрана.

Шрифты заявляют о себе

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

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

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

Визуальные элементы с высоким разрешением

Увеличение пропускной способности сети, расширение браузерной поддержки элемента HTML5 video и новые способы избирательной загрузки графических объектов с высоким разрешением на устройства с экранами типа Retina – все это приведет к дальнейшему росту популярности использования великолепных фоновых изображений с высоким разрешением и HD-видео на веб-сайтах в 2016 году.

Расширение поддержки браузерами свойства background-blend-mode из CSS3 может привести к распространению очень интересных художественных эффектов в изображениях, которые создаются непосредственно в браузере с помощью нескольких строк CSS-кода.

Эффекты из категории cinemagraph также используются все более широко. Они позволяют создавать статичные изображения с анимированными элементами, которые привлекают внимание посетителей сайта. Эти эффекты нельзя назвать принципиально новыми, но успех «живых фотографий» в свежих iPhone и поддержка HTML5-элемента canvas все большим количеством браузером должны способствовать превращению эффектов из категории cinemagraph в один из ключевых веб-дизайнерских трендов 2016 года.

Более гибкие макеты на основе сетки

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

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

Вместо заключения

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

Алина Филатова

16.07.2015 | | 2 комментариев

Знаете, какой вопрос почему-то очень редко задают клиенты? “А какой сайт сейчас в моде?”!
Да-да, в Интернете, как и в любой другой области, конечно же существует своя мода, свои “фенечки”, “фишки” и тренды.

Если говорить о современной веб-моде, то в 2014-2015 годах наметились несколько модных дизайнерских тенденций, которые уверенными шагами движутся в будущее. Если вы любите “погулять” по интернету, наверняка в последнее время, вам попадалось все больше сайтов, которые используют плоский и полуплоский дизайн (так называемый “стиль Metro”), большие имиджи и сложную типографику. Кроме того явным мейнстримом становится использование в сайтах видео или синемаграфики.
Так что же именно модно в этом веб-сезоне?

Итак, в 2015-2016 годах по-прежнему в тренде:

1. Большие и красивые имиджи

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

2. Плоский дизайн

   В конце 2013 — начале 2014 наступила эпоха плоского дизайна, так называемого «стиля Metro».
   Новые модные тенденции на рынке задали такие монстры, как Microsoft и Apple, а все остальные участники радостно подхватили последние веяния. Мода на плоский дизайн по-прежнему сохраняется и в 2015 году. Этот чистый, легкий дизайн позволяет сайтам выглядеть очень современно.

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

3. Эмоциональный контент

   Пусть это не самое простое решение, но крупные игроки СМИ начали использовать уникальные преимущества интернета для создания эмоционального контента. Основная его цель — зацепить посетителя эмоционально, вызвать душевный отклик.

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

4. Лучшая типографика

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

5. Кастомизированные иллюстрации и фото; иллюстрации, рисованные вручную

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

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

6. Видео

   С 2014 года на сайтах очень эффектно смотрелось большое видео в высоком разрешении.

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

7. Синемаграфика или зацикленное видео

   Если для того, чтобы просмотреть на сайте видео, нужно нажать кнопку “Play”, то в случае с зацикленными видео-отрывками этого делать не приходится. Зацикленное видео движется по кругу само по себе, и его запросто можно использовать в качестве эффектного фона.

   Эти мини-ролики, размещенные на главной странице сайта, замечают все посетители. Движущиеся кадры мгновенно привлекают внимание, эмоционально вовлекают зрителя и рассказывают короткую яркую историю. Частенько тут же, прямо на видео, располагают кнопку “Play”, чтобы заинтересовавшийся посетитель мог посмотреть длинную версию или посетить целевую страницу. Такие сайты смотрятся очень по-дизайнерски, и в 2015 году эти интерактивные истории — очень мощный тренд.

8. Сетка

   Еще одно модное веяние — дизайн крупными блоками, уложенными в сетку наподобие коллажа. Он позволяет быстро и наглядно представить имеющийся на сайте товар или продемонстрировать образцы своей работы. Правильно спланированная сетка может сделать навигацию на сайте очень удобной.

9. Фиксированный хэдер

   Еще одна “фишка” сезона — зафиксированная вверху шапка сайта. Как бы посетитель ни прокручивал сайт, хэдер всегда остается “приклеенным” к верху страницы. С эстетической точки зрения этот ход очень выгоден — хэдер задает структуру сайта и связывает воедино все его элементы.

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

10. Адаптивный дизайн

    Пожалуй, самый главный тренд сезона — это адаптивный дизайн. По данным компании Google количество пользователей, которые заходят в интернет именно с мобильных устройств, уже к концу 2014 года выросло до 50%!

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