Архив метки: веб-дизайн

Анатомия сайта, генерирующего лиды

Сайт – самый важный инструмент по превращению потенциальных клиентов в покупателей.

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

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

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

Анатомия сайта, генерирующего лиды

1) Формы лидогенерации

В любом бизнесе формы — это основа генерации лидов. Без них вы не сможете получить контактные данные, которые пользователи готовы вам сообщить. Пользователи, заполняющие форму на сатйе, дают понять, что заинтересованы в вашем бизнесе, продукте или контенте. И они вероятнее всего станут вашими клиентами.  Для встраивания форм на сайт, используется разный функционал. Самые распространенные: Contact Form 7, JetPack, or Google Forms.

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

На главной странице:

officevibe-homepage-form-1

При запросе демо:

2-form

Форма подписки в футере:

3-form

Форма  «Свяжитесь С нами»

4-form

Такое количество полей оправдано необходимостью правильно организовывать запросы от пользователей.

2)Инструменты по сбору данных из форм

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

Проще работать с лидами, собранными в одном месте, — отправлять e-mail-рассылки, анализировать их поведение на сайте, сопровождать до завершения сделки.

5-form

collected-forms-leads

3) Первичные и вторичные призывы к действию

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

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

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

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

Вот  примеры страниц с эффективным. Первый от Mint с выделяющимся призывом бесплатно подписаться:

6-form

Еше пример – домашняя страница FreshBooks:

7-form

4) Посадочные страницы

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

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

Ниже пример отличной посадочной страницы от WebDAM:

8-form

5) Всплывающие (pop-up) формы

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

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

Варианты размещения всплывающих форм:

9-form

6) Интуитивно понятный интерфейс и продуманное размещение СTA

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

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

Согласно eye-tracking исследованиям  (движения глаз), естественное движение взгляда пользователя начинается в левом верхнем углу и движется по маршруту, напоминающему букву F.

В примере ниже — название компании – в верхнем левом углу, рядом с которой панель навигации и первый призыв к действию (№4 во втором ряду).

6-пункт-форма

7) Блог с CTA, генерирующими лиды

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

8) Социальное доказательство и другие триггеры доверия

Чтобы посетителю сайта превратиться в лид, ему нужно сообщить свои персональные данные – свое имя, e-mail, или даже телефонный номер и название компании-работодателя. Не доверяя вам и вашему бренду, посетители сайта не будут этого делать.

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

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

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

8-пункт-form

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

8-пункт-1

 

Берите на вооружение A/B-тестирование, чтобы  протестировать все элементы и узнать, что будет лучше работать именно для вашего бизнеса

 

 

 

 

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

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

1-min
При этом память — далеко не совершенный механизм, так как постоянно подвергается воздействию физиологических и эмоциональных факторов.

Психологи выделяют три типа памяти:

Сенсорная  память – на мгновение удерживает информацию,  впервые воспринимаемую органами чувств.

Краткосрочная (рабочая) память – позволяет человеку сохранять в памяти информации без повторения

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

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

l

Три главных  фактора хорошего запоминания предельно просты:

  1. Концентрация. Чтобы запомнить что-либо нужно сконцентрироваться.
  2. Ассоциации. Память представляет собой огромную базу взаимосвязанных данных. Если человек выстроит ассоциативные связи с уже чем-то хорошо  знакомым, новая информация запомнится значительно лучше.
  1. Повторение. Это лучший способ надолго запомнить информацию.

Применение этих законов в проектировании интерфейсов очень упрощают взаимодействие пользователей и помогают им запомнить главное.

Экспертные исследования памяти, применимые в проектировании интерфейсов

    • Закон Миллера

«Человек способен удержать в кратковременной памяти не больше  7 единиц информации».

Исследования 50-х годов прошлого века доказали, что кратковременная память способна вместить не больше 7 +/— 2 объектов. Для цифр это число равно 7, 6 — для букв, 5 — для слов.

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

jj

    • Закон Хика 

«Чем больше элементов, тем сложнее выбрать.»

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

ux-дизайн

Секреты памяти для UX-дизайна

  1. Не заставляйте пользователей сразу запоминать слишком много элементов

Это не значит, что содержание всех страниц должно быть ограничено 5-9 элементами. Это касается только ключевых точек взаимодействия. Следуя закону концентрации внимания, дизайнеры выделяют в структуре сайта только несколько элементов: меню, призыв к действию, изображение продукта и т.д. Визуальная иерархия – это основная стратегия построения интерфейсов. Она позволяет группировать элементы дизайна в легко доступном для человеческой памяти виде.
ux-дизайн

  1. Не перегружайте память – используйте хорошо узнаваемые символы и узоры

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

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

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

