Общие данные
Задание рассчитано на два полных дня по два временных блока с перерывом на обед. Каждый временной блок рассчитан на выполнение одного модуля. Т.о. задание состоит из четырех модулей и охватывает следующие технологии:
● модуль 1 - графический дизайн (17 баллов) - 1 день;
● модуль 2 - верстка страниц (19 баллов) - 1 день;
● модуль 3 - программирование на стороне сервера PHP (21 баллов) - 2 день;
● модуль 4 - программирование на стороне клиента JS (18 баллов) - 2 день;
Порядок выполнения модулей очень важен для модулей 3 и 4. Остальные модули между собой не связаны.
Оценка задания должна осуществляться по следующим критериям:
| День | № | Критерий | Объект | Субъект | Сумма |
| А | Графический дизайн страниц | ||||
| B | Верстка страниц | ||||
| С | Программирование на стороне сервера | ||||
| D | Программирование на стороне клиента | ||||
| итого |
Модуль 1. Графический дизайн
Веб-разработка
Время выполнения: 4 часа
Инструкция по выполнению
Ваша задача – выполнить редизайн сайта с созданием новой адаптивной версии, которая будет работать на устройствах с различным разрешением (мобильный телефон, планшет) работа должна быть выполнена в одном из представленных графических программ (Adobe Photoshop, Gimp).
Вам будет предоставлен старый сайт компании «Выбор темы всеми экспертами», где вы сможете найти логотип и основные информационные блоки.
Вы должны использовать логотип компании, оставить оригинальную палитру цветов и структуру применения логотипа. Также предусмотреть наличие основных элементов со старого сайта: шапка, основное меню, основные информационные блоки, подвал.
Вы должны продумать главную страницу сайта и страницу конкретизации (товара, услуги, и т.д. в зависимости от темы).
Вы можете изменять изображения и стиль сайта, но основная концепция должна быть не изменена. Можно так же добавлять свою информацию, если вы посчитаете это необходимым.
Описание компании и логотип будут представлены в медиа-папке.
Вы должны создать макеты для нового дизайна отдельно для каждого разрешения в отдельных файлах:
● Компьютер (десктоп) – 1440 x 900 пикселей
● Планшет – 768 x 1024 пикселей
● Смартфон – 320 x 480 пикселей
Для отображения hover/mouse эффектов необходимо отдельно создать графический файл для их демонстрации.
| № | Аспект | Балл |
| А1 | Общие сведения | |
| А1О1 | Размеры всех макетов соответствуют заданным: ● Computer – 1440 x 900 pixels ● Tablet - 768 x 1024 pixels ● Smartphone – 320 x 480 pixels (штраф 0,2 за отсутствие элемента) | |
| А1О2 | В новом дизайне на странице присутствуют все основные элементы (штраф 0,2 за отсутствие элемента) | |
| А1О3 | В новом дизайне на странице присутствуют все требуемые дополнительные элементы (штраф 0,5 за отсутствие элемента) | |
| А1J1 | Дружественный интерфейс 0 – Плохое отображение информации 1 – Информация хорошо читаема 2 – Информация хорошо структурирована и читаема 3 – Информация хорошо оформлена и удобна для восприятия | |
| А1J2 | Эффект «hover» отображен в макете для ПК 0 – Не использованы эффекты «hover» 1 – Эффект «hover» используется не корректно 2 – Эффект «hover» используется не на всех элементах предусматривающих дальнейшее действие 3 – Эффект «hover» используется правильно и украшает дизайн | |
| А2 | Качество | |
| А2О1 | В mockup внедрены все макеты (Наличие макетов для ПК, планшет, телефон) | |
| А2J1 | Дизайн подходит для целевой аудитории 0 – Дизайн не подходит для целевой аудитории 1 – Цвета, элементы, типографика плохо подходят для целевой аудитории 2 – Цвета, элементы, типографика в целом подходят для целевой аудитории 3 – Цвета, элементы, типографика полностью подходят для целевой аудитории | |
| А2J2 | Качество прорисовки элементов и их оригинальность 0 – Дизайн не оригинален и плохо прорисован 1 – Элементы дизайна низкого качества и не оригинальны 2 – Элементы дизайна нормального качества и в целом оригинальны 3 – Элементы дизайна высокого качества и полностью оригинальные | |
| А2J3 | Удобство использования и понятность интерфейсов 0 – Дизайн не удобен для использования 1 – Дизайн удобен для использования 2 – Дизайн удобен для использования и прост 3 – Дизайн интуитивно понятен и удобен для использования | |
| А2J4 | Дизайн оптимизирован для использования на разных устройствах 0 – Дизайн не масштабируется 1 – Дизайн масштабируется но элементы не перестраиваются 2 – Дизайн масштабируется элементы перестраиваются 3 – Дизайн масштабируется элементы перестраиваются, меню оптимизированно | |
| А3 | Цвета | |
| А3J1 | Правильное соотношение картинок, текстов и пустого пространства 0 – Расположение элементов плохо встраивается в дизайн 1 – Хорошее расположение элементов на 1 макете 2 – Хорошее расположение элементов на 2 макетах 3 – Хорошее расположение элементов на всех 3 макетах | |
| А3J2 | Цвета правильно использованы и сбалансированы 0 – Цвета используются неправильно и несбалансированны 1 – Цвета используются правильно но несбалансированны 2 – Хорошее использование цветов 3 – Отличное использование цветов и их баланс | |
| А3J3 | Эффективность привлечения клиентов и близость к рынку 0 – Дизайн не соответствует рынку 1 – Используется несколько элементов относящихся к рынку 2 – Дизайн в целом соответствует рынку 3 – Дизайн полностью соответствует рынку | |
| А3J4 | Общее впечатление о дизайне 0 – Плохой дизайн 1 – Нормальный дизайн, использованы все необходимые блоки 2 – В целом хороший дизайн, элементы и цвета хорошо подобраны 3 – Отличный профессиональный дизайн | |
| Итого: |
Модуль 2. Верстка
Веб-разработка
Время выполнения: 4 часа