Дизайн простой страницы + нескольких окошек
Задача/ТЗ
1. Создать страницу по мотивам
http://fuckfindr.com/ в цветовой гамме этого сайта http://goo.gl/qsk2Rb
Материалы: логотип, фото женщины и бекграунды можно скачать здесь
https://www.dropbox.com/sh/w61dz4afkw2hfj5/AADKwGv8WLbY7vVXC-fufHAta?dl=0
Страница делится логически на 3 части –
1) шапка
2) sidebar (вертикальная полоса справа, раза в полтора уже, чем на сайте-примере)
3) карта
в шапке находится логотип сайта (см дропбокс), ссылки home & how does it work
в sidebar – то же, что на сайте- примере + предусмотрите там кнопку, на всякий случай.
карта представляет собой div, куда будет подгружаться информация с google maps.
Поверх всей страницы расположено окошко/div с текстом и кнопками. В этом окошке пользователь выполняет действия и по окончанию этих действий получает доступ к карте с маркерами (каждым маркер – кликабельное фото девушки).
Рассмотрим окошко/div детальней:
Здесь указаны основные элементы
Задача – сделать нечто похожее, только в цветовой гамме нужного нам сайта.
В «последовательности» нужно подобрать 3 картинки, что бы описать следующее:
«выбрать девушку на карте» - «пообщаться с ней/початиться» - «третья картинка – было бы не плохо найти изображение пары, заходящей домой. Или пары, заходящей в спальню»
После нажатия на кнопку пользователь получит еще несколько подобных окон. Мы их сделаем на базе 1ого окна. В предпоследнем окне будет отображаться процесс (бегущий индикатор) поиска девушки, выглядеть это должно примерно вот так
нужно опять-таки подобное окошко нарисовать в заданном стиле.
В этом окошке, помимо «прогресса», будут отображаться результаты поиска – вот в таком формате примерно
и опять-таки, снизу кнопка.
Нужно будет еще вот такое окошко http://d.pr/i/13x6A нарисовать. Впрочем, оно мало отличается от предыдущих.
Далее, необходимо нарисовать div, который будет отображаться при щелчке на фото девушки на карте. Выглядеть это должно примерно вот так:
Так же нужно нарисовать вот такую вот полоску:
http://d.pr/i/1c7XF (обведена голубым прямоугольником). На последнем этапе она будет выдаваться во фрейме, а под ней будет показываться сам сайт, где пользователь должен зарегистрироваться. Высота полосы – такая же, как у шапки на главной странице.
Важная деталь – все надписи на сайте должны быть текстовыми, т.к. сайт будет переводиться на другой язык. Конечно же, кроме логотипа и подобной графики.
На каждом окошке и в sidebar-e нужно предусмотреть какой-то текст. Желательно 2х разных стилей. Мы до конца еще не знаем, какие тексы и где будут располагаться. Так что чем больше предусмотрите, тем лучше.
Так же желательно, что бы все окошки были одинаковыми по размерам.
Результат нужен в PSD.