ux-дизайн

  1. В навигации применяйте последовательные маркеры

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

  1. Не прячьте ключевые элементы навигации

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

ux-дизайн

  1. Стимулируйте разные типы памяти

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

  1. Помните об эмоциях

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

 

Шрифты для сайта: как выбрать идеальное сочетание? 7 бесплатных инструментов

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

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

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

7 бесплатных инструментов

1) Google Fonts

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

Из списка доступных шрифтов выберите нужный вам, наведите на область предпросмотра шрифта и нажмите на  See Specimen.

Google-fonts

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

Внизу страницы находится раздел «Популярные сочетания со шрифтом Х»

Google Fonts 2

2) Type.io

Эта база шрифтов ведется дизайнерами-экспертами и позволяет увидеть трендовые сочетания шрифтов с реальных веб-сайтов. Еще можно заглянуть в код СSS, используемый для их стилизации и форматирования. Потратьте некоторое время на просмотр их впечатляющих архивов и классифицированных списков, и если наткнетесь на сайт который вас зацепит, просто нажмите на «Get Under the Hood».

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

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

typio

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

3) Web font Blender

Web font Blender — минималистичный инструмент быстрого, интуитивного подбора шрифтов. Устроенный как большинство редакторских программ, этот сервис позволяет смешивать и комбинировать разные веб-шрифты, изменять шрифт основного текста, заголовков и настраивать стилизацию шрифта по вашему вкусу.
web-font-blender

На ваш выбор большое количество популярных шрифтов и их настроек для подбора оптимального сочетания. Как только вы его нашли, вы можете скопировать CSS-код своего творения, нажав кнопку «Grab Code».

4) Fonts in use

Это независимый архив, посвященный демонстрации креативной типографики от дизайнеров со всего мира. Сайт, печатная продукция, дизайн упаковки или что-то еще – для всего команда кураторов Fonts in use способна подобрать интересные шрифтовые гарнитуры.

Screen Shot 2017-04-12 at 3.26.51 PM
Для вдохновения достаточно просмотреть их многочисленные архивы, или взглянуть на примеры популярных в вашей отрасли шрифтов, выбрав пункт «Отрасли» в выпадающем меню. Если у вас уже есть нужный шрифт, но вы не знаете с чем его сочетать, можно отфильтровать результаты по виду шрифта.
Screen Shot 2017-04-12 at 3.26.12 PM

5) Canva Font Combinations

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

Как только вы получили идеальную пару, можете настроить область предварительного просмотра, чтобы увидеть, как ваш контент смотрится в новом облачении.
Screen Shot 2017-04-12 at 3.44.20 PM copy

6) Font Combinator

Font Combinator – инструмент типографии созданный голландской дизайн-студией Typotheque. Если вы ищете инструмент предварительного просмотра сочетания шрифтов со множеством вариантов настроек и кастомизации, больше не ищите.
Screen Shot 2017-04-12 at 3.55.45 PM
В верхнем выпадающем меню можно выбрать уже готовые варианты сочетания шрифтов от Typotheque, или, используя настройки, сконструировать их комбинацию самостоятельно. Можно настроить размер шрифта, используя бегунки над каждым фрагментом текста. Если не нравится текущее сочетание, можно простым перетаскиванием вставить новый шрифт из правого списка.

7) Font Pair

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

Каждое сочетание шрифтов, представленное на Font Pair, курируется самим Миллзом. Хотите проверить как будет выглядеть ваш собственный текст? Кликните на любой представленной паре шрифтов и введите свой контент.
Screen Shot 2017-04-12 at 4.39.41 PM

Что даёт адаптивный дизайн сайта [Инфографика]

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

И то, на какие именно сайты, заходят мобильные пользователи очень интересует всех маркетологов. Если верить исследованию Google «Путь мобильного пользователя к покупке» , поисковики – самая популярная отправная точка у мобильных пользователей (48%), следом идут сайты различных брендов (33%) и приложения (26%).

Как результат: компании с респонсивными сайтами генерируют большее количество лидов  и имеют постоянно растущее конкурентное преимущество.

Что это такое, как это работает, и почему нужно перейти на респонсивный дизайн в инфографике:

what-is-responsive

Психология дизайна: 8 психологических принципов, котoрые пригодятся при разработке

Psychology_for_Designers

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

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

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

