Ростелеком ТВ 

Тренды в сайтостроении. Большие и жирные шрифты. Больше внимания анимации

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

Внимание, контент

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

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

Конец эпохи флэт-дизайна

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

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

Геометрические формы, линии и узоры

Геометрические формы и различные паттерны были одним из самых заметных трендов уходящего года и эта тенденция останется с нами в 2017 году. Существует множество способов использования геометрических форм в дизайне сайтов. Это не только вписанные в круг изображения, которые встречаются повсеместно – разнообразие форм и узоров так велико, что ничто не ограничивает фантазию дизайнера. Использование интересных паттернов, линий и форм может поднять дизайн на новый уровень и придать сайту индивидуальность. Флэт-дизайн лишает сайты своего лица, поэтому дизайнеры ищут способы решения этой проблемы и различные нестандартные элементы помогают им сделать внешний вид веб-страниц уникальным и узнаваемым.

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

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

Широкое использование анимации

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

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

Упрощенная навигация

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

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

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

Кастомная графика

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

Рост значения целевых страниц

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

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

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


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

Вышла новая статья → ← Читай и вдохновляйся!

Тренды дизайна находятся под влиянием СМИ, технологий, индустрии моды и, в последнее время юзабилити. Тренд проявляется медленно, постепенно, проникая во все направления дизайна, а затем исчезает точно таким же образом. В основном дизайн тренды существуют не более чем один или два года. Дизайн в 2017 году продолжит тренды, которые появились в 2016 с добавлением некоторых новых изменений, это чувство хорошо известно и знакомо, и вы, возможно, заметили его в последние пару лет. Основное влияние остается за Google’s Material Design, с небольшими изменениями.

Какие тренды в веб-дизайне нас ждут в 2017 году

01. Полу плоский дизайн (Semi Flat Design)

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

Плавное затенение добавляет глубину и сложность, не разрушая ощущения плоского дизайна. Это новая функция добавлена во flat тренд и продолжит развиваться в 2017 году.

Проект: Resourсe | UI/UX Tool for Web Services
Авторы: Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov

Проект: Listener’s Playlist

02. Движущиеся фотографии (Cinemagraphs)

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



03. Больше 3D (More 3D)

3D определенно движется в нашу сторону, и мы будем видеть это влияние во всех областях дизайна. С технологиями VR/AR быстро наращивается темп, эта область развивается довольно быстро.

Проект: LUV.IT

Проект: Open Annual Awards

Проект: Air Max ’17

Проект: NIKE F.C. | 3D Golden balls in the real world

Проект: Better You Brand

04. Анимации (Animations)

Анимация все больше и больше присутствует в web-дизайне, формат может быть любым — WebGL CSS, GIFs, SVG или видео. Анимация была одной из самых важных трендов веб-дизайна прошлого года, не стесняйтесь ее использовать.


Проект: Nickelodeon Kids Pick The President

Проект: AR Virtual Fitness Coach App

Проект: ZH OURO- Rio 2016

05. Одностраничные сайты/лендинги (Landing pages)

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

Если вам понадобится лендинг, то можете заказать его у меня →

06. Геометрические фигуры, узоры, линии и круги (Geometric Shapes, Patterns, Lines and Circles)

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

Проект:

Проект: DRAP.agency Branding

Проект: Pfizer — Active and 50+ for The New York Times

07. Смелые, яркие цвета (Courageous Colors)

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

Проект: Edris — Logo Designed by MiLo

Проект: Rendered - Responsive Demo Website for Adobe

Проект: b2mach

08. Инновационный скроллинг и параллакс (Innovative Scrolling and Parallax)

Это отличная визуальная идея, которая добавит уникальности любому сайту. От параллакса из нескольких слоев к видео параллаксу, все возможно с плагином D.ex Multilayer Parallax (многослойный параллакс). Этот продукт разработан полностью студией Milothemes под руководством Loredana Papp и Mihai Baldean. Он доступен для покупки на Envato Market / codecanyon.net


Это WordPress плагин, который позволяет делать прекрасные Parallax блоки с более чем одним слоем. Будьте креативными и объединяйте слои в любом стиле, котором захотите. Мы сделали 12 различных примеров в гайде плагина, чтобы упростить ваше первое знакомство с прекрасным миром параллакса. Поиграйте со слоями!

