Разработка сайтов: Дизайн

Разработка сайтов с индивидуальным и адаптивным дизайном

На сегодняшний день абсолютным большинством веб-студий и вебмастеров разработка сайтов ведется на основе так называемых систем управления контентом. Самыми популярными системами являются WordPress, Joomla!, Drupal и 1С-Битрикс. Они значительно упрощают задачу, так как не нужно заниматься сложной версткой страниц. При этом разработка дизайна веб-ресурсов основывается на применении тем оформления, которые представляют собой гибкоконфигурируемые шаблоны.
Разработка сайтов, а в большей мере это касается дизайна, должна обеспечивать индивидуальность и имиджевую узнаваемость компании или физического лица (индивидуального предпринимателя). Но дизайн – это не только красота, это ещё и основа, которая должна обеспечивать должный функционал веб-ресурса, в том числе и его адаптивность. Адаптивный дизайн способствует удобству просмотра сайта на всех существуемых гаджетах, будь то настольный компьютер, ноутбук, планшет, смартфон. Ну, а если сайт красив, функционален и обладает адаптивным дизайном, то посетителям всегда будет приятно возвращаться на Ваш сайт, блог или интернет-магазин!

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

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

Внешний вид сайта должен быть аккуратен, чист и выглажен, неряшливость недопустима. Основная функция дизайна – улучшать восприятие информации и делать акценты на правильных местах. Ни в коем случае дизайн не должен перетягивать внимание человека с контента на само оформление. Дизайн ради дизайна – бесполезная вещь. Дизайн нужен ради удобной подачи контента.
Все элементы сайта на разных его страницах должны быть оформлены в едином стиле. Это ссылки, пункты меню, кнопки, модальные окна и т.п. То есть если вы используете синюю кнопку для целевого действия на главной странице, то и на странице заказа вполне логично поставить такую же синюю кнопку. Используемые на сайте шрифты должны обеспечивать легкость прочтения текстов и цифр, картинки и боковой фон должны нести смысловую нагрузку.
Говоря об адаптивном дизайне сайта, следует выделить full width и boxed макеты. Boxed макет сайта подразумевает расположение контента в центре экрана или монитора определенной ширины, по бокам контента – фон. Боковой фон может быть монотонным, одного цвета, или с использованием изображения. Full width макет подразумевает отсутствие ярко выраженного бокового фона и центрального контейнера с контентом. В этом случае графическое содержимое (изображения, слайдеры и т.п.) обычно растягивается на всю ширину экрана монитора или гаджета, а текст остается в отцентрованном контейнере. Чтение текста не должно заставлять пользователя мотать головой от одного края строки к другой.

