Дизайн также играет немаловажную роль в привлечении внимания пользователей к определенной странице веб-сайта. При разработке дизайна прежде всего нужно учитывать особенности восприятия целевой аудитории. При этом оформление должно соответствовать содержанию веб-страницы. И необходимо отметить, что все страницы одного сайта должны быть оформлены в едином стиле. Это создаст положительное представление о фирме и ее товарах.
Дизайн веб-сайта предполагает решение следующих задач:
– Эстетическая — красивый и запоминающийся дизайн способствует привлечению посетителей и удержанию их на сайте.
– Функциональная — интуитивно понятный дизайн облегчает работу с сайтом и также способствует удержанию посетителей.
– Информационная — в дизайне необходимо подчеркивать тематику сайта. Грамотный дизайн облегчает восприятие информации. С помощью визуальных приёмов можно акцентировать внимание посетителей на определенной информации, выделять отдельные разделы [9, с. 8].
Дизайн сайта неразрывно связан с его наполнением, поэтому нельзя допускать, чтобы внешнее оформление сайта мешало восприятию информации.
Особое внимание следует уделить дизайну главной страницы. На ней желательно отражать наиболее важную информацию: логотип, описание и характеристика компании и оказываемых ей услуг по промышленному альпинизму. Задача главной страницы - помочь максимально быстро перейти в раздел с интересующей его информацией. Обычно главная страница более насыщена графикой, имеет более яркое и выразительное оформление [9, с. 10].
Логотип, основные разделы веб-сайта желательно размещать наверху страниц, чтобы они были хорошо заметны. Навигационное меню и логотип на всех страницах должны иметь одни и те же форму, цвет, размеры и месторасположение. Изменение их местоположения и масштабирование значительно ухудшают восприятие целостности сайта и заставляют пользователя тратить дополнительное время на поиск нужной ссылки.
Единая цветовая гамма страниц сайта способствует быстрому и полному восприятию содержания. При выборе шрифта следует помнить, что очень крупный размер для текстовых надписей чаще всего производит грубое впечатление, а шрифт обычного размера при умелой подаче кажется насыщенным информацией и располагает к вдумчивому прочтению. Также нужно стараться использовать только стандартные шрифты, которые установлены у большинства пользователей.
Все эти принципы создания дизайна сайта не являются строгими, но стоит их придерживаться при проектировании дизайна сайта.
Для разработки дизайна и стиля страниц веб-сайта компании был создан шаблон. Шаблон — это средство формирования внешнего вида сайта, его функция реализуется в основном за счет HTML и CSS.
Чтобы не отвлекать посетителя от основного информационного содержания сайта, было принято решение о разработке простого и строгого дизайна. Основная цветовая гамма сайта – белый и красные цвета. Общий фон сайта белый, что обеспечит легкое восприятие текста страниц.
Основной диапазон разрешения мониторов, на которых будет просматриваться веб-сайт от 600х800 до 1240х1024 пикселей. Это обеспечит возможность просмотра сайта на большинстве мониторов [9, с. 7].
Для обеспечения удобства навигации по сайту было спроектировано две горизонтальные панели навигации вверху и внизу страниц сайта. Горизонтальная панель меню будет содержать ссылки на все разделы страницы сайта, что позволит посетителям с любой страницы сайта перейти на главную страницу, а также в любой раздел меню.
На основе всего выше сказанного о разработке содержания и дизайна страниц веб-сайта центра по промышленному альпинизму, был создан шаблон главной страницы (рисунок 5).
| Новостной компонент веб-сайта |
| Панель навигации навигации |
| Информационный блок сайта |
| ЗАКАЗ РАБОТ |
| МОЙ ПРОФИЛЬ |
| НАШИ УСЛУГИ |
| ГАЛЕРЕЯ |
| Слайдер веб-сайта |
| Панель навигации навигации |
| О КОМПАНИИ |
| ГЛАВНАЯ |
Рисунок 5 – Шаблон главной страницы веб-сайта
В верхней левой части сайта будет расположен логотип и название компании, являющиеся более заметным по сравнению с остальным дизайном сайта.
Cascading Style Sheets (CSS) - каскадные таблицы стилей предназначены для создания оформления страниц сайта, отделения дизайна от структуры и содержания страницы.
Использование возможностей CSS позволяет создать красивый, профессионально оформленный сайт. При помощи CSS можно изменить дизайн и оформление всего сайта, внеся изменения только в стилевой файл.
Для разрабатываемого сайта был выбран шаблон темы A SiteOrigin Theme, структура которого представлена в Приложении.
На рисунке 6 изображен дизайн главной страницы веб-сайта центра по промышленному альпинизму.
Рисунок 6 – Дизайн главной страницы веб-сайта
Особенности web-сайта
Особенностью данного сайта можно отнести:
- создание административной части по работе с письмами обратной связи с авторизации по логину и паролю менеджеров компании, которые были получены через форму обратной связи, заполненную посетителями сайта;
- создание слайдера сайта, который состоит из динамически меняющихся картинок, имеющих тематику промышленного альпинизма.
- удобный раздел заказа работ, в котором можно выбрать любую услугу и добавить ее в корзину. После оформления заказа ответственный менеджер связывается с клиентом.
- раздел авторизации и регистрации клиентов.
Рассмотрим принцип работы личного кабинета. В разделе сайта «мой профиль» посетитель может ввести уже имеющуюся учетную запись либо создать новую, заполнив форму регистрации, как показано на рисунке 9, в которой нужно указать:
- Email адрес;
- Пароль
После нажатия на кнопку "Регистрация" пользователь автоматически регистрируется в базе данных.
Рисунок 9 – Форма регистрации
Далее клиент попадает автоматическм в свой личный кабинет как показано на рисунке 10.
Рисунок 10 – Форма авторизации на сайте
В случае если пользователь уже зарегестрирован, то сайт выдаст информацию как показано на рисунке 11, «Аккаунт с таким email-адресом уже зарегистрирован. Пожалуйста, авторизуйтесь.».
Рисунок 11 – регистрация имеющейся учетной записи.
В личном кабинете представлены разделы «Последние заказы» если клиент уже пользовался ранее услугами, «Мой адрес» и «Реквизиты для оплаты», в котром можно указать адрес и реквизиты для выставления счета. После формирования заказа менеджер компании может выставить счет на оплату услуг.
Чтобы выйти из личного кабинет достаточно нажать на ссылку "Выйти»