Тенденции веб дизайна. Иконки - главный декоративный элемент. Большие и жирные шрифты
Изначально планировалось разместить перевод англоязычной статьи о трендах веб-дизайна в 2017 году, но после изучения разных источников, решили немного изменить концепцию данной заметки. Все дело в том, что за последний месяц в интернете было опубликовано достаточно много тематических материалов про современные , и мнения, как говорится, разошлись. С одной стороны, это логично, т.к. у разных авторов имеются свои какие-то предположения о том, что же будет актуально для сайтов в текущем году. С другой — эти прогнозы весьма субъективны.
В общем, мы собрали все варианты и составили что-то вроде дайджеста веб-дизайн трендов 2017. Начнем с наиболее популярных тенденций, которые отмечают многие специалисты, и постепенно перейдем к более «уникальным» идеям. Кстати, если у вас есть дополнения и мысли по теме, можете смело делиться ими в комментариях. Плюс рекомендуем почитать о — также полезный пост.
1. Нестандартный «абстрактный» дизайн
Сетка для сайтов считается неким устоявшимся базовым понятием, помогающим грамотно организовать пространство веб-страницы. Особо креативных дизайнеров она при этом загоняла в определенные рамки. Однако всегда находились смельчаки, создающие оригинальные решения, неподконтрольные каким-либо жестким границам. Подобные работы, как правило, встречаются в имиджевых и творческих тематиках, но в 2017 этот тренд дизайна сайтов распространится и на строгие корпоративные проекты.
Нестандартное расположение элементов дает больше интересных возможностей: позволяет использовать все пространство страницы, добавлять в макет наслоение объектов и ощущение глубины. Вы сможете реализовать дизайн, впечатляющий пользователей даже без красочного полноэкранного видео или анимации. Учитывая сотни тысяч классических макетов в сети, абстрактные уникальные решения практически всегда будут выделяться и привлекать внимание посетителей сайта (по типу WOW фактора). И этим нужно пользоваться!
2. Новые варианты навигации
Нестандартному проекту — продвинутое меню. Сегодня вам не обязательно размещать горизонтальную в шапке. За счет возрастающей популярности адаптивных макетов многие пользователи уже привыкли к иконке Hamburger меню (состоит из трех горизонтальных полосок), которая все чаще появляется и на обычных версиях сайтов. Грань между мобильным и десктопным дизайном постепенно стирается. В текущем году мы будем наблюдать множество экспериментов с размещением и формой меню — это может стать одной из главных тенденцией веб-дизайна 2017.
Подобные решения позволяют использовать пространство страницы по другому. Кроме интуитивной прокрутки вниз и в сторону, а также закрепленного вертикального блока навигации будут популярны разные скрытые выезжающие элементы. С их помощью вы сможете разместить все нужные пункты подменю на одном экране. В каком-то смысле это делает навигацию по сайту более детальной и полезной для пользователей. Важно только чтобы они сумели разобраться с вашим нестандартным решением. Обязательно потестируйте его эффективность на практике.
3. Карточки в дизайне
Карточки — далеко не новый тренд в дизайне сайтов, однако в 2017 он продолжит быть актуальным. Данное решение эффективно представляет информацию на разных платформах: начиная с мобильных приложений и заканчивая просмотром на больших ТВ экранах. Подобный формат организации данных позволят максимально удобно для пользователей сфокусировать всю информацию по объектам.
Этот подход используют многие популярные проекты в сети: Facebook, Pinterest, Netflix. Последний вариант — вообще отличный пример успешной реализации карточек в дизайне, который сочетает в себе минимализм, возможности навигации и эффективность.
4. Сплит макеты с разделением экрана на 2 части
В текущем году мы увидим больше макетов с раздвоенным отображением информации на экране. Особенно активно данная тенденция веб-дизайна в 2017 будет проявляться на домашних станицах и . Визуально реализация отлично смотрится в минималистичных дизайнах с контрастным фонами или изображениями.
Дизайнер сможет использовать различные визуальные техники оформления в соседних блоках в рамках одного веб-проекта. А результат при этом будет выглядеть естественно. Кстати, сплит макеты хорошо срабатывают для Call to Action в лендингах. Детальнее о методе .
5. Большая и оригинальная типографика
Помнится, в далеком 2009 году мы публиковали , где применение огромных шрифтов было одним из перспективных трендов дизайна сайта. В 2017 вероятно произойдет то же самое (по крайней мере большинство дизайнеров об этом упоминают). Основная причина — конечно, привлечение внимания: кому-то нужно выделить определенные объекты на странице, кто-то хочет пояснить как правильно пользоваться навигацией и т.п. Как бы там ни было, типографика становится толще и больше. При реализации вам могут пригодиться посты блога про и .
Вместе с тем многие сайты избавляются от стандартных системных шрифтов, что позволяет значительно разнообразить их внешний вид. С ростом количества сервисов бесплатных оригинальных веб-шрифтов (Google Fonts, Typekit), их популярность еще больше возрастет. Похоже, что в 2017 нас также ждут эксперименты в области типографии сайтов. Главное в этом деле не перестараться — помните, что текст должен быть хорошо читаем. Кстати, если вы работаете с вордпресс то вам может пригодиться статья Как подключить шрифт в WordPress (в том числе и Google Fonts).
6. Градиенты и яркие цвета
Еще одна тенденция веб-дизайна 2017 — использование ярких цветовых палитр для градиентов (и не только). Старт эры плоского дизайна привнес в онлайн интересные фишки, но работать в этом стиле нужно весьма аккуратно, т.к. он может способствовать обезличиванию сайта. Дабы решить проблему некоторые специалисты начали экспериментировать с яркими цветами и градиентными решениями. В текущем году тенденция продолжит развиваться, причем не только в Web`е (наверняка, все уже заметили недавнее обновление Instagram).
Данный тренд можно использовать не только для фона. Один из популярных приемов — создание перехода между двумя цветами и наложение их на картинку. Это позволяет сделать фото более интересным, да и вообще эффект выглядит необычно. Яркие цвета добавляют в дизайн глубину, динамизм и приятную энергетику. Они могут хорошо выделить страницу и элементы на ней.
7. Анимация и микро-взаимодействия
Сама по себе анимация на сайте не нова, однако дизайнеры с каждым годом учатся реализовывать ее все красивее и эффективнее. Незначительные визуальные эффекты для изображений / объектов / контента могут не только оживить ваш проект, но и добавят дополнительный инструмент обратной связи с пользователем. В современных UI/UX интерфейсах разные микро-взаимодействия превращают рутинные процессы в более веселые способы получения информации + позволяют юзеру видеть и понимать как работает тот или иной элемент страницы (меню, навигация, кнопки).
8. Параллакс эффект
Еще один знакомый нам ранее тренд веб-дизайна сайтов в 2017 должен открыться с новой стороны. Сам по себе Parallax реализуется за счет разной скорости движения фона и переднего плана при прокрутке, что создает впечатление глубины и динамичности картинки. В текущем году нас ожидают куда более сложные работы с использованием нескольких слоев, разных направлений движения и применением эффектов. Работайте с этим приемом аккуратно дабы не отвлекать пользователей от содержимого веб-страницы. Ниже найдете картинки с линками на сайты-источники.
9. Почти виртуальная реальность
VR — одна из наиболее актуальных нынче тем, не смотря на то, что реальная ситуация в данной сфере менее оптимистична многих прогнозов. Разумеется эта фишка не могла не повлиять на дизайнеров. В некоторых макетах можно встретить разные приемы, которые бы создавали для пользователя «эффект присутствия»: 360 градусные видео и панорамы, видеовставки «как в кино», игры и т.п.
10. Тактильный, естественный дизайн
Данный тренд объединяет сразу два направления — натуральная цветовая гамма и тактильный дизайн. Чрезмерная увлеченность плоскими Flat решениями превратила многие веб-проекты в однообразные безликие Bootstrap макеты. Сейчас некоторые дизайнеры пытаются отходить в сторону более естественных решений, например, они размещают фото и реалистичные 3D модели дабы у пользователя было ощущение возможности прикоснуться и потрогать объекты на сайте. Также они используют природные материалы в качестве текстур, иллюстраций и фонов + натуральные оттенки (зеленые, коричневые, серые, нейтральные металлические).
11. Остальные тенденции веб-дизайна 2017
В процессе изучения основных трендов дизайна сайтов 2017 года нам встречались разные мнения. С самыми значимыми вариантами вы уже ознакомились, а теперь кратко расскажем о парочке предположений, которые оказались менее популярны. Часть из них, кстати, активно использовалась и ранее, просто в текущем году тенденция сохранится.
Вы можете сделать фон еще более эффектным за счет добавления анимации или видео. Благодаря YouTube и подобным проектам видеоконтент сейчас весьма популярен, вы можете использовать эту фишку и на своем сайте. Если будете добавлять звук не включайте его по умолчанию, пользователь сам должен захотеть это сделать.
Геометрические формы
Если внимательно посмотреть на скриншоты веб-проектов выше, то во многих из них заметите использование разных геометрических форм. Зачастую это квадратные / прямоугольные фигуры, но также встречаются кривые, треугольники и круги. Подобные блоки могут содержать контент или применяться для выделения фона.
Уникальные иллюстрации
В подборке мы нашли не так много оригинальных работ, но данный тренд веб-дизайна в 2017 будет все еще актуален. Во-первых, иллюстрации добавляют вашему проекту персонализированный вид (что в эпоху Flat макетов большой плюс). Во-вторых, метод отлично сочетается с нестандартной типографикой, позволяя создать еще более уникальные макеты. Сюда же можно включить тенденцию использования реальных фото в дизайне/контенте вместо картинок из фотостоков — оригинальность всегда востребована.
Итого
Мы рассмотрели топ-10 тенденций в веб-дизайне за 2017, которые сейчас будут максимально активно использоваться дизайнерами в своей работе. На самом деле оригинальных приемов получилось не так уж и много, значительная часть трендов повторяется с прошлых лет: карточки, яркие фоны, параллакс, большая типографика и т.п. По шрифтами и навигации, вероятно, увидим оригинальные варианты в этом году. Если не считать пункт с виртуальной реальностью, можно сказать, что общая тенденция к упрощению внешнего вида онлайн проектов сохраняется, дизайнеры лишь продолжают искать максимально эффективные и интересные способы ее реализации.
С каждым годом увеличивается темп жизни, а вместе с ним растет и количество информации. Пользователи тратят все меньше времени на изучение сайтов, при этом число требований к ним возрастает. Инструменты привлечения внимания, которые были в топе еще год назад, теряют свою эффективность. Чтобы оставаться в тренде и создавать сайты под ключ , привлекающие клиентов, во время работы веб-дизайнерам стоит учитывать основные тенденции 2017 года. Какими они будут? Рассмотрим в этой статье.
Тенденции дизайна сайтов 2017:
- Одностраничные сайты
Эта тенденция становится все более распространенной, благодаря мобильным устройствам. Вся информация размещена на одной странице, которую удобно пролистывать на телефоне или планшете, не используя клики.
- Скроллинг
По-прежнему отличное решение для сайтов с однотипным контентом. Но не стоит забывать, что он добавляет вес странице и усложняет поиск среди уже пройденного материала, поэтому не рекомендуется для создания интернет-магазинов. Для оптимизации работы можно использовать совмещение классической навигации и скроллинга.
- Минималистичный дизайн
- Яркие цвета
Популярность ярких красок растет. Используйте больше палитр и оттенков, если желаете идти в ногу с модой. Для создания свободы пространства и ощущения воздуха можно использовать контрастные оттенки. Различные оттенки и градиенты цветов помогут лучше различать содержимое, которое они выделяют.
- Типографика
Шрифты по-прежнему являются сильным графическим элементом и играют одну из главных ролей в создании эстетики веб-страницы, вытесняя собой другие элементы. Хороший красочный заголовок также отлично смотрится с экранов планшетов и смартфонов и помогает донести информационное сообщение до пользователя.
- Анимация
Небольшие анимационные элементы и интерактивный дизайн приковывают внимание, делают сайт интереснее и улучшают взаимодействие пользователя с ним. А развитие JavaScript-библиотек позволяет упростить создание подобных страниц.
- Видео
На смену широкоформатным фоновым фотографиям приходит широкоформатное видео. Как и анимация, оно не только вызывает интерес со стороны пользователя, но и позволяет оживить страницу. Здесь главное использовать качественное изображение, соответствующее общей стилистике сайта. Видео помогает не только привлечь внимание зрителя, но и дает возможность донести до него информационное сообщение, например, рассказать о компании.
В эру развивающихся IT технологий, вы просто не можете стоять в стороне и наблюдать за происходящим. Вам необходимо быть этим происходящим. Чтобы не быть аутсайдером, нужно черпать знания из всех возможных и невозможных источников и быть в курсе всех событий. 2016 близится к концу, а это значит, что 2017 уже на пороге и внесет что-то новое в область веб разработки . А что именно, вы прочитаете в этой статье!
Не будьте аутсайдером, идите в ногу со временем.
Боты
Простые веб страницы перестали быть такими популярными, они становятся все больше и больше интерактивными, более того, через некоторое время наша онлайн жизнь будет настолько упрощена различными интерактивными подсказчиками, что нам и вовсе не придется напрягать свой мозг. Сейчас боты широко используются и это только начало. Все знают приложение Slack для корпоративного общения, так вот там вы тоже можете встретить бота, приветствующего вас, спрашивающего ваше имя и сразу же подставляющего его в ваш профиль. Боты выскакивают и во многих других инструментах и приложениях, что является началом эры онлайн помощников.
Motion UI
Анимация, видео, GIFки уже давно стали нашей повседневностью, все такое живое и привлекательное, что еще пользователю необходимо? Они широко применяются для быстрого создания CSS переходов и анимации для того, чтобы обеспечить удобство пользования. Последняя версия Motion UI оснащена анимационной системой группового обслуживания, гибкими CSS шаблонами, обладающими расщиреными возможностями для полноценного перехода и способна работать со всеми видами анимационных библиотек JavaScript. Мы более, чем уверенны, что подвижность полностью вытеснит использование статических изображений.
Адаптивность
Mobile first - слоган современности, ежедневно каждый человек, минимум один раз (не говоря уже о тех зависимых, кто фактически живут в руках с телефоном) ищут информацию в Интернете, отправляют сообщения или звонят, поэтому их пользование должно быть максимально удобным. Если вы владелец сайта и до сих пор не слышали об адаптивности , самое время хватать ноги в руки и внедрять ее , для того, чтобы обеспечить своему потенциальному клиенту комфорт использования вашего сайта. Как вы уже могли заметить сами, это настоящий must-have в мире веб дизайна и разработки, кроме того, это поможет вам сэкономить на разработке мобильных приложений .
Одностраничный сайт
Вас смущают сайты, с кучей страниц, где всего так много и все такое непонятное? Не волнуйтесь, эра одностраничных сайтов уже не за горами. Этот тип сайтов очень популярен среди больших компаний, они более удобны в использовании, и там легче найти информацию, необходимую пользователю, посетившему сайт с какой-то определенной целью.
Javascript сейчас на коне
Будущее за Javascript , несмотря на толки, что в нем есть недостатки и слабые стороны. Никто не спорит, что они действительно присутсвуют, но что в этом мире идеально? Даже Mac OS использует JS в своем аппаратном обеспечении. Более того, его библиотеки для front-end, такие как Angular , Node , React быстро набирают популярность, так же как и остальные, более мелкие библиотеки.
Не удивительно, что Javascript стал неотъемлимой частью стандартного стэка для веб разработки, наряду с HTML и CSS. И этот факт говорит сам за себя.
Parallax эффект
Чаще всего этот эффект используется, но не многие знают наверняка, как именно он называется. Для прояснения: это лучший способ добавить объемных слоев на сайт , также он может быть использован для добавления потрясающего 3D эффекта.
Тренды, которые изменят мир
В этой статье мы собрали все многообещающие тренды веб разработки, которые незамедлительно изменят мир. Но мы еще не знаем, какие именно тренды нам припас 2017. Будьте в курсе современных технологий и может быть однажды вы будете так вдохновлены происходящим, что придумаете что-то революционное сами?
” Джона Мур Уильямса, руководителя отдела контент-стратегии 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? Как вы думаете, какой веб-дизайн будет в моде в наступающем году?
Линии, цвета, светотени, пространство и формы - элементы, из которых состоит картина. Каждой эпохе были присущи свои тенденции в представлении мира. Веб-дизайнеры - это те же художники, только творят они в цифровом формате. И если направления в искусстве менялись не так часто, то веб-дизайн - трансформируется из года в год. Мы попробуем составить путеводитель по трендам графического оформления и предугадать, как видоизменятся сайты в 2017-ом. О трендах web-design 2018 года вы можете прочесть .
Итак, 14 поворотов на пути к модному интерфейсу:
1. Акцент на контент
Что важнее: содержание или оформление страницы. Ответ прост - дизайн должен выгодно представлять контент. Дизайнеры сервиса WebFlow (конструктора сайтов) предлагают закончить борьбу за главенство в 2017-ом, отдав предпочтение содержанию. Пользователь заходит на сайт в поисках ответа на запрос, неважно это товар, услуга или полезная статья. Задача веб-дизайнера подать контент максимально удобно для человека.
2. Уход от «гамбургеров»
Маленькая и удобная иконка меню в виде трёх полосок, которую прозвали «гамбургером» за сходство со слоями фаст-фуда, понемногу теряет свою популярность. Слишком часто её используют. В 2017-ом - приветствуются эксперименты с навигацией, непривычное расположение разделов меню, например на рамке вокруг сайта.
3. «Сard-based design»
Карточный веб-дизайн завоевал просторы интернета быстро. Плюсы этого способа оформления:
- удобное расположение блоков на сайте;
- визуально выгодная подача контента;
- адаптивность для мобильных девайсов.
На вопрос: быть или не быть карточному дизайну в 2017-ом, единогласного ответа нет. Его будут использовать, так как он уже доказал свою эффективность.
Но блочный дизайн понемногу теряет позиции фаворита из-за «заезженности» такого интерфейса. Остаются популярными минимализм и плоский дизайн. Понятные и удобные элементы навигации без лишних маневров, использование всего нескольких цветов в оформлении - проверенные временем приёмы.
4. Ломаная сетка
Мыслить нешаблонно предлагает дизайнерам этот тренд. Попробуйте использовать нестандартную сетку на сайте - пусть блоки немного «наезжают» друг на друга, а тексты выходят за привычные рамки.
Оригинальность всегда в моде. Нестандартные макеты и новые подходы в графическом дизайне уже опробовали западные дизайнеры. Самые смелые решения можно осуществить с помощью модулей Flexbox и CSS Grid.
5. Броские необычные шрифты - уклон на типографику
Крупный шрифт - один из основных элементов веб-дизайна уже не первый день. В новом году тенденция только укрепится. В тренде - надписи от руки и стилизованные под хенд-мейд иконки.
Отличным дополнением в оформлении сайта будет шрифтовая графика (если это уместно).
6. Адаптивный дизайн
Универсальность веб-сайтов для устройств с большими и маленькими экранами - уже не новая тенденция. Подход «mobile first» актуален и в 2017-ом. Кроме возможности подстроиться под мобильные гаджеты, в ближайшем будущем сайты должны адаптироваться под конкретного пользователя в зависимости от:
- возраста;
- навыков (компетенций).
Например, шрифты, яркость цветов, навигация будут меняться в зависимости от того, кто зашел на сайт: пенсионер, дошкольник, интернет-новичок или уверенный пользователь. Это станет возможно, благодаря развитию метаданных.
7. Цвета
Сочные монотонные цвета, их оттеки и полутона перешли из трендов прошлого года в нынешний. Дизайнеры продолжают использовать градиенты и создают интересные переходы. Кстати, если вы не можете определиться с выбором цвета - присмотритесь к модному «Greenery».
Он напоминает свежую весеннюю зелень и поможет расставить цветовые акценты на сайте. Специалисты Pantone Color Institute назвали его цветом 2017-го.
8. Инфографика
Приём не новый, но действенный. Любая статистика на сайте с помощью инфографики превращается в визуально понятную картинку с интересным содержанием.
9. Анимации
Статичные страницы - это скучно. Пользователю гораздо интереснее «ходить» по сайту с анимированными иконками. Привлекайте внимание анимацией к тем элементам, которые выгодны вам, например, к кнопке «Купить».
Используйте микровзаимодействия, чтобы пользователь увидел ответную реакцию на клики, переходы, подтверждения на сайте. Тогда механические действия станут интерактивными и привлекательными.
10. Фоновые фото и видео
Анимация - это хорошо, а широкоформатные фоновые фото и видео для оформления сайта - это ещё лучше. Видео придает динамику веб-ресурсу и позволяет погрузить пользователя в определенную историю, заглянуть «за кулисы» внутренних процессов компании или бренда. Cторителлинг в веб-дизайне всё ещё актуален. Фото - иллюстрирует, создавая атмосферу.
Если эти элементы вам надоели - используйте синемаграфию (симбиоз фото и видео). На таком изображении только один элемент беспрерывно плавно движется, словно часть фотографии оживает.
11. Стоп «сток»!
Стоковые фотографии встречаются на каждом углу в Интернете, и от этого теряется индивидуальность сайта. В 2017-ом веб-отдают предпочтение уникальным изображениям.
12. Скроллинг +
Скроллинг набрал популярность благодаря мобильным гаджетам, с которых «листать» удобнее. Но многих людей раздражает отсутствие возможности добраться до конца страницы. Среди тенденций 2017-го - соединение скролла и постраничной навигации. Пусть пользователь сам выберет, как просматривать контент.
13. Параллакс-скроллинг
В 2017-ом техника параллакса (движение на разных скоростях заднего фона и переднего) обретет новое дыхание - развитие более сложных многослойных приёмов. Экспериментируйте с параллаксом, увлекайте человека, который зашел на сайт интерактивными элементами. Но не переусердствуйте, дабы не запутать пользователя.
14. 3D-панорамы
360° панорамы - ещё один способ эффектно продемонстрировать пользователю товар или «подарить» посетителю возможность виртуально присутствовать в каком-то месте, например в офисе компании, отеле.
.jpg)
Это основные тренды веб-дизайна на 2017 год. Но не стоит зацикливаться только на них. Экспериментируйте, учитесь у опытных коллег и тогда ваш сайт станет оригинальным и понятным всем пользователям. А мы всегда готовы вам в этом !