09. Цветовые переходы/градиенты (Color Transitions)

Градиенты — один из главных трендов прямо сейчас. Транд начал набирать популярность с 2016 и продолжает быстро расти, после того как большие бренды, например Инстаграм решили изменить свое лого и картинки из одного цвета в многоцветный переход (градиент). От логотипов до кнопок или наложений на изображения (picture overlays), этот тренд по всюду.

10. Просмотры с мобильных устройств, адаптивный дизайн (Mobile Browsing (Responsive Design))

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

Проект: Responsive Website Animation

11. Графика и иллюстрации сделанные на заказ (Custom Graphics and Illustrations)

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

12. Креативно используйте нейтральное пространство и сетку (Creative Use of Neutral Space and Grid)

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

13. Рассказывайте истории (Storytelling)

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

Подробнее видео про сторителлинг от Бизнес молодости:

14. Постепенная загрузка контента (Lazy Loading)

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

15. Разделенный контент (Split Content)

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

16. Формы на всю ширину (Full-Screen Forms)

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

17. Видео по всюду (Videos Everywhere)

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

Проект: Hillsong

18. СЕО — важно! (SEO is Important)

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

19. Скрытая навигация (Hidden Navigation)

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

20. Маленькие детали дизайна (Tiny Design Details)

Фокус на деталях очень важен в этом году. Мелкие детали такие как навигационные точки и т.д. Фокус на мелких деталях сделает работу законченной.

Проект: Barometa — Next-generation Job Platform


21. Тренды в дизайне логотипов (Logo Design Trends)

21.1. Минимализм (Minimalist)

Все крупные бренды переходят к более простому, минимальному дизайну, и эта тенденция останется.

21.2. Нарисованные от руки (Hand drawn)

Этот тренд в центре внимания в течение последних лет, такой стиль отлично подходит для «хипстерского» бизнеса. Его используют для парикмахерских (barbers), кафе, ресторанов, искусства и крафтовых вещей.

21.3. Negative space

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

21.4. Cropping

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

21.5. Геометрия (Geometric)

Этот тренд из разряда Old school, но это один из тех стилей, который точно никогда не умрет.

21.6. Художественные линии (Line art)

Этот тренд популярен среди бизнеса нового поколения

Авторы: Sam Healy ; Andrea Schlaffer ; Jacek Janiczak

21.7. Паттерны, узоры (Pattern)

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

Авторы: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner

21.8. Анимированные логотипы (Animated logos)

Motion дизайн сегодня востребованный тренд, и мы можем его наблюдать во всех областях дизайна.

Авторы: Javier Miranda Nieto; The Woork Co

21.9. Винтаж (Vintage)

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

Авторы: Роман Додонов; Mingo Ideas Up; Will Try Further

21.10. Цветовые переходы (Color Transitions)

Градиенты везде в этом году — и логотипы не исключение.

21.11. Иллюстрации в логотипах (Illustrations in logos)

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

Авторы: Bodea Daniel; Jacek Janiczak

21.12. Фотография в логотипах (Photography in logos)

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

22. Тренды в типографике (Typography Trends)

22.1. Большая, яркая и красивая типографика (Big, bold & beautiful typography)

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

Авторы: Alexander Laguta

Авторы: Quim Marin

Проект: Baugasm Series — Pack 4

22.2. Градиенты/цветовые переходы в типографике (Color transitions in typography)

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

22.3. Визуальная иерархия (Visual hierarchy)

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

22.4. Tiny Typography (Мелкая типографика)

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

Авторы: Slava Oleinik; Bahaa Samir; Witty Digital

Проект: Baugasm Series — Pack 4

22.5. Анимация в типографике (Animated Typography)

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

Проект: Gotham Pro Animated Typeface Free

22.6. Типографика с фотографией (Typography meets photography)

Сочетание между текстом и фотографией может дать отличный результат. Посмотрите на эти прекрасные примеры.

22.7. Геометрические формы и типографика (Geometric shapes and typography)

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

22.8. Шрифтовые сочетания (Font pairing)

Используйте два или более шрифта вместе. Это еще в тренде в 2017.

