Фрагмент для ознакомления
Примеры структурных схем
Wireframes (прототипы) являются техническим заданием для дизайнера. На этом этапе постоянно уточняются вопросы и утверждаются макеты чертежей по нескольку раз в день.
Назначение
Постановка задания дизайнеру. При отрисовке макетов страниц дизайнер должен не забыть все указанные в wireframes элементы и учитывать расставленные акценты.
Постановка задания разработчикам. Команда разработки должна руководствоваться wireframes при создании функционального прототипа системы (уже работающая система, к которой еще не «прикручен» дизайн).
Демонстрация инвесторам и потенциальным пользователям. Система может быть показана заинтересованным лицам уже через несколько недель после начала работ.
Рис.3.8. Элементы прототипа дизайна
3.1.4. Дизайн интерфейса
Завершающим этапом разработки интерфейса становится визуальный дизайн. Сначала создается отрабатываем креативная концепция. Затем разрабатываются дизайн-макеты групп страниц.
Внешний вид интерфейса системы называют визуальным дизайном. Он создается в графическом редакторе на основе структурных схем страниц (wireframes). Дизайн должен отвечать направлению сайта, быть современным и эстетичным, при этом не забывая об эргономике. Работа строится в два этапа - сперва создается креативная концепция дизайна. А после ее утверждения прорисовываются ключевые страницы системы.
Рис. 3.9. Разработка логотипа
Примеры дизайн-макетов
Назначение
Внешний вид продукта. Дизайн-макеты определяют внешний вид системы. Если это необходимо - в соответствии с брендом клиента.
Постановка задания разработчикам. Дизайн-макеты - это часть технического задания для верстальщика интерактивного прототипа и команды разработки.
Рис.3.10. Пример макета страницы
После того как общая стилистика одобрена клиентом, отрисовываются дизайн-макеты ключевых страниц системы.
Рис. 3.11. Программирование элементов
На этом этапе продукт обретает внешний вид - до этого мы занимались его сутью и принципами работы. Для проектов, которые планируют активно развиваться, мы также готовим руководство по стилю интерфейса (style guide). Он описывает принципы визуального оформления продукта и позволит сохранить его целостность в процессе доработок. Работы по этому этапу продолжаются 1–2 недели.
Руководство по стилю интерфейса (style guide)
Руководство по стилю интерфейса (style guide) - это сопроводительный документ к дизайн-макетам страниц. Он описывает стандарты оформления интерфейса системы - внешний вид интерактивных элементов, перечень и назначение используемых пиктограмм, цветов, шрифтов, иллюстраций и изображений, возможные логические разметки страниц (лейауты).
Назначение
Выработать единый стиль и сохранить стилистику при развитии продукта. При доработке существующей функциональности или создании новой руководство по стилю позволяет сохранить целостность дизайна продукта.
3.1.5. Подготовка спецификации
При необходимости мы готовим предварительное техническое задание на разработку системы. Оно объединяет в себе полученные ранее документы, расширяет и перечисляет дополнительные требования к системе - функциональные, архитектурные, эксплуатационные. По желанию клиента могут быть составлены подробные сценарии взаимодействия, которые пошагово описывают процесс работы пользователя с системой.
3.1.6. Приемка дизайн концепции
Приемка работ клиентом может проходить одним большим пакетом замечаний или разбиваться на несколько более мелких этапов. Сроки, в которые замечания должны быть выставлены, оценены и исправлены оговариваются в договоре. В современных проектах такие изменения происходят постоянно и поддержка позволяет сохранить целостность, удобство и эффективность спроектированного интерфейса.
Рис.3.12. Готовая дизайн-концепция
3.2. Программирование элементов дизайна
HTML5 и CSS3 произвели революцию в мире веб-разработок и веб-дизайна, поскольку принесли очень много новых функциональных возможностей и свойств, с которыми уже сейчас необходимо ознакомляться и изучать, что бы поднять свое мастерство на новый уровень.
HTML5 является пятой версией основного языка разметки web-страниц.
Стив Джобс отказал в использовании Flash для iOS из-за множества багов и его нестабильности, поэтому изучение того, как использовать наиболее сложные функции HTML5 должно быть обязательным для тех, кто хочет разрабатывать приложения и iOS-дружественные веб-сайты. С Google и его версией YouTube дружественной к HTML5, много разработчиков и дизайнеров увидели, насколько важным станет новый язык в ближайшем будущем. Тем не менее, не смотря на Firefox, который немного сопротивляется пришествию HTML5, дизайнеры и разработчики все же чувствуют необходимость подстраивать свои базы, когда внедряют новые возможности на веб-сайты.
Основная идея, которую несет в себе HTML5 – это не один сплошной объект, а скорее сборник небольших составляющих, которые, взаимодействуя, создают нечто новаторское и продвинутое. Каждый браузер может поддерживать разные свойства HTML5. И очень важно для тех, кто кодирует сайт, знать какие функции можно использовать для данного браузера, а какие поддерживаются другим.
HTML5 возник в виде надстройки над широко-популярным HTML4. Это значит, что веб-дизайнеру нет необходимости полностью переделывать существующий код, а надо всего лишь усовершенствовать старый.
ЗАКЛЮЧЕНИЕ
В результате выполнения данной работы были выполнены все задачи.
В ходе выполнения дипломного проекта была достигнута основная цель работы - разработан представительский сайт музыкальной студии.
Для достижения поставленной цели были проведены исследования и анализ классификации сайтов и типов веб-ресурсов. Рассмотрены виды систем управления содержимым. Была рассмотрена Flash технология и ее возможности в разработке интерактивного дизайна. Были обнаружены преимущества и недостатки Flash технологии. Рассмотрены язык разметки XML как хранилища информации. Приведены примеры сайтов с использованием Flash технологии.
В практической части создан техническое задание. При разработке архитектуры сайта, он был разделен на две части: клиентскую и административную.
Рассмотрены программное обеспечение используемое при исполнении работы.
Для осуществления разработки сайта были использованы следующие Интернет-технологии для создания сайта была выбрана HTML5+CSS3 технология и объектно-ориентированный язык JavaScript+jQuery;
СПИСОК ЛИТЕРАТУРЫ
Тереза Нейл, Билл Скотт. Проектирование веб-интерфейсов = Designing Web Interfaces. М.: Символ-Плюс, 2010. 352 c.
Калянов Г.Н. CASE. Структурный системный анализ (автоматизация и применение). М. : Лори, 1996. – 457с.
Гагин А. Технология работи в глобальних в общедоступных сетях. М: Jet Infosystems, 2006. - 235с.
ВайкАллен. JavaScript. Энциклопедия пользователя: Пер.з англ. К.: ТОВ "ТИД" ДС", 2001.- 480с.
Вильямсон X. Универсальный Dynamic HTML. Иблиотека программиста. СПб.: Питер, 2001. - 304 с.: рис.
Гудман Д. JavaScript.Библия пользователя, 4-е изд.: Пер. з англ. М.: Изд.дом "Вильямс", 2003. -960с.
Коггзолл Джон. РНР 5. Полное руководство.: Пер. з англ. М.: Издательский дом "Вильямс", 2006. - 752 с.: рис. - Парал. тит. англ.
Бурлаков М. Macromedia| Dreamweaver. СПб., БХВ-Петербург, 2004. – 688с.
Вуд Л. Web-графика. Справочник. СПб.: Питер, 1998. – 246с.
Грызлов В. Java Script. Изд. 3-е.М.: ДМК Пресс, 2005. 416 с.
Кассер Д. Использование Macromedia Dreamweaver. М., СПб., К.: Издательский дом «Вильямс», 2005. 720 с.
Келли Д. Самоучитель Macromedia| Dreamweaver. СПб: Питер, 2002. 336с.
Культин Н. Основы программирования. СПб.: БХВ -Петербург, 2003. 608с.
Мак Т., Dreamweaver MX 2004. Шаг за шагом. Самоучитель. М.: ЭКОМ, 2006. 312с.
Миллер М. Использование Windows: Пер. с англ. К.; М.; СПб.: Издательский дом "Вильямс", 2008. 336с.
Молер Дж. Dreamweaver MX 2004. Руководство Web-дизайнера. М.: ЭКСМО, 2005. 67с.
Пасько В. Macromedia Dreamweaver. К.: BHV, 2006. 384с.
Хестер Н. Создание Web-страниц в Dreamweaver. М.: НТ Пресс, 2005. – 104с.
Гудман Д. JavaScript и DHTML. Сборник рецептов. Для профессионалов, Питер, 2004 г.
Лещев.Д.Создание интерактивного web-сайта: учебный курс. СПб.:Питер, 2003. 544 с.: ил.
Николаенко Д.В. Практические занятия по JavaScript для начинающих. СПБ: Наука и техника, 2000. 130 с.
Матросов А., Сергеев А., Чаунин М. HTML 4.0. СПб: Издательство "BHV", 1999. 670 с.
Мэрдок, Келли, Л. JavaScript: наглядный курс создания динамических Web-страниц. : Пер. с англ. :Уч. пос. М. : Издательский дом "Вильяме", 2001. 288 с. : ил. — Парал. тит. англ.
Патерсон Л. Использование HTML 4. К.; М.; СПб.: Вильямс, 1998. 512 с.
Приложения
Приложение 1. Код страницы сайта
//определяем использование кирилицы
Начало
// определяем мета символы
//для Internet Explorer подключаем отдельные скрипты формирования страницы
<link rel="stylesheet" href="style.css" media="screen"> //подключаем стили страницы
//подключаем стили страницы для Internet Explorer
<link rel="stylesheet" href="style.responsive.css" media="all"> //подключаем стили отдельных элементов
<script src="jquery.js"></script>// подключаем библиотеки JavaScript
<script src="script.js"></script>
<script src="script.responsive.js"></script>
//определяем внутренние стили страницы
//определяем блочную структуру основного содержимого страницы, к каждому блоку подключаем класс стиля оформления
//создаём, настраиваем и оформляем блочную структуру блока НОВОСТИ
//содержимое представляем в виде вложенных списков
// в дальнейшем каждый элемент списка будет использоваться как гиперссылка на соответствующую страницу
Хиты
На этой неделе
- Новинки русского рока
- Концерта джаза
- Неделя соула в Москве.
- Новинки русского рэпа.
- Блюз в городе.
Сегодня
- Благотворительный концерт
- Концерт симфонической музыки
- Джузепе Верде
- Концерт органной музыки
- Скрипичный концерт.
- Золотой саксафон.
//создаём, настраиваем и оформляем блочную структуру блока ХИТЫ
//содержимое представляем в виде вложенных списков
// в дальнейшем каждый элемент списка будет использоваться как гиперссылка на соответствующую страницу
Новые альбомы
True Colors
Информация об альбоме
Выпущен: Май 2015
Длительность: 50 мин. 1 с.
Жанр: Электронная, Dance, Поп, Dance-pop
Pray For Love - EP
Информация об альбоме
Выпущен: Май 2015
Длительность: 50 мин. 1 с.
Жанр: Электронная, Dance, Поп, Dance-pop
Кажется важным
Информация об альбоме
Выпущен: Май 2015
Длительность: 50 мин. 1 с.
Жанр: Электронная, Dance, Поп, Dance-pop
Все Релизы
Новости
04/05/2015
Гастроли оркестра парижской оперы
04/05/2015
Неделя венского вальса.
04/05/2015
Русский рок в вашем городе.
04/05/2015
Ванесса Мей и симфонический оркестр.
//настраиваем ПОДВАЛ
//внизу страницы создаем систему вертикального меню
// подключаем к блокам стили и ссылки на страницы
Приложение 2. Фрагмент CSS стиля страницы с описанием
