Индивидуальный проект. Модуль 1

Модуль 1. Графический дизайн

Цель:

ü  научиться создавать макета сайта в программе Photoshop

План:

ü  Инструкция по выполнению

ü  Ход работы

Инструкция по выполнению

Ваша задача – выполнить редизайн сайта с созданием новой адаптивной версии, которая будет работать на устройствах с различным разрешением (мобильный телефон, планшет) работа должна быть выполнена в одном из представленных графических программ (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
А1О2	В новом дизайне на странице присутствуют все основные элементы (штраф 0,2 за отсутствие элемента)	1
А1О3	В новом дизайне на странице присутствуют все требуемые дополнительные элементы (штраф 0,5 за отсутствие элемента)	2
А1J1	Дружественный интерфейс 0 – Плохое отображение информации 1 – Информация хорошо читаема 2 – Информация хорошо структурирована и читаема 3 – Информация хорошо оформлена и удобна для восприятия	1
А1J2	Эффект «hover» отображен в макете для ПК 0 – Не использованы эффекты «hover» 1 – Эффект «hover»  используется не корректно 2 – Эффект «hover» используется  не на всех элементах предусматривающих дальнейшее действие 3 – Эффект «hover» используется правильно и украшает дизайн	1
А2	Качество
А2О1	В mockup внедрены все макеты (Наличие макетов для ПК, планшет, телефон)	1
А2J1	Дизайн подходит для целевой аудитории 0 – Дизайн не подходит для целевой аудитории 1 – Цвета, элементы, типографика плохо подходят для целевой аудитории 2 – Цвета, элементы, типографика в целом подходят для целевой аудитории 3 – Цвета, элементы, типографика полностью подходят для целевой аудитории	1
А2J2	Качество прорисовки элементов и их оригинальность 0 – Дизайн не оригинален и плохо прорисован 1 – Элементы дизайна низкого качества и не оригинальны 2 – Элементы дизайна нормального качества и в целом оригинальны 3 – Элементы дизайна высокого качества и полностью оригинальные	1
А2J3	Удобство использования и понятность интерфейсов 0 – Дизайн не удобен для использования 1 – Дизайн удобен для использования 2 – Дизайн удобен для использования и прост 3 – Дизайн интуитивно понятен и удобен для использования	2
А2J4	Дизайн оптимизирован для использования на разных устройствах 0 – Дизайн не масштабируется 1 – Дизайн масштабируется но элементы не перестраиваются 2 – Дизайн масштабируется элементы перестраиваются 3 – Дизайн масштабируется элементы перестраиваются, меню оптимизированно	1
А3	Цвета
А3J1	Правильное соотношение картинок, текстов и пустого пространства 0 – Расположение элементов плохо встраивается в дизайн 1 – Хорошее расположение элементов на 1 макете 2 – Хорошее расположение элементов на 2 макетах 3 – Хорошее расположение элементов на всех 3 макетах	1
А3J2	Цвета правильно использованы и сбалансированы 0 – Цвета используются неправильно и несбалансированны 1 – Цвета используются правильно но несбалансированны 2 – Хорошее использование цветов 3 – Отличное использование цветов и их баланс	1
А3J3	Эффективность привлечения клиентов и близость к рынку 0 – Дизайн не соответствует рынку 1 – Используется несколько элементов относящихся к рынку 2 – Дизайн в целом соответствует рынку 3 – Дизайн полностью соответствует рынку	1
А3J4	Общее впечатление о дизайне 0 – Плохой дизайн 1 – Нормальный дизайн, использованы все необходимые блоки 2 – В целом хороший дизайн, элементы и цвета хорошо подобраны 3 – Отличный профессиональный дизайн	2
Итого:		15

Ход работы

Вводные данные:

Предоставляется текст, описание профиля пользователя, изображения и вспомогательная графика для создания макетов страниц. Не требуется использовать все изображения и текст. Дизайн должен определять количество контента на странице.

Выходные данные:

2 макета двух страниц в виде графических файлов в форматах png и psd (xcf) - всего 8 файлов, сохраненных в сетевой папке с номером вашего ПК:

•макет для настольных систем (ширина по умолчанию - 1280рх, макет соответствует ширине от 800рх)

•макет в режиме планшета (ширина экрана от 480рх до 800рх, ширина по умолчанию 720рх)

ЗАДАНИЕ 1

В 2017 году городу Туле исполняется 871 год. Администрация города предполагает проведение праздничных мероприятий. К Вам, как опытному web-дизайнеру, обратились с предложением разработать электронную рекламную кампанию предстоящих мероприятий.

Помните, что сайт посвящен Дню Рождения города Тулы! Необходимо разработать логотип мероприятия.

Смысловое наполнение ресурса:

1.   Главная страница:

•      анонс праздничных мероприятий (используйте текст, предложенный в файле программа праздника, и фото), не менее 6 мероприятий.

•      историческая справка (используйте текст, предложенный в файле texts_l).

•      организаторы праздника (используйте текст, предложенный в файле texts_4).

2.   Страница сайта с описанием одного из мероприятий (не менее трех фотографий и текст)

Шапка сайта должна содержать логотип и заголовок. При нажатии на логотип происходит переход на главную страницу сайта. Подвал сайта должен содержать сведения о контактах (файл texts_2). Шапка и подвал должны отображаться одинаково на всех страницах сайта.

Заголовок: С Днем Рождения любимый город! (возможны варианты).

Ваша задача - разработать макет сайта для мероприятий празднования 871-летия Тулы, используя вводные данные и требования. Дизайн вашего сайта должен эффективно поддерживать цели сайта - вы должны выбирать цвета, шрифты, графические элементы, исходя из тематики.

Дизайн сайта должен использовать принцип единообразия в структуре страницы: единый размер элементов, одинаковую высоту навигационных кнопок, оформление заголовков, подзаголовков и основного текста, оформления ссылок и изображений для всех страниц сайта.

Контрольные вопросы

1 Что такое дизайн-макет сайта?

2 На каком из этапов создания сайта происходит разработка дизайн-макета?

3 Где создается дизайн-макет сайта?

4 Перечислите основные структурные элементы макета?

5 Почему так важно использовать сетку при создании макета сайта?