РАЗРАБОТКА ВЕБ-САЙТА СТУДИИ ДИЗАЙНА ИНТЕРЬЕРА «ПОД КЛЮЧ»

АГПА (Армавир/Россия), 48 стр, 2015г. Оригинальность 85%. ...

ВВЕДЕНИЕ 5
ГЛАВА 1 НАУЧНОЕ ОБОСНОВАНИЕ В ИССЛЕДОВАНИИ
ВЕБ -ДИЗАЙНА
1.1 История веб-дизайна и веб-сайтов 7
1.2 Устройство сайтов 10
1.3 Типы и виды сайтов 12
1.4 Стили сайтов в веб-дизайне 29

ГЛАВА 2 РАЗРАБОТКА САЙТА ДИЗАЙНА ИНТЕРЬЕРА ПОД КЛЮЧ «DA»
2.1 Техническое задание 32
2.2 Предпроектный анализ разрабатываемого веб-сайта 38
2.3 Разработка дизайна 45
ЗАКЛЮЧЕНИЕ 46
СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ 47

Интернет стал неотъемлемой частью нашей жизни. Путешествуя по сети Интернет, мы встречаем разнообразные веб-сайты. На одних продают вещи, на других приглашают найти друзей для общения. Есть широко востребованные информационные порталы, а есть сайты, посвященные отдельным людям или компаниям. Тенденция такова, что для успеха необходимо заявить о себе в Интернете, а значит, собственная персональная страница должна быть у любой фирмы и даже у личности.
Пользователям приятно посещать те веб-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне веб-браузера. Задача веб-дизайна любого сайта - вызвать доверие посетителя, к качеству предлагаемых ею услуг, сохраняя при этом фирменный стиль, корпоративную культуру , и позиционирование на рынке.
Дизайн сайта и само его построение сочетает в себе различные нюансы, которые необходимо учитывать при разработке. Прежде всего, это наличии удобной навигации и прозрачности структуры сайта. При этом нужно учитывать художественную ценность и отточенность графического дизайна
При выполнении дипломного проекта необходимо исследовать изучаемую область – веб дизайн и его особенности, провести анализ исторического изменения тенденций интернета и веб дизайна. Рассмотреть классификацию и виды оформления дизайна сайтов. Изучить возможности создания веб сайта с использованием компьютера. Составить техническое задание. Провести анализ аналогичных дизайнов и сайтов. Разработать макет и структуру сайта. Создать графический макет-веб сайта. В итоге работы должен быть получен готовый дизайн веб-сайта студии дизайна интерьера «DA».
Объект исследования: разработка веб дизайна.
Предмет: веб сайт «DA».
Цель: разработка дизайна сайта «DA».
Гипотеза: в процессе выполнения работы будут изучены аспекты графического дизайна, развитие современного веб дизайна, методы разработки с использованием компьютерных технологий, проведён анализ аналогичных веб сайтов, рассмотрены требования эргономики и особенности разработки дизайна веб сайтов.

