Тенденции в веб дизайне. Дизайн, направленный на контент. Международный типографический стиль

Перевела Катя Гонзуль.

Интернет – быстро развивающееся пространство. На рынке стремительно появляются новые технологии и методы развития. Улучшающие инструменты предоставляют больше свободы при проектировании интерфейсов и взаимодействий. А из-за этого в течение короткого периода в моду могут войти веб-шаблоны и методы проектирования.

Мы предлагаем рассмотреть тенденции веб-дизайна, которые стоит знать в 2017. Не все они новые; некоторые из них – стили, которые завоевывали и/или сохраняли свою популярность в 2016 году. Их активное использование ожидается и в проектировании сайтов нынешнего года.

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

Цвет

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

Компания Pantone представила свой цвет года – Greenery. Он был выбран как символ новых начинаний; освежающий и оживляющий оттенок. Мы не ждем, что в 2017 году каждый веб-сайт будет зеленым. Но уверены, что несколько веб-дизайнов, вдохновленных этим цветом, все же появится.

Если вы ищете вдохновения в вопросе цветовых комбинаций, то некоторые из сочетаний можете увидеть на странице Pantone Color of 2017.

Из-за популярности Google Material Design цвета и цветовые сочетания, рекомендуемые этими принципами дизайна, скорее всего, войдут в TOP-2017. Цвета яркие и смелые. Даже за пределами GMD в последнее время было много примеров веб-дизайна, включающих яркие цвета.

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

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

Такие сайты, как Spotify, очень удачно использовали дуплексные изображения. Вы, возможно, заметили, что двухцветность также популярна для иконок на YouTube.

Сайт Adison Partners успешно использовал дуплекс в пределах своего веб-дизайна.

Современное ретро

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

Интерактивное резюме Робби Леонарди – блестящий пример современного ретро. Он объединил полусовременный пиксель-арт-стиль с боковой прокруткой видеоигры Супер Mарио.

Кондитерская Sweet Magnolia Gelato выбрала винтажный дизайн с использованием привлекательной анимации. Это придает веб-сайту современный вид, одновременно сохраняя шарм старины.

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

Синемаграфия

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

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

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

Material Design

Material Design от Google появился в поле зрения еще в 2014 году. По существу, он построен на принципе бумаги и чернил, переводя их качества в цифровой формат. Например, использование теней и краев, чтобы указать на то, к чему вы должны прикоснуться: кнопки.

За последние пару лет Material Design набирает популярность с многочисленными темами и шаблонами, созданными для CMS (Content Management Systems), а также интерфейсными структурами, такими как Twitter Bootstrap. Одно из критических замечаний, которые вы можете услышать об этом сервисе, – то, что многие сайты, разработанные системой Material Design, очень похожи; возможно, даже слишком похожи. Это происходит из-за утрированного следования стилю Material Design – вместо применения основных принципов.

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

Отличным примером Мaterial Design в наиболее чистой форме является Material Design Blog (неожиданно, правда?). Здесь вы можете увидеть большинство принципов MD в действии.

Прямолинейная креативная типографика

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

Digital-агентство Nurture объединило типографику с видео, чтобы создать стильный первоклассный веб-сайт. Видео, проигрывающееся в фоновом режиме, просматривается только через одну большую букву со слова “nurture”. Видео и буквы меняются по мере вашего передвижения по разделам домашней страницы.

Friends – дизайн-агентство, основанное в США. На своем сайте оно использует большой жирный шрифт, который действительно выделяется как главная особенность.

Модульный дизайн

Модульный дизайн – не новинка, но он набирает популярность в течение нескольких последних лет. Это подход к проектированию с использованием шаблона модульной сетки расположения элементов. Взглянув на данные Google Trends, можно проследить рост интереса к модульному дизайну уже с начала 2011 года (по данным частоты запросов). И мы надеемся на сохранение этой тенденции и в 2017 году.

Build в Амстердаме создали очень изящный модульный дизайн веб-сайта. Такой подход позволяет четко определить каждый элемент контента.

Университет Warwick также использовал модульный дизайн в проектировании своей странички.

SVGs (Scalable Vector Graphics)

Устали от логотипов и изменений размеров других изображений? Если да, стоит попробовать файлы SVG вместо обычных форматов PNG и JPG. Формат SVG подходит не для всех изображений; они будут работать только с векторной графикой, так что вы не сможете бесконечно масштабировать любые фотографии. Тем не менее, для таких изображений, как логотипы, формат работает блестяще.

SVG появился примерно с 1999 года, но до сих пор мы видим форматы PNG и JPG там, где SVG был бы более уместен. Хотя сейчас, вероятно, все-таки происходят некоторые изменения. Вы наверняка встречаете все больше файлов SVG, и данные Google Trends показывают, что интерес к этому формату растет начиная с 2013. В этом году ожидается еще более широкое использование этого формата, а также множество новых статей на эту тему.

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

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

Flexbox

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

Flexbox неуклонно набирает обороты. И вместе с тем, в настоящее время он поддерживается всеми современными браузерами. Вероятно, все больше разработчиков интерфейсов будут использовать его. Вы можете прочитать больше о Flexbox в наших гидах: Understanding CSS3 Flexbox для Clean, Hack-Free Responsive Design и Understanding CSS Grids для Modern WordPress Website Design.

360°-видео и виртуальная реальность

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

Если вы еще не знали, Google VR View – это API (интерфейс программирования приложения) JavaScript, который позволяет без затруднений добавить 360°-видео на свой собственный веб-сайт.

Интерактивный веб-VR был создан для нового фильма «Ведьма из Блэр» (Blair Witch ). Его лучше всего смотреть на мобильном телефоне с использованием гарнитуры VR.

Микровзаимодействия

Микровзаимодействия – одиночные моменты, когда пользователь взаимодействует с вашим сайтом. Это не всегда должен быть сайт сам по себе, но в нашем случае все именно так. Этими моментами могут быть такие действия, как «оценка» поста, отправка сообщения или заполнение анкеты. Цель микровзаимодействий – обеспечить обратную связь и руководство для пользователя, одновременно улучшая опыт взаимодействия (user experience).

Микровзаимодействия становятся все более популярными, а способы предоставления руководства и установления обратной связи – все более креативными. Ожидаем большего в этом году.

Ниже приведен пример анимации микровзаимодействия от Игоря Ижика. Анимация на тему like/unlike . Вы можете просмотреть анимацию на dribbble.com

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

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

Фотографии взяты из оригинальной статьи

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

В силу того, что я фрилансер, я просто обязан идти в ногу с трендами в 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

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 главных принципов Уолта Диснея”.