Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Главное Свежее   Проекты
Рекомендуем
Продвинуть свой проект
9 983 17 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Каким должен быть хороший сайт: краткое руководство и подборка полезных инструментов

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

b_59032aa1f0f7c.jpg

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

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

Какой сайт можно назвать хорошим

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

  • Цель. Хороший дизайн всегда начинается с формулировки задачи. Прежде чем делать хоть что-то, нужно спросить себя о том, для чего вообще нужна каждая веб-страница. Если цели нет, то создавать ее не стоит.
  • Эстетика внешнего вида. Сайт должен выглядеть хорошо и современно. Если же он «передает привет из 90-х» — это плохо, нужно срочно исправлять ситуацию.
  • Релевантный и оригинальный контент. Содержимое сайта должно соответствовать бизнес-задачам, контент должен быть уникальным. Плагиат — это плохо и наказывается поисковыми системами.
  • Понятная навигация. То, насколько просто и понятно можно передвигаться по сайту — очень важно. Любая его страница должна быть доступна за три клика с любой другой страницы. Навигация должна быть простой и понятной — это положительно сказывается на конверсии и даже на ранжировании в поисковиках.

Теперь рассмотрим описанные выше пункты более подробно.

1. Визуальный дизайн («красота»)

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

JEZf61NIZOYMBWE4ZuIEP10ze7-H6QCjzhUiDndB

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

Дизайн влияет на все — от показателя конверсии до времени, проведенного посетителем на странице, степени доверия к сайту и наличию органических ссылок на него, что полезно для SEO.

Формула выглядит следующим образом:

Хороший дизайн = Больше доверия = Выше конверсия

Но как добиться того, чтобы сайт выглядел хорошо? Нужно начать с бренда.

Веб-дизайн и брендинг

Бренд — это то, как выглядит компания в глазах клиентов. На восприятие влияет все — цвета, шрифты и т.д. В своем руководстве по брендингу Соня Грегори говорит, что «ваш небольшой бизнес может конкурировать с крупными компаниями, у которых преданные покупатели. А значит, вам нужно найти способ выделиться и создать свой собственный бренд». Что люди должны думать, когда видят ваш сайт?

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

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

d_NgGlR8z1F21cFgRnyZ-4nKx4c23x03mbxQdk6n

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

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

Поиск, создание и использование изображений

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

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

oWqIpqYwalnAT7xjQBVVo5MOSyXsrIhhdO2KdFOL

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

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

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

2. Дизайн с технической точки зрения («айтишность»)

Технические элементы веб-дизайна включают в себя:

  • адаптивность и дружелюбность к мобильным устройствам;
  • высокую скорость загрузки;
  • поисковую оптимизацию (SEO);
  • SSL-шифрование;
  • архитектуру сайта и навигацию.

Рассмотрим их подробнее.

Адаптивный дизайн и дружелюбность к мобильным устройствам

SmashingMagazine определяет адаптивный веб-дизайн так:

«Адаптивный (отзывчивый) веб-дизайн — это подход, согласно которому дизайн и разработка сайта должны отвечать поведению пользователя и используемой им среде на основе размера экрана, платформы и ориентации устройства».

Lc0IvDoO7-gYFwrlhNK5O5aS7ESYzhgNK6JtnA8m

Другими словами, адаптивный сайт — это такой сайт, который хорошо отображается на любом экране и устройстве. Звучит непросто, и так оно и есть на самом деле. Однако адаптивность очень важна — уже сейчас смартфоны генерируют более 51% всего интернет-трафика, а на долю планшетов приходится 12%. Эти цифры растут.

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

Что все это значит для не-дизайнера?

Прежде всего, нужно понять, является ли ваш сайт mobile-friendly — если он плохо выглядит на смартфоне, то предстоит заняться мобильной версией. Поисковик Google позволяет легко проверить, будет ли сайт считаться адаптивным его поисковым роботом:

yfZdUoIB3WwsoykbWuafQe3z0v9BmlUIlj0LfBq5

Существует большое количество mobile-friendly шаблонов для разных движков сайтов:

Высокая скорость загрузки

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

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

Поэтому необходимо тестировать скорость загрузки страниц вашего сайта — для этого можно использовать специальный инструмент от Google. Кроме того для решения этой задачи есть проекты Pingdom и GT Metrix.

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

xYVB2uPtp6_Z_4LbqGAlh5KbYoWdOLVqgyLipVfW

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

Для сжатия картинок можно использовать инструмент Gimp — на его сайте можно найти руководство по использованию (на английском).

qGtbZ9il74DBWB8hBHuNQcIkpoSrXzvJGSOZ3bVh

Поисковая оптимизация (SEO)

Хороший сайт должен хорошо индексироваться поисковыми системами. Если все сделать правильно, то можно получить постоянный приток новых посетителей, а если наделать ошибок, то найти вас через Google или «Яндекс» будет очень сложно.

Американский маркетолог и digital-консультант Джон Рогнеруд выделяет три важных момента при работе с SEO:

  1. Необходимо понимать, кто целевая аудитория сайта, и подбирать ключевые слова – в рассылке мы рассказывали о некоторых хитрых способах их получения.
  2. SEO-оптимизацию нужно проводить на уровне страницы — здесь представлена полезная инфографика о том, как это сделать.
  3. У сайта должна быть проработанная карта, это положительно скажется на ранжировании в поисковиках.

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

Защита сайта с помощью SSL-шифрования

Вероятно, при заходе на некоторые сайты вы выдели в адресной строке зеленый замок:

JCh3RVpZ37b8JyTaZEws_xdB03-28Www2RVToqyy

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

