Главное Свежее Вакансии Образование
16 989 8 В избр. Сохранено
Авторизуйтесь
Вход с паролем

18 трендов веб-дизайна в 2017 году — часть 1

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

Мы в TruVisibility подготовили перевод первой части статьи “18 трендов веб-дизайна в 2017 году” Джона Мур Уильямса, руководителя отдела контент-стратегии Webflow.

Завершение текущего года не за горами, и каждый веб-дизайнер хотя бы раз задавался важным вопросом: что же будет определять веб-дизайн в наступающем 2017 году? Я решил найти ответ на этот вопрос и спросил дизайнеров WebFlow, какие тренды, по их мнению, будут преобладать следующие 365 дней. Их мыслям я также дал собственные комментарии.

В первую очередь давайте узнаем мнение главного дизайнера-проектировщика Webflow Серджи Магдалин (Sergie Magdalin).

iW3zaZaAIxe1pn32FfZHwuRXF32PqWaduq2U_6Aq

1. Дизайн, направленный на контент

“Расположение элементов дизайна внутри данной структуры должно быть таким, чтобы читатель мог легко уловить главную мысль, не снижая свою обычную скорость чтения” - Герман Цапф

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

Было очень интересно смотреть на метаморфозы, происходящие с приоритетами в разработке.

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

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

Конечно, как гласит третий закон Ньютона, для каждого действия существует такое же по силе противодействие. Многие дизайнеры считают, что мода на плоский дизайн “убила” сам дух дизайна. Мы ожидаем, что этот спор продолжится и в грядущем году, но всё-таки фокус останется на контенте – основе любой дизайнерской работы.

2. Качественное взаимодействие дизайнеров с разработчиками и дизайнеров между собой

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

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

Чтобы облегчить эту задачу, было создано множество инструментов, начиная коллективными шаблонами и досками в Webflow’s Team и заканчивая графическим редактором интерфейсов Figma, показывающим изменения в реальном времени. Я уверен, в 2017 эти платформы будут улучшаться и дополняться.

Если говорить о взаимодействии дизайнеров и разработчиков, много внимания уделяется крайне важному процессу передачи работы. Например, вместо отправки тяжелых и объемных статичных изображений теперь дизайнеры могут расшаривать живые визуализированные макеты благодаря таким инструментам, как InVision, Marvel, UXPin.

Карсон Миллер (Carson Miller) высказался по этому поводу в своей недавней статье “Будущее фронтенда в дизайне” на TechCrunch:

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

3. Упрощенный процесс “от дизайнера к разработчику”

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

Тренды веб-дизайна в предстоящем году по мнению продукт-дизайнера Гаджи Хархарова (Gadzhi Kharkharov):

NEhp_c284NSghkB453EvpkO9rvQpw4Oa4q91w0dJ

4. Крупный, громкий заголовок

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

The #MadeInWebflow Heco Partners

e3ykHm0xRXy1XH3xBoz7SywjDe_ukPmzAT-PKtzx

TruVisibility

Ne3i8CIhaZucJb_xSpSoWXDRm5YDGN7UDaJIGtWn

Pomerleau

NKZiRUTK4toAuLSvWYCO-XDUPa1Y7d60AG3SlBCL

Framer

GmH8zsJSX2Zjq5Xh4gxghYKxWlhwoNMBJVWG6q1F

Как можно увидеть на примерах, “крупный” и “жирный” относится не только к описанию шрифта. Скорее, речь идет о том, что значительная часть главного экрана выделена под простое, но сильное и самодостаточное утверждение о продукте или услуге. Подобный заголовок должен содержать в себе самую суть и быть понятным для любого посетителя, избегая излишней напыщенности (окей, фраза “Design the impossible”, возможно, звучит чересчур громко).

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

5. Сложная разметка, пришедшая из основ графического дизайна

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

В последние несколько лет вёрстка веб-страниц ограничивалась возможностями CSS, но такие новые модули, как Flexbox и CSS Grid (который выйдет в марте 2017 года), позволят осуществить самые смелые задумки в веб-разметке.

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

Вот несколько примеров того, что стоит ожидать (конечно, если у вас есть браузер, поддерживающий CSS Grid, например, Firefox Nightly, Safari Technical Preview или Chrome Canary):

Экспериментальная лаборатория макетов Джен Симмонс

Обратите внимание на стиль главного блока – явная отсылка к истории графического дизайна.

N6XHTeGxrzYFL0d_RgHb6qRW-lF0-VSvoVAgO-jh

Grid by Example

На сайте можно посмотреть больше примеров.

97WhLOM4-r0_9WyCeExACQMDdJMyIheDhKE_J73W

6. Больше SVG

SVG (scalable vector graphics – масштабируемая векторная графика) имеет больше преимуществ для веб-дизайнеров и разработчиков, чем традиционные форматы изображений, например, JPG, PNG или GIF.

Основные плюсы SVG описаны в самом названии формата – это масштабируемость и вектор. В отличие от форматов, основанных на растре и пикселях, изображения в SVG состоят из векторов – математических описаний формы объекта. Это означает, что SVG не зависит от разрешения, и изображения в этом формате будут отлично смотреться на любых экранах и устройствах. Нет необходимости беспокоиться о том, что картинки будут размытыми на ретине.

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

А еще SVG-файл можно анимировать!

Далее давайте узнаем мнение продукт-дизайнера Нейтана Ромеро (Nathan Romero).