Ниже мы рассмотрим несколько психологических принципов, чтобы понять, как это работает.

8 психологических принципов, которые необходимо знать при создании дизайн-концепции

1. Ментальные модели

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

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

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

Desktop_Files

Для дизайнеров понимание ментального моделирования сводится к созданию дизайна на основе пользовательского опыта.

В ходе дизайн-процесса нужно постоянно себя проверять: не раздражают ли визуальные элементы и их размещение в макете, ясно ли общее послание, или оно ненамеренно скрыто?

2) Эффект Ресторфф

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

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

Von_Restorff_Effect_Example

Пример на изображении выше слишком прост. Эффект Ресторффа можно найти на любой веб-странице, так как ваше внимание привлекается строго определенными элементами.

Чаще всего этот эффект выражен в элементах призыва к действию (CTA):

conversion-lab-landing-page-1-1

3) Гештальт-принципы
Гештальт-психология исследует зрительное восприятие объектов относительно друг друга.

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

  • Принцип близости: объекты, расположенные рядом, воспринимаются как единая логическая группа. Несмотря на то что, букву U в логотипе Unilever, составляют разные фигуры, человеческий глаз в первую очередь распознает целостную фигуру буквы U.

!Unilever_Logo

  • Принцип сходства: похожие объекты воспринимаются как единое целое или как часть одной группы.  В логотипе NBC схожие конусы воспринимаются как единая группа, так как имеют одинаковые очертания.

nbc

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

Girl_Scouts

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

Screen_Shot

  • Фигура и фон: когда глаз видит объект как объект, он отделяет его от окружающего  пространства (фона). В логотипе, посвященному Стиву Джобсу, в зависимости от того, на чем сфокусирован глаз, воспринимается или яблоко, или силуэт Стива Джобса.

Jobs_art_Mak002_web-780x780

4) Висцеральные реакции

У каждого есть любимый сайт, фото, или другой визуальныq объект, от которых невозможно оторвать взгляд. Но не каждый может сказать, почему. Всё дело в висцеральных реакциях — психологических маханизмах, происходящих из глубин подсознания.

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

Airbnb_Visceral_Reactions

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

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

5) Психология цвета

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

Их краткое изложение:

Голубой: безопасный, спокойный, честный, доверие, сильный, заботливый

Корпорации часто используют это цвет, чтобы внушить чувство надёжности и уверенности в их бренде.

Цветовая схема Facebook убеждает пользователя, что это надежная и авторитетная социальная сеть, что внушает пользователям чувство безопасности, даже при размещении личной информации.

Facebook_Blue

Красный: энергия, любовь, действие, активность, страсть.

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

Coca_Cola_Red

Оранжевый: счастливый, общительный, дружелюбный, доступный.
Любимый цвет маркетингового ресурса Hubspot.

HubSpot_Orange

Жёлтый: логичный, оптимистичный, думающий наперед, уверенный, игривый.

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

Bzzy_Yellow

Зеленый: рост, органика, естественность, забота, свежесть, земля.

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

Whole_Foods_Green

Черный: утончённость, роскошь, соблазнительный, формальный, авторитетный.

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

Многоцветность: многоканальный, позитивный, игривый, смелый, безграничный.

Google — самый известный пример использования нескольких цветов в логотипе, и в полной мере вызывает выше названные ассоциации с многоцветностью.

Google_Multicolor

 

6) Психология форм

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

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

at_and_t__logo

Логотип сервиса беспроводных сетей AT&T’s

Прямоугольники и треугольники: стабильность, баланс, сила, профессионализм, эффективность, мужественность.

Microsoft и Delta в своих логотипах использует квадраты и треугольники, что вызывает чувство стабильности, эффективности — положительные чувства при ассоциации с брендом.

Microsoft_White_Logo
Delta_Logo
Вертикальные линии: мужественность, сила, агрессия.

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

sc_square_480

Горизонтальные линии: сообщество, спокойствие, уверенность.

Human Rights Campaign, организация по защите гражданских прав, использует в своем логотипе линии и прямоугольники для передачи основного смыла своей деятельности – равенство и защита прав.

220px-Hrc_logo.svg
7) Теория двойного кодирования
Вы, конечно же, в курсе статистики, утверждающей, что наш мозг обрабатывает визуальную информацию в 60 000 раз быстрее текстовой. Теория двойного кодирования состоит в том, что и визуальные и вербальные сигналы передают информацию, но их сочетание помогает мозгу лучше ее запомнить.