Миграция на SSL — не всегда простой процесс, здесь можно подробнее почитать об этом.

Архитектура и навигация

Вспомним о четвертом принципе веб-дизайна: понятная навигация очень важна. Это так по двум причинам:

  • Повышение качества поискового продвижения — роботам «Яндекса» и Google проще перемещаться по сайту.
  • Улучшение юзабилити — пользователям проще найти то, за чем они пришли на сайт.

Важно придерживаться «правила трех кликов»: каждая страница на сайте должна быть доступна с любой другой страницы за три клика. Чтобы добиться этого нужно составить карту сайта. Сделать это можно с помощью инструментов вроде Slickplan или просто ручки и бумаги. Выглядеть карта должна как-то так:

P6EjOaTDGBtLnEfXJ-cP2ele-Zda2f1oNrn-NU-p

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

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

Инструменты развития сайта («как сделать сайт лучше»)

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

Прежде всего, очень полезно разместить на сайте модуль онлайн-консультанта. Чат позволяет обеспечить высокий уровень поддержки пользователей, это просто удобно — людям не надо никуда звонить или долго ждать ответа по электронной почте, если консультанту можно быстро написать прямо с сайта. Пример такого чата — онлайн-сервис Onicon.b_59032ee0325d9.jpg

Еще один полезный инструмент Conversio Cart Abandonment Recovery позволяет возвращать пользователей, которые пытались совершить заказ на сайте, но покинули корзину. Программа автоматически рассылает таким пользователям email-сообщения, с целью их вернуть — например, в них можно предлагать людям скидки.

b_59032f56a8c59.jpg

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

Почтовые формы MailChimp полезны для сбора базы подписчиков на email-рассылку, а удобные социальные кнопки позволяют привлекать больше трафика на сайт за счет «шейров» пользователей.

Для ускорения загрузки сайта стоит заняться организацией кэширования страниц — сделать это можно с помощью инструмента W3 Total Cache (здесь подробно рассказано о том, как им пользоваться).

Ну и необходимые инструменты аналитики для владельцев сайтов — это «Яндекс.Метрика» и Google Analytics.

Заключение

Итак, что можно сказать после всего написанного выше?

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

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

Ну и, в конце концов, на дворе 2017 год, хороший сайт теперь это не «чтобы было», а абсолютно необходимый инструмент бизнеса

Ссылки и материалы по теме:

+2
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Подбираем рекоммендации...
Комментарии
Первые Новые Популярные
SPARK
Помогаем стартапам 24х7
Михаил Великий
Сделали анонс на главной vc.ru.
Ответить
ГОЛОД
Доставка обедов за 8 минут. Сервис моментальных ланчей
Максим Аверкин
оп, 2008-й вернулся
Ответить
dewan
про изображения порадовало) главное - наглядно!
Ответить
Ilya Karbyshev
Вот это капитанство будет на главной vc? Странный выбор
Ответить
Ник Лежневич
ну, к сожалению, действительно очередной набор советов от КО. С поправкой на современные реалии и технологии, что хорошо) Может новичкам что-нибудь да пригодится
Ответить
Алексей Сироткин
Боженьки, компания по разработке сайтов делает перевод какой-то там статьи от каких-то непонятных людей на английском про то, какими должны быть сайты....
Это какой-то позор.
Вы б еще на бирже контента заказали статью за 15 руб/1000 символов.
Ответить
Иван Сергеев
Народ в комментах исходит из того, что Спарк читают только гуру веба, что не совсем так мягко говоря. Советы действительно больше для новичков, но среди создателей стартапов таких много — о чем говорит и число просмотров, кстати.

В этом плане жаль, что на спарке нет никакой индикации сложности и продвинутости материала, как часто делают в описаниях докладов на сайтах ИТ-конф. Была бы такая метка, множество негативных замечаний были бы сразу сняты.
Ответить
Иван Петрович
Народ в комментах исходит из того что это уже 100500-я статья подобного рода не только в Интернете, но и на спарке.
Ответить
Alexey Gross
А мне статья зашла. Спасибо автору за проделанную работу.
PS: не все вебщики — это да.
Ответить
Александр
Вместо онлайн-чата (отдельного) и некоторых других инструментов, могу посоветовать сразу поставить Битрикс24 (бесплатную версию для начала) и, практически сразу, получать лиды в CRM, не заморачиваясь промежутком "ломания копий", когда всенепременно хочется поизобретать велосипед )))
Сэкономите много времени, причем сразу.
Ответить
работа
поиск персонала для Тинькофф Банк
dmz6969
Все хорошо, за исключением ценника за привязку к своему домену
Ответить
Александр
А зачем его привязывать, простите? Подключил почту на свой домен и ... достаточно, нет?
Ответить
Иван Петрович
Советовать битрикс - это самое плохое что вы можете сделать в рунете:)
Ответить
Александр
Таладна, у Вас есть практический опыт тестирования всевозможных программ/сервисов тайм-менеджмента + CRM + звонилка без вымогания денег на паразитировании телефонного трафика в течении 2-х лет? )) Поделитесь опытом, прежде чем быть таким категоричным и подписывающимся за весь Рунет ... список равноценных БЕСПЛАТНЫХ аналогов - в студию, пожалуйста.
Не стесняйтесь ))
Ответить
Иван Петрович
А чего не написали, что статья опубликована тут для рекламы вашего сервиса?:)
Ответить
Иван Сергеев
Это как бы корпоративный блог, бро. Естественно они рекламируют и себя, этот вопрос подойдет для любой статьи на спарке
Ответить
Иван Петрович
Почему говоря "они", вы не говорите, что вы это они и есть?:)
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать