Откройте для себя тренды, техники и инструменты веб-дизайна, которые займут лидирующие позиции в 2018 году. Перевод статьи Джона Уильямса.
Творчество – это разговор, который начался давным-давно и продолжается с тех пор, как мы впервые научились воссоздавать элементы нашего мира в охре и древесном угле на стенах пещеры. Мы научились наполнять смыслом даже абстрактные фигуры, вырезанные палочками в глине.
Тренды дизайна – это лишь основные темы в этом разрастающемся, хаотичном, полифоническом разговоре. Независимо от того, хотим ли мы их принять или противостоять им, наше творчество идёт бок о бок с трендами. Что есть инновация, если не уход от стандарта? И как определить стандартную, но прошлогоднюю тенденцию?
Итак, я недавно собрался вместе с командой дизайнеров (Jonn Williams, Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff) и попросил их заглянуть внутрь их кристальных VR-шаров и посмотреть, каким же будет дизайн в 2018 году. 🔮
1. Разбитая разметка
Разметка, на которую дизайнеры всегда полагаются в бесконечном поиске «привлекательности» макета, привносит гармонию и логику, но сама по себе становится своего рода ограничением.
Иногда мы просто хотим уйти от разметки, ок?
Это не значит, что разбитая разметка полностью исключает наличие самой разметки – дизайнеры позволяют перемещаться изображениям и текстовым элементам В и ЧЕРЕЗ блоки и зоны, которые обычно жёстко разделяются в более стандартных и привычных макетах. Здесь обычные изображения и текст начинают перекрывать друг друга и сходиться, часто создавая неожиданные и красивые сопоставления растра и буквенного формата.
Трудно сказать, задуманы ли подобные эффекты или это всё просто «восхитительная» ошибка вёрстки…
Продолжать?
13. CSS разметка
В конечном счёте, как профессионалы в области пользовательского интерфейса (UX), наша задача – предоставить полезный и приятный для всех опыт.
Другими словами: наша работа связана с включением. Давайте сделаем 2018 год для всех нас, чтобы сосредоточиться на выполнении работы в полной мере.
16. Ещё кое-что о видеоформате
Вы видите это повсюду: новостные сайты, которые практически настаивают на том, чтобы вы посмотрели видео, а не читали текст, Snapchat, затем Instagram, Facebook. Конечно, Excel скоро их догонит!
Но, как и большинство технологий, это палка о двух концах. Тысячи журналистов потеряли работу из-за массового перехода от текста к видео.
И перспективы могут быть не столь хороши для медиа. Согласно обзору Columbia Journalism Review :
Издатели, которые перешли к видеоформату, потеряли большую часть своей аудитории всего за год, выпуская однотипные, одноразовые видео.
Независимая журналистика страдает и без этого (спасибо, Трамп), но переход к видео не помог точно. Одно положительное замечание: согласно Digiday, «Цена за показ для видео гораздо больше, чем отображаемая цена». В идеальном мире это значило бы, что газеты, текстовые новости могут уйти, но, конечно, этого не произойдет.
Стоит вспомнить сильные стороны текста:
- Это быстро;
- Это дёшево;
- Текст по-прежнему является основным форматом большинства сообщений в сети.
Удивлены? Я бы посоветовал вам изучить любые крупные социальные сети. Если вы не выберете Instagram, Pinterest или Snapchat, скорее всего, вы увидете много текста. И даже на тех перечисленных платформах текст по-прежнему играет важную вспомогательную роль.
Даже если картинка «стоит тысячи слов», она редко охватывает контекст: кто, что, когда, где, почему и как. Это приводит нас к следующему пункту:
17. Рост UX текста продолжается
Любой, кто влияет на дизайн, становится дизайнером. Сюда входят разработчики, менеджеры, даже корпоративные юристы. Все – дизайнеры.
Я немного коснулся этой темы в прошлом году , но сегодня я хотел бы ещё больше сосредоточиться на росте дисциплины под названием «UX текста».
Проще говоря, автор UX фокусируется на содержании пользовательских интерфейсов, в основном для более крупных цифровых продуктов и веб-приложений. Теперь, когда я объясняю людям, что я пишу контент для продуктов таких компаний, как Webflow и, в прошлом, LinkedIn, они обычно говорят – «что?»
Будьте уверены: пользовательские интерфейсы заполнены письменным контентом. И этот контент часто играет ключевую роль в понимании:
- Что вы можете сделать в пользовательском интерфейсе;
- Как это сделать;
- Какие ограничения и сложности вы встретите на пути.
Но текст в UX может сделать гораздо больше. Слова в интерфейсе также могут быть мощным инструментом для формирования восприятия брендов. Подумайте обо всех твитах, которые вы видели, или обо всех страницах 404 с остроумными фразочками.
Это становится очевидным в формате пользовательского интерфейса – чатбота. Эти пользовательские интерфейсы состоят только из слов. Слова становятся пользовательским интерфейсом. Личность, которая стоит за чатботом – или бренд – может выражаться только через язык, возможно, приправленный тщательно подобранными эмодзи.
Как опытный UX-писатель, я так рад видеть, что эта дисциплина получает всё больше признания. Она давно заслужила.
18. Дизайн. Систематизация
Как систематизировать успехи дизайна, масштабировать их и сплотить во многих продуктах и средах бренда?
Системы проектирования ориентированы на перевод эстетики бренда и подходы к функциональности в модульные компоненты, которые можно соединять, чтобы удовлетворить (в идеале) любые уникальные потребности пользовательского интерфейса. Когда язык дизайна систематизирован, он упрощает процесс принятия решений, сокращает время разработки и освобождает дизайнеров для работы над более простыми проектами, в которых шаблоны проектирования ещё не установлены.
И бренды, как правило, бегут за трендом. В UXPin запустили Systems, инструмент для создания и поддержки систем проектирования. В Shopify запустили Polaris. В UX Power Tools запустили библиотеку, которая пытается сделать Sketch жизнеспособным инструментом (посмотрим).
19. Принципы – это первое
Мир дизайна долгое время был одержим спорами о курице или яйце: контент-первый или дизайн-первый.
Я всегда был на стороне контента в первой части аргумента. И не только потому, что я «контент-парень». Мне просто кажется, что чистая логика прибивает сообщение, прежде, чем вы решите, как его упаковать.
Но в последнее время, поскольку я перешёл от разработки стратегий контента для конкретных результатов к большей системно-ориентированной работе (стратегии контента на уровне бренда), я думаю, что наша работа не должна начинаться с дизайна или контента.
Он должен начинаться с принципов .
Всё остальное – как оно выглядит, как оно работает, как оно звучит – должно вытекать из набора чётко определенных и сформулированных принципов. Другими словами: принципы обеспечивают причину.
Например: в Webflow наша миссия состоит в том, чтобы дать возможность дизайнерам, предпринимателям и творческим профессионалам воплотить свои идеи в жизнь внутри сети. Эта миссия касается всего, что мы делаем, даже созданы стандарты голоса и тона.
Каждый раз, когда я собирал один из этих списков трендов, я удивлялся тому, насколько меня ограничивает год +1, и как сложно определить приоритетные направления.
Вот почему я упустил некоторые очевидные моменты – например, AR и VR, которые на сегодняшний день имеют ограниченное влияние на интернет. А что бы вы добавили в этот список?
Контент-редактор сервиса по составлению инфографики 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-изображений
Все (ну, почти все) любят гифки. Они помогают нам в разговоре, потому что иногда могут передать эмоции лучше, чем текст.
Кроме того, для их воспроизведения не нужны никакие специальные программы. Обычно гифки небольшого размера, и их можно встроить практически куда угодно.
Они лучше, чем видеоролики и изображения, особенно в тех случаях, когда нужно уменьшить время загрузки страницы и количество трафика. Я считаю, что благодаря своей универсальности гифки станут еще более полезным элементом дизайна.
Мне очень нравится вставлять гифки в шапку статьи. Вместо того чтобы ставить туда скучное стоковое изображение, потратьте пару минут и сделайте гифку вроде этой .
Для этого вам не придется прилагать особых творческих усилий, зато так вы точно привлечете внимание к вашему посту в социальных сетях. Вот еще один хороший пример использования гифок в шапке статьи.
Двухцветные изображения
Речь идет о комбинации двух, обычно очень ярких или контрастирующих цветов на одном изображении. Для создания таких изображений вам придется включить дизайнерские навыки, но оно того стоит.
Такие красивые двухцветные картинки сможет сделать только очень умелый дизайнер. Я уверен, что не смогу создать нечто подобное, но это не значит, что вам нужно вычеркнуть этот прием из своих дизайнерских планов.
С каждым годом растет число сайтов, удивляющих и восхищающих новыми фишками в оформлении. Два года назад мы разместили переводную о трендах в веб-дизайне 2015. Что изменилось с тех пор? По-прежнему делается акцент на качественной графике и минимализме, крупных шрифтах и интерактивных элементах (например, скрытое меню). Однако технологии не стоят на месте, и веб-дизайнеры экспериментируют с динамикой, анимацией, расположением объектов на экране при этом не в ущерб производительности сайта. Предлагаем вашему вниманию обзор трендов, которые, по традиции, задают наши западные коллеги.
1. Принцип «mobile-first»
Название принципа говорит само за себя: дизайн разрабатывается, прежде всего, с учетом удобства просмотра на экранах мобильных устройств. Этот принцип не нов, но так как более 60% пользователей выходят в интернет именно со смартфонов, он стал определяющим в этом году. Поскольку экраны мобильных устройств имеют малые размеры, дизайнеры предусматривают максимально информативное, но при этом эффектное отображение контента. То же самое касается текстов - воде и пустым фразам в концепции «mobile-first» нет места.
2. Иллюстрации «от руки»
Это прекрасный способ оригинально передать идею или настроение. Нарисованные от руки иллюстрации уникальны, вносят разнообразие и нотки неформальности во взаимодействие пользователя с сайтом, делают дизайн теплым и дружественным.
Пример иллюстрации с сайта dropbox.com
Талантливые иллюстраторы могут создать изображения, которые наилучшим образом будут соответствовать бренду и фирменной стилистике, с их помощью можно добиться глубокой персонализации.
3. Анимация
Дизайнеры постепенно отходят от использования только статичных изображений и ищут новые способы вовлечения аудитории, чтобы выделиться на фоне других. Брендам нужна персонализация, и анимация, во многом благодаря развитию HTML5, CSS и jQuery, играет здесь не последнюю роль.
Анимация может быть реализована по-разному: от необычной полосы состояния загрузки, которая скрасит ожидание, до изменения внешнего вида объекта при наведении курсора. Также встречается полноэкранная анимация, которая является центральным элементом, фокусирующим внимание пользователя.
Но анимацию надо использовать взвешенно, чтобы углубить взаимодействие пользователя с сайтом, а не отпугнуть его. Ведь никто не захочет ждать просмотра основного контента, пока будет загружаться нелепая и бесполезная анимация - все должно выглядеть естественно, уместно и не отвлекать.
4. Смелые цвета
До недавнего времени специалисты рекомендовали использовать в дизайне лишь «веб-совместимые» цвета - те, которые не вызывают раздражения и не дают нагрузки на зрение. Сегодня все меняется - при грамотном использовании смелые цвета творят чудеса, превращая обычные сайты в яркие, сочные и запоминающиеся.
Пример использования смелых цветов на spotify.com
Яркие цвета - это способ персонализации в условиях глобальной моды на минимализм в дизайне. Вероятно, дизайнеры будут и дальше экспериментировать с палитрами, создавая уникальные градиенты и всплески цвета.
5. Необычный скроллинг и параллакс
В прошлом дизайнеры старались самую важную информацию разместить в части страницы, которую пользователь видит сразу после перехода на сайт. Сегодня же сложно определить, какая часть страницы будет «видимой», ведь переходы осуществляются с устройств с разным разрешением дисплея. Поэтому нужен другой подход.
Скроллинг, изначально необходимый для перемещения по странице вниз и вверх, сегодня креативно используется дизайнерами. При умелой реализации он становится универсальным инструментом подачи контента. Так, можно автоматически настроить показ и остановку видео или анимации при прокрутке, появление текста и изображений и т.п.
6. Асимметричные шаблоны
2016 год прошел под влиянием сетчатых шаблонов, а в 2017 году наметилась тенденция к использованию асимметричных и «рваных» шаблонов. Несмотря на то, что в подавляющем большинстве бренды предпочитают традиционные и понятные карточные UI-шаблоны (ведь они логичны и просты для ориентации), некоторые все же начинают экспериментировать для того, чтобы выделиться и отстроиться от конкурентов.
Пример асимметричного дизайна (isaidicanshout.com)
Асимметричный дизайн, созданный умелыми руками, отлично подходит для привлечения внимания к определенным частям страницы. Благодаря разным размерам шрифтов и расположению элементов можно правильно расставлять акценты на странице и направлять пользователей в нужное русло.
7. Тени
Сами по себе тени - это далеко не новшество в веб-дизайне. Одно время они были популярны, потом о них забыли. В чем же тогда тренд? В использовании огромных, порой даже гипертрофированных теней, отбрасываемых изображениями при наведении курсора.
Глубокие тени при наведении курсора на изображения (abduzeedo.com)
Такой подход позволяет в плоском шаблоне акцентировать внимание на активном элементе и вовлечь во взаимодействие. При этом создается эффект глубины - по таким изображениям приятно просто водить курсором.
8. Большие и жирные шрифты
Типографика - это еще один способ персонализации. Распространение устройств с высоким разрешением экранов делает шрифты читабельными и хорошо различимыми, поэтому дизайнеры все чаще экспериментируют с ними.
Пример использования крупного шрифта (bigyouth.fr)
9. Ультраминимализм
Минимализм давно стал определяющим трендом в веб-дизайне. Но некоторые идут дальше, убирая с сайтов любые намеки на декор, оставляя лишь самые важные для пользователей элементы.
Абсолютный минимализм (mathieuboulet.com)
В приведенном примере есть только указание «Scroll», ссылка на раздел «О Себе» и ссылки на профили в соцсетях. Далее при прокрутке уже идет портфолио дизайнера.
10. Микс горизонтального и вертикального текста
Изменение привычного горизонтального расположения текста «освежает» сайт и мотивирует прочитать, что же там написано.
Пример необычного направления текста (takewhatyoucancarry.com)
Обратите внимание, что микс сделан грамотно - здесь нет лишних сбивающих с толку элементов. Слово «take» написано вертикально - этого достаточно для фирменной подачи контента.
11. «Модуляция»
В этом случае текст должен контрастировать с фоновыми изображениями, чтобы они не сливались.
13. Двухцветность
В основе дизайна сайта лежит 2 базовых цвета. Смотрится это стильно и современно. Например, сайт Australian Design Radio выдержан именно в таком стиле:
14. «Геометрические» шрифты
В этом случае шрифты сочетаются с разнообразными геометрическими формами. Для этой цели подходят шрифты вроде Futura, ITC Avant Garde и Proxima Nova.
Пример использования «геометрических» шрифтов (hugeinc.com)
Выразительности, напористости и даже некой агрессивности сайту можно придать, используя очень жирные шрифты указанных выше семейств.
Подводим итоги
В 2017 году дизайнеры будут пытаться внести в привычный минимализм штрихи индивидуальности. Кто-то будет делать это с помощью цвета, кто-то - с помощью шрифтов, а кто-то - с помощью необычного расположения блоков.
При разработке и утверждении дизайна не забывайте главное правило - он должен быть удобен для пользователя и мотивировать совершить целевое действие. Уверены ли вы в производительности вашего ресурса. Об этом вам может рассказать отчет проведенного аудита сайта в службе “Персональный менеджер” SeoPult. Помимо аудита дизайна и юзабилити вы получите развернутый анализ технической составляющей, семантики, позиций по отношению к конкурентам и т. п. Все это поможет вам улучшить сайт и повысить его эффективность как инструмента продаж.
Информации в сети становится всё больше, взаимодействие пользователей с сайтами всё короче, а их требования к страницам в интернете всё выше. Приёмы и инструменты веб-дизайна, которые казались новыми и интересными ещё год назад, сегодня уже не вызывают былого восторга, а зачастую и вовсе раздражают.
В связи с этим веб-дизайнеры постоянно работают над усовершенствованием пользовательского опыта, опираясь на технологические возможности мобильных устройств, аналитику и пользовательский фидбек.
Вот шесть трендов веб-дизайна, которые, скорее всего, получат своё развитие в 2017 году.
Карточный дизайн уходит в прошлое
Уже несколько лет дизайнерами активно эксплуатируется карточная структура сайта. Такая визуализация получила широкое распространение из-за сайта Pinterest и благодаря развитию адаптивных сайтов. Блоки действительно очень удобно адаптировать под любой размера экрана. Пик развития карточного дизайна наблюдается сейчас, но, скорее всего, он постепенно станет терять свои позиции. На смену ему будет приходить уникальный чистый дизайн с простой или же наоборот более оригинальной структурой.
Развитие тренда: маленькие анимированные элементы очень естественно вписываются в общий облик страницы . Пользователь интуитивно готов к ним, поэтому иногда даже не замечает их присутствия, но они улучшают опыт взаимодействия со страницей, делают её удобнее и понятнее. Более того, использование подобных элементов с каждым днем становится проще из-за развития JavaScript-библиотек.
Скроллинговых сайтов станет меньше
Несмотря на то, что тренд на скроллинговые страницы появился ещё два года назад, основное развитие он все-таки получил в 2016 году. Нужно отметить, что окончательно такие сайты в ближайшее время не исчезнут, так как работать с ними с мобильных устройств очень удобно. С другой стороны, пользователь, попадая на скроллинг-страницу, не всегда знает, что ему нужно делать, и это серьезно сказывается на его опыте взаимодействия с сайтом. Скорее всего, в следующем году станет больше страниц с классической навигацией и сайтов, которые будут совмещать в своем дизайне элементы скроллинга и «классики».
Развитие тренда: скроллинг попадает в ряд тех приёмов веб-дизайна, которые уже успели немного надоесть интернет-аудитории. Скроллинг-сайты порой не оправдывают ожидания пользователя, поэтому изменения в этой сфере будут продиктованы в первую очередь нуждами оптимизации пользовательского опыта.
Шрифты станут главным графическим элементом
Начавшийся в 2016 году тренд на использование шрифтов и больших надписей в качестве ключевых элементов дизайна сайта продолжит развиваться в 2017 году. На руку этому тренду играет и мода на минимализм, и технологическая экспансия мобильных устройств. Минимализм диктует необходимость утилизации базовых составляющих дизайна, что позволяет надписям становиться самостоятельными элементами в чистом виде . Стоит также заметить, что шрифт сам по себе - очень сильный графический элемент, что всё чаще и чаще будет использоваться при создании интернет-страниц.
Развитие тренда: в связи необходимостью оптимизировать сайты под мобильные экраны, все шрифты стали намного крупнее. Они стали занимать главную часть страницы, вытесняя собой другие элементы. Шрифт как основной элемент графического дизайна хорошо смотрится на дисплеях смартфонов и планшетов и, если расположен правильно, привлекает к себе внимание, тем самым напрямую донося до пользователя сообщение. Полностью текстовые сайты могут конкурировать с крупными имиджевыми главными страницами, построенными на использовании широкоформатных фотографий.
Видео будет чаще использоваться для оформления сайтов
Вкупе с возрастанием роли анимированных элементов в веб-дизайне, широкоформатное видео, скорее всего, займет то место, на котором сейчас расположены широкоформатные фотографии. В пользу этого говорит и то, что включение такого видео в дизайн сайта стало намного проще из-за того, что сами по себе видео стали легче грузиться современными устройствами.
Этот тренд очень активно подхватывается многими компаниями, и скоро мы будем наблюдать видео на каждом втором сайте, что также повысит потребность в новом интересном контенте. Поэтому видеоразделы стоковых библиотек, скорее всего, тоже будут активно пополняться.
Развитие тренда: пользователи привыкли к фото и статике. Видео вызывает удивление и притягивает к себе внимание за счёт того, что визуально «оживляет» страницу. Однако несмотря на то, что это кажется новым сейчас, скорее всего, тренд долго не продержится. Потому что к видео тоже привыкнут, и через пару лет оно останется только в тех областях, где его использование является уместным.
Если вы хотите подсказать нам новость, отправьте намек на почту редактору (а вот пресс-релизы в этот раздел отправлять не нужно). Если вы стесняетесь, можете прислать новость анонимно.
Среди дизайнеров распространено мнение, что тенденции будут важной частью их работы. Постоянно быть в курсе последних обновлений считается обязательным. Многие дизайнеры оценивают работы других через призму тенденций, а отметка некоторых работ тегом #старый может расцениваться как оскорбление, как будто если в проекте не использованы самые последние тренды, он автоматически становится менее ценным.
Однако, есть основания следовать тенденциям. Если зайти на такие сайты, как Awwwards, FWA или CSS Design Awards, они могут вдохновить вас, и как следствие, помочь выйти за пределы ваших дизайнерских привычек. Вы можете узнать о новых визуальных мирах, которые вы потом можете (сознательно или нет) интегрировать с графическим языком. Наблюдение за работой других помогает улучшать ваши собственные навыки, а также оставаться в курсе новейших технологий.
В последний год или два, стало заметно, что многие дизайнеры стараются отойти от простых композиций. Появляется все больше и больше открытых, казалось бы, хаотичных, «ломаных» и «резаных» дизайнерских работ. Прославление сетки, как раньше, теряет свою значимость, а правила преднамеренно и сознательно меняют. Контент начинают перемещать, он будто бы движется, а его части иногда перекрываются и переплетаются между собой.
Большую роль в этом процессе играет эволюция Canvas и WebGL. Современные проекты часто немного запутанные, менее интуитивно понятные, чем минималистичные, но они, конечно, производят неизгладимое впечатление на пользователей.
Что еще нас ждет в веб-дизайне 2017 года? Вот мои предсказания.
Открытая композиция
До недавнего времени в мире дизайна доминировали «закрытые», симметричные и статические композиции. С 2016 года появилось множество сайтов, которые отошли от этого стиля. Открытые композиции со свободно расположенными элементами, бегущими куда-то за пределы экрана, набирают популярность — примеры таких работ можно увидеть у romainpsd.com , durimel.io или booneselections.com . Распределение элементов на этих сайтах создает впечатление, что они продолжают жить и за монитором.
Ассиметрия
2016 также нарушил правило симметрии, которая преобладала в индустрии довольно долгое время. Многие дизайнеры создали ассиметричные макеты, которые далеки от идеального баланса с левой и правой стороны. В качестве примеров я хотел бы показать вам отличный сайт culture.pl , хаотичный dada-data.net , и ранее упомянутый durimel.io .
Разнообразие
Дизайнеры создали более динамичные композиции, в которых больше пересекающихся диагональных линий (poigneedemainvirile.com , vanderlanth.io), или более сложных форм (residente.com/en , helloheco.com , predictiveworld.watchdogs.com).
Иллюзия хаоса
В 2016 году многие дизайнеры сознательно и намеренно начали отходить от минималистичного дизайна. Было стремление к большей свободе и менее жесткому подходу к проектированию. За этим, безусловно, стоит необходимость изменений, но еще и обычное чувство скуки. В какой-то момент всем надоедает создание простых макетов с простыми элементами.
Тем не менее, анализируя проекты 2016 года, становится заметно, что хаос лишь кажется хаосом. Макеты по-прежнему основаны на классическом контрасте форм, цветов, фактур, размеров и т.д. Что изменилось, так это расположение различных элементов и гармония зависимости между ними. Сейчас, заголовки, иконки или текстовые блоки чаще смещаются, несмотря на банальную логику. Несмотря на то, что они являются частью одного тематического блока, они разделены и расположены на приличном друг от друга расстоянии. Они не выровнены по одному краю и имеют разные подложки.
Некоторые геометрические фигуры «подвешенные в воздухе» обладают только декоративной целью (melanie-f). Это также характерно для наложения элементов друг на друга. Тексты частично перекрываются фотографиями, как, например, на e03.epicurrence.com и melville-design.com , или изображения накладываются друг на друга, что можно увидеть на olivierbernstein.com.
Это также отличительный прием, чтобы нарушить привычную минималистическую гармонию. Огромные заголовки резко контрастируют с нежными и тонкими структурами и цветами.
Богатый фон и паттерны
Все чаще и чаще появляются фоны и паттерны на которых есть маленькие черточки , полоски или точки .
Особенно распространен паттерн с сеткой, который является «рамкой» для других элементов макета. Эти элементы параллаксом перемещаются по сетке и часто расположены хаотично.
Паттерн с сеткой
Одним из первых сайтов, на котором появилась такая сетка был werkstatt.fr , который, однако, не использовал характерных анимаций.
Немного другой способ использования паттерна с сеткой показаны у klimov.agency , brand.uber.com и maisonullens.com . В этих случаях сетка обладает очень специфической функцией — сделать движения элементов логическими. Это позволяет рационализировать нестандартные решения и дает ответы на такие вопросы, как «почему поля иллюстрации не гармонируют с полями кнопки»? Это создает ритм, и в то же время оправдывает свои нарушения.
Декоративные детали
Что действительно изменилось за последнее время, так это подход к деталям. Происходит постепенный отход от минимализма. Существует много других элементов, у которых только декоративные функции. «Летающие » геометрические фигуры и соответствующие фрагменты. Линейные, хрупкие иконки немного отрываются от контента, который они иллюстрируют. Подчеркивания и линии сдвигаются . Появляется зернистость и глитчи, как на bigyouth.fr или kikk.be.
Кнопки реже создаются в виде четких прямоугольников с текстом внутри. Они часто выглядят как мягкие, смещенные линии, как, например, на dahllaw.dk или yasuhiroyokota.com . Еще вариант кнопки — это эффектный ховер на Canvas, как на hpsoundincolor.com и cavalierchallenge.com .
Продуманные концепции — плавные анимации между секциями
Нет ничего нового в анимациях на веб-сайтах. Кроме того, нельзя сказать, что они противоречат минималистичному подходу. Тем не менее, как и Canvas, они являются важной составляющей больших возможностей в веб-дизайне. А новые возможности — это всегда заманчиво, ведь они позволяют вам делать что-то другое, свежее и оригинальное.
Обилие анимаций приводит к исключению резкого разделения страницы на секции. Сайт плавно меняется во время скролла. Контент исчезает и появляется с помощью мягких анимаций. Последовательности этих переходов становятся все более продуманными. Это не просто случайные эффекты между блоками контента, а продуманная концепция, в которой каждый элемент появляется в нужное время (Nationalgeographic.com , stylenovels.com). Анимации с самого начала являются частью веб-сайта, а не просто случайно добавленной деталью.
Интересные анимации украшают простые макеты. Они добавляют новую ценность и делают страницу уникальной. Они становятся сутью всего проекта, как, например, на Ifly50 или tennentbrown.co.nz . Анимации часто создают красивую, гладкую структуру на веб-сайтах: Cuberto.com , lookbook.wedze.com , skarv-fashion.com или corentinfardeau.fr .
Разнообразная типографика
Изменение тенденций можно также проследить и в используемых шрифтах. До недавнего времени весь Интернет был во власти простых, нео-гротескных шрифтов, таких как Helvetica, Roboto, Lato или Open Sans. Немного более «декоративный» нео-гротеск чаще используется в заголовках, а его более простая версия выбирается для остального текста. Шрифты с засечками же практически не используются.
За последние 2 года ситуация начала меняться. Дизайнеры смело используют различные виды шрифтов. Теперь они больше готовы работать с контрастами — сочетать шрифты с засечками и без них.
Многое происходит в типографике, которую используют на веб-сайтах. Тексты анимируются , разбиваются на отдельные буквы, в текстах размещаются различные эффекты, изображения и видео.
Большие технологические возможности и более смелые решения влияют на рост разнообразия веб-типографики.
Геометрические шрифты
Геометрические шрифты без засечек приобрели большую популярность, например, классическая Futura, ITC Avant Garde, Proxima Nova, или те, что доступны в библиотеке Google — Poppins или Montserrat. Эти шрифты гораздо более выразительные, чем «невидимый» нео-гротеск. Более «агрессивный» и выразительный характер веб-сайта можно достичь если использовать большую толщину, как на достаточно старом сайте hugeinc.com , а вот более новые примеры: sequence.co.uk , startuplab.no или www.protest.eu .
Шрифты с засечками
Очень часто шрифты с засечками используют не только для основного текста, но и для больших заголовков. Особенно часто используют декоративные, такие как на duhaihang.com или jennyjohannesson.com . Еще популярными шрифтами можно назвать те, которые относятся к Bodoni или Didot.
Моноширинные шрифты («печатная машинка»)
Использовать пропорциональные шрифты, которые обычно ассоциируются с печатными машинками — новшество. Сейчас их можно увидеть на таких сайтах, как admirhadzic.com , cuberto.com или designembraced.com .
Контрастное сочетание шрифтов
В 2016 году было принято отходить от мягкого, гармоничного сочетания шрифтов для более выраженного контраста. Экспрессивные комбинации усиливались высоким контрастом размеров текстов. Крупные и декоративные шрифты сочетали с простыми геометрическими, также как геометрические заголовки становились в пару со шрифтами с засечками в тексте контента.
Огромная типографика как часть основного изображения
Очень крутой и распространенной вещью было использование текстов очень больших размеров на основных изображениях. Это создавало очень сильный контраст между заголовками и остальной частью контента. Примеры можно увидеть на oursroux.com , femmefatale.paris или monsieurcaillou.com .
Иногда, в качестве украшения, в начале используется леттеринг, как, например, у corentinfardeau.fr или nurturedigital.com .
Ярким примером вышеупомянутого можно назвать сайт jennyjohannesson.com , где использованы декоративные качества шрифта с засечками Goku .
Дополнительные эффекты применимые к типографике
Можно наблюдать сильную интеграцию между типографикой и изображениями, видео и анимациями. Отдельные разделы связаны — типографика взаимодействует как с фоном, так и с другими элементами. Бессистемное размещение типографики на темном изображении — осталось в прошлом. Сегодня дизайнеры выстраивают интересные отношения между всеми элементами, вплетая типографику в фон, анимируя ее и т.д.
Большие размеры букв в текстах
Когда я только начал свой путь в веб-дизайне, у меня была старая привычка использовать 10 размер шрифта, которую я приобрел когда работал в печати. Однако, я быстро понял, что в вебе оптимальный читаемый размер — это 14.
Сейчас заметно, что дизайнеры используют гораздо более крупные шрифты, особенно когда речь идет о шрифтах с засечками.
Переходи на темную сторону
В 2016 году дизайнеры использовали разные цвета. Но можно заметить тенденцию к выбору темных тонов.
Тренд создавать полностью белые сайты становится менее популярным, и уступает вариациям серого, текстурам и паттернам. Сейчас довольно распространено создание более темных сайтов, где черный или его градация заполняет фон и создает немного мрачное , гротескное настроение.
Несмотря на это, трудно предсказать, как эта тенденция разрастется в течении года. Цвета, однако, являются частью визуальной айдентики брендов, так что трудно ожидать, что они коренным образом изменят свою коммуникацию, основываясь исключительно на популярности определенных тенденций.
Подведем итог
2017 год обещает много интересных перспектив, однако есть и некоторые опасности на горизонте.
Лично я боюсь, что многие веб-дизайнеры могут быть немного самоуверенными, когда дело дойдет до работы с Canvas. Добавьте к этому новые тенденции, и вы получите множество кричащих и непонятных для широкой аудитории веб-сайтов.
Меня также немного беспокоит тот факт, что многие из современных творений не будут работать должным образом во всех браузерах и мобильных устройствах. У меня сложилось впечатление, что мы вернулись в исходную точку. Сейчас мы находимся в ситуации, аналогичной тем временам, когда Flash, несмотря на то, что он рулил Интернетом, был обвинен в отсутствии быстрого отклика и высоким требованиям к интернет-соединению.
Еще одна вещь, которая меня пугает — это тот факт, что новые тенденции к «деконструкции» будет невозможно применить к коммерческим клиентам, или просто не будут соответствовать профилю их коммуникации. (Правительственные или банковские веб-сайты не могут быть хаотичными).
Я задаюсь вопросом, как долго новые тенденции будут внедрятся в коммерческий рынок. Стоит отметить, что подавляющее большинство веб-сайтов, которые я использовал в качестве примеров были созданы для агентств, дизайнеров и творческой индустрии. Такие сайты часто устанавливают свои собственные правила и обычно опережают тенденции по сравнению с другими отраслями. Иногда тенденциям нужно много времени, чтобы стать популярными в этой нише и прорваться на коммерческий рынок. Тогда их форма немного сглаживается, чтобы подойти каждому.
Несмотря на все это, я думаю, что 2017 выглядит весьма перспективным, если говорить о веб-дизайне. Сказать, что эпоха минимализма подходит к концу было бы слишком, однако она точно претерпевает изменения и развивается.
Минимализм станет более сложным и детальным. В веб-сайтах этого года все больше будет использоваться Canvas. Мы увидим много «хаоса», многообразия форм и экспрессии в будущих проектах. Это хорошие новости для дизайнеров, которые сыты по горло минималистичными стилями Flat, Material или Metro дизайна.