Другими словами, нам нужна и визуальная и вербальная информация, чтобы усвоить и вспомнить информацию.

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

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

Primary_Secondary_Teriary_Colors

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

Если затраты перевешивают выгоды, мы вряд ли совершим предполагаемое действие.

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

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

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

15 отличных концепций редизайна сайтов

Занимаетесь ли вы редизайном ради удовольствия, развития навыков, или пополнения своего портфолио, концепции редизайна — отличный способ понять, как мыслит дизайнер.

Мы покопались в Dribbble (социальная сеть для дизайнеров) и собрали несколько вдохновляющих примеров отличных концепций редизайна сайта.

Mikolas-Vans-concept
Редизайн сайта Vans от Mykolas Puodžiūnas

«Как фанат этой марки я был поражен устаревшим дизайном их сайта, странным выбором макета, и несколькими раздражающими проблемами UX.»

ebay_with_bg_shot800
Редизайн Ebay.com от Tintins

samer-evernote-market-concept

Редизайн Evernote Market от Samer

thumb-thule

Редизайн Thule.com от Mykolas Puodžiūnas

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

Charles-Patterson-Skype-concept

Редизайн Skype от Charles Patterson

«Всегда легко работать над чем-то ради развлечения. В итоге получилось очень свежо и классно».

pandora-concept-bryce-thomas

Концепция Pandora(медиа плеер) от Bryce Thompson

«Такой дизайн страницы выгодно выделяется среди других на рынке медиа плееров.»

specialized-bikes-landing-page-concept-shot

Посадочная страница профессиональных велосипедов, концепция Petras Nargėla

soundcloud-lp-concept

Редизайн лэндинга SoundCloud от Raaz Das
«Я попытался сделать сайт чистым и понятным для всех пользователей.»

dribbble-nytimes-redesign

Редизайн-концепция NYTimes.com от Jon Pritzl.

Трудно поверить, но авторитетное интернет-издание настолько консервативно, что до сих пор не обзавелось адаптивной версией.
«Воссоздать заново главную страницу New York Times уже считается самой древней задачей в сообществе дизайнеров. Я хотел использовать узнаваемый стиль и брендовый капитал интернет-издания, и в то же время создать современный и удобный новостной портал».

rolling-stone-website-redesign

Редизайн Rolling Stone от Jason Kirtley
«Вариант редизайна объёмной статьи о музыканте.»

imdb-dribbbble

Редизайн IMDb (Интернет-база кинофильмов) от George Vasyagin

«Считаю, что IMDb должен быть упрощен и каждый блок должна служить своей отдельной цели.»

redesign_copie

Редизайн Gmail от Valentin Salmon
«Я использовал узнаваемый стиль Gmail.com, и привнёс кое-что новое.»

hm-dribbble

Редизайн главной H&M от Andrew Baygulov

facebook

Редизайн Facebook от Eyal Zuri
«Редизайн социальной сети сделал ради развлечения.»

5 простых способов оптимизировать сайт для успешной генерации лидов

Оптимизация сайта для генерации лидов не такая уж сложная задача. Но не настолько простая, как размещение кнопки «Нажать здесь» на главной странице и наблюдение за мгновенным потоком лидов  (к сожалению).

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

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

Быстрый обзор:

!lead_generation_visualization

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

Рассмотрим в деталях 5способов оптимихации сайта для успешной лидогенерации.

1. Выяснить текущее состояние лидогенерации

Это необходимо для отслеживания дальнейшего успеха и выявления слабых мест для улучшения.

Лучший способ протестировать текущее состояние — воспользоваться таким инструментом, как Marketing Grader, который оценивает ресурсы лидогенерации (посадочные страницы и призывы к действию) и даёт обратную связь о способах улучшения существующего контента.

!LP

Также можно сравнить успешные и не очень успешные лэндинги. Например, лэндинг А посетили 1000 уникальных пользователей из них 10 заполнили форму и конвертировались в лиды. Для лэндинга А конверсия составляет 1%. У лэндинга B тоже 1000 посетителей, из которых 50 сконвертировались в лиды, что означает 5%-ную конверсию — отличный показатель. Следующий шаг — посмотреть чем отличаются лэндинги А и Б, и соответствующим образом оптимизировать лэндинг А.

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

2. Оптимизация каждого шага процесса лидогенерации

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

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

