Разработка сайта Valentime

1.

Разработка сайта
VALENTIME

2.

Описание главной страницы.
Основные разделы сайта:
-
главная
-
портфолио
-
свадебные мелочи
-
цены
-
акции
-
отзывы
-
контакты
Сайт с вертикальной прокруткой. Основной акцент в дизайне на
фотографии. Прокрутка осуществляется поэкранно двумя способами:
колёсиком мыши и нажатием на иконку “стрелка вниз” в нижней
части экрана.
На главной 4 вводных экрана:

3.

Описание навигации главной страницы.
1)
логотип на первом экране крупной.
2)
главное меню сайта.
3)
ссылки на соц сети.
4)
телефон для связи и кнопка “Обратный звонок”.
5)
иконка “стрелка вниз” поясняющая о прокрутке сайта.
6)
скрол указывающий на количество экранов и нахождении
пользователя в данный момент.
7)
При переходе на следующий слайд меню сокращается и
информация скрывается под кнопкой “меню”. Пример
действия: http://leningradbarber.ru
8)
Ссылка на портфолио фотографа.
9)
рандомно выбранные альбомы из портфолио фотографа.
10)
как меняется внешне привью альбома при наведении.

4.

Описание портфолио фотографа.
Раздел с портфолио состоит из двух частей: приветственный текст
(ознакомительный) и портфолио.
Описание:
1)
фото на фоне.
2)
путь
3)
заголовок
4)
текстовый блок
5)
ссылка на портфолио. При нажатии на ней раздел
прокручивается вниз к портфолио. Механически работа как у
иконки “стрелка вниз”.
6)
Галерея с альбомами. Альбомов со временем может быть
очень много, и для того, чтобы они все поместились
подключаем горизонтальную прокрутку. На данный момент
указано максимальное количество альбомов в экране. Если же
альбомов будет меньше, можно пропорционально увеличить
привью, тем самым уменьшить количество строк (сейчас
альбомы в 3 строки).

5.

Описание портфолио фотографа.
Вариант при маленьком количестве альбомов.

6.

Описание портфолио фотографа.
7) после нажатия на один из альбомов, открывается фото ->.
8) под фото есть привью остальных фотографий из выбранного
альбома.
9) выбранная фотография.
10) название альбома и количество фотографий в нём.
11) возврат к полному списку альбомов.

7.

Описание портфолио стилиста.
Раздел с портфолио состоит из двух частей: приветственный текст
(ознакомительный) и портфолио.
Описание:
1)
фото на фоне.
2)
путь
3)
заголовок
4)
текстовый блок
5)
ссылка на портфолио. При нажатии на ней раздел
прокручивается вниз к портфолио. Механически работа как у
иконки “стрелка вниз”.
6)
Галерея с фотографиями до и после.
7)
название альбома.
8)
В том случае, если альбомов будет несколько, то должна быть
возможность разделения по альбомам, как в разделе

8.

Описание портфолио стилиста 2.
Раздел с портфолио состоит из двух частей: приветственный текст
(ознакомительный) и портфолио.
Описание:
1)
фото на фоне.
2)
путь
3)
заголовок
4)
текстовый блок
5)
ссылка на портфолио. При нажатии на ней раздел
прокручивается вниз к портфолио. Механически работа как у
иконки “стрелка вниз”.
6)
Галерея с фотографиями до и после.
7)
название альбома.
8)
В том случае, если альбомов будет несколько, то должна быть
возможность разделения по альбомам, как в разделе

9.

Описание портфолио видеооператора.
Раздел с портфолио состоит из двух частей: приветственный текст
(ознакомительный) и портфолио.
Описание:
1)
фото на фоне.
2)
путь
3)
заголовок
4)
текстовый блок
5)
ссылка на портфолио. При нажатии на ней раздел
прокручивается вниз к портфолио. Механически работа как у
иконки “стрелка вниз”.
6)
Два альбома.
В остальном просмотр повторяется как и в других портфолио.

10.

Описание раздела цены.
Цены разделены на блоки:
-
фотосессии
-
-
Свадебная фотосессия
-
-
несколько кейсов.
несколько кейсов.
Причёски и макияж
-
несколько кейсов.

11.

Описание раздела акции.
Акции представлены в виде блоков. Самая последняя акция больше
чем остальные.
В нижней части экрана кнопка с подгрузкой других акций.
Фото на фон к каждой акции клиент может выбрать сам и загрузить в
административной части.

12.

Описание раздела отзывы.
При нажатии на ссылку “Отзывы” в главном меню, пользователь
переходит на одну из тем обсуждения в группе в VK.

13.

Описание раздела контакты.
В разделе “Контакты” представлены все контактные данные
+ форма обратной связи.