Архив рубрики: Дизайн

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

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

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

60 терминов веб-дизайна, которые должен знать каждый маркетолог

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

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

Знакомая ситуация?

Все маркетологи прошли этот путь и знают, насколько необходимо владение словарём дизайн-терминов. Мы решили составить расширенный глоссарий этих терминов:

1. Выравнивание
Позиционирование элементов в дизайн-макете (текста, изображений и т.д.). Эти элементы могут быть выровнены относительно друг друга и относительно страницы. Этот текст выровнен по левому краю, а линии изображенные ниже — по правому.

alignment

2. Аналогичные цвета
Цвета, следующие друг за другом на цветовом круге.

analogous

3. Верхняя часть символа (Ascender)
выступает над верхней линией (высотой) строчного символа.

ascender-1

4. Базовая линия (baseline)
Невидимая линия, на которой расположены все символы в строке.

baseline

5. Высота заглавного символа
Расстояние между базовой линией и верхней точкой заглавного символа.

cap height

6. Цветовая модель CMYK (CMYK: Cyan, Magenta, Yellow, Key color)
Цветовая схема используется в полиграфии и охватывает меньше цветов, чем RGB-модель.

CMYK-1

7. Цветовой круг
Цветовой круг показывает взаимодействие между первичными, вторичными и третичными цветами, холодными и тёплыми.

BYR_color_wheel.svg

8. Цветовая схема
Сочетание двух и более цветов цветового круга, также называется гармонией цвета.

9. Дополнительные цвета
Цвета, расположенные друг напротив  друга на цветовом круге.

complementary
10. Сжатие
Уменьшение размера файла путём удаления лишних данных. Особенно полезно при пересылке или сохранении больших изображений.

11. Контраст
Подчёркивание различий между цветами, формами, пространством и другими элементами дизайна.
cotrast
12. Обрезка
Удаление частей изображения для перекомпозиции или для изменения линейных пропорций.


13. CSS (Каскадные таблицы стилей)
Фрагмент кода, отдельный от основного содержания и определяющий внешний вид и впечатление от веб-страницы.

14. Нижняя часть символа (Descender)
Часть буквенного символа, выходящего за границы базовой линии.

descender-1

 

15. Количество точек на дюйм (DPI)
Аналогично пикселю в вебе, точка — наименьшая единица измерения при печати цифровых изображений. Количество точек на дюйм (DPI) относится к разрешению печатного цифрового объекта – чем больше DPI, тем больше разрешение.

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

Blurshadow
17. EPS
Формат файлов, используемый для изображений векторной графики, содержащих как текст, так и изображения.

18. Растушевка
Дизайнерская техника сглаживания резких переходов

19. Шрифт
Начертание букв определенного стиля и размера. Например, шрифт Times New Roman полужирный 14px.

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

21. Градиент
Дизайнерская техника плавного перехода одного цвета или части изображения в другой цвет или часть изображения.

gradient

22. Сетка
Координатная плоскость с горизонтальными и вертикальными линиями для выравнивания изображений и текста в пределах документа.

