Тенденции в веб дизайне. Новый подход к прототипированию

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В 2016 году многие компании провели редизайн своих сайтов, сократив количество опций навигации. В 2017 году этот тренд продлится.

Меню в хедере страницы, которые раньше включали 5-7 опций, теперь будут предлагать 3-4 варианта.

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

Хорошим примером нового подхода является Ikea. На скриншотах ниже вы можете сравнить старую и новую версии сайта компании.

Старая версия:

Новая версия, запущенная в 2016 году:

1. Отказ от гамбургер-меню

Гамбургер-меню не даёт пользователю представления о глубине сайта или приложения. В итоге он остаётся дезориентированным.

Spotify уже отказался от гамбургер-меню в своём приложении. В 2017 году его примеру последует ещё больше компаний.

1. Дуотоны

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

В 2017 году ожидается более активное использование дуотонов вместо полноцветных фонов.

1. Тактильный дизайн

Недостатком параллакс-прокрутки является замедление скорости загрузки страницы.

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

1. Осмысленное действие

Одним из основных принципов материального дизайна является «осмысленное действие». В Google считают, что «действие должно быть осмысленным и целесообразным, служить для привлечения внимания и поддержания непрерывности» .

Приложение Tumblr – хороший пример реализации этого принципа. В 2016 году оно выиграло премию Material Design за анимацию.

1. Отказ от низкокачественных стоковых изображений

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

1. Меньше приложений, больше PWA

Технология PWA (Progressive Web Apps) позволяет сайту работать по принципу приложения. В том числе офлайн. Её уже используют такие крупные издания и компании, как The Washington Post, Airberlin и Flipkart. В этом году популярность технологии будет расти.

1. Шрифты Google

Google создал библиотеку шрифтов с открытым исходным кодом в 2010 году. В 2016, продолжая работать над материальным дизайном, компания также улучшила свой сервис Google Fonts . В результате предпросмотр шрифтов стал более быстрым, а их настройка – проще. В разделе Featured собраны те шрифты, которые хорошо сочетаются с материальным дизайном.

В 2017 году ещё больше веб-дизайнеров будут работать со шрифтами Google.

1. Минимализм

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

С каждым годом растет число сайтов, удивляющих и восхищающих новыми фишками в оформлении. Два года назад мы разместили переводную о трендах в веб-дизайне 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. Помимо аудита дизайна и юзабилити вы получите развернутый анализ технической составляющей, семантики, позиций по отношению к конкурентам и т. п. Все это поможет вам улучшить сайт и повысить его эффективность как инструмента продаж.

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

И именно поэтому очень важно быть в тренде и всегда следить за всеми изменениями. Каждый дизайн должен понимать что это беспрерывный процесс познания и обучения. Давайте разберемся какая тенденции и тренд будут востребованы для веб дизайна в 2018 году а некоторые даже в 2019 году .

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

Именно эта тенденция появилась в 2016 году, набрала популярность в 2017 и продолжит развиваться в 2018 году. Используя смешанные формы и узоры на странице можно добиться замечательных результатов. В первую очередь в дизайне ценится композиция, целостная картинка макета. Flat дизайн и material дизайн очень хорошо сочетается с декоративными элементами и простыми формами. 2D дизайн продолжает жить, однако в нём произошли некоторые изменения.

Яркие цвета

Добавляем яркие цвета и мы смело заявляем о себе! Material дизайн и flat дизайн отлично сочетаются с сочными красками. Цветовые переходы - один из трендов современного дизайна. Компания Instagram первая решила изменить фирменные изображения и логотипы. Они поменяли flat цвета на разноцветные градиенты и переходы. Логотипы, кнопки, все элементы получили новый стиль. Это тренд 2017 года и мы видим что он сохранится в 2018. Здесь главное правильно сочетать цвета и не выглядеть кричащим.

Уникальные иллюстрации и графика

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

Sketch art. Крафтовая тематика захватила бизнес, а иллюстрации «от руки» завоевали полиграфию. Этот тренд продолжает развиваться в веб-дизайне.

Фотоконтент

Останется актуальным в 2018 подход к фотоконтенту на сайтах e-commerce, уход от одинаковых изображений в магазинах в сторону уникальных авторских фотографий. Что любопытно, все предпосылки налицо: больше 60% пользователей считают, решающим фактором покупки выступают фотографии, поэтому магазины уделяют им максимум внимания.

Анимация

Анимированные объекты сейчас повсюду: логотипы, иконки на сайтах и в приложениях, переходы между состояниями объектов в material design. Иногда даже в почтовых рассылках может пробраться интерактив: обрастают фоновым видео, встроенным процессом оформления заказа, и полноценными меню. Видео и GIF превосходного качества, работающие на непрерывном цикле, предлагающие гладкое визуальное удовольствие для наших глаз, рассматриваются как популярный способ добавления драмы и движения к страницам. Он успешно сохраняет внимание посетителя надолго.

Расширения

Старые и всем известные PNG, JPG, и даже GIF форматы это вещи из прошлого. Их крайне давно изобрели, и в современном мире им нет места. Сейчас больше внимания уделяется качеству изображений и их доступности. SVG станет форматом #1 по популярности. Он легко масштабируемый и к тому, же без потери качества. В добавок, размер исходных изображйний SVG формата очень приемлемый. Это будет наилучшим форматом для мелких графических элементов. Касательно программного обеспечения, Sketch потеснит Photoshop.

Он уже сейчас делает разработку проще и быстрее. Его функциональность в разы превосходит Photoshop, и мы верим что в 2018 году разница станет очень существенной. Как результат, компания Adobe потеряет часть своих преданных пользователей в лице веб и UI дизайнеров. Попробуйте наш калькулятор стоимости чтобы узнать сколько стоит разработать уникальный и продающий дизайн.

Профессиональные Социальные Сети

Хорошо, мы теперь знаем в каком направлении будут развиваться тренды веб дизайна, но что же касательно социальных сетей? Должны ли мы осмыслить их и уделять больше внимания? Если кратко - определенно да. Наиболее популярные среди дизайнеров Behance и Dribbble станет еще авторитетнее.

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

Контент-редактор сервиса по составлению инфографики 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-изображений

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

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

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

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

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

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

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

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