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

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

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.