Разработка концепции проекта

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

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

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

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

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

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

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

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

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

Группа Ди-3А

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

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

Москва 2014 год

сОДЕРЖАНИЕ:

Введение. 3

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

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

1.3. Разработка концепции проекта. 10

2. Графическая часть. 16

2.1 Разработка эскизного проекта. 16

3. Технологическая часть. 20

3.1 Выбор технических средств разработки проекта. 20

4. Экономическая часть. 22

4.1. Бриф.. 22

4.2. Смета проекта. 23

Заключение. 24

Введение

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

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

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

Портфолио для современного дизайнера – это очень важная вещь. На 3 курсе в процессе обучения нам предстояло познакомиться с HTML и созданием сайтов. Целью этой практики будет создание собственного сайта портфолио.

В рамках этой практики я должна продемонстрировать: (задачи)

· знание теоретических основ web–технологий;

· умение проектировать web–сайт, обосновывать целесообразность включения в него различных компонентов дизайна;

· умения использовать графические редакторы для подготовки графического контента;

· умения готовить текстовый контент для размещения на страницах сайта;

· умения проводить поиск и анализ информации.

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

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

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

Использую современные тенденции я создала конструкцию сайта.

Интернет растет и вместе с ним изменяются требования к сайтам. Требования к современным сайтам увеличиваются

Применение CSS3 и HTML5. Данные технологии начали вводиться еще пару лет назад, но настоящий размах они приобрели именно сейчас. Они вытесняют собой все прочие инструменты сайтостроения, поскольку способны единолично воплотить все требуемые веб-мастером задачи.

Простота цветовой гаммы. Нынче не принято распыляться на множество цветов и раскрашивать сайт под стать радуге. Как раз наоборот, в тенденциях веб-дизайна в 2014 году учитывается скромность и спокойствие в этом отношении. За основу принимаются лишь 2-3 базовых цвета, в остальном используются лишь производные от них оттенки. Благодаря этому страницы приобретают более просторный и расслабленный вид.

Мобильность. Все активнее пользователи руководствуются всевозможными планшетами, нетбуками, коммуникаторами и т.д. Чтобы угодить им и выглядеть достойно на любом девайсе, необходимо адаптировать свой сайт специальным образом. Как нельзя лучше воплотить эту задачу помогут возможности CSS3. Наличие мобильной версии сайта становиться правило хорошего тона. А подгонка сайта под мобильные размеры может сильно увеличить размер трафика, ведь поисковые системы уже могут определять подходит ли дизайн вашего сайта для мобильных устройств

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

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

Социальные связи сайта. Наличие социальных кнопок на страницах сайта, уже не просто красивое дополнение, а жизненно важный элемент продвижения сайта.

Безусловно, чтобы соответствовать сегодняшним требованиям, сайт должен быть узнаваемым, иметь «своё лицо» и привлекательный дизайн, а также, отвечать следующим требованиям:

· Современному сайту необходимо иметь хорошую навигацию, удобное расположение кнопок и разделов.

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

· В некоторых случаях приветствуется наличие мобильной версии сайта. Это делается для пользователей, которые чаще всего выходят в сеть Интернет с помощью смартфонов, планшетников, КПК и прочих девайсов. Необходимо сделать ресурс максимально адаптированным, доступным большинству пользователей.

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

· К дизайнерским трендам сайтостроения можно отнести различные 3D-эффекты, успешно применяемые в выставочных центрах, на аукционах, выполняя создание интернет магазина и т.п. Их преимущество не только в визуальной привлекательности, но и в возможности объемного представления объектов, демонстрации трехмерных моделей товаров и прочего.

· Не менее важной особенностью современного сайтостроения является SMM маркетинг, предусматривающий взаимодействие сайта с ресурсами социальных сетей. Даже если руководство компании активно не пользуется средствами соцмедиа, оно должно предусмотреть возможность цитирование материалов сайта в Контакте, Одноклассниках и на других популярных порталах. Это будет способствовать продвижению и популяризации сайта среди целевой аудитории.

На сегодняшний день в Интернете наблюдается высокая конкуренция, имеющая место среди подобных (схожих по тематике). Поэтому, не стоит перегружать ресурс излишними графическими изображениями и чрезмерно яркими красками. Лучше придерживаться строгого стиля, удобства навигации с использованием крупных кнопок; размещать лаконичный, ясный и полезный контент.

Сайты по своему назначению, по своей целевой аудитории бывают разные.

Сайт визитка

Несложный сайт, содержащий общую информацию о компании и роде, оказываемых услуг. Краткий и компактный, совсем как визитка.

Цель – представить компанию в Интернете.

Свойства:

· общее назначение сайта – предоставление общей информации пользователю;

· характеристика и основные элементы – наличие координат, контакты ключевых людей компании, род деятельности и предоставляемые услуги;

· количество страниц – 10–15;

· тип и характеристика дизайна – несложный деловой дизайн;

· система навигации – максимально удобная и простая система навигации;

· частота и необходимость обновления – обновление происходит нечасто, по мере необходимости;

· кем производится обновление – поддержка либо через фирму–Исполнителя, либо с помощью системы управления сайтом;

