ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ ГОРОДА МОСКВЫ

Государственное бюджетное образовательное учреждение среднего профессионального образования

КОЛЛЕДЖ ДЕКОРАТИНО-ПРИКЛАДНОГО ИСКУССТВА №36 ИМЕНИ КАРЛА ФАБЕРЖЕ

ОТЧЁТ-САЙТ ПОРТФОЛИО

по производственной практике ПП.01

профессионального модуля ПМ 01. Разработка художественно-конструкторских (дизайнерских) проектов промышленной продукции, предметно-пространственных комплексов

по специальности: 072501 Дизайн (по отраслям) Дизайн в информационных технологиях

Квалификация: Дизайнер

Выполнил студентка: Кравцова Виктория Николаевна

Группа Ди-3А

Оценка руководителя практики от учебного заведения: _____(_______________)

Руководитель практики от учебного заведения: Корпачева С.А./___________/

Москва 2014 год

Творческая часть

1. Предпроектный анализ

Общие характеристики:

1. Цветовая гамма

2. Вводный блок

3. Выравнивание макета

4. Выравнивание навигационного блока

5. Размещение контактной информации

6. Страница портфолио

7. Страница с контактной информацией

1. Цветовая гамма

Темный сайт и светлый.

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

• Сайтов портфолио имеет легкий дизайн с натуральными и спокойными цветом. Фон этих сайтов это светлые оттенки серого и желтого а не чисто белый цветов.

Пример:

• На сайтах портфолио присутствуют очень живые, яркие цвета идовольно контрастные

Пример:

• Темные сайты гораздо чаще имеют большую типографику

Пример:

2. Вводный блок

Сайты портфолио обычно имеют большой вводный блок в шапке страницы, который содержит краткое дружественное изложение предоставляемых услуг и тех преимуществ, которые будут у клиента, если тот воспользуется их услугами. Блок, как правило, содержит красочные изображения и большую типографику. Он передает как образ всей компании, так и всех ее сотрудников делая это одинаково профессионально и дружелюбно. Такие блоки обычно расположены сразу под логотипом, на первой странице.

• сайтов портфолио имеет вводный блок в верхней части сайта, в каком нибудь виде. Также заметно, что некоторые из сайтов отказываются от вводных блоков в пользу показа своих последних работ. На таких сайтах маленькая ссылка “О нас” ставится на каком нибудь другом месте на странице, обычно внизу страницы.

Пример: http://wishingline.com/

http://concentric-studio.com/

http://www.45royale.com/

3. Выравнивание макета

В 90-х, макеты традиционно выравнивались по левому краю с либо вертикальным меню на левой стороне, либо горизонтальным меню в шапке. Это поменялось с ростом масштабов использования мониторов с широким разрешением. Все больше и больше дизайнеров создают свои дизайны, выравнивая макет по центру, чтобы пробелы по краям балансировали его. Мы замечали тенденцию к более оригинальному выравниванию по правому краю в начале года, но при данном исследовании мы больше не нашли сайта портфолио с выравниванием по правому краю

• Не существует макетов выровненных по правому краю,

• В большенстве случаев макеты сайтов выровнены по центру,

Пример: http://method.com/

• Также есть яркие фоновые рисунки, которые заполняют свободное место на странице

Пример:

• Есть так же незаполненные места оставлены

Пример:

http://maybeinc.com/

4. Выравнивание навигационного блока

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

• Сайтов портфолио имеют большое горизонтальное меню навигации,

• Имеют горизонтальное меню навигации с выравниванием элементов в нем по правому краю

Пример:

http://www.markboultondesign.com/

• Так же имеют горизонтальное меню навигации с выравниванием элементов по левому краю

Пример:

http://www.barbariangroup.com/

• Так же имеют горизонтальное навигационное меню на всю ширину страницы с большими интерактивными элементами

Пример:

http://builtbybuffalo.com/

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

• Сайт имеет макет и навигацию с выравниванием по левому краю. Каждый из элементов навигации является довольно большим интерактивным элементом. Пример:

http://www.area17.com/