Тренды в веб дизайне. Текст в рамке

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

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

Мы предлагаем рассмотреть тенденции веб-дизайна, которые стоит знать в 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).

Часто в резюме дизайнеров можно встретить фразу: «Слежу за украинскими и зарубежными трендами, применяю их в работе». Фраза ни о чем не говорит, кроме того, что вы фолловите на Behance, Dribble некий список дизайнеров и пытаетесь их наследовать.

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

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

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

Базовые понятия

Википедия нам говорит:

«Тренд - основная тенденция изменений временного ряда».

Коротко и не очень понятно, согласитесь.

Чтобы его расшифровать, давайте поиграем в Тьюринга, он любил всякие головоломки. Для начала зацепимся за два понятия «тенденция» и «временной ряд» .

Тенденция - направление развития, склонность, стремление. Делится на микротенденции и макротенденции. Первые в дизайне живут 1–2 года, вторые - 5–7 лет.

Тенденция - направление развития, склонность, стремление. Делится на микротенденции и макротенденции.

Что такое временной ряд? Это последовательно измеренные через равные промежутки времени данные.

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

Для анализа трендов используется два метода.

1. Изучение природы данных. Откуда они взялись, почему образовались, что на них повлияло.
2. Метод прогнозирования. Прогнозирование - построение модели для предсказания будущих событий, основываясь на известных событиях прошлого.

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

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

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

Основные составляющие жизненного цикла тренда

• Анализ прошлого;
• Анализ настоящего;
• Прогноз будущего;
• Внедрение тренда;
• Принятие тренда.

Основные составляющие жизненного цикла тренда.

Профессии

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

Тренд-хантер

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

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

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

Трендсеттер

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

Трендсеттер - человек, пытающийся стать основателем или основавший некое материальное или нематериальное новшество.

В 60-х Эверетт Роджерс популяризировал диффузную модель.

Согласно теории Роджерса общество делится на 5 групп:

1. Новаторы - 2,5%.
2. Ранние последователи - 13,5%.
3. Раннее большинство - 34%.
4. Позднее большинство - 34%.
5. Отстающие - 16%.

2,5% людей - генераторы инноваций. Мы их знаем - Норман Кокс, Билл Гейтс, Стив Джобс, Илон Маск…

2,5% людей - генераторы инноваций.

Трендсеттеры - ранние последователи. Именно от них зависит, будет тренд трендом и будет ли он развиваться. Диффузная теория говорит, что не нужно влиять на все общество, предлагать товары всем - достаточно этих 13,5%.
Трендсеттеры делятся на две группы:

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

Тренд-вотчер

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

Тренды в дизайне 2017-го года

Цвета

Pantone объявил цвета, что будут в моде весной 2017-го. Это хорошо для печатников, для фешн-индустрии. У диджитал, веб-дизайнеров, дизайнеров интерфейсов, цифровая палитра шире. И нам важно запомнить: всё, наигрались в яркие контрастные чистые цвета. Теперь хотят спокойствия, выраженного в пастельных, нюдовых оттенках.

Спокойствие, выраженное в пастельных, нюдовых оттенках.

Графический дизайн

Кардинально нового нет.

Действительно живые логотипы

Не такой уж новый тренд - у любого телеканала анимированный логотип. Но в лого компании Seagate встроена информация о живых данных.

Лайн-арт

Тренд был популярен в прошлом году, будет популярен и в этом.

Негативное пространство

Что-то инновационное? Нет.

Эмоциональная типографика

GIF, синемаграф, глитч

Модерн и минимализм

Уникальная иллюстрация

Возрождение 3D

3D возвращается.

Моушн-дизайн

Хороший пример - Nike. По ним всегда можно ориентироваться. Цвета пастельные, 3D, негативное пространство.

UI-дизайн

И снова 3D

Иллюстрация вместо фотографии

Мы привыкли к иллюстрации книг, но как насчет иллюстрации приложений и веб-сайтов?

Становится модным иллюстрировать. Мы привыкли к иллюстрации книг, но как насчет иллюстрации приложений и веб-сайтов?

Уход от шаблонности к оригинальным решениям

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

Возрастной отзывчивый дизайн

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

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

В 2017-м их станет больше.

Лайк в фейсбуке - мини-взаимодействие. А когда вы определяете характер лайка: «вау!», «супер», «фу» - это уже микро-мини взаимодействие. Их станет больше.

Тактильная обратная связь

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

Персонализация, Touch ID

Внедрение Touch ID в девайсы позволит использовать эту технологию в банковской сфере.

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

Внедрение Touch ID в девайсы позволит использовать эту технологию в той же банковской сфере. Логин/регистрация через Touch ID.

Разговорные интерфейсы

Проект, который здесь изображен называется «Лука» . Это чат-бот в интерфейсе - сайт-бот. Мой эксперимент. Хочу Лукой заменить классический сайт студии. По сути, роль студии - рассказать о себе и привести человека к тому, что он оставит онлайн-заявку. Я решил это сделать в виде сайт-бота, который общается с пользователем через разговорный интерфейс.

