Модуль 1. Графический дизайн.
Разработка дизайна страниц сайта для компании
Вступительная часть
Компания ООО «Товары и услуги», старейшая и известнейшая в своем регионе, решила идти в ногу со временем и наконец-то сделать себе Веб-сайт. Этому немало способствовал приход нового директора по маркетингу фирмы, который разработал структуру двух страниц. Непосредственно верстка и разработка HTML-страниц также будут осуществлена внутренними ресурсами компании.
Задание
Разработать дизайн для сайта компании, используя вводные данные и требования. Дизайн вашего сайта должен эффективно поддерживать цели сайта – вы должны выбирать цвета, шрифты, графические элементы исходя из сферы деятельности организации (например, сине-голубая гамма цветов ассоциируется с корпоративным стилем).
Также, дизайн должен использовать принцип единообразия в структуре страниц:
- единый размер элементов;
- одинаковая высота навигационных кнопок;
- единообразное оформление заголовков, подзаголовков и основного текста;
- единообразное оформление ссылок и изображений для всех страниц сайта.
Дизайн главной страницы и страницы-каталога с набором товаров или услуг должен полностью соответствовать предоставленным прототипами страниц (Mockup).
К дизайну мобильной версии для просмотра на телефонах с touchscreen и разрешением 320х480 специальных требований по расположению элементов на странице не предъявляется, но необходимо учитывать размер экрана и способ навигации по странице.
Вводные данные
Вам предоставляется:
- название и уточненная сфера деятельности компании;
- логотип фирмы;
- краткое описание компании;
- список товаров или услуг, их краткое описание и фотографии;
- структура двух страниц (главной и страницы с товарами или услугами);
- набор случайных изображений и текстов по сфере деятельности компании;
- изображения стандартных социальных сервисов;
- шрифты;
- вспомогательная графика.
Не требуется использовать все изображения и текст. Текст можно писать самостоятельно.
Выходные данные
Три файла формата PSD с дизайн-макетами страниц сайта: главная страница, страница с набором товаров или услуг, мобильная версия главной страницы.
Время выполнения
3 часа
Модуль 1. Графический дизайн. Разработка дизайна страниц сайта для компании
Субкритерии и аспекты оценки
| № | Аспект | Максимальный балл |
| А1 | Соответствие страниц прототипам | |
| А1О1 | Структура и взаимное расположение элементов соответствуют макету главной страницы | |
| А1О2 | Структура и взаимное расположение элементов соответствуют макету страницы с товарами/услугами | |
| А2 | Дизайн основных страниц сайта | |
| А2О1 | Цветовое решение сайта использует все цвета логотипа (базовые цвета без учета оттенков) | 0.5 |
| А2О2 | Все страницы имеют одинаковый графический пользовательский интерфейс | 0.5 |
| А2О3 | Однотипные элементы макета (ссылки, кнопки и т.д.) оформлены одинаково | 0.5 |
| А2С1 | На макетах размещен «осмысленный» контент | 0.25 |
| А2С2 | Дизайн сайта соответствует области деятельности компании | 0.5 |
| А2С3 | Дизайн всех страниц согласован между собой | 0.5 |
| А2С4 | Дизайн привлекателен и гармоничен | |
| А2С5 | Графическое оформление элементов страницы (блоков) подчеркивает их взаимосвязь и улучшает восприятие информации | 0.5 |
| А2С6 | Оптимальное соотношение яркости (контраст) между текстом и фоном | 0.5 |
| А2С7 | Однородность текста и равномерность распределения пустых мест на всем сайте | 0.5 |
| А3 | Дизайн мобильной страницы сайта | |
| А3О1 | На мобильном макете представлены все блоки главной страницы | 0.5 |
| А3О2 | Дизайн согласован с основной версией сайта | 0.5 |
| А3О3 | Размер макета соответствует требованиям задания | 0.5 |
| А3С1 | На макете размещен «осмысленный» контент | 0.25 |
| А3С2 | Дизайн привлекателен и гармоничен | 1.5 |
| А3С3 | Дизайн удобен для использования на мобильном телефоне | 0.5 |
| Итого максимально: |
Модуль 2. Графический дизайн. Разработка дизайна страницы в стиле «Целевая страница»
Вступительная часть
Москва – один из красивейших городов нашей родины. В нем огромное количество памятников архитектуры, зеленых парков, современных зданий, достопримечательностей, памятников и музеев. Не секрет, что в столицу ежегодно приезжает масса туристов, со всех уголков мира. И каждый хочет увидеть в этом городе что-то свое, интересное, запоминающееся.
Задание
Разработать дизайн «Целевой страницы» для компании, предоставляющей услуги персональных и групповых гидов по Москве. особенностью компании является возможность разработки и проведения индивидуальных экскурсий на заданную тему.
Дизайн сайта должен эффективно поддерживать цели сайта – вы должны выбирать цвета, шрифты, графические элементы исходя из тематики.
Дизайн вашего сайта должен использовать принцип единообразия в структуре страницы:
- единый размер элементов;
- одинаковая высота навигационных кнопок;
- единообразное оформление заголовков, подзаголовков и основного текста;
- единообразное оформление ссылок и изображений для всех страниц сайта.
Подробная информация о принципах дизайна страниц в стиле «Целевая страница» размещена в Интернет по адресу http://habrahabr.ru/post/143923/.
Вводные данные
Предоставляется текст, изображения, шрифты и вспомогательная графика для создания страницы. Не требуется использовать все изображения и текст. Дизайн должен определять количество контента на странице.
Выходные данные
Файл landing_page.html, а также набор других необходимых для корректного отображения страницы в браузерах файлов.
Время выполнения
3 часа
Модуль 2. Графический дизайн. разработка дизайна страницы в стиле «Целевая страница».
Субкритерии и аспекты оценки
| № | Аспект | Максимальный балл |
| А4 | Влияние на действие пользователя | |
| А4О1 | Наличие дополнительной информации помогающей пользователю предпринять необходимое действие (текстовые блоки или ссылки с уточняющей информацией) | 0.5 |
| А4О2 | Использование графических элементов, помогающих пользователю предпринять необходимое действие (наличие стрелки, пути перемещения, маркеры, яркие картинки и т.п.) | 0.5 |
| А4О3 | Наличие графических и/или текстовых объектов, позволяющих усилить интерес пользователя предпринять необходимое действие (время акции, скидки, количество оставшихся товаров и т.п.) | 0.5 |
| А4О4 | Наличие на странице элементов доверия (комментарии положительных отзывов, сертификация, счетчики покупок) | 0.5 |
| А4О5 | Использование релевантных слов в заголовках | 0.5 |
| А4С1 | Использование простых и коротких заголовков, привлекающих внимание пользователя (не более 7 слов, включая предлоги) | 0.25 |
| А5 | Структура и элементы страницы | |
| А5О1 | Наличие иконок социальных сетей | 0.25 |
| А5О2 | Наличие на страницы формы комментариев | 0.5 |
| А5О3 | Наличие на странице функциональных кнопок (ссылок) – не более двух | 0.5 |
| А5С1 | Наличие и качество главного элемента на странице, цель которого заключается в том, что пользователю необходимо выполнить одно единственное действие | |
| А5С2 | Каждый элемент страницы подталкивает пользователя совершить необходимое действие (четкая взаимосвязь блоков страницы. Траектория взгляда должна быть хорошо продуманной) | |
| А6 | Дизайн | |
| А6О1 | Контент на странице соответствует теме сайта | 0.5 |
| А6О2 | Не менее четырех визуально разделенных областей | 0.75 |
| А6О3 | Весь текст выделяется (в том числе и на кнопках) | 0.25 |
| А6С1 | Контрастная цветовая гамма (основные элементы выделены яркими цветами) | 0.5 |
| А6С2 | Хорошая компоновка графики и текста | 0.25 |
| А6С3 | Цветовая гамма и дизайн соответствует тематике сайта | |
| А6С4 | Страница не перегружена блоками | 0.5 |
| А6С5 | Однородность текста и равномерное распределение свободного пространства | 0.25 |
| Итого максимально: |