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

действию

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

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, код счётчика посетителей ЯндексМетрики, вход в кабинет ЯндексКассы, где клиент зарегистрирован в качестве интернет-магазина, адрес или код интерактивной карты для сайта и т.д.

Если получился большой объём документов, то можно расположить их на ЯндексДиске или другом облачном сервере, предварительно распределив материалы по папкам, например: тексты в отдельной папке, картинки в отдельной папке и т.д.

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

Краткое содержание Главной страницы:

1. Основная информация в хедере. Чем занимается компания, что предлагает, как воспользоваться услугами, как купить товары и т.д.;

2. Уникальное торговое предложение (УТП). Предложение, от которого сложно отказаться.

3. Удобная навигация по сайту и оформление. Отсутствие неуместных баннеров, адаптация под мобильные устройства, быстрая и плавная загрузка страницы без сбоев;

4. Основной призыв к действию. Например, надпись возле формы обратной связи: «попробуйте прямо сейчас» или «закажите со скидкой первую покупку»;

5. Основные модули, необходимые по теме сайта.

Основные обязательные элементы (модули) первой страницы:

– Хедер («шапка» сайта) содержит (см. рис. 95):

логотип компании,

краткое обозначение деятельности,

контакты,

слайдер или главный баннер,

УТП,

краткие преимущества,

форму заказа,

кнопку с призывом к действию.

Рис.94. Дизайн первой страницы сайта

– Преимущества компании.

Это, как правило, иконки, выполненные в фирменном цвете компании с поясняющим кратким текстом. См. рис. 95.

Рис.95. Хедер и преимущества

– Текстовые блоки: «О компании», «Для кого курсы», «Кто преподает», «Доставка и оплата» и т.д. Обычно они делятся на абзацы и оформляются картинками.

Рис. 96. Текстовой блок «О компании. История проекта»

– Каталог товаров или услуг.

Значительной ошибкой является не давать на первой странице сайта каталог товаров или модуль «Услуги». Посетитель пришел на сайт, чтобы выбрать услуги или купить товары, а не читать долгий текст об истории компании.

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

Рис.97. Каталог товаров на первой странице

– Отзывы, гарантии и прочие социальные доказательства.

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

Рис.98. Отзывы клиентов на сайте

– Контактные данные, форма лидогенерации, призывы

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

Форму обратной связи лучше подкрепить завлекающим предложением, например: «Закажите товар сегодня и получите промокод на вторую покупку!».