Ирина Никулина – Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов (страница 27)

– Бонусом сделайте заказчику визитку с его логотипом.

Утвержденный логотип в векторной программе сохраните в формате ping и поставьте на дизайн сайта.

Глава 13. Веб дизайн первой страницы сайта

В этой главе:

1. Особенности дизайна первой страницы

2. Правила создания первой страницы

3. Технические характеристики файла

4. Основные модули первой страницы

1. Особенности дизайна первой страницы

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

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

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

Рис.92. Плохой и хороший дизайн первой страницы

Задачи первой страницы сайта:

– Создать хорошее первое впечатление от компании.

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

– Обеспечить навигацию по сайту.

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

– Обеспечить удобную обратную связь.

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

2. Правила создания первой страницы сайта

1. Чёткий ответ на вопрос, что это за сайт

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

Если речь идет об известном бренде, например о Сбербанке, – то описание компании и её деятельности можно избежать или дать в очень сжатом виде. Но если компания не широко известна, – обязательно нужно пояснить, кто представлен на сайте и что он предлагает.

Посетитель сайта должен получить подтверждение, что он нашел именно то, что искал.

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

2. Текст на первой странице должен четко отвечать на вопросы целевой аудитории

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

Длинный текст на всех страницах (и особенно на Главной) должен быть структурирован: разбит на абзацы и подзаголовки, снабжён иллюстрациями, размечен нумерованными или маркированными списками.

Рис.93. Текст разбит на подзаголовки

3. Убеждающий заголовок

Первая страница сайта обязательно должна содержать убеждающий заголовок (оффер) с УТП (уникальным торговым предложением).

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

4. Призывы к действию

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

5. Дизайн в тренде

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

6. Простые шрифты

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

7. Хорошие картинки

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

8. Использование эффектов

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

9. Обратная связь

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

10. Дополнительные сервисы

Первая страница может содержать дополнительные сервисы, например онлайн- консультанта, счетчик посетителей (ЯндексМетрика), калькулятор расчетов, мини-квиз, формы обратной связи и т.д.

3. Технические характеристики файла

Файл первой страницы сайта должен быть создан послойно в программе Adobe Photoshop.

Размер файла дизайна сайта – по ширине 1920 пикселей, по высоте от 1080 и больше, в зависимости от количества модулей на первой странице.

Разрешение файла – 72 dpi. Не делайте файл с разрешением 300 пикселей на дюйм. Для фиксированного контента оставляйте поля справа и слева 200-300 пикселей каждое поле.

Форматы файлов:

Формат исходного файла – PSD, слои не склеиваются.

Формат файла для утверждения клиента – JPG.

Модель цвета: только RGB.

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

Отдельно сохраняется и передается программисту логотип сайта в хорошем качестве в формате PDF или PING (с сохранением прозрачности).

При передаче файлов верстальщику или программисту сайта (часто этот специалист в одном лице), к файлу дизайна сайта прикладываются дополнительные материалы:

– Техническое задание.

– Текстовые и фото-материалы, переданные клиентом в оригинальном разрешении.

– Логотип фирмы в формате PDF или PING (или в векторном виде).

– Дизайн первой и остальных типичных страниц в формате PSD.

– Ссылки на соцсети клиента и другие ресурсы.

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

– Прочие, необходимые для работы материалы, например: коммерческое предложение в формате PDF, код счётчика посетителей ЯндексМетрики, вход в кабинет ЯндексКассы, где клиент зарегистрирован в качестве интернет-магазина, адрес или код интерактивной карты для сайта и т.д.