Дизайн-проект web-сайта факультета архитектуры и дизайна

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

"КУБАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ"

(ФГБОУ ВПО "КубГУ")

кафедра дизайна, технической и компьютерной графики

ДИПЛОМНАЯ РАБОТА

Дизайн-проект web-сайта факультета архитектуры и дизайна

Работу выполнила А.В. Шамша

Руководитель работы

преподаватель А.Ю. Федченко

Краснодар 2015

Содержание

Введение

1. История развития веб-дизайна

1.1 Понятие веб-дизайна

1.2 Основные этапы развития веб-дизайна

1.3 Виды и типы веб-сайтов

2. Теоретические аспекты создания веб-сайтов

2.1 Основные технологии веб-сайтов

2.2 Структура веб-сайта

2.3 Структура страницы веб-сайта

2.4 Этапы создания сайта

2.5 Процесс и результат разработки веб-дизайна

3. Разработка веб-сайта для факультета архитектуры и дизайна

3.1 Постановка задачи

3.2 Анализ целевой аудитории

3.3 Выравнивание и построение модульной сетки

3.4 Анализ аналогов

3.5 Разработка концепции дизайна веб-сайта

3.6 Разработка логотипа

3.7 Оформление планшетов

Заключение

Список использованных источников

Введение

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

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

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

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

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

Цель дипломной работы - разработка дизайн-проекта веб-сайта для факультета архитектуры и дизайна.

В связи с поставленной целью были определены следующие задачи:

ознакомиться с теоретической частью истории развития и методов разработки веб-дизайна;

разработать уникальный логотип веб-сайта;

разработать уникальный дизайн-проект веб-сайта для факультета архитектуры и дизайна;

изучить целевую аудиторию.

Объект исследования - процесс проектирования визуальных образов и элементов веб-сайта для факультета архитектуры и дизайна.

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

Методы исследования:

теоретическое исследование, изучение литературы (журналов, книг, интернет-сайтов);

поиск аналогов, просмотр и анализов сайтов;

общение со специалистами, профессионально занимающимися созданием веб-сайтов;

анализ принципов разработки дизайна веб-сайтов.

На защиту выносится: пояснительная записка, презентационный планшет, CD-диск с полной информацией о дипломном проекте.

1. История развития веб-дизайна

1.1 Понятие веб-дизайна

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

Веб-дизайн - отрасль веб-разработки <#"862640.files/image001.gif">

Рисунок 1 - Скриншот первого в мире сайта

Сайты в период с 1990 по 1994 год выглядели как группа текстовых документов, связанных между собой ссылками (рис. 2,3).

Рисунок 2 - Скриншот сайта IBM Webexplorer 1994 год

Рисунок 3 - Скриншот браузера Cello 1993 год

В середине 1990-х годов табличные макеты предоставили веб-дизайнерам дополнительные возможности для создания веб-сайтов. Оригинальная табличная разметка в HTML была предназначена для отображения табличных данных, но дизайнеры быстро поняли, что они могут использовать ее, чтобы придать структуру их дизайнам, а также создать более сложные, многоколонные макеты. Табличные дизайны выросли по сложности, включая нарезанные фоновые изображения, часто создавая иллюзию более простой структуры, чем фактическое табличное расположение. В это время мало обращали внимание на семантику и веб-доступность, часто выбирая эстетику, нежели хорошую разметку структуры. Так же на этом этап были популярны прозрачные GIF-изображения, чтобы контролировать пробелы веб-макетов. Дизайнеры должны были полагаться на таблицы, если они хотели создать даже немного сложные проекты (например, многоколонные конструкции).

В 1996 году была издана очень влиятельная книга Дэвида Сигэла под названием "Creating Killer Web Sites". Система раскладки страниц, описываемая в этой книге, в основном базировалась на использовании таблиц HTML и однопиксельных GIF’ов. Страница раскладывалась по сетке; содержимое, будь оно текстом или графикой, помещалось в ячейки этой сетки. Чтобы предотвратить "сворачивание" пустых ячеек таблицы, использовались прозрачные GIF’ы размером 1 Ч 1 пиксель. Сигэл (и не только он) пошел дальше, и предлагал использовать однопиксельные GIF, как средство управления разрывами между буквами в тексте, и для того, чтобы создавать отступы. Появление таких методов позволило дизайнерам создавать визуально привлекательные страницы, ставя эстетический аспект в сайтах наряду с функциональным [17].

Одним из важнейших достижений этого времени является программа Flash 1.0. Создателем этой программы является программист Джонатан Гай, который ещё школьником, написал на языке программирования Pascal, свой первый графический редактор "SuperPaint", за который был удостоен награды на научной выставке в школе (рис.4).

Рисунок 4 - Программа SuperPaint