———————————



Что 2017-й год вносит нового в Веб? Каких главных направлений и трендов в веб-дизайне, стоит ожидать? Сейчас все выясним – в формате емкого обзора самых ярких тенденций, на примерах TRENDY сайтов.

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

Читайте также: 8 веб-трендов на 2019 год: современные лэйауты

В плане эстетической привлекательности, 3 года подряд плоский стиль господствовал в WEB-е. Затем, Google представил материальный дизайн, что немного вывело нас из визуальной абстракции. В 2017 году веб-дизайн сделает еще один шаг обратно – к реалистичности. Будь то формы, выбор цвета или функционала - 2017-й станет годом гибридов, в которых пересекутся реалии физического мира и технологии. Результатом следует ожидать лучшие возможности для просмотра веб-страниц.

Вот девять веб-дизайн трендов, способных сократить этот разрыв.

1. Pop-out навигация

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

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

Преимущества:

  • Экономия пространства на экране
  • Акцентируя внимание пользователей на меню, улучшает навигацию по сайту
  • Скрытие элементов навигации, помогает лучше сконцентрироваться на других моментах (например, целях конверсии)
  • Улучшенный внешний вид первого экрана
  • Более гибкая структура дизайна

Читайте также: 20 лучших примеров дизайна главной страницы сайта

Лучшие практики:

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

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

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

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

Сдвиг / перекрытие контента при открытии. Выезжающее меню редко делают занимающим весь экран. Обычно оставляют видимой часть контента страницы, что на малом экране позволяет легко к нему вернуться. На десктопе это выглядит как модная «мобайл-имитация».

2. Вопреки парадигмам навигации – альтернативы

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

Преимущества нестандартной навигации:

  • Уникальный дизайн
  • Новации привлекают
  • Расширяется опыт пользования (UX)
  • Для дизайнеров – новые возможности оформления сайтов

Лучшие практики:

Читайте также: 11 креативных сайтов отечественных студий веб-дизайна

Различные эксперименты с навигацией по сайту. При столь неоднозначном отношении к «бургерам», в 2017 году надо ждать появления интересных новшеств в навигации.

Уникальное меню Hillsiderancho.com сочетает верхнюю, левую, правую и скролл навигацию

Вообще без меню навигации. Современный пользователь сталкивается с массой контента и ему не надо объяснять, что делать дальше. Скроллить! На органичность такого поведения уже обратили внимание в предыдущих веб-трендах (горизонтальная, бесконечная прокрутка, управление с клавиатуры, жестами…). Некоторые дизайнеры отказываются от меню совсем, предлагая посетителю использовать / получать опыт «продвинутого» исследования сайтов. Адаптация сайтов под мобильные и планшеты, также меняет UX / сами интерфейсы и открывает перспективы для горизонтальной прокрутки.

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

Читайте также: Самые необычные и оригинальные сайты

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

Используется pop over навигация, когда наведение на одну из 6 секций меняет фон всего полноэкранного меню

3. Карточки – вдохновение носимой электроникой

Как мобильные пользователи изменили дизайн современных сайтов, так носимые устройства начинают влиять на их оформление. С десятками миллионов проданных с 2015-го года носимых гаджетов, их пользователи научились ценить рациональное совершенство и в других сферах. Экономя место на экране, носимая электроника приучит упрощать визуально и веб-дизайнеров, а маркетологов – еще больше конкретизировать и формализовать задачи сайтов. Главные правила веб-дизайна по принципу контейнеров: стильно, лаконично и без больших усилий – идеология «less is more» не ограничивает себя размерами экранов.

Преимущества:

  • Оптимизированный UX дизайн
  • Меньше неясностей и отвлекающих факторов
  • Минимализм ускоряет загрузку сайта

Лучшие практики:

Плитки, принцип контейнеров и блоки в структуре веб-страниц. Тренд сохраняется уже не один год (2014 – 2016-й…) и вероятно 2017 год продолжит сложившуюся тенденцию. Популярные сейчас и новые модели гаджетов («умные» очки, часы, браслеты, прищепки, встроенные в одежду сенсоры…) выполнены в лаконичном стиле и столь же ненавязчиво информируют пользователя. Ожидаемо, носимые технологии вдохнут новую жизнь в легко считываемые плиточные интерфейсы. Контейнерная модель карточного UI подразумевает упорядочение с самодостаточностью и успешно масштабируется для больших экранов.

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

