Тренды flat дизайна в году. Текст в рамке

Дизайн изменчив. Он развивается постоянно, ежегодно появляются новые тренды, разрабатываются новые стили. И это касается не только одежной моды, но и моды в графическом дизайне.
Эксперты проанализировали логотипы 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. Инфографику к этой статье вы можете посмотреть .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Какие тренды графического дизайна наиболее заметны в 2017 году?

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

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

2. Индивидуализм
2017 стал годом индивидуализма. Плоский дизайн был главным трендом предыдущего года, Google даже разработал гид с шаблонами для упрощения работы дизайнеров и программистов. В результате, его стали применять повсеместно, а уникальность была потеряна.

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

3. Геометрические коллажи
Если в детстве вам нравилось вырезать из журналов отдельные предметы или фото людей, а затем создавать коллажи, то 2017 вас порадует. Да, да, да! Одна из модных тенденций в графическом дизайне этого года – коллажи, которые включают фотографии, иллюстрации, рисунки и текст. Все элементы размещаются в определенной геометрической форме. Коллажи отлично подходят для передачи идей на плакатах, в рекламе и презентационных материалах.
4. Уютный винтаж
Это винтаж, но не такой, каким мы его знаем. Невозможно создать современный дизайн, в точности копируя работы прошлых лет. Необходима доработка и привнесение современных элементов. Людей все больше привлекает ретро стиль, они стремятся создать дома уют, используя элементы прошлого. Упаковки товаров и продуктов повседневного спроса должны вписываться в интерьеры, а это задача дизайнеров.

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

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

Любите дизайн и хотите стать профессионалом в данной области? Начните с образования. Пройдите обучение в школе дизайна Марангони за рубежом (в Милане) на одной из специализированных программ:

Подробнее об обучении дизайну за границей на программах Istituto Marangoni можно узнать бесплатно у специалистов STUDIES&CAREERS.

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

1) Первостепенное значение мобильной версии

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

Экран смартфона намного меньше экрана планшета, и уж тем более ноутбука и монитора стационарного ПК. На маленьком дисплее невозможно сразу просмотреть всё содержимое страницы. Чтобы адаптировать сайт под экраны мобильных устройств, брендам приходится отказываться от всего лишнего. Остаётся только та информация и те визуальные элементы, которые на 100% необходимы.

Обратите внимание на «точечную» навигацию на вышеприведённом скриншоте. Такое меню является явной данью мобильной эпохе.

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

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

Помните: 79% мобильных пользователей незамедлительно покидают сайты, не оптимизированные под экраны телефонов; Google и Яндекс понижают позиции таких ресурсов в поисковой выдаче.

3) Крупные смелые шрифты

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

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

4) Аутентичные фотографии

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

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

5) Анимация: от микровзаимодействий до полноэкранных эффектов

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

6) Использование видео в качестве фона

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

Согласно результатам исследования Hubspot, в задающих мировые тренды США 50% потребляемого мобильного трафика уже сейчас приходится на видео, и к 2018 году этот показатель должен возрасти до 79% . Единственное, что может заставить российских сайтовладельцев повременить с видеофонами - это низкая пропускная способность сети.

7) Смелые цвета

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

8) Сеточные макеты и карточный дизайн

Шаблонные интерфейсы на основе карточек - ещё одна тенденция сайтостроения, претендующая на развитие в 2017 году. Карточный дизайн используют такие ресурсы, как Pinterest, Facebook, ВКонтакте, Одноклассники, Twitter, Google+. Контейнерный принцип организации контента (картинка + краткое описание ± ссылка) упрощает поиск нужной информации. Посетители быстро просматривают содержимое страницы по диагонали, выхватывая интересующие фрагменты. Поскольку продолжительность концентрации внимания пользователей с каждым годом становится всё короче, актуальность карточного дизайна возрастает. Плюс ко всему, он изначально адаптивен, а значит, и мобильно дружествен.

9) Инновационный скроллинг и параллакс

Строго следуете правилу размещения важной информации на первом экране (до линии прокрутки)? Расслабьтесь! С наступлением мобильной эры данное правило устарело. Теперь скроллинг можно применять как заблагорассудится. Инновационный подход демонстрирует Apple. При скроллинге вниз прокручивается лишь правая часть экрана, в то время как левая (с важными описаниями) остаётся статичной.

Параллакс от простого скроллинга отличается наличием 3D-эффекта. За счёт того, что элементы на переднем плане перемещаются быстрее, чем на заднем фоне, создаётся ощущение глубины и динамизма.

10) Асимметричные и хаотичные макеты

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

Заключение

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