15 «фишек» для сайтов или как усовершенствовать сайт
Маша Радионова
Опубликовано: 16 Авг 2017
Вернуться в блог
На каком этапе продумываются «фишки» для сайтов? Какими могут быть эти «фишки»?
Для чего они нужны? Как уместно применить «фишку» и в чем их главная задача?
На все эти вопросы мы постарались ответить в статье и показать на конкретных примерах.
- Просто о сложном
Идея в том, что не надо описывать с помощью кучи текста Ваш сложный продукт/товар/ услугу. Визуализируйте и упрощайте. Объясните с помощью картинок/схем/цифр все самые сложные вещи. Ведь, если клиент их поймет, он будет больше Вам доверять и с большей вероятностью купит именно у Вас.
Так, на сайте Теплокрепости мы показали выгоду от использования той или иной технологии при постройке дома.
На сайте Diko-group, опять же, с помощью простого приема показали выгоду при использовании аналогичных услуг в Diko и других компаниях.
- Подсказки и интересные фильтры.
Все понимают, что если каталог большой, то для того, чтобы упростить выбор необходимо добавить фильтры.
А если каталог с небольшим количеством товаров, стоит ли заморачиваться за то, как преподнести товары? Конечно стоит! Ведь для вас важен каждый клиент. И если именно Вы позаботитесь об его удобстве и поможете с правильным выбором — он отблагодарит вас покупкой.
Чтобы не быть голословными покажем пример. Это сайт Motors Russia. На каждом шаге сайт подсказывает, что необходимо сделать. Такая фишка работает, когда параметров фильтрации не много.
- Нестандартные слайдеры.
Слайдеры используются под разные задачи. Они нужны для привлечения внимания к тем или иным разделам, акциям, товарам.
Такие слайдеры имеют место быть, но если у Вас есть важный контент, с которым можно «поиграть» в дизайне, то можно его оформить интересным слайдером.Такие факты точно не останутся незамеченными!
Еще пример, простые, приятные анимации на слайдере сайта компании “Мой Офис”
- Визуальные конфигураторы
Зачастую, пользователю нужно просто увидеть, чтобы понять хочет он купить или нет. Поэтому, очень важно визуализировать результат. То есть, если Вы продаете диваны и у конкретной модели 5 вариантов расцветки, почему б не показать их все? Многие интернет-магазины делают выбор цвета в виде выпадающего списка, или даже с помощью “цветных квадратиков”, но это все не работает, если человек не увидит весь диван именно в том, цвете, который он хочет.
Так, мы создали визуальный конфигуратор дверей на сайте “Фабрики Восход” . Работать с ним очень просто, выбираете модель, затем цвет экошпона, затем цвет стекла, а также можно посмотреть как будет выглядеть выбранный вариант на 1 и 2х створчатой двери.
- Товар лицом.
“Это не фишка”, — скажете Вы. Но у нас есть аргументы в пользу того, что в реальности это фишка. И вроде бы все кивают головой, что да, нужны качественные фото, видео, но мы часто сталкиваемся с тем, что у заказчика подобного контента просто нет. При этом пожелания к дизайну могут быть самые изысканные, и непременно одно из требований будет задействовать большие, красивые фотографии, которые исполнители находят на фотостоках, но при наполнении реальным контентом сайт перестает быть, таким, каким его задумали.
Хороший пример “Показать товар лицом” сайт Ювелирного бренда The Saplings
Отличные фотокарточки, не требующие увеличения на сайте Студии интерьера Форест, можно не только посмотреть все вариации товара, но и посмотреть фото товара в интерьере.
- Давай сыграем в игру
Взаимодействуйте с пользователем. Предложите ему ответить на вопросы викторины, чтобы получить бонус или скидку. Вопросы должны быть простые и все ответы должно быть легко найти на сайте. Можно продумать вопросы таким образом, чтобы он проникся философией компании, узнал подробнее об ее истории, прочитал интересные факты или отзывы.
Так на сайте ФОК Гагаринский посетителям предлагается ответить на вопросы викторины, чтобы получить скидку.
Вопросы викторины и ответы можно задавать через административную панель сайта.
- Калькуляторы
Простой, но действенный инструмент для продаж. Если расчет цены складывается из нескольких параметров, то можно предложить “поиграть” с этими параметрами и самим рассчитать стоимость конечного продукта/услуги.
Например, на сайте интернет-провайдера К-телеком есть возможность менять параметры в тарифе и рассчитывать стоимость:
На сайте интернет-магазина дверей Sidoorov в разделе межкомнатных дверей также можно посчитать стоимость двери в зависимости от размера полотна и наличия погонажных изделий.
- Автоматизация и синхронизация.
Автоматизировать необходимо процессы, которые происходят постоянно.
Например, у вас есть складская система, которая привязана к кассам, именно в ней можно отследить актуальное количество товаров и цену, а значит можно настроить синхронизацию по тем пунктам, которые обновляются. В интернет-магазине Канистра происходит ежесуточная синхронизация с 1С по товарам, ценам, остаткам, таким образом на сайте поддерживается актуальная информация по всем товарам.
У компании Diko-group настроена синхронизация по контрагентам, их заказам, их накопленным бонусам.
- Сертификаты
На некоторых сайтах будет актуально сделать подарочные сертификаты, которые можно будет дарить, просто пересылкой на e-mail. Хотя, для материальности подарка, такой сертификат можно и распечатать.
Разумеется, чтобы это стало фишкой, а не провалом, надо продумать механизм взаимодействия, удобство пользования сертификатом, удобство покупки, ну и, конечно нельзя забывать, что сертификаты должны быть красивыми, а значит нужно подключать дизайнера.
На сайте Рамблер/кассы есть магазин, где можно приобрести сертификаты разного номинала на покупку билетов в кинотеатрах-партнерах рамблер/кассы. Такое решение несомненно увеличивает продажи и становится фишкой, ведь сертификат можно подарить на любой праздник.
- Адаптивность.
А является ли фишкой адаптивность для сайта? Безусловно, да! Современный сайт просто обязан быть адаптирован под мобильные устройства. Статистика показывает, что 50% пользователей заходят в интернет с мобильного и ПК и 16% населения выходят в интернет только с мобильного. Отсюда вопрос, хотите ли вы потерять те самые 16% пользователей, а может и все 54%.
- Защищенная передача информации или установка SSL сертификата
Установку SSL сертификата можно назвать фишкой, а можно назвать необходимостью.
SSL (Secure Sockets Layer) представляет собой криптографический протокол, который обеспечивает защищенную передачу информации.
SSL сертификат необходим в случае работы с электронными деньгами, при необходимости передачи конфиденциальной информации (номера кредитных карт, паспортные данные, пин-коды, пароли и др)
На данный момент некоторые браузеры показывают предупреждение, о том, что на сайте не подключен SSL, и как Вы знаете любое предупреждение о небезопасности Вашего сайта может отпугнуть Вашего потенциального клиента.
Также некоторые социальные сети не позволяют переходить по ссылкам у которых нет протокола SSL.
- OG-метатеги
Мы уже рассказывали, что считаем своим долгом делать красивые OG-метатеги и это входит в наш чек-лист готовности сайта
Open Graph — популярный стандарт разметки веб страниц, который помогает соцсетям правильно отображать превью сайта по ссылке. Вы можете видеть такие превью уже почти везде: в сообщениях и постах в соцсетях, в мессенджерах, даже в смс-ках (iMessage на iOS)!
- Красивые фавиконы
Еще один обязательный пункт подготовки сайта к публикации — создание Фавиконов.
Никогда не знаешь, где ваш проект сохранят в закладки, поэтому мы создаем фавиконы под все основные операционные системы.
- Гномопад
В действительности, все вышеперечисленное не имеет значения, если вы не установите на свой сайт Гномопад!
Последние записи блога
Please enable JavaScript to view the comments powered by Disqus.
Разработка веб-дизайна для сайтов и лендингов
Одно из направлений нашей студии — разработка дизайна для сайтов, веб-сервисов и приложений. Мы выпускаем продукты с интуитивно понятным адаптивным интерфейсом, а наши визуальные решения помогают выделиться и запомниться в digital-среде.
Читать далее
Что мы можем сделать для вашего бизнеса
- дизайн и редизайн корпоративных сайтов, веб-сервисов и приложений;
- адаптация готового дизайна под разные устройства;
- аудит пользовательского интерфейса вашего веб-приложения;
- интерфейсы информационных систем и программного обеспечения.
Как мы работаем
У нас своя команда аналитиков, продуктовых дизайнеров и маркетологов: при создании веб-дизайна мы отвечаем за полный цикл разработки.
- анализируем ваши бизнес-процессы, анализируем потребности пользователей;
- предлагаем решения по позиционированию продукта и визуальным коммуникациям;
- создаем прототипы;
- разрабатываем дизайн-концепцию;
- проектируем веб-интерфейсы;
- проводим исследования и тестируем.
У нас своя команда аналитиков, продуктовых дизайнеров и маркетологов: при создании веб-дизайна мы отвечаем за полный цикл разработки.
Что вы получите от сотрудничества с нами
- удобный и понятный для пользователей цифровой продукт;
- простую и эффективную коммуникацию с пользователями;
- рост лояльности клиентов и узнаваемости бренда;
- повышение конверсии и увеличение продаж.
Если вы хотите, чтобы каталоги листались с удовольствием, лонгриды дочитывались с интересом, а формы заполнялись с доверием — оставьте контакты, и мы обсудим, как это реализовать.
Свернуть
UI Kids Учимся замечать незаметное с UI Kids Статья
Peas Проектируем пользовательский интерфейс для аналитической системы предприятия Проект
Evrone Quiz Проверка грейда и развлечение в одном тесте Статья
Fairytale CJM Превращаем реальность в сказку с Fairytale CJM Статья
- Больше кейсов
За прошедший год я научился многому, работая с Evrone, изучая новые кроссплатформенные фреймворки, такие как Flutter (в том числе предоставляя модуль аудиозаписи open-source сообществу), язык дизайна и потоки. Мы решили использовать бэкэнд Firebase с API распознавания речи Google. Команда Evrone познакомила меня с широким спектром инструментов как Trello, Zeplin, Loom, Marvel, InVision и другими.
Команда Evrone присоединилась к нам в сложный период, когда до дедлайна было 4 месяца,а продукт существовал только на бумаге.
Ребята не только выпустили софт в срок, но и плотно участвовали в улучшении создаваемого мобильного приложения. Мы рады продолжать наше сотрудничество.
Компания Рево Технологии благодарит вас за сотрудничество. Мы рады возможности совместной работы над проектами. Мы признательны вашему коллективу за профессионализм, серьезное отношение к работе и стремление к достижению качественного результата в необходимые сроки.
Мы любим Vexor и используем его для наших проектов с открытым исходным кодом на GitHub. Мы ценим эту платформу, так как она позволяет нам строить инструменты, а также нам нравится новая контейнерная инфраструктура для более быстрой сборки.
Связаться с нами
Нужна команда?
Давайте обсудим ваш проект
Ваше имя *
Ваш email *
— None -До $20,000До $40,000До $60,000До $100,000Более $100,000Не могу определитьсяБюджет
— None -РуководительИнвесторМенеджерДругая должностьДолжность
Ваш телефон
Прикрепить файлДобавить новый файл
Максимальный размер файла: 2 МБ.
Допустимые типы файлов: jpg jpeg png txt rtf pdf doc docx ppt pptx.
Какой продукт вам нужно разработать?
Этот сайт защищен reCAPTCHA и Политикой конфиденциальности и условиями предоставления услуг Google.
119180, Москва, Большая Якиманка 26
+7 495 374 84 60
Фонддля сайтов | Foundation for Sites
Foundation for Sites 6 был разработан, чтобы сделать ваш проект от прототипа до производства более эффективным, чем когда-либо прежде! Он включает в себя широкий спектр модульных и гибких компонентов, которые легко стилизовать. Эти универсальные и легкие строительные блоки позволяют легко воплощать ваши идеи в жизнь.
Общий размер файла каждого компонента и класса теперь составляет 60 КБ CSS и 84 КБ JS, с достаточным пространством, чтобы сделать их еще меньше при выборочном удалении неиспользуемых компонентов.
Все фрагменты кода содержат атрибуты и роли ARIA, а также инструкции по правильному использованию этих компонентов. Это помогает гарантировать, что каждый веб-сайт, созданный на основе Foundation 6, может использоваться в любом месте, на любом устройстве и кем угодно.
Загрузите свои веб-страницы с адаптивным дизайном, чтобы получить контекстную обратную связь по любой контрольной точке. Заинтересованные стороны и соавторы могут комментировать и просматривать закодированные веб-страницы на любом устройстве. Поднимите свои проекты Foundation от прототипа до производства, используя Notable Code.
Мы создали полностью настраиваемую и модульную систему меню. Новый компонент «Меню» — это огромный шаг вперед, поскольку он объединяет несколько компонентов, экономит много строк кода и обеспечивает модульную навигацию, которую можно использовать практически в каждом проекте.
Мы значительно сократили объем кода в наших подключаемых модулях JS, уменьшив размер каждого подключаемого модуля и создав больше общих служебных библиотек.
Библиотеки утилит общедоступны, поэтому вы можете создавать свои собственные удивительные плагины.
Базовые стили действуют как закодированный каркас, а не как окончательный дизайн. Более простые стили CSS позволяют вам легче изменять их в соответствии с вашим брендом.
Motion UI — это наша библиотека анимации на основе Sass, которая поможет вам добавить значимое движение на ваши веб-сайты. Эта библиотека Sass включает более двух десятков встроенных классов перехода и анимации. Его очень легко настроить и очень легко создать с помощью миксинов Sass.
Мы сделали несколько блестящих новых шаблонов, чтобы запустить ваш следующий сайт или получить некоторые идеи макета. Вставьте эти готовые строительные блоки в свои проекты и сэкономьте время и ресурсы.
Наш новый инструмент командной строки (CLI) позволяет создавать пустые проекты Foundation for Sites, Apps или Emails с меньшим количеством зависимостей, чем раньше.
Вы также можете установить через NPM, Bower, Meteor или Composer.
Для пользователей, которые могут использовать новейшие технологии, Foundation поставляется с дополнительной сеткой на основе Flexbox. Это та же сетка, которую вы знаете и любите, но с еще лучшими вариантами упорядочения и выравнивания источников.
Сетчатые миксины Sass были созданы с умом, чтобы дать вам еще больше гибкости для настройки сеток с любым количеством столбцов. Сетка из четырех столбцов внутри сетки из пяти столбцов внутри сетки из двенадцати? Действуй!
Используйте тот же шаблон, который ZURB использует во всех наших клиентских проектах. Этот начальный шаблон представляет собой усовершенствованный стек с настраиваемым генератором статических сайтов, помогающим объединять файлы в отдельные HTML-документы. Он компилирует ваш Sass, предоставляет вам шаблоны Handlebars, UglifyJS, UnCSS и сжатие изображений.
Semantic
Foundation можно использовать с полностью семантической разметкой.
Пишите чистый код, не жертвуя полезностью или удобством.
Отзывчивый
Foundation был первым адаптивным фреймворком, и он пронизывает все аспекты фреймворка. С легкостью создавайте приложения для любого устройства.
Возможность индивидуальной настройки
Основание создано для того, чтобы его можно было легко изменить. Вы даже можете настроить структуру при загрузке.
Быстрее
От базового кода до плагинов и всего, что связано с Foundation, мы создали его так, чтобы он работал быстрее, чем когда-либо прежде.
Совместимость с Rails
Вы можете использовать Foundation с любым бэкэндом, но он особенно хорошо подходит для реализаций Rails.
Читабельный
Foundation написан для людей, и его легко читать, даже если вы не знаете кода.
Мобильный Первый
Foundation строится с приоритетом небольших устройств, а затем идет вверх.
Accessible
Foundation 6 совместима с 508 и более доступна, чем любая предыдущая версия.