· кем являются посетители – в основном, целевая аудитория, люди, которые ищут определенный товар, услугу;

· наличие баннеров – баннеры на сайте–представительстве считаются плохим тоном;

· проводимая рекламная компания – индексация в поисковых системах, обмен ссылками с дружескими сайтами.

Задачи:

· дать пользователю общее представление о компании;

· максимально заинтересовать и спровоцировать покупку или иное действие;

· привлечение дополнительных клиентов;

· обеспечить запоминаемость у потенциальных клиентов и посетителей.

Стиль оформлениявеб – сайта является одним из главных факторов, который будет влиять на успешную его работу.

Наиболее распространенными стилями в дизайне являются:

· Классический;

· Журнальный;

· Мультипликационный;

· Гранжевый;

· Ретро-стиль;

· Футуристический

· Векторный;

· Бизнес-стиль.

Классический дизайн. Такое оформление в веб-сайтах встречается очень часто, обычно это современный дизайн в стиле WEB 2.0.

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

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

Гранжевый дизайн. Этот дизайн обычно оформлен в темных, неброских цветах, элементы выглядят как будто «потертыми», в сочетании с различными пятнами, обрывками каких-то изображений.

Ретро-стиль в дизайне. Выглядят такие сайты по-старинному, на них можно встретить различные элементы старого декора, предметов интерьера.

Футуристический дизайн. В оформлении используется все, что связано с роботами, фантастикой, металами и прочим.

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

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

Перед тем как создавать свой собственный сайт, я хочу посмотреть, как с этой задачей справились другие разработчики web–узлов. Мне это необходимо для того, чтобы проанализировать плюсы и минусы уже существующих кулинарных сайтов и постараться сделать лучше.

Схема, по которой я проводила анализ сайтов – аналогов:

Стилистика сайта:

Состав страниц:

Цвет:

Текст:

Формы:

ВЫВОД:

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

Состав страниц: Страницы содержат много фотографий, меню не подвижное. При смене страниц, меняются фоны как слайд шоу.

Цвет: Используется серая гамма, с добавлением ярких цветов. Эти цвета служат контрастом

Текст: Текста мало, он находиться на плашках. Шрифт без засечек. Использовано два шрифта. Для разнообразия текста используются разные начертания шрифта.

Формы: В виде плашек

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

Стилистика сайта:митнимализм с этническими мотивами.

Состав страниц: текст(статьи) и изображения.

Цвет: гармонично подобранны, желтый цвет является контрастным.

Текст:Текста мало, использовано два шрифта, без засечек. Для разнообразия текста используются разные начертания шрифта.

Формы:фотографии и плашка внизу страницы.

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

Стилистика сайта:Сайт выполнен в очень необычном стиле, он сочетает в себе эллемиенты разных культур

Состав страниц:Статьи и изображения, музыка и видео ролики

Цвет:основная гамма включает в себя бордовые цвета и их оттенки, которые смешиваться с различными другими цветами.

Текст:Текста много, в основном он описывает те или иные работы художницы

Формы:Используются как плашки для текста. Чтобы не печатать вывороткой на темном фоне

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

Стилистика сайта:Сайт выполнен в акварельном стили, с добавлением элементов по стилю информации.

Состав страниц:Текст и изображения

Цвет:Используются все основные цвета цветового спектра, они символизируют природное богатство. Так как сайт на биологическую тему

Текст:Текста много, поскольку это сайт не портфолио а сайт с наполнением для студентов биологов

Формы:плашки для текста

Вывод:Это не сайт портфолиоя его взяла как пример акварельного оформления сайта.

Общий вывод:Закончив анализ сайтов я узнала, что большинство сайтов создаются в минималистическом стиле, их девиз " Проще-лучше!".Но я не нашла ни одного сайта портфолио сделанного в акварельном стиле, или с добавлением текстур красок. В данном анализе сайтов я не стремилась исследовать только сайты портфолио, я хотела найти сайты с использованием акварельных кистей. С поставленной задачей в виде поиска акварельного дизайна я справилась, увидела ошибки и достижение других дизайнеров. В своем сайте я буду использовать не большое количество цветов, не стану смешивать множество тематик и этнических культур, я возьму цветовую схему подходящую именно под мою идею оформления сайта.

Разработка концепции проекта

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

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

Целевая аудитория: заказчики

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

Цветовая схема:

1) Бежевый, символизирует роскошь, придает силы, безопасность, надежность.

2) Оранжевый цвет я применила потому что - Этот цвет постоянно держит в тонусе; обладает всеми возможностями красного, но без агрессии. Его сила действует очень мягко. Воздействие, оказываемое им, является теплым, радостным . Этот цвет связана со стремлением к достижению самоутверждения.

3) Коричневый цвет олицетворяет стабильность, преданность .Успокаивает, поддерживает во время тревоги, волнений.

4)Темно – бардовый(почти коричневый)унаследовал от красного силу воли, а от коричневого – склонность к глубоким размышлениям. Коричнево – красный успокаивает.

Шрифты

Шрифт я подбирала долго, хотелось чего-то не стандартного, запоминающегося и при этом легко читающегося. мой выбор пал на два шрифта Clip и Arial.