Разработка сайтов ведётся с учётом следующих элементов дизайна:

  • Навигация
  • Это меню (основное верхнее, вспомогательные слева и в подвале) и так называемые “хлебные крошки”, по которым посетитель видет уровень вложенности данной страницы по отношению к главной. Навигация показывает, что содержится на сайте – какие товары/услуги предлагает компания и что можно про компанию узнать. Оптимально использовать 1-2 уровня вложенности. Если их больше, то будет сложно ориентироваться.
    Основное меню, как правило, располагается в шапке сайта. Меню должно быть единым для всех страниц сайта, по нему посетитель понимает, что он находится на одном и том же сайте. В разделах сайта может быть вспомогательное меню (обычно слева). Оно может быть разным для разных разделов.
    Желательно не ставить на одном уровне меню более 6-8 пунктов, объем внимания обычного человека – 5-7 объектов.
    При наведении мыши пункты меню следует подсвечивать, чтобы было понятно, что по ним можно кликнуть. Активный пункт меню (соответствует той странице, где сейчас находится посетитель сайта) нужно выделять, чтобы пользователь видел свое текущее положение.
    При уровне вложенности более двух ставим “хлебные крошки”, например:
    Главная » Услуги » Разработка сайтов
    чтобы показать всю цепочку, которая привела на ту или иную страницу.

  • Шапка
  • Это верхняя часть шаблона сайта, которая остается неизменной на всех его страницах. Что в ней может быть: логотип, тэглайн (2-3 слова о том, чем занимается компания), телефон, адрес, режим работы, ссылка на обратный звонок, ссылки на группы в соцсетях, ссылки на вход или регистрацию личного кабинета, корзина, строка поиска. Также в шапку обычно включают и главное меню.

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

  • Контент
  • Контент должен быть полезным, без лишней воды. Но и слишком кратким быть не стоит. Должна быть информация об услугах и товарах, о компании в целом и ее сотрудниках, об условиях работы, о гарантиях и выполненных заказах. Никто не захочет довериться незнакомцу. Сайт должен познакомить пользователя с вашей компанией.
    Помните, что контент – это не только тексты. Это еще картинки и видео. Они должны быть хорошего качества, сейчас для этого вполне хватит камеры смартфона. Идеально, если фотографии и видео сделаны «вживую», а не взяты с других сайтов.
    Помимо информации, напрямую касающейся компании, можно давать посетителям и другой полезный контент в виде статей. Грамотно написанные статьи будут повышать ваш статус эксперта и источника полезностей, а также доверие к компании. Но вести блог стоит только при наличии на это ресурсов (времени и специалистов). Потому что полупустой блог со статьями раз в несколько лет сыграет только отрицательно.

  • Отзывы и примеры работ
  • Отзывы и примеры работ нужны, чтобы повысить доверие к компании. Хорошо, если у вас есть реальные отзывы и реальные примеры работ – не прячьте их от людей, обязательно стоит добавить их на сайт.
    Что делать, если реальных отзывов нет? Стребуйте их со своих клиентов – за скидку или большое спасибо. Так как мир не без добрых людей, то хотя бы один из десяти согласится дать отзыв о вас (тем более если за скидку), надо только попросить.
    А если нет и самих реальных работ? Ну что делать, придется осчастливить родственников или друзей. Например, если открываете салон красоты: сделали маникюр маме, сестре и лучшей подруге, все тщательно отсняли – вот вам и небольшое портфолио, осталось только выложить на сайт.

  • Первый экран
  • Это та часть страницы, которую видно в браузере, не прокручивая страницу. То есть открыли сайт – и все, что в окно поместилось – первый экран.
    Когда пользователь открывает из поиска сразу 5-7 сайтов, а затем последовательно просматривает их один за другим, он оценивает именно первые экраны. По результатам этой быстрой оценки 3-4 сайта закрываются сразу, остальные изучаются более тщательно.
    Поэтому первый экран страницы должен «цеплять» – выгодным предложением, интересной картинкой, попаданием в проблему или желание клиента.

  • Формы
  • Самая распространенная форма – обратная связь, «напишите нам». Для интернет-магазинов – форма отправки заказа.
    Для пользователя работа с формами – не самый приятный момент, приходится отвлекаться на клавиатуру (не у всех высокая скорость печати, а кто-то еще и с телефона). Поэтому чем меньше полей в форме, тем лучше. Хотя правильнее сказать – чем меньше обязательных полей, тем лучше. Можно оставить в форме и 5-6 полей, если обязательны к заполнению только 2 поля. Кто не поленится и заполнит все поля – хорошо, у остальных нужную информацию уточнит менеджер.
    Все поля в форме нужно подписать (в 2-3 слова). Можно добавить небольшое пояснение или пример заполнения. Обязательные поля нужно отметить звездочками – это уже давно стало стандартом.

  • Онлайн-консультант
  • Полезная вещь, если выполнены два условия: консультант не навязывается и консультант действительно работает.
    То есть кнопка онлайн-чата должна показываться на сайте только тогда, когда ваш специалист действительно в сети и готов ответить на вопросы клиента. Вся фишка онлайн-консультанта – в его оперативности.
    Стандартное место кнопки онлайн-консультанта – правый край окна или нижний правый угол. Всплывать окно чата должно после просмотра 3-4 страниц сайта и после 20-30 секунд на странице – то есть когда похоже, что человек зашел в тупик с выбором.

  • Виджеты соцсетей
  • Если у вашей компании есть активное представительство в соцсетях, используйте это на сайте.
    Например, покажите отзывы из “ВКонтакте”. Такие отзывы вызывают больше доверия. Но важно, чтобы отзывы были свежими.
    Или пригласите посетителей вступить в вашу группу – возможно, человек не готов к заказу сейчас, но хочет сохранить контакт с компанией. Дополнительно можно завлекать людей в группу скидкой. Либо пытаться зацепить ценностью статей.

  • Увеличение картинок по клику
  • Дайте юзеру рассмотреть побольше картинок в полном размере (фотографии товаров, портфолио и пр.) – и вот он уже «завис» на вашем сайте, а кастрюля начинает исправно поджаривать суп.

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

  • Кнопка «Наверх»
  • Актуальна для длинных страниц. Стандартное место – справа внизу, но может быть и слева (ВКонтакте, Хабр). Изначально кнопка невидима, но появляется, если человек уже прокрутил 1-2 экранов вниз. Многие по старинке пользуются кнопкой «Home» на клавиатуре, но статистика показывает, что кнопка «Наверх» тоже имеет своих приверженцев.

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

  • “Прилипающий” сайдбар (боковая панель)
  • Актуален в большей степени для интернет-магазинов и блогов. По мере прокрутки сайдбар «прилипает» к верхней границе окна и остается там все время на виду. Так посетителю удобнее ориентироваться по каталогу товаров в интернет-магазине, а в случае блога рекламные блоки всегда остаются на виду, тем самым повышая доходность блога.

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