Вопрос — Как? Многие фирмы борются  увеличение конверсии до нужного процента. И проводят A/B-split тестирование двух версий посадочной страницы, чтобы выяснить, что работает лучше на каждой странице.  В результате применяются такие меры, как добавление формы на главную, изменение формулировки вопросов в форме. Результат? Может достигать увеличения конверсии на 27%.

!AB

Если собираетесь провести A/B-тест на странице, проверьте три ключевых фактора, влияющих на процесс лидогенерации:

А) Призыв к действию

Используйте для них контрастные цвета.

Б) Посадочные страницы

Согласно исследованию, HubSpot, компании с 30+ посадочными страницами на своем сайте генерируют в 7 раз больше лидов, чем компании с числом посадочных страниц от 1 до 5.

В) Страница благодарности

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

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

Бонус: Отправка подтверждающего e-mail’a

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

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

3. Персонализируйте призывы к действию

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

Более того, персонализированные призывы к действию конвертируют в лиды на 42% больше посетителей. Другими словами, динамический контент и персонализация помогает генерировать больше лидов.

Как это работает? Вот как страница  Hubspot выглядит для нового посетителя:

Screen_Shot_2015-05-06_at_10.05.05_AM

И вот как выглядит для клиента:

Screen_Shot_2

4. Тестируйте, тестируйте, тестируйте

Эту часть часть процесса невозможно переоценить. A/B тестинг делает чудеса с количеством кликов.

Например, когда маркетинговое агентство Friendbuy провело простой A/B тест призывов к действию, они обнаружили 211% рост количества кликов по таким кнопкам. Такая простая вещь, как тестирование формулировок призывов к действию, структуры посадочной страницы и используемых изображений может иметь огромное влияние.

 

5. Заботьтесь о своих лидах

Помните: ни один лид не превратится волшебным образом в вашего клиента. Лиды настолько хороши насколько хороши ваши усилия по их доведению до статуса клиента.

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

Пример фоллоу-ап письма:

Screen_3
Тикие e-mail’ы предлагают получателю лучший контент, ведут их по воронке продаж и приволят к выполнению финального целевого действия, нужного вам. Компании, которые тратят время и усилия на фоллоу-ап письма и сопровождение лидов получают 50% рост продаж по сравнению с компаниями, которые этого не делают.

Дизайнер и разработчик: дружба навек. Что для этого нужно?

В какой-то момент все дизайнеры обнаруживают себя в следующей ситуации:

Вы завершили дизайн-проект и получили одобрение от заказчика передали дизайн разработчику.

Но затем вы получаете предварительный вариант. И… то, что получилось имеет мало общего с созданным дизайном.

В чём причина?

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

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

Бывалые дизайнеры из сообщества InVision провели тысячи часов с разработчиками, выясняя как построить безупречный рабочий процесс. Вывод: обе стороны должны приложить к этому руку.

!!dev-002

4 совета, чтобы построить идеальные отношения дизайнерам и разработчикам:

Ознакомьтесь с ограничениями со стороны сервера

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

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

!dev-003

Узнайте о возможностях и ограничениях со стороны клиента

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

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

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

  • Нужна клавиатура для раскрытия и заполнения форм;
  • Регулировка размера кнопок в зависимости от размера пальца пользователя
  • Проблемы соединения. Дизайн должен отлично выглядеть, даже если загружается по блокам.
  • Мобильный дизайн должен быть простым. Главным образом, потому что графическая карта мобильных устройств имеет ограничения по сравнению с десктопами.
  • Обеспечение возможности открытия контекстного меню, если это необходимо.
  • Мгновенное предоставление информации. Мобильные пользователи, как правило, делают несколько дел одновременно.

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

!dev-001

Создавайте демо-макет и пользовательскую документацию

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

Структурируйте файлы и папки

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

Пример, хорошо названных файлов:

  • ClientName_PageName_WidthXHeight_platform.psd
  • MyClient_AboutUs_1334x750_IOS.psd

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

Эти 4 совета сделают жизнь дизайнера и разработчика намного проще, а рабочую атмосферу — воплощённой мечтой.

И помните: чем крепче дружба между дизайнером и разработчиком, тем совершеннее продукт получится в итоге.

3 вечные ошибки в веб-дизайне

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

The Nielsen Norman Group — одно из самых авторитетных агентств в мире, консультирующее по вопросам UX-дизайна. Они в бизнесе уже несколько десятилетий, и одно за другим проводят исследования по дизайну, юзабилити, и UX. Одно из их первых исследований датируется 1996 годом (эпоха сериалов «Друзья» и «Секретные материалы») определило 10 ошибок веб-дизайна, вызывавших много проблем уже в ранние годы развития веба.