Строгая цветовая палитра. Модные цветовые схемы возвращаются сейчас к базовым основам. Двухцветный дизайн сайта (дуотон) или черно-белое оформление с добавлением одного цвета становятся все популярнее.

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


4. Material Design Lite (MDL)

Читайте также: Лучшие дизайны интернет-магазинов в стиле Flat и Material

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

С руководствами, по уже существующим шаблонам и open-source компонентам, MDL делает материальный дизайн открытым для внедрения на любом сайте или приложении. Псевдо-3D-слои, тени, анимации – интерфейсные элементы классического веб-дизайна, приближающие юзабилити к имитации реального мира.

Преимущества:

  • MDL отличается в лучшую сторону от оформления традиционных сайтов, сохраняя изначальные выгоды классического веб-дизайна
  • Легко вникать благодаря наглядности реалистичного интерфейса
  • Кроссплатформенная доступность для всех устройств (без привязки к JS)

Лучшие практики:

Механика материального мира. Рассматривайте стилистические элементы MDL, как как реальные физические объекты, а именно:

  • Тени должны выглядеть, как отбрасываемые естественным источником света
  • Размер и толщину элементов выбирайте, как для реальных объектов – в соответствии с физическими законами
  • Движение – реакция на пользовательское взаимодействие

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

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

Читайте также: Цвета в Web дизайне: колор-тенденции (яркие тона)

5. Винтажные цвета

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

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

11 октября прошла лекция арт-директора студии Vintage Web Production Ольги Шевченко , посвященная трендам веб-дизайна и диджитала в 2018 году. Ольга является членом жюри Awwwards и каждый день просматривает сотни новых сайтов, разработанных агентствами и дизайнерами со всего мира. Это позволяет ей отслеживать новинки и тенденции веб-разработки и дизайна. Мы записали главные месседжи лекции, а с полной версией вы можете ознакомиться по ссылке .

Итоги 2017

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

Большое меню

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

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

Большое меню. Сайт radioaktivefilm.com

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

Fashion-эффекты

Глитч, морфинг, геометрия, взрыв цвета, минимализм. Мы с Дашей Шаполовалой, идеологом Mercedez-Benz Fashion Week в Киеве, обсуждали тенденции в моде, а я рассказывала о новых веяниях в вебе. И мы нашли общие черты в совершенно разных сферах.

” Джона Мур Уильямса, руководителя отдела контент-стратегии Webflow.

Завершение текущего года не за горами, и каждый веб-дизайнер хотя бы раз задавался важным вопросом: что же будет определять веб-дизайн в наступающем 2017 году? Я решил найти ответ на этот вопрос и спросил дизайнеров WebFlow, какие тренды, по их мнению, будут преобладать следующие 365 дней. Их мыслям я также дал собственные комментарии.

В первую очередь давайте узнаем мнение главного дизайнера-проектировщика Webflow Серджи Магдалин (Sergie Magdalin).

1. Дизайн, направленный на контент

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

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

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

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

Это одна из причин перехода от “скевоморфного” дизайна (когда элементы изображаются максимально похожими на их аналоги в реальном мире) к плоскому, минималистичному дизайну. Из этих соображений Google создал Материальный дизайн.

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

2. Качественное взаимодействие дизайнеров с разработчиками и дизайнеров между собой

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

Такая забота о взаимодействии с дизайнерами появилась отчасти из-за массивности мобильных и веб-приложений, которые разрабатываются на сегодняшний день. Помимо того, что такие гигантские корпорации, как Google, Facebook, Twitter и LinkedIn требуют титанического труда дизайнерской команды с совершенно разных сторон, дизайнерам необходимо всегда быть на одной волне друг с другом. Это значит, что требуется более тесное общение по проекту и способы наиболее эффективной совместной работы.

Чтобы облегчить эту задачу, было создано множество инструментов, начиная коллективными шаблонами и досками в Webflow’s Team и заканчивая графическим редактором интерфейсов Figma, показывающим изменения в реальном времени. Я уверен, в 2017 эти платформы будут улучшаться и дополняться.

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