23. Шестнадцатеричные цвета (HEX-код)
Код, используемый в HTML и CSS для определения специфического цвета. В обозначении содержит символ хэштега (#). Таблица с шестнадцатеричными цветовыми кодами:

Xterm_color
24. НTML
Язык гипертекстовой разметки для отображения содержимого веб-страниц.

25. Оттенок
То, что большинство людей называют цветом — красный, оранжевый, жёлтый.

26. JPEG
Формат файла, использующий сжатие как с потерями (loss) так и без потерь (lossless), причем потеря качества незаметна глазу. Чаще всего используется для фотографий и реалистичных картин с плавными переходами яркости и цвета.

27. Кернинг
Расстояние между символами.

1280px-Kerning_EN
28. Интерлиньяж
Расстояние между строками текста.

29. Сжатие данные с потерями (Loss)
Вид сжатия данных с уменьшением размера сжимаемого файла. Характерный пример — — JPEG.

30. Сжатие без потерь (Lossless)
Вид сжатия изображения, при котором оригинальные данные полностью восстанавливаются.

31. Средняя линия
Расстояние от базовой линии строки до верхней точки большинства строчных букв.

midline-1
32. Негативное пространство.
Пространство вокруг элементов дизайна на веб-странице или отдельном изображении. Синоним пустого пространства.

negativespace
33. Шрифты в формате OTF
Современный стандарт формата шрифтов. В одном файле содержится как экранная версия шрифта так и версия для печати. Совместима с Mac и Windows. Расширение файла со шрифтами — .otf.

34. Верхняя висячая строка
Первая строка абзаца, появляющаяся отдельно от остального абзаца. Обычно ухудшает читабельность текста.

Orphan-typesetting
35. Pantone
Цветовая палитра, созданная компанией Pantone. В основном используется в полиграфическом дизайне и используется для сопоставления напечатанных цвета с экранными на стадии цифрового дизайна.

pantone

37. PDF
Файловый формат, используемый для представления документов и презентаций.

38. Пиксел
Наименьший элемент цифрового изображения.

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

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

41. Прямоугольная цветовая схема
4 цвета — 2 пары дополняющих цветов.

rectangular

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

43. Цветовая модель RGB
Используется в веб-дизайне, так компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре.

RGB

44. Насыщенность (Saturation)
Свойство, характеризующее силу, интенсивность ощущения цветового тона.

HSV_lowgamma

45. Засечки (Serif)
Штрихи на концах линий в начертании символов. “Sans serif“ — соответственно шрифты без засечек.

46. Квадратная цветовая схема
4 цвета, равноудаленные друг от друга на цветовом круге.

SQUARE-4
49. Стержень
Основной вертикальный штрих буквенного символа, как в букве В и диагональный штрих в букве V.

50. Штрихи
Линии, определяющее очертания символа в гарнитуре шрифта.

51. Яркость
Степень присутствия в цвете черного или белого.

52. Третичные цвета
Эта цветовая схема сочетает цвета, расположенные друг к другу под углом в 120 градусов. Эта цветовая схема считается наилучшим сочетанием цветов.

triadic
53. Гарнитура шрифта
Коллекция символов, включающая буквы, цифры, пунктуацию. Например, Times New Roman, Arial, Helvetika.

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

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

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

57. Жирность шрифта
Тип начертания символов, который может быть полужирным, жирным, нормальным.

58. Пустое пространство
Белое пространство вокруг объектов дизайна. Синоним негативного пространства.

books-education-school-literature-48126
59. Висячая строка
Текст в конце абзаца, переходящий на следующую страницу или колонку. Как правило, портят эстетическое впечатления и снижают удобочитаемость текста.

2000px-Widow-typesetting.svg

60. Высота строчного символа
Расстояние между базовой линией и верхней точкой строчного символа.

xheight

Тренды в UX-дизайне в 2017 году, vol.2

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

В прошлом году мы стали свидетелями серии инноваций, произошедших в мире UX. Самый крупный и заметный из них — дополненная реальность PokemonGo – мобильная игра-бестселлер в США, заработавшая 50 миллионов скачиваний через 13 часов после своего релиза.

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

1. Дизайн, экономящий ваше время

2017-ux-5

Безупречный UX-дизайн интуитивно понятен и экономит время пользователя — в единицу времени пользователь выполняет только одно действие. Яркий пример — на Uber процесс совершения сделки в системе бронирования предельно ясен и понятен.

Безупречный UX-дизайн интуитивно понятен и экономит время пользователя

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

2. Умная персонализация

2017-ux-4
И компании, и пользователи – все любят персонализацию. Но в 2016 году персонализация информации принесла не слишком приятные сюрпризы. Многие люди были шокированы результатами Brexit’а и президентских выборов в США, так как их ближайшие окружение создало ощущение, что весь мир разделяет их мнение.

Следующее поколение персонализированного опыта должно измениться.

3. Метрика за пределами интерфейса

2017-ux-3

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

  1. Время, проведенное на сайте.
  2. Переходы по страницам.
  3. Где произошёл уход со страницы до совершения пользователем целевого действия.

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

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

4. Расширение роли и специализации в проектировании интерфейсов

2017-ux-2

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

Каждый, кто занят в разработке элементов интерфейса, является частью UX-команды.

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

5. UX как практика менеджмента

2017-ux1

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

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

Веб-дизайн: взгляд на навигацию

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

На заре развития веба были три главные кнопки навигации – «Главная», «О нас», «Контакты».  В зависимости от сайта могло быть больше кнопок, а могло и не быть. Важнее всего был хороший внешний  вид этих кнопок.

Nav2

В старые добрые времена, было много фреймов, кое-как сгенерированного HTML-кода, передоз флэша, и, как следствие, — никаких шансов для SEО.

Навигация была похожа на джунгли.

NAv

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

Навигация прошла длинный путь развития. И все ещё есть не решен вопрос как сделать ее оптимальной. Ведь для разных сайтов подходят разные решения.

Времена меняются

Перемены – единственное, что постоянно в мире IT. Чтобы понять откуда мы пришли, и куда мы идём, нужно понять причины развития навигации. Стандартное исполнение навигации менялось по трём причинам:

1. Сайты стали меньше, и больше. Это сложно

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

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

2. Девайсы изменились

Device

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

3. Наше представление о пользователях и сами пользователи изменились

UX

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

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

Где мы сейчас

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

1. Плоская навигация.

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

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

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

По началу это кажется не таким уж необходимым в случае версий для десктопа. Но, например, как в случае с сайтом http://www.awwwards.com/ это имеет смысл: так как меню — многоуровневое, и скрытие панели навигации не наносит ущерб юзабилити.

3. Гибридная навигация

На больших сайтах и, конечно, в веб-приложениях часто нужно использовать больше одной формы навигации. Хороший пример — http://www.itsnicethat.com/ — основное меню расположено слева в шапке cтраницы, а более полное и подробное спрятано за кнопкой гамбургерного меню.

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

4. Навигация на основе систематики

Зайдите на какой-нибудь блог. Или новостной сайт, или Pinterest. Здесь обитает такой вариант навигации. Её цель – помочь пользователю найти нужный однородный контент среди обилия информации, систематизированной по тематике, тегам, дате.

5. Экспериментальная навигация

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

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

Навигация в будущем

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

6 трендов в UX–дизайне в 2017 году

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

ux-design-trends-2017

Что-то будет применяться и дальше, что-то — нет. Мы все свидетели подъема и спада таких трендов, как флэш-анимация, слайдеры на главной, стоковые фотографии.

Что касается пользовательского опыта – мы постоянно что-то улучшаем, чтобы увеличить конверсию и снизить показатель отказов. В 2017 году следует обратить внимание на следующие инструменты:

1. Оценка времени на чтение, чтобы увеличить число читателей

Открывая статью, пользователь, как правило, пролистывает её до конца, чтобы понять, сколько времени уйдет на её чтение. Если текст выглядит длинным и неинтересным, пользователь просто просканирует его или сразу закроет страницу. Чтобы этого не происходило, указывайте время на прочтение каждой статьи. Сайт Medium.com уже год использует этот приём.

«Чем больше у нас сведений о чём-либо, включая точное время на совершение какого-либо действия, тем более вероятно, что мы выполним его.»

New-Yorker

Time-To-Read

2. Чатботы для лучшего взаимодействия с клиентом

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

eBay

3. Голосовые и жестовые интерфейсы

Графические пользовательские интерфейсы постепенно уходят. Им на смену приходят голосовые и жестовые интерфейсы.  И вы уже ими пользуетесь или пользовались хотя бы раз — Google AssistanceApple Siri and Microsoft Cortana.  Больше не нужно печатать запрос, а просто его  озвучить, что существенно упрощает поиск в приложении или на сайте.

Ok_Google

4. Значимые микровзаимодействия

Микровзаимодействия – визуальные реакции сайта на действия пользователя. Это подсказки, анимации, CSS-переходы при наведении/клике мыши. Они создают у пользователя чувство контроля — он получает мгновенную реакцию от сайта или приложения на свои действия. Пример с Facebook: новые эмотиконы наконец-то дали возможность пользователям точнее выражать свои эмоции по поводу контента, а не ставить под грустной фоткой отметку «Нравится».

facebook-reaction

5. Анимация при скроллинге

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

6. Меньше — больше

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

Используйте пространство, негативное пространство. Негативное (пустое) пространство фокусирует внимание на контенте и увеличивает показатель конверсии. Но не стоит убирать нужные элементы, например, панель навигации в футере.

Сайт gDiapers.com увеличил конверсию на 20% после добавления пустого пространства между баннером на главной и двумя картинками с призывами к действию.

negative-space-gdiapers

Тренды приходят и уходят. Не стоит сразу применять все перечисленные инструменты и на всех своих ресурсах. Имеет смысл протестировать выбранные приёмы на отдельной странице, чтобы выяснить, что влияет на показатели конверсии и отказов.

Помните, что разные инструменты подходят для разных сайтов. Например, если у вас одна единственная страница, то голоcовой или жестовый интерфейс вряд ли понадобится.

 

13 трендов в дизайне логотипов на 2017 год

Мы требуем от логотипов слишком многого.

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

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

logo-design-trends-infographic-2

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

10 ярких примеров новогоднего редизайна сайта

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

cheerful-example-of-holiday-homepage-designs

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

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

1) Free People

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