После создания "SuperPaint II" и завершения обучения в колледже, Джонатан начал разработку технологии для создания нового поколения программного обеспечения для работы с графикой, которая сожжет использоваться как на компьютерах Macintosh, так и на компьютерах с операционной системой Windows. Эта технология породила программу под названием "Intellidraw", которая составила конкуренцию "Adobe Illustrator". Уникальность "Intellidraw" заключалась в том, что помимо возможности рисования изображений, она так же позволяла добавлять к нарисованным изображениям действия, так что кроме возможности создания линий, которые бы соединялись с каким-либо объектом и другими линиями, можно было добавить так элементы как гистограмма, которая изменялась при введении пользователем чисел в текстовое поле. Позже выяснилость, что "Intellidraw" была не первой программой, которая позволяла это делать, так как существовал редактор изображений "SketchPad", но он был быстро забыт. В своё время "Intellidraw" не вызывала должного уважения у пользователей и когда стало ясно что она обречена, было принято решение действовать иначе. В это время становятся популярными компьютеры, представляющие собой экран, на котором можно было рисовать электронным пером. Очень привлекательной была идея сделать компьютер меньше, чтобы пользователь мог фактически брать его с собой куда угодно. С помощью инвестиций Чарли Джексона в январе 1993 года была создана компания Future Wave Software, целью которой было доминирование на рынке графического программного обеспечения для перьевых компьютеров. На тот момент главной задачей было создание сложного продукта, который был бы легок в использовании.

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

Рисунок 5 - Программа SmartSketch

Особенности дизайна сайтов данного времени:

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

принципы хорошего дизайна часто уступали новым и популярным "фишкам";

фреймы стали популярным способом разделять контентную область и боковую колонку с навигацией;

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

Ниже приведены примеры сайтов возданных в 1997 году (рис 6,7).

Рисунок 6 - Скриншот сайта Yahoo январь 1997 год

Рисунок 7 - Скриншот сайта Apple апрель 1996

В конце 1990 годов flash приобрел популярность. Особенностью дизайна сайтов данного периода стало то, что многие сайты начали использовать комбинацию табличного дизайна и flash-элементов для эффектов (рис.8).

Рисунок 8 - Скриншот сайта Apple октябрь 1999 год

В 2000-ом году популярность приобретает CSS. CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. CSS - одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название "стандарты Web". В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS. В начале 1990 годов различные браузеры имели свои стили для отображения веб-страниц.html развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания. Термин "каскадные таблицы стилей" был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS. В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях. В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

Особенности дизайна сайтов в 2000 году (рис.9,10):

каскадные таблицы стилей (CSS) позволили дизайнерам отделить контент сайта от веб-дизайна

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

Рисунок 9 - Скриншот сайта Apple май 2000 год

Рисунок 10 - Скриншот сайта Yandex апрель 2000 год

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

Особенности дизайна сайтов в начале 2000-х годов (рис.11):

навигация сайта начала перемещаться в верхнюю часть страницы;

выпадающее меню стало популярным решением для навигации;

формы ввода начали использовать подсказки;

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

Рисунок 11 - Скриншот сайта Apple 2004 год

В конце 2000-х годов в web-дизайне популярность приобретает интерактивный контент и web-приложений. Web-дизайнеры широко используют JavaScript и XML для плавной смены контента и разработки приложений. Развиваются социальные сети. Web дизайнеры фокусируются на оформлении контента. Важным достижением становится появление альтернативы Flash - HTML 5.

В 2008 году впервые был осуществлен доступ к интернету через мобильные устройства.

Адаптивный веб-дизайн (Adaptive Web Design) - дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств. В 2010 году Итан Маркотт в одной из своих статей ввёл понятие отзывчивого веб-дизайна (responsive web-design), предложив отображать одинаковое содержимое, используя при этом разные формы макетов для его представления. Среди веб-дизайнеров стали понимать адаптивный дизайн как более широкое понятие, включающее отзывчивый дизайн и постепенное улучшение.

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

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

В наши дни существует несколько новых идей, которые поддерживают движение в этом направлении:

новые элементы CSS, такие как vh, vw (высота и ширина области просмотра) позволяют получить гораздо большую гибкость при позиционировании элементов и решить такую проблему как центральное выравнивание по вертикали;

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

1.3 Виды и типы веб-сайтов

Сайт представляет собой набор web-страниц, которые объединены общей тематикой и связаны между собой ссылками, единой системой навигации. Для передачи данных используется протокол прикладного уровня - http, который указывается в URL или адресе любого ресурса (документа, файла) в Internet. Общий вид URL: схема: // иер-часть? запрос, где:

схема - это схема обращения к ресурсу (часто указывает на сетевой протокол);

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

запрос - строка запроса с передаваемыми на сервер параметрами (необязательный компонент).

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

Статические сайты - состоят из статических страниц, то есть содержат набор статических файлов, хранящихся в файловой системе сервера;

Динамические сайты - состоят из страниц, которые динамически формируются в зависимости от запросов пользователя. На таких сайтах страницы могут формироваться как на стороне сервера, используя при этом информацию из баз данных, так и на стороне клиента;сайты - представляют собой интерактивные приложения разработанные в среде Macromedia Flash. Благодаря Flash сайт выглядит наиболее интерактивно и динамично.

Комбинированные сайты - при создании таких сайтов используются вышеприведённые технологии.

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

Сайт может создавать с различными целями и нести различную функциональную нагрузку. Можно выделить следующие виды сайтов:

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

Сайт-визитка. Сайты этого типа отличаются лаконичностью. Стандартно это 1-5 статичных страниц с описанием компании, схемой проезда к офису, некоторые описания основных товаров и услуг.

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

Сайты электронной коммерции. Этот тип сайтов предназначен для "самостоятельной" работы. Он проектируется таким образом, чтобы его находили через поисковые системы те потенциальные потребители, которые интересуются определенной темой.

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

Рядом с описанием товара могут быть размещены статьи, написанные аналитиками, маркетологами или PR-менеджерами что заменит консультацию, которую покупатели обычно получают от менеджера-продавца.