Карсон Миллер (Carson Miller) высказался по этому поводу в своей недавней статье “Будущее фронтенда в дизайне ” на TechCrunch:

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

3. Упрощенный процесс “от дизайнера к разработчику”

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

Тренды веб-дизайна в предстоящем году по мнению продукт-дизайнера Гаджи Хархарова (Gadzhi Kharkharov):

4. Крупный, громкий заголовок

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

The #MadeInWebflow Heco Partners

Как можно увидеть на примерах, “крупный” и “жирный” относится не только к описанию шрифта. Скорее, речь идет о том, что значительная часть главного экрана выделена под простое, но сильное и самодостаточное утверждение о продукте или услуге. Подобный заголовок должен содержать в себе самую суть и быть понятным для любого посетителя, избегая излишней напыщенности (окей, фраза “Design the impossible”, возможно, звучит чересчур громко).

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

5. Сложная разметка, пришедшая из основ графического дизайна

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

В последние несколько лет вёрстка веб-страниц ограничивалась возможностями CSS, но такие новые модули, как Flexbox и CSS Grid (который выйдет в марте 2017 года), позволят осуществить самые смелые задумки в веб-разметке.

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

Вот несколько примеров того, что стоит ожидать (конечно, если у вас есть браузер, поддерживающий CSS Grid, например, Firefox Nightly, Safari Technical Preview или Chrome Canary):

Экспериментальная лаборатория макетов Джен Симмонс

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

Grid by Example

На сайте можно посмотреть больше примеров.

6. Больше SVG

SVG (scalable vector graphics – масштабируемая векторная графика) имеет больше преимуществ для веб-дизайнеров и разработчиков, чем традиционные форматы изображений, например, JPG, PNG или GIF.

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

Но это еще не всё. SVG также славится тем, что не требует отправки HTTP-запросов. Если вы когда-нибудь проверяли скорость загрузки своего веб-сайта, вы могли заметить, что эти HTTP-запросы могут действительно тормозить ваш сайт. С SVG такой проблемы нет.

7. Инструменты для адаптивного дизайна на основе правил

Адаптивный дизайн полностью изменил наш взгляд на веб-приложения и на их создание.

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

Ожидается новая волна дизайнерских инструментов (таких как Figma) на основе “правил”, корректирующих вид сайтов на различных экранах и устройствах, тем самым сокращая количество повторных действий дизайнера. Такие инструменты основываются на пространственных связях элементов и, когда мы меняем размер экрана или устройство, они стремятся сохранить эти связи путем изменения размеров элементов и отступов между ними.

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

Тренды дизайна в 2017 году по мнению Райана Моррисона (Ryan Morrison), старшего графического дизайнера.

8. Больше ярких цветов

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

Взгляните на новый сайт Asana с яркой цветной заливкой:

Новая иконка приложения Instagram вызвала много критики, но этот редизайн, несомненно, освежил бренд:

Всё, что делает Stripe, не требует отдельного представления:

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

Хотя, может быть, стоит всё-таки немного уменьшить яркость? Мы следим за вами, Asana.

9. Больше внимания анимации

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

Эта тема особенно важна, поскольку создание анимации упрощается с каждым днем. На Конференции Дизайна и Контента (Design & Content Conference) в 2016 гуру анимации Вал Хэд (Val Head) подчеркнула, что при разработке анимированных элементов дизайнерам следует помнить о целях и потребностях бренда, чтобы достигнуть эффект, который ожидают увидеть создатели контента. Если к этому совету будут прислушиваться, анимация будет выполнять задачи, значимые для бренда, а не просто вызывать мигрень у пользователя.

10. Необычная разметка

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

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

Метод “сломанной” разметки заключается в выходе элементов за пределы скрупулезно выровненной сетки. Подобные приемы могут иногда показаться даже неприятными для глаза. Например:

Наезжающие друг на друга тексты и изображения:

Тексты и изображения, раскиданные (казалось бы) случайно по странице:

Это была первая часть перевода статьи “18 трендов веб-дизайна в 2017 году ”. А вы согласны с мнениями специалистов Webflow? Как вы думаете, какой веб-дизайн будет в моде в наступающем году?