Конкурсное задание Web-дизайн

Модуль А
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
САМАРА – современный динамично развивающийся город. В городе высокими
темпами строится новое жилье. Строительная компания ВЕРТИКАЛЬ строит
жилье для людей с разным достатком по европейскому стандарту. Компания
обеспечивает качественные работы на любом этапе от проекта до сдачи готового
объекта под ключ. Компания будет предоставлять возможность:
 Приобрести жилую недвижимость
 Приобрести коммерческую недвижимость
 Взять ипотеку
 Посмотреть проектные декларации
ОПИСАНИЕ МОДУЛЯ
Ваше задание заключается в разработке дизайна web – сайта и логотипа сайта.
Вам предоставили контент, состоящий из текста и изображений для создания
сайта. Вам не требуется использовать все изображения и текст. Ваш дизайн
должен определять количество контента на странице, поддерживать цели сайта, а
именно, выбирать цвета, шрифты, графические элементы организации.
Дизайн вашего сайта должен использовать принцип единообразия в структуре
страницы: единый размер элементов, одинаковую высоту навигационных кнопок,
оформление заголовков, подзаголовков и основного текста, оформления ссылок и
изображений для всех страниц сайта.
Модуль А включает в себя создание двух страниц веб-сайта и логотипа для сайта
ВЕРТИКАЛЬ.
Логотип должен включать в себя текст “ВЕРТИКАЛЬ” и хотя бы один
дополнительный графический элемент.
Главная страница должна включать следующие элементы:
o Логотип сайта ВЕРТИКАЛЬ.
o Ссылку на страницу с регистрацией на сайте.
o Возможность для входа в систему (поля для ввода имени пользователя и
пароля, кнопка).
o Навигация по порталу должна включать:
 Главная
 Жилая недвижимость
 Коммерческая недвижимость
 Ипотека
 О компании
 Контакты
o В структуре главной страницы должна быть отражена мобильная информация:
 о новостях сайта
 Логотип сайта ВЕРИТКАЛЬ.
 Страница должна содержать информацию о не менее трех
строительных объектах, содержащих два изображения: было, стало.
 Дата публикации
 Информация внутри блока должна быть представлена с иерархически
(заголовок, подзаголовок)
 Опции, позволяющие поделиться информацией в социальных сетях,
таких как Facebook, Twitter and Google+.
 Используйте предоставленные изображения(content/icon).
Часть главной страницы «регистрация на сайте» должна включать в себя следующие
элементы:
o Логотип сайта ВЕРТИКАЛЬ.
o Следующие поля для ввода:
 Электронный адрес
 Пароль и подтверждение пароля
 Указание имени и фамилии
 Кнопка - Зарегистрироваться
В структуре страницы Контакты должна быть отражена следующая информация:
 Адрес, телефон, факс, e-mail
 Схема проезда
o Каждый блок должен включать в себя:
 Изображение
 Кнопку перехода
 Заголовок
 Описание
ИНСТРУКЦИИ ДЛЯ УЧАСТНИКА
o Сохраняйте свои работы в специальных папках на сервере, так чтобы
«индексные» файлы были в «корне» (day1_xx\index.html), а все исходные
файлы в отдельной папке (day1_part1_xx\source_files_xx\):
 day1_xx
где «хх» - номер рабочего места. Только файлы, которые расположены на
сервере будут учитываться экспертами.
o Ваша работа должна состоять из трех файлов. (PNG, JPG)
 Один отдельный файл, содержащий дизайн главной страницы
ВЕРТИКАЛЬ.
 Один отдельный файл, содержащий дизайн страницы регистрации в
проекте.
 Один отдельный файл О компании, содержащий дизайн страницы с
результатами работы портала.
o Файл с Вашей главной страницей должен называться “Vertikal_index”
пример: Vertical_index.png
o Файл с Вашей страницей “О компании» должен называться
“Company_portal_results” пример: Company_ portal_results. jpg
o Сохраните исходные файлы изображений в папке "Vertical_source_files" внутри
папки "Vertical_Module_A". Исходные файлы – это файлы, содержащие слои. (PSD,
XCF, ID).
МОДУЛЬ B
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
День Святого Валентина очень нежный и красивый праздник. В воздухе витает
любовь, согревая в самый холодный февральский день. У этого праздника
большая история, его отмечают во многих странах мира.
ОПИСАНИЕ ПРОЕКТА И МОДУЛЯ
Ваше задание заключается в разработке дизайна web – сайта для фирмы,
занимающейся проведением праздников.
Дизайн должен быть выполнен в стиле «Целевая страница» («landing page»).
Целевая страница (англ. landing page, также «посадочная страница») — вебстраница, построенная определенным образом, основной задачей которой
является сбор контактных данных целевой аудитории. Используется для усиления
эффективности рекламы, увеличения аудитории. Целевая страница обычно
содержит информацию о товаре или услуге.
Вам предоставили контент, состоящий из текста, изображений и вспомогательной
графики для создания сайта. Вам не требуется использовать все изображения и
текст. Ваш дизайн должен определять количество контента на странице.
Дизайн вашего сайта должен использовать принцип единообразия в структуре
страницы: единый размер элементов, одинаковую высоту навигационных кнопок,
оформление заголовков, подзаголовков и основного текста, оформления ссылок и
изображений для всех страниц сайта.
ИНСТРУКЦИИ ДЛЯ УЧАСТНИКА
 Сохраняйте свои работы в специальных папках на сервере, так чтобы
«индексные» файлы были в «корне» (day1_xx\index.html), а все исходные
файлы в отдельной папке (day1_part2_xx\source_files_xx\):

day1_xx
где «хх» - номер рабочего места. Только файлы, которые расположены на сервере
будут учитываться экспертами.
 Ваша работа должна состоять из одного файла (PNG, JPG) основной
страницы промо-сайта.
МОДУЛЬ C
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
Дизайнер создал концепцию веб-страницы для вымышленного онлайн-магазина
музыкальных дисков. Дизайн автоматически адаптируется под ширину
демонстрационного окна в зависимости от устройства пользователя и размеров
браузера. В этом задании от Вас требуется сверстать страницу в HTML5/CSS3 из
предоставленных изображений.
ОПИСАНИЕ ПРОЕКТА И МОДУЛЯ
Вы найдёте скриншоты под именами 1280.png, 720.png и 480.png, которые
показывают, как дизайн выглядит при ширине экрана 1280, 720 и 480. Контрольная
точка разиличий между узким и широким экраном составляет 800.
Дизайнер также предоставил 1280-grid.png, чтобы показать, как разметка
смотрится в системе 12-columns grid.
Обратите внимание на дополнительные изображения, которые показывают, как
должны выглядеть некоторые блоки при наведении, фокусе и т.д.
Все изменения должны происходить плавно, без «дерганий».
ИНСТРУКЦИИ ДЛЯ УЧАСТНИКА
o Сохраняйте свои работы в специальных папках на сервере, так чтобы
«индексные» файлы были в «корне» (day2_xx\index.html), а все исходные
файлы в отдельной папке (day2_part1_xx\source_files_xx\):
 day1_xx
где «хх» - номер рабочего места. Только файлы, которые расположены на
сервере будут учитываться экспертами.
o Ваша работа должна состоять из html-фала index.html