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

Смелые и яркие цвета

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

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

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

Вообще, многие актуальные тренды 2017 года возникли под влиянием принципов Материального дизайна Google.

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

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

Жирный шрифт

Жирный шрифт привлекает внимание читателей. На крупные и выделяющиеся надписи невольно обращаешь внимание.

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

Просто взгляните:

Еще один хороший пример использования броских шрифтов - HubSpot. Текст находится на первом плане и подкрепляется графикой:

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

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

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

Мы применили этот метод при создании этой инфографики. Комбинация жирного шрифта и интересных цветовых решений привлекает внимание:

Шрифты от Google Fonts

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

Кстати, все 810 шрифтов абсолютно бесплатны! О да, людям нравятся бесплатные вещи. А еще им нравятся вещи, которыми очень легко пользоваться. Вот один из примеров комбинирования нескольких популярных шрифтов от Google:

На нашем сайте мы пользуемся шрифтами Roboto и Open Sans.

Оригинальные фотографии

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

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

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

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

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

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

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

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

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

Нарисованные от руки изображения и значки

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

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

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

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

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

Тренд подхватил и сервис MailChimp. В отчете за 2016 год он тоже подобные рисунки.

Компания Moz, занимающаяся разработкой программ для маркетинга, вставляет иллюстрации в шапку статей:

Иногда наша любовь к рисункам проявляется и в других проектах:

Возвращение к истокам минимализма

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

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

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

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

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

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

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

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

Простой дизайн изображения легко доносит нужную информацию.

Использование GIF-изображений

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

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

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

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

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

Двухцветные изображения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги 2017

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

Большое меню

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

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

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

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

Fashion-эффекты

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

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

Согласно статистике Internet Live Stats , в мире насчитывается более 1,2 миллиарда сайтов. Каждую секунду это значение становится выше примерно на 10 единиц. Независимо от отрасли, в которой вы работаете, ваш веб-сайт должен соответствовать современным требованиям как в технологическом, так и в дизайнерском аспектах. В этой статье мы сделаем упор на внешний вид сайта — как он должен выглядеть в 2017 году. Слишком яркие, красочные и вычурные шрифты считаются устаревшими уже давно. Иконки вытесняют изображения, чтобы облегчить пользователям перемещение по пунктам меню. Впрочем, эти факты известны большинству специалистов, связанных с Интернет-маркетингом. Из данной статьи вы узнаете, как должен выглядеть современный дизайн сайтов.

1. Ориентированность веб-дизайна прежде всего на мобильные устройства.

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

Что означает mobile-first подход? Это веб-разработка, в которой основное внимание уделяется адаптации под мобильные устройства. Использование адаптивного дизайна вполне обосновано, особенно, если учитывать официальную статистику, опубликованную компанией StatCounter , независимым агентством по веб-аналитике. По его данным, доля использования сети Интернет с помощью мобильных устройств составляет 51,3%. Именно по этой причине Google прекратил поддержку своего сервиса Instant Search. Эта функция была доступна пользователям десктопов и предлагала результаты поиска во время того, как человек только вводил свой запрос. С ростом трафика владельцы бизнеса смогут получить больше продаж. Поэтому сосредотачиваться на более широкой аудитории — вполне имеет смысл.

2. Скрытая навигация

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

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

3. Просторный первый экран

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

4. Выделенные области навигации

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

5. Разработка дизайна сайта в стиле Material Design Lite

Material Design стал важным продолжением так называемого плоского дизайна, широко используемого тренда в течение последних нескольких лет. Android-дизайн был создан как интерфейс для мобильных устройств, но теперь он полностью покорил и десктопы. Этот визуальный подход делает юзабилити основным компонентом всей задумки. Material Design Lite (MDL) является следующим поколением Material Design. Он включает в себя рекомендации, наборы макетов и общую структуру с инструментами, которые позволяют любому дизайнеру быстро и легко создавать MDL сайт с помощью удобной выборки палитр.

6. Большие иконки

Популярность значков в дизайне веб-сайтов объясняется тем, что человек помнит 65% визуальной информации через три дня и только 10-20% — письменной или устной. Поэтому человеческому мозгу легче обрабатывать изображения, чем текст. Стоит отметить, что иконка должна соответствовать тексту, к которому она относится, чтобы не путать пользователей. Приевшиеся изображения людей с гипертрофированной и искусственной мимикой — устарели. Иконки также должны быть векторными, чтобы корректно отображаться на любом устройстве. Вы можете посмотреть примеры дизайна сайтов в нашем и познакомиться с нашими работами.

Главные требования к использованию иконок в веб-дизайне:

• Иконка должна соответствовать контенту;
• Она должна содержать четкое сообщение;
• Она должна быть векторной;
• Иконка должна легко читаться, будь она маленькая или крупная.

Перейдем к последним тенденциям в выборе шрифтов и цветов для сайта.

7. Простые шрифты и мягкая цветовая палитра

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

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

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

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

” Джона Мур Уильямса, руководителя отдела контент-стратегии 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? Как вы думаете, какой веб-дизайн будет в моде в наступающем году?