Файл: Визуальная концепция сайта.pdf

Глава 2 . Реализация проекта по созданию сайта

2.1. Этапы проектирования сайта и их характеристика

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

В различных источниках существует множество классификаций, но остановим свой выбор на 7 ступенчатой классификации по созданию сайтов, представленных в обучающих лекциях на платформе Tilda, которая является одним из передовых инструментов по созданию (проектированию) сайтов^[2].

Данная классификация включает в себя:

1. Идея и структура: разработка UX стратегии и поиск креативной концепции

2. Исследование: анализ конкурентов, трендов, исследование стилей

3.Прототип: проработка пользовательских сценариев

4. Контент: поиск и аккумулирование информации

5. Дизайн: проработка деталей, создание визуального образа

6. Реализация: выбор инструментария и контроль

7.Запуск: тестирование и запуск проекта

Рассмотрим более подробно каждый из элементов.

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

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

Например, возьмем проект по разработке лэндинга для школы дизайна.

Цель: объяснить потенциальным потребителям, кто такой дизайнер.

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

Задача: помочь будущим студентам разобраться в специализациях и понять, какая именно им подходит.

Рис.7. Страница сайта школы дизайна^[3]

Обозначить целевую аудиторию. Этом можно сделать при помощи создания так называемого аватара клиента. Аватар клиента можно составить, ответив на ряд вопросов:

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

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

Далее – определитесь с популярностью ниши в областном регионе или стране. Для этого проанализируйте количество запросов потенциальных клиентов в поисковых системах. Чем больше запросов, тем актуальнее предложение и возможность получить большую прибыль, но и тем выше конкуренция и сложность раскрутки сайта в Интернете. Можно использовать разные сервисы. Одним из наиболее простых является google trends. Ниже на графике мы видим график популярности по запросу «современная школа дизайна»

Рис.8. График запросов в поисковике Google^[4]

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

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

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

Последний организационный момент – поиск поставщика. От этого зависит качество ваших продаж, наличие полного ассортимента товаров и цены. Найти поставщика можно 4 способами:

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

От ответственности и репутации поставщика частично зависит ваш бизнес, поэтому отнеситесь к выбору серьезно: оцените его ценообразование, условия оплаты, сроки поставки и только после займитесь проектированием бизнеса.

Выбор имени компании и домена сайта

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

Уделите внимание выбору доменной зоны. Она влияет на регион продвижения сайта. Не скупитесь и арендуйте домен из основных зон (ru, net, com, org, ua и т.д.), так как они лучше ранжируются поисковиками. После того, как вы выбрали и определились с доменным именем и зоной, обязательно проверьте его на занятость на сайтах, так как большая часть красивых имен уже занята. Если доменное имя уже занято, придется потрудиться и придумать новое, уникальное и запоминающееся.

Необходимо также проверить историю сайта и посмотреть количество ссылочной массы, что можно сделать на сайте www.ahrefs.com или через веб-архив. Также перед арендой доменного имени нужно проверить не попал ли он под фильтр. Это очень важно, так как можно потратить деньги и время на заполнение сайта, а в результате попасть под фильтр поисковика.

Сбор семантического ядра для сайта

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

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

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

Проработка концепции и структуры сайта

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

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

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

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

Дизайн сайта

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

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

1. Подбирайте нейтральный фон и правильно сочетайте цвета.

Цвета имеют сильный психологический фактор, поэтому подбирайте оформление в 90% нейтральных цветов и 10% ярких и броских. Красный и другие "ядовитые" цвета могут служить акцентом на какое-либо предложение, не берите их за основу, так как им свойственно вызывать неоднозначные, чаще негативные, эмоции у человека. Фон должен быть нейтральным и не слишком привлекать к себе внимание. Используйте правильное сочетание цветов для сайта. Это может быть градация оттенков, принадлежащих к одной группе, или цвета, которые хорошо сочетаются друг с другом. Поверьте, сочетание красного и зеленого цвета в фоне оттолкнут ваших клиентов и оставят неприятный осадок после посещения сайта.

Рис.9. Сочетания цветов

2. Выбирайте шрифты оптимального цвета и размера.

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

3. Основывайтесь на факторах UX.

UX (user experience) – термин, который характеризует уровень удовлетворенности посетителя от посещения сайта. Если человеку удобно, и интересно пользоваться и находиться на сайте, то он вернется, если нет, пользователь не вернется и вы потеряете клиента. После того, как дизайн закончен, необходимо самостоятельно проверить, нравится ли визуально он вам или нет.

4. Соответствие выбранному фирменному стилю.

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

Верстка сайта

Верстка – это создание макета в графических редакторах и преобразование в HTML и CSS-код для просматривания сайта в браузерах. Без верстки сайт останется "картинкой" - нефункциональной и бессмысленной. Ключевой проблемой неправильной верстки может стать некачественное или неудобное отображение сайтов в разных браузерах. Сверстав сайт для Opera, он может по-другому отображаться в Firefox и полностью исказиться в Internet Explorer. Каждый браузер разрабатывается с учетом собственных технологий и правил, поэтому очень важно сверстать сайт кроссбраузерным, чтобы он правильно отображался в любом браузере.

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

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

Наполнение сайта контентом

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