ТЗ
Создать страницу по мотивам
в цветовой гамме этого сайта
Материалы: логотип, фото женщины и бекграунды можно скачать здесь
Страница делится логически на 3 части –
1) шапка
2) sidebar (вертикальная полоса справа, раза в полтора уже, чем на сайте-примере)
3) карта
в шапке находится логотип сайта (см дропбокс), ссылки home & how does it work
карта представляет собой div, куда будет подгружаться информация с google maps.
контент сайдбара находится там же, где и все тексты – в прикрепленном файле.
Поверх всей страницы расположено окошко/div с текстом и кнопками. В этом окошке пользователь выполняет действия и по окончанию этих действий получает доступ к карте с маркерами (каждым маркер – кликабельное фото девушки).
Рассмотрим окошко/div[window #1] детальней:
Здесь указаны основные элементы
Задача – сделать нечто похожее, только в цветовой гамме нужного нам сайта.
В «последовательности» (она расположена в низу первого div-a) нужно подобрать 3 картинки, что бы описать следующее:
«выбрать девушку на карте» – «пообщаться с ней/початиться» – «третья картинка – было бы не плохо найти изображение пары, заходящей домой. Или пары, заходящей в спальню»
После нажатия на кнопку, пользователь увидит окно текстом и с вопросами[window #2]:
[window title] Meet local, willing mature women looking for sex
Registration open for men is open until Dec 11, 2014. All you need to do to qualify is answer three simple questions:
Question #1:
Are you 21 or older?
[кнопки]Yes – No
Question #2:
Have you ever had a sexually transmitted disease (STD)?
[кнопки]Yes – No
Question #3:
Will you use a condom when having sex with a woman from our website?
[кнопки]Yes – No
и альтернативный вопрос
Which of these traits are important for you when evaluating woman's sexuality? [sounds uuuuugly, please rewrite this]
И список из чекбоксов с надписями
High heels [checkbox] Waist and hips – Long Legs – Eyes – Hair – Figure – Intelligence – Unmaterialistic – Large breast
Внизу кнопка
Get laid now!
В самом низу тест
To find hot mature women from your area we have to know what you are looking for. Answer the questions above and we will show you singles near you on our interactive map.
вопросы будут появляться по очереди, но на этапе проектирования предположим, что они друг под другом будут располагаться.
В последнем[window #3]
окне будет отображаться процесс (бегущий индикатор) поиска девушки, выглядеть это должно примерно вот так
В этом окошке, помимо «прогресса», будут отображаться результаты поиска – вот в таком формате примерно
и опять-таки, снизу кнопка.
[текстовые кнопки с какой-то галочкой или стрелочкой или символами М-Ж] Woman Man
Нужно будет еще вот такое окошко редиректа[window #5 redirect warning]
нарисовать. Впрочем, оно мало отличается от предыдущих.
Далее, необходимо нарисовать div[window #4 – brief information about the woman], который будет отображаться при щелчке на фото девушки на карте. Выглядеть это должно примерно вот так:
текст для этого div-a
Kate (28)
distance: 4.5km
last active: 11 hours ago [или надпись «онлайн» с зеленой иконкой]
More pictures of Kate:
Please sign up to view all pictures.
Kate is active on the following sites:
[website.com logo] [website2.com logo]
[кнопка]View full profile
Так же нужно нарисовать вот такую вот полоску[window #6]:
(обведена голубым прямоугольником). На последнем этапе она будет выдаваться во фрейме, а под ней будет показываться сам сайт, где пользователь должен зарегистрироваться. Высота полосы – такая же, как у шапки на главной странице.
Текст для «полоски»
[photo] Name (26) /last active 4 hours ago/
-> Sign In -> View her/his profile & chat with her
Важная деталь – все надписи на сайте должны быть текстовыми, т.к. сайт будет переводиться на другой язык. Конечно же, кроме логотипа и подобной графики.
На каждом окошке и в sidebar-e нужно предусмотреть какой-то текст. Желательно 2х разных стилей. Мы до конца еще не знаем, какие тексы и где будут располагаться. Так что чем больше предусмотрите, тем лучше. Этот абзац не очень актуален, т.к. тексты я уже скинул.
Так же желательно, что бы все окошки были одинаковыми по размерам, а кнопки имели одинаковых стиль и были заметными. Кнопки можно сопровождать каким-то «галочками» перед или после текста. Или же стрелочками. Это повышает их кликабельность. Фотографии девушек нужно свести к 2м размерам. Что бы не получилось так, что нужно будет делать по 3+ копии, для каждой фотографии, просто разных размеров.
Результат нужен в PSD.
Все тексты для всех окон можно найти тут