1_

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

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

  • Пользователь должен легко находить информацию;
  • Пользователь должен легко воспринимать информацию;
  • Пользователь должен легко ориентироваться в навигации по сайту.

Отсутствие ясности

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

Исследования выявили, что эти ошибки как правило вызывают отсутствие ясности:

  • Размещение контента в неожиданных местах;
  • Конкурирующие ссылки и категории
  • Скрытие информации о цене и дополнительных платежах.

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

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

Скрытые цены тоже снижают конверсию: какому клиенту понравится, если его дурачат? Когда дело касается денег, каждый клиент сразу хочет знать, за что и сколько ему придется заплатить. Это касается и цен на товар, и платы за подписку, и платы за срочность. Epic fail, если скрытие цены приводит к меньшему количеству клиентов и сделок.

Отличный пример, когда полная стоиомсть сразу бросается в глаза:

overstock

 

UX-проблемы

UХ-дизайн определяет, насколько просто или сложно посетителю сайта удаётся достичь свои цели.

Исследование The Nielsen Norman Group выявило самые живучие ошибки в UX-дизайне:
• Островки информации
• Дубли ссылок
• Перенаправление пользователей на микросайты (целевые страницы)
• Неадекватные результаты поиска
• Ошибки фильтра

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

how-difficult-to-design-user-experience

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

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

Неразбериха в информационной архитектуре

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

Исследование опять же обнаружило, что дизайнеры очень упорны в совершении одних тех же ошибок, что и 20 лет назад:

  • Перегруз пользователя избыточной информацией
  • Скрытые ссылки

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

Wayfair.com – это пример того, как должна быть представлена информация на сайте. Контент легко читаем и очень эффективно сгруппирован.

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

Когда же эти ошибки останутся в прошлом?

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

13 трендов в веб-дизайне, ожидаемых в 2017 году

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

Список из 13 дизайн-трендов, за которыми стоит следить в этом году, чтобы создавать стильные современные сайты:

1. Крупные шрифты
Всё больше компаний склонны использовать крупные шрифты с жирным начертанием. Этот приём отлично работает, если на остальном пространстве страницы применяется сдержанный минималистичный стиль. Пример — страница французского  агентства Big Youth.

big-youth

2. Синемаграф
Это проигрываемые на автоповторе короткие HD-видеоролики или файлы в Gif-формате. Размещенные на бэкграудне, они делают статичные страницы визуально более интересными и динамичными. Великолепный пример широкоэкранного синемаграфа — главная страница датского агентства CP+B Copenhagen. Такой приём несомненно удерживают внимание посетителя сайта больше, чем обычно.

3. Эксперименты с композицией
Чтобы выделиться из множества аккуратных разлинееных макетов сайтов, некоторые дизайнеры выбирают более смелые эклектичные структуры. Арт-директор Will Geddes показывает примеры своих работ в неожиданном коллаже из перекрывающих друг друга изображений:

WillGeddes

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

gradient-agency

5. Яркие, насыщенные цветовые схемы
Многослойность из ярких цветов добавляет глубину и текстуру сайту, созданному на простом макете. Как в примере стильного бразильского сайта:

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

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

text-layout

7. Иллюстрации
Всё больше компаний обращаются к иллюстраторам и графическим художникам за созданием эксклюзивных иллюстраций для своих сайтов. После стольких лет господства флэт-дизайна и минимализма, иллюстрации – это идеальный приём для придания сайту неповотримости и оригинального духа. Очаровательный пример — сайт NewActon (дизайн австралийского агентства ED).

illustration-layout

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

Minimalism
9. Дуплекс (дуотон)
Цветовые схемы из двух оттенков выглядят круто и современно. Как в этом примере Australian Design Radio.

duotone-layout

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

vertical-text

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

geometic-patterns
12. Модульный дизайн
Модульный дизайн определённо будет набирать обороты в 2017 году. Это верный способ создать аккуратный, доступный веб-сайт, удерживающий внимание и заинтересовывающий пользователя. Пример от дизайн-студии Waark демонстрирует нестандартный приём в модульном дизайне: наведение мыши на разделительные линии между модулями вызывает интересный волновой эффект.

Modular Design

13. Наложение текста на изображения
Текст, слегка перекрывающий изображения, стал популярным приёмом в блогах и портфолио. Художник-фрилансер и frontend-разработчик Thibault Pailloux выделили перекрывающий текст красочным подчеркиванием под каждым заголовком.

overlapping