Особенно выигрышно смотрится причудливый шрифт заголовка «The Gift Shop 2016.» Для определенных брендов подобные декоративные шрифты – гармоничный элемент сезонного редизайна сайта.

freepeople_holiday

2) PayPal

Кто сказал, что сайт всемирно известной платежной системы не может выглядеть веселее в предновогодний период?

Новогодний дизайн главной страницы PayPal всё равно узнаваем и выглядит как сайт PayPal – только более праздничный. Навигация по сайту так же проста, но уже с добавлением предновогоднего настроения с цитатой из «Jingle Bells» в качестве праздничного слогана.

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

paypal-holiday

 

3) Sephora – косметика

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

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

sephora-holiday-homepage

 

4) Microsoft

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

microsoft-holiday-large

5) HP

Мы не можем гарантировать, что видео на главной странице HP  не заставит вас плакать, но это безусловно уникальный, искрений пример  праздничного маркетинга. Это еще один пример страницы с минималистичным дизайном с фокусом на видео-ролике  — «Reinvent Giving» – «Изобретая Дарение».

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

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

hp3

 

6) La Colombe – кофе

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

la-colombe-holiday2

 

7) FitBit – часы для спортсменов

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

fitbit1

 

Главный призыв к действию – «Shop the Sale» – «Перейти к распродаже» – ведет посетителей на страницу товаров со всеми описаниями и рекомендациями, для кого бы подошел данный товар.

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

fitbit2

 

8) Baudville

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

baudville_holiday

 

9) J.Crew – интернет-магазин одежды

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

Главный призыв к действию «Present-Topia» – «Гид по подаркам», который разделяет ассортимент товаров по возрастным, гендерным, ценовым группам, делая процесс выбор намного проще. Левый баннер на черном фоне предлагает приобрести е-Сard – аналог подарочного сертификата на определенную сумму. J.Crew также размещает коллекции готовых образов, легкие для навигации и готовые для приобретения в режиме онлайн. Это делает процесс выбора и покупки нагляднее, быстрее и удобнее.

В приоритете данного редизайна сайта – опыт посетителя при сохранении стиля сайта на уровне и в духе бренда.

jcrew-holiday

 

10) Container Store

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

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

container-store-holiday

 

Ознакомиться с портфолио наших работ, а также заказать новый дизайн сайта не только по случаю Нового года вы можете на нашем сайте —  www.artismedia.by