ErEiD0aNx5hXsdjtAE8bKq64SQDvzYfqL4EVHGuY

7. Инструменты для адаптивного дизайна на основе правил

TZeP1bnVaoAaNl1YCz7qCTTBzhQxCLBpVHQBbI28

Адаптивный дизайн полностью изменил наш взгляд на веб-приложения и на их создание.

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

Ожидается новая волна дизайнерских инструментов (таких как Figma) на основе “правил”, корректирующих вид сайтов на различных экранах и устройствах, тем самым сокращая количество повторных действий дизайнера. Такие инструменты основываются на пространственных связях элементов и, когда мы меняем размер экрана или устройство, они стремятся сохранить эти связи путем изменения размеров элементов и отступов между ними.

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

Тренды дизайна в 2017 году по мнению Райана Моррисона (Ryan Morrison), старшего графического дизайнера.

cpEBYdfPDOuPmZUpYWxnEPhg9AWkU51lzVPE_qN4

8. Больше ярких цветов

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

Взгляните на новый сайт Asana с яркой цветной заливкой:

BweuKBkPd_n7VCcVrOZ1JSiLYjxIiYr2nrh7a6Z3

Новая иконка приложения Instagram вызвала много критики, но этот редизайн, несомненно, освежил бренд:

n5_5W2iznsmLPK5U3CZlg9UkKubkGTvaeRC6x4m4

Всё, что делает Stripe, не требует отдельного представления:

E3C6ld5ey1TV1ClT0-b7rHV79FM_bjSeor8m262t

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

Хотя, может быть, стоит всё-таки немного уменьшить яркость? Мы следим за вами, Asana.

9. Больше внимания анимации

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

Эта тема особенно важна, поскольку создание анимации упрощается с каждым днем. На Конференции Дизайна и Контента (Design & Content Conference) в 2016 гуру анимации Вал Хэд (Val Head) подчеркнула, что при разработке анимированных элементов дизайнерам следует помнить о целях и потребностях бренда, чтобы достигнуть эффект, который ожидают увидеть создатели контента. Если к этому совету будут прислушиваться, анимация будет выполнять задачи, значимые для бренда, а не просто вызывать мигрень у пользователя.

10. Необычная разметка

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

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

Метод “сломанной” разметки заключается в выходе элементов за пределы скрупулезно выровненной сетки. Подобные приемы могут иногда показаться даже неприятными для глаза. Например:

Наезжающие друг на друга тексты и изображения:

The Outline

LstccKqvWB4vAHXW1afBStVFSNs7itI5IqHyleCp

Bauhaus-Archiv

ZP9FXiG6i36SxRn1R6mOVuVXQl9ik10BDtg1b7G-

Тексты и изображения, раскиданные (казалось бы) случайно по странице:

Epicurrence

lbt0XHx89I7AgoO52y_IXgh6qrpsqXH1ymaHkNGy

Heco Partners

vYIIVgfjxPTVKnoIYmuhn_HiEd5RGOfcwRFBpAGo

Это была первая часть перевода статьи “18 трендов веб-дизайна в 2017 году”. А вы согласны с мнениями специалистов Webflow? Как вы думаете, какой веб-дизайн будет в моде в наступающем году?

+7
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Иван Оракулув
мне очень нравится новая тенденция с наезжающими буквами и изображениями, и как будто беспорядочным расположением элементов. Но чтобы было красиво, у дизайнера должен быть очень хорошее чувство стиля - иначе получается просто бардак! спасибо за статью
Ответить
Моё Имя
Здравствуй, "Золотое сечение"!
Ответить
Павел Петянов
Лол, отличное определение - "Тексты и изображения, раскиданные (казалось бы) случайно по странице"
Ответить
Lockstep Marketing
Агентство Интернет-маркетинга
Глеб Владимирович Горохов
Хорошая подборка. Без банальностей. В п. 5 интересные ресурсы
Ответить
Tucanus
3D-печать иначе
Григорий 10016
>Хотя, может быть, стоит всё-таки немного уменьшить яркость? Мы следим за вами, Asana.

После редизайна таск-трекер превратился в разноцветную погремушку с еще более неочевидным интерфейсом, чем было ранее.
Ответить
Александр 28472
Вот как они Асану не перекрашивают, а как были тормоза, так они и остались ((
Ответить
Tucanus
3D-печать иначе
Григорий 10016
Согласен, с этим тоже постоянные проблемы.
Ответить
Ivan Ivno
Разе не должна соблюдаться симметричная пропорция? Разбросанные по всему экрану элементы, отвлекают от самого главного - целевого действия.Вот я обычный скажем пользователь, захожу на сайт - вижу хаотичное расположение элементов, стараюсь вникнуть в их порядок и логику, дополнительно напрягаю мозги, вместо того, чтобы не думаю - получить ответ на тот запрос, по которому перешел на сайт - произвести покупке. В общем, не вижу обоснований данному тренду, как по мне - бред и его пользы не вижу. Где юзабильность? Просто понты, аля-вот как красиво смотрится эта херня, которая при скролинге дергается и привлекает на себя внимание... Да уж, разметка и вправду необычная, вот только будет ли она продавать и подталкивать к целевому действию? Или хотя бы как-то помогать пользователю лучше обрабатывать информацию? Если нет, то это бесполезная, ненужная вещь.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.