UX-дизайн

Де-линейность

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

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

Диалоговое взаимодействие

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

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

У юиксеров появится новый вид деятельности - написание сценариев для чат-ботов в социальных сетях или же для сайт-ботов.

Поведение, жесты, новые метафоры

Всем надоели кнопки. Появятся новые метафоры (контроллеры).

Специализация

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

Узкие специалисты будут существовать всегда, но многие из нас будут универсалами.

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

Сварщик - дизайнер процессов.

Автоматизация дизайна/алгоритмический дизайн

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

Ответственность

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

Микро-тренды закончились. Подведем итоги.

Я считаю, что 2017-й будет годом креатива, возврата к реализму и годом сотрудничества с искусственным интеллектом.

Тренды на ближайшие 5-10 лет

Невозможно говорить о трендах и рассказать только микро-тенденции. Гораздо интереснее заглянуть в будущее.

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

Что касается параллельной/альтернативной системы - должна появиться концепция, которая будет противоположна концепции нынешней системы. Это и о стремлении интерфейсов раствориться в нашей реальности. Хороший дизайн - это незаметный дизайн.

Вспомните фильм «Она». Представьте операционную систему на основе искусственного интеллекта. Вы будете разговаривать с ней. Это самый природный путь взаимодействия для человека. Самый простой.

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

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

В ближайшее 10 лет мы выйдем за пределы устройств и существенно дополним нашу реальность.

Как внедряются тренды в работу?

Нет никакого рецепта, но есть два главных правила:

1. Говорить нет, если хотите внедрить инновацию ради инновации.
2. Четко понимать задачи. Понимая задачи, просто понять, какие тренды подходят, а какие - нет.

Самый главный тренд всех времен и народов - правильное дизайн-мышление.

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

Минимализм

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

Конструкции из букв (Letter stacking)

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

Текстовые логотипы

Классический текстовый логотип – это всегда актуально и удивительно эффективно, как по сей день успешно демонстрируют такие мощные бренды, как Sony, Coca-Cola, Asus, IBM и многие другие. В 2016 году внимание дизайнеров сфокусировалось на использовании различных шрифтов с добавлением простых эффектов: стилизации части надписи, увеличении или уменьшении кернинга, комбинации стилей (особенно рукописных).

Леттеринг (Lettering)

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

Плоский дизайн (Flat)

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

Градиент

Учитывая популярность простоты, градиент должен был сдать свои позиции. Однако, многие компании, в том числе Apple, обеспечили ему успешный comeback. Но следует отметить, что использование градиента в графическом дизайне претерпело значительные изменения. Основная идея применения этого стиля сегодня заключена в той же простоте. Если раньше буйство цветов и оттенков, смелых сочетаний было основным способом придания глубины и объема, то теперь с этой же целью используются приглушенные тона, палитры из плоского и material дизайна.

Лайн арт (Line art)

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

Трафаретная типографика (Stenciled Typography)

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

Черно-белые логотипы

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

Наложение цветов (Overlapping Gradients)

Еще один тренд, который связан с градиентом и активно использовался в 2016 году.
Суть его заключается в использовании простых геометрических форм, которые, пересекаясь между собой, создают уникальный и неповторимый стиль. Наложение, как дизайнерский прием, зародилось относительно недавно и использовалось в основном для создания логотипов в виде различных животных. Но со временем спектр применения расширился и был признан всемирно известными компаниями. Вспомним обновленный лого платежной системы Mastercard – команда дизайнеров из Pentagram вдохнула в него новую жизнь, отказавшись от использования теней в и убрав шрифт с основного изображения. В итоге мы получили простой и запоминающийся логотип. Overlapping Gradients уверенно развивается, только набирая обороты. Потому можно смело рассчитывать, что в следующем году он станет одним из наиболее популярных направлений в графическом дизайне.

Геометрические фигуры

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

Текст в рамке

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

Рукописные логотипы (Handmade)

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

Негативное пространство (Negative space)

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

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

P.S. Инфографику к этой статье вы можете посмотреть .

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

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

1. Юзабилити станет товаром

Пример улучшения юзабилити сайта http://www.telemirspb.ru/

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

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

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

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

2. Исчезнут длинные тексты

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

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

Посмотрите аудиторию вашего сайта, например, в Яндекс.Метрике в отчете Сводка → Тип устройства и увидите, какой процент клиентов заходит с телефонов и планшетов. Не забывайте об этой аудитории при размещении контента.

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

6. Использование синемаграфий или «живых» изображений

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

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

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

7. Отказ от «типичных» стоковых фотографий

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

9. Мобильные устройства в первую очередь (Mobile First)

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

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

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

Что 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 году - наконец-то великолепные винтажные оттенки возвращаются.

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