Макет будет одинаково смотреться на разных операционных системах, имеющих различия в выборе размера и типа шрифта;Адаптивные. Этот макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Для этого заготавливается несколько стилевых правил или файлов под разный диапазон разрешений, выбор правил происходит через скрипты или CSS3, которые и определяют нужную для этого информацию о пользователе. Этот тип макета наиболее удобен для пользователя, поскольку не зависит от разрешения и ширины окна браузера, приспосабливаясь под них. Макет комфортно можно смотреть на любом устройстве;Комбинированные. Этот макет предполагает использование разной ширины для отдельных частей страницы, например, шапку и подвал делают резиновыми, а контент фиксированным. Этот макет в действительности не является самостоятельным типом, поэтому наследует все плюсы и минусы фиксированного и резинового макета. -4927593567700Чтобы разобраться какая задача нужна от сайта надо выбирать из видов сайта. В зависимости от задач, мы можем разделить их на несколько видов представленных на (рис 8)Рисунок 8 – Виды сайтовСайт-визиткаИтак, что же собой представляет сайт «Визитка» или сайт малого бизнеса. Самый простой из всех видов сайтов. Фактически представляет собой электронную версию обычной бумажной визитки.124650594489900На сайте-визитке содержится основная информация о компании, её контактах, деятельности и об основных предоставляемых услугах. Как правило, сайт-визитка обладает простой и удобной навигацией.Рисунок 9 – Пример сайта «Визитки»Tакие сайты создаются в качестве «заглушки» или для рекламы, тем самым привлечение новых клиентов через интернет. Разработчик должен продумывать дизайн так, чтобы клиенты могли свободно найти всю интересующую информацию сразу.Корпоративные сайтыКорпоративные сайты — это полнофункциональные представительства компаний в интернете. Это полноценные сайты, обладающие большим объемом данных и материалов, расширенной структурой меню и навигации для полного предоставления данных клиентам.Цель такого вида сайта: поиск и обслуживания новых покупателей, продвижение товаров и услуг и предоставления удобного сервиса обслуживания.850900-917400 Рисунок 9 – Структура корпоративного сайтаИнтернет-витрины или интернет-каталогЭто вид сайтов, основная задача которых — продавать. На таких сайтах размещается информация о товарах и контакты, обычно телефоны, по которым следует звонить желающим приобрести предлагаемый товар.С его помощью невозможно совершить сделку купли-продажи, так как на сайте-витрине только предоставляется подробная информация о товаре. Но иногда, на них указываются места, где можно купить заинтересовавший товар Интернет-магазиныЭтот вид сайтов аналогичен интернет-витринам, но имеет дополнительный функционал: возможность заказать предлагаемый товар прямо через сайт.1369060-1005600Рисунок 10 – Пример сайта-витриныПромо-сайты1410970252285500Промо-сайты – интернет-ресурсы, на которых пользователю рекламируют определенные услуги или товары, но особое внимание останавливая на их преимуществах. Они характеризуются достаточно простой структурой, небольшим объемом (до 10 страниц) и недлительной продолжительностью жизни. Основное время разработки промо-сайта посвящается его оформлению, ведь необходимо привлечь внимание пользователей. Раскрутки такой сайт, как правило, не требует, так как является, по сути, рекламой. Рисунок 11 – Пример промо-сайтаТематические сайтыДанный тип интернет сайтов характеризуется тем, что содержит информацию по какой-либо конкретной тематике. Сюда же можно отнести интернет-энциклопедии.1451610124332100В зависимости от объема, структура сайта может быть как простой, так и достаточно сложной. На сайте может содержаться несколько разделов, могут быть многоуровневые меню, а так же может быть установлено большое количество разных компонентов и модулей. Рисунок 12 – Пример тематического сайтаПри разработке тематического сайта основной упор делается на удобство поиска и вывода материалов. Формат материалов может быть любой: простой текст, изображения, видео, аудио и т.дИнтернет-порталыПорталы — это тип сайтов, содержащих большое количество разнообразной информации. Как правило, порталы схожи по структуре с тематическими сайтами, но имеют более развитый функционал и большее количество сервисов и разделов. Также на порталах часто бывают разделы для общения пользователей: чаты, блоги и форумы.Каталоги сайтов119253065405000Это вид сайтов, основным содержимым, которых являются структурированные ссылки на другие сайты, а также их краткие описания.Рисунок 13 – Пример каталога с сайтамиБлоги1370330219392500Блог — это тип сайтов, на которых владелец или редактор блога пишет посты со своими новостями, идеями или другой постоянно поступающей информацией. Отличительной особенностью блогов является актуальность публикуемой информации. Как правило, у блога формируется своя аудитория, которая следит за его обновлениям с помощью RSS ленты. Она позволяет читателям первыми узнавать о новых статьях, а автору поддерживать постоянную аудиторию читателей. Рисунок 14 – Пример сайта блогаПоисковые системы147828093761100Вид сайтов, предназначенных для поиска страниц в интернете по определённым запросам. Для поиска информации с помощью поисковой системы пользователь формулирует поисковый запрос.Рисунок 15 – Пример поисковых систем По запросу пользователя поисковая система генерирует страницу результатов поиска. Такая поисковая выдача может сочетать различные типы файлов.Почтовые сервисыЭтот тип сайтов предоставляет интерфейс для работы с электронной почтой. На сайтах этого вида пользователи могут создавать темы, а также комментировать их. Как правило, форумы ограничены одной специфической тематикой, хотя встречаются и форумы «обо всём».Сайты-хостингиНа сайтах этого типа реализована функция хранения каких-либо файлов. Также часто встречаются сайты-хостинги с возможностью просмотра загруженных файлов прямо через браузер.1210006-943000Рисунок 16 – Пример сайта-хостингаДоски объявленийНа таких сайтах пользователи могут размещать или искать информацию в виде каких-либо объявлений, например — о покупке-продаже.Социальные сетиТип сайтов, созданных для общения пользователей между собой. Как правило, на таких сайтах есть рейтинги, страницы пользователей, группы и множество других сервисов. Обязательная процедура каких является указание своей личной информации (ФИО, год рождения, образование и т.д.) Например: vk.com (vkontakte.ru), odnoklassniki.ru, facebook.com.1.4Стили сайтов в веб-дизайнеВеб-дизайн – это графическое оформление сайта, которое включает в себя разработку структуры сайта, разработку логики сайта с учетом удобства пользования (юзабилити). Роль привлечения посетителей на сайт выполняет графическое оформление, а удобство и неприкрытая простота позволяет удерживать посетителя и заставляет его возвращаться на сайт еще раз.До не давних времен веб дизайн можно было разделить на:европейский;американский;русский (СНГ);японский;122025293376300Европейский дизайн отличается художественностью, обычно на сайтах много графических элементов, персонажи, кнопки, ссылки всё было прорисовано специальным художником.Рисунок 17 – Пример европейского дизайна1270635155829000Американский дизайн, как в прочем и всё остальное является беглым скетчем на бумаге. Используется один крупный графический элемент, чаще всего фотография, шрифт обычно стилизован или стандартный, при этом всё графическое является упрощённым – это чаще всего фигуры примитивы с одноцветной заливкой или градиентом, иногда используется обводка. Рисунок 18 – Пример американского веб дизайна134274096837500Русский (СНГ) веб дизайн – это минимализм, обычно текст с использованием стандартных шрифтов, иногда применение художественных элементов. Рисунок 19 – Пример русского дизайна сайтаЯпонский веб дизайн – это двоякость новой и старой Японии, либо огромное количество моргающего разноцветного текста и картинок, максимум «ядовитых» цветов, либо строгость и высокий уровень минимализма.1083386-10473Рисунок 20 – Пример японского веб дизайна1001793188405500Со временем дизайн европейский и американский объединились в «Западный». Западный веб дизайн так же используется многими российскими и СНГ дизайнерами. Отличается он применением стилизованного шрифта, применением контрастных цветов. Обычно используются фотографии и минимум палитры цветов. Придерживается минимализм с одним графическим элементом, по стандарту это фон.Рисунок 21 – Пример западного дизайнаДля стилей дизайна сайтов существует, классификация (рис. 22), которая может быть полезна при составлении технического задания на создание сайта.Практически всегда, когда кто-то говорит о стиле дизайна сайта, он имеет в виду именно его тематичность. В дизайне сайтов выделяют несколько основных стилей, разделенных по тематическому признаку.1124282-1153400Рисунок 22 – Классификация стилей дизайна сайтов113787397950200Максимально привычным и закономерным, благодаря чему пользуется громадным успехом в деле разработки корпоративных, прочих коммерческих и новостных проектов является классический сайт. Рисунок 23 – Пример сайта в классическом стилеТакой формат считается универсальным, а потому он может использоваться также и для ряда других ресурсов. Тем не менее, не всегда классический тип является уместным, особенно когда дело касается развлекательных площадок.121568496679200Сайт в стиле ретро основан на принципе «все новое – это просто давно забытое старое». При таком стиле сайтов чрезвычайно актуальны различные ретро-элементы, это касается и деталей оформления, и самих шрифтов. Рисунок 24 – Пример сайта в ретро стилеПодобное решение употребляется далеко не так часто, как предыдущее, тем не менее, оно является весьма своеобразным и может стать хорошей основой для исторических, познавательных и информационных источников.1069340637549 В мультипликационном стиле дизайн представляется нарисованным, а в нем нередко фигурируют герои из каких-либо мультиков. Рисунок 25 – Пример сайта в мультипликационном стилеВполне логично, что такой стиль сайтов чаще всего задействуется при создании сайтов для детей, а также для порталов онлайн-игр.1397000158600300Для новостных ресурсов уместный вариант, это журнальный сайт, поскольку в журнальном стиле предусмотрены абсолютно все условия для быстрого поиска и прочтения нужных сведений. Здесь предусмотрена специальная разметка основной области страниц, а также чрезвычайно заметное оформление заголовков.Рисунок 26 – Пример журнального сайта117856066580200Если подмечать главные особенности стиля гранж, то можно сказать, что в нем царит хаос и отсутствие систематизированности. Рисунок 27 – Пример сайта в стиле гранжЭлементы помещаются не там, где привыкли видеть их пользователи, да и, по сути, здесь предполагается существенный отход от имеющихся стандартов. Так что подходить к граженвому формату следует чрезвычайно аккуратно.1301352128714500В футуристическом сайте различные оригинальные элементы, ассоциирующиеся с будущим: светящиеся неоном буквы на темном фоне, объемная графика, большая просторность страниц и т.д. Весьма востребованный в наше время стиль сайтов. Рисунок 28 – Пример сайта в футуристическом стилеНа самом деле, этот список можно продолжать почти до бесконечности, т.к. в каждом конкретном проекте может быть нужен свой стиль. Например, сайт деревообрабатывающей фабрики может быть сделан в «деревянном» стиле, интернет-магазин по продаже книг — в «книжном», а форум любителей кошек — в «кошачьем». Старые требования касательно соотношения качество/размера изображений утеряли смысл. Интернет стал широкополосный, и скорость увеличилась до просмотра фильмов онлайн. Теперь на веб-сайте можно располагать изображения полно экранного высокого качества, а также видео.При этом технологии сменились не только интернета, но и появились новые дисплеи Retina и подобные с высокой плотностью пикселей. Разрешающая способность дисплея – это количество пикселей (точек или растров) на единицу площади, является одной из основных характеристик дисплея. Сейчас на 13 дюймов размещается 2560х1600 пикселей c высококачественной жидкокристаллической матрицей (IPS).Разрешение дисплеев перестали отвечать былым стандартам, их накопилось уже свыше 3 тысяч вариантов. Появилось множество различных мобильных устройств с разными соотношениями и разрешениями.Стандартом стал широкоформатный вариант дисплеев, где разрешение тоже смещается в сторону увеличения независимо от размеров.Исходя из статистики и стандартных размеров рабочей зоны браузеров, можно определить максимальные размеры для разметки дизайна макета.На сайте кроме графики присутствует текст. Текст, как и в графическом, дизайне определяется размерами (кегелем) и шрифтом. Дизайнеру, необходимо сразу выбрать какими шрифтами будет пользоваться, при этом, как правило, для одного веб-сайта используется не более трёх.Шрифтов для сайтов существует огромное множество, но дизайнер ограничен авторской лицензией. Есть шрифты, на которые необходимо покупать лицензию, есть не для коммерческого использования и есть общедоступные. При этом в остальном ограничение по шрифтам отсутствует. Размеры текста могут быть различные в зависимости от дизайна сайта.глава 2 РАЗРАБОТКА САЙТА дизайна интерьера под ключ «DA»Техническое заданиеОписание проектаРазработать веб-сайт дизайна интерьера под ключ «DA». Необходимо придумать фирменный стиль и логотип сайта. Сайт должен предоставлять услуги. Новостной блок будет присутствовать, в полной версии сайта и часто обновлятьсяЭксплуатационное назначениеСайт разрабатывается для привлечения новых и информирования существующих клиентов.Функциональное назначение.На сайте должна присутствовать информация о контактах, студии, услугах и портфолио. Меню для заказа звонка. Данные на сайте.Слайдер на главной странице:картинка;подпись;автоматическая смена слайдов;поддержка слайдера мобильными устройствами.Контактная информация:номера телефонов (с возможностью заказать звонок)электронная почтаИнформация о студии:текст;Портфолио:отображение уменьшенных изображений, спроектированных интерьеров; при наведении изображение становится ярче; при клике на изображение открывается полноразмерная страница с информацией;Каталог услуг:отображение иконок с подписями;при клике на каждую открывается полноразмерная страница с описаниемСтатьи:список статей и небольшим изображением рядом;при клике на текст ссылку открывается полноразмерная страница со статьёй;Требования по дизайну сайта.Предполагаема аудитория Социальный статус: не конкретизируетсяДолжность: не конкретизируетсяОбразование: нет разницыВозраст: от 18Веб-проект по восприятию: удобный, аккуратный, информативный.Категория веб-проекта: визитная карточка.Стиль веб-дизайна: flat или плоский стиль.