Разработка дизайна web-сайта на основе чернового макета

На основе ранее созданного чернового макета разрабатывается готовый дизайн web-сайта. Для этого использовался мультифункциональный графический редактор, произведённый и распространяемый Adobe Systems Incorporated — Adobe Photoshop CC 2017. Готовый макет разрабатывался под «FULL HD» мониторы с разрешением 1920x1080 пикселей и соотношением сторон 16:9, но с минимальным значением ширины сайта в 1020 пикселей, что позволит web-сайту выглядеть хорошо на большинстве современных устройств и мониторах. Далее на рисунках ниже показаны все элементы web-дизайна, а также цветовая палитра и сочетание используемых шрифтов на сайте. [12]

 

Рисунок 2.1. Цветовая палитра сайта

 

Рисунок 2.2. Подвал сайта

 

Рисунок 2.3. Шапка сайта и навигационное меню

 

 

 

 

Рисунок 2.4 Сочетание шрифтов на сайте (Bebas Neue Bold + Source Sans Pro)

 

 

 

Рисунок 2.5. Кнопка в обычном и активном состоянии

 

Далее на рисунке 7 показан готовый макет главной страницы web-сайта в Adobe Photoshop CC 2017.

Структура данного макета имеет следующий вид:

1. Header (Шапка сайта)

2. Блок 1 – Блок 7 (Основной контент сайта)

3. Footer (Подвал сайта)

Макет web-сайта сохранен в формате «PSD» для дальнейшей работы с ним. PSD — это растровый формат сохранения и эксплуатации графических данных, который использует сжатие без потери в качестве, созданный специально для Adobe Photoshop. [13]

 

 

Рисунок 2.6. Разработанный макет web-сайта в Adobe Photoshop CC 2017 в формате PSD

 

Ниже предоставлены изображения всех страниц разработанного web-сайта для данного предприятия. Сайт имеет 4 страницы:

1) Главная или домашняя страница;

2) О компании;

3) Контакты;

4) Информация.

На сайте имеется форма обратной связи, она располагается на страницах: «Главная» и «Контакты». После заполнения формы клиентом, его личные данные будут отправляться на электронную почту данного предприятия [email protected].

 

 

 

 

Рисунок 2.7. Макет web-сайта, блок 1, 2

 

 

 

Рисунок 2.8. Макет web-сайта, блок 3, 4

 

 

 

Рисунок 2.9. Макет web-сайта, блок 5, 6

 

 

 

Рисунок 2.10. Макет web-сайта, блок 6, 7

 

2.3 Разработка мобильной и планшетной версии web-сайта

Приблизительно 20% трафика в Российском сегменте интернета приходится на различные мобильные операционные системы. И данный коэффициент не прекращает расти вверх. Исходя из этого было принято решение разрабатывать мобильную и планшетную версию web-сайта. [2]

Причины разработки мобильной версии сайта:

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

2. В мобильной версии сайта можно сделать вспомогательный возможности, нацеленные непосредственно на данную целевую аудиторию: осуществить отправку смс прямо с web-сайта, установить местоположение и расстояние до наиближайшего места продаж и т.п.

3. Навигация на таких сайтах разрабатывается адаптированной под «Touch screen», что также значительнее удобнее.

4. Мобильная версия web-сайта менее тяжёлая, имеет менее объемный код, по этой причине загружается быстрее, что позволяет уменьшить сократить расходы пользователя при оплате мобильного трафика.

5. Поисковые системы применяют мобильный поиск для телефонов, по этой причине и ранжироваться мобильная версия web-сайта в нем будет выше, а, следовательно, и переходов на ваш web-сайт станет больше. [12]

Виды мобильной версии сайта:

1. Мобильная версия сайта может быть идентична основному сайту: полностью повторять структуру, разделы и дизайн.

2. Независимая мобильная версия сайта. Полностью изменяется структура и функции, заимствуется только стилевое оформление, отчасти элементы и содержание, чтобы пользователь понимал, что он использует один и тот же сайт. [5]

В случае разработки данного web-сайта был сделан выбор в пользу мобильной версии полностью идентичной основному сайту. С идентичной структурой и дизайном.

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

 

 

Рисунок 2.11. Мобильная версия сайта на экране смартфона

 

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

Навигационное меню в мобильной версии видоизменяется на кнопку «гамбургер» при нажатии на которую появляются пункты меню. Это показано на следующем рисунке.

 

 

 

Рисунок 2.12. Мобильное меню в активном состоянии

 

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

Макеты мобильной и планшетной версии сайта также были созданы в Adobe Photoshop 2017. На этом этап с разработкой внешнего вида сайта завершается. В следующей главе будет описан процесс создания готовой версии сайта, а также показано использованное для этих целей программное обеспечение.