8 дизайн-советов для эффектного и запоминающегося блога или интернет‑магазина

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

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

На примере популярной темы Zeen от Codetipi, мы покажем вам 8 современных способов вывести сайт на новый уровень. Давайте перейдем к делу:

1. Привлеките внимание пользователей с помощью бегущей строки

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

Красивая бегущая строка в теме Zeen

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

Чтобы элемент получился максимально эффективным, следует учитывать следующие аспекты.

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

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

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

2. Темный режим

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

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

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

Темный режим темы Zeen

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

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

3. Напомните посетителю о корзине

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

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

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

Один из способов сделать это — плавающая иконка корзины у края экрана. Такой деликатный элемент дизайна позволяет постоянно держать корзину под рукой и не занимает много места.

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

‍Плавающая иконка корзины в теме Zeen

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

4. Используйте отложенные анимации

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

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

Ступенчатая анимация в Zeen

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

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

5. Повышайте вовлеченность пользователей

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

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

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

К примеру, подумайте о добавлении в интерфейс реакций вроде эмодзи. Вы, вероятно, уже знакомы с похожим решением Facebook:

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

Эмодзи Zeen: доступно 14 опций

6. Тщательно продумайте навигацию

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

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

Кроме того, убедитесь, что все пункты меню сформулированы понятно, и пользователям очевидно, куда они ведут. Возможно, вы захотите разместить их на видном месте, как создатели сайта The New Yorker:

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

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

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

7. Используйте изображения с разными пропорциями

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

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

Эта концепция нашла отражение в демо блога Zeen's Food: на главной странице вы можете увидеть разные виды изображений: портретные, круглые и альбомные.

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

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

8. Сделайте фото центральным элементом дизайна

Качественные фотографии не всегда легко найти или создать. На это уходит много времени и сил. Мы рекомендуем сделать их центральным элементом дизайна.

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

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

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

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

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

Заключение

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

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