Дипломная работа: Графическая концепция веб-сайт
Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам
1. Исследовательско-аналитическая – рассматривается история веб-
дизайна, целевая аудитория, основные темы «eco-friendly», аналоги сайтов,
тенденции развития веб-дизайна;
2. Проектно-графическая – описывается взаимодействие интерфейса и
пользователя, разработка фирменного блока, концепции веб-сайта, фирменный
стиль, варианты сеток, госты, авторское право, стили сайтов;
3. Экономическая – расчет затрат на разработку веб-сайта, рекламу сайта.
ГЛАВА 1. ИССЛЕДОВАТЕЛЬСКО-АНАЛИТИЧЕСКАЯ
1.1. История возникновения веб-дизайна
Началом истории веб-дизайна стоит назвать момент появления первого сайта
— холста дизайнеров [9].
самый первый сайт увидел свет 6 августа 1991 года. Всё, что могли содержать
первые в мире страницы — ссылки и текст. О красоте сайтов не говорили вплоть до
22 апреля 1993 года, когда выпустили первый графический браузер Mosaic,
поддерживающий просмотр изображений. Так однообразный текст стали
разбавлять яркими картинками.
в этот период сайты начинают пестреть, как бразильский карнавал. Спасибо
появлению цветных фонов. В эти годы, в добавок ко всему, появляется возможность
добавления на сайт разных шрифтов, в частности Times New Roman и Courier New.
Прогресс дошел и до размещения на страницах популярных сейчас GIF-
изображений.
облик сайта начинает чуть более походить на привычный нам: сайты теперь строят
на основе табличных макетов, добавляют эффекты и навигацию с иконками. Также
активно развивается FLASH-технология, вследствие чего появляется возможность
добавлять “мигающие” заставки.
в начале XXI века в web-дизайне в моду входят скругленные углы, блестящие
кнопки и градиенты. Веб-сайты становятся намного функциональнее и обзаводятся
более удобным пользовательским интерфейсом.
в web-дизайне с приходом Web 2.0 стали отдавать предпочтение тени, глянцевости
иконок и кнопок и мягким цветам интерфейсов. Также в тренде – упор на читаемый
и функциональный контент и интеграция в ресурсы анимационного контента.
с этого периода начинается активное развитие мобильных веб-приложений и вместе
с этим, появляются мобильные веб-сайты. Отсюда прослеживается тенденция
развития такого явления, как “адаптивность”. Разрабатываются первые социальные
сети и, как следствие, получает распространение размещение их иконок на сайтах.
Активно внедряются длинные макеты сайтов. Широкое распространение получают
стоковые фотографии и такое явление, как скевоморфизм.
Недолго дизайнеры баловались использованием новинок разных периодов, когда
осознали, что лучший выбор – простота. И тогда начинает все больше развиваться
сердечная любовь к минимализму. В этот период также появляются такие дизайн-
тренды, как плоский дизайн и параллакс. Особое внимание продолжают уделять
адаптивности сайтов.
В это время мир веб-дизайна остановился на выборе материального дизайна,
высокого разрешения графики на страницах, а также стала внедряться
интерактивность. Особую популярность получили видеоконтент и скроллджекинг.
Дизайнеры стали делать упор на индивидуальность, а посему в предпочтение
вывели уникальную графику и авторские иллюстрации. Собственно, большинство
сайтов, которые мы сейчас посещаем являются представителями именно этого
периода.
В будущем прогнозируется следующее:
Ровная сетка – это скучно. Поэтому на смену ей придёт нестандартная,
ломаная сетка, которая сделает сайты динамичнее и интереснее.
Продолжится бурное развитие тенденции на интерактивный дизайн и
анимацию.
Основным привлекающим внимание web-дизайна обещает стать шрифт,
как главный графический элемент интерфейса [10].
1.2. Построение модульной сетки веб-страниц
Модульная сетка в web-дизайне предполагает собой общую схему
расположения всех компонентов и блоков веб-сайта. Данный каркас проходит через
все страницы и помогает разработать порядок на сайте [11].
С помощью сеток выполняется основа, на которой как располагаются
элементы страницы: логотип, меню, формы, изображения. За счет скелета элементы
страницы можно выбрать их относительные и абсолютные размеры, задать
визуальный ритм [10].
Любой макет содержит большое количество элементов. Между элементами
возникают оптические связи и притяжения, которые подчиняются концепции
близости и, правилу внешнего и внутреннего. Сетка помогает придерживаться
этого правила, не вычисляя расстояние и размер в отдельности. Закладываются
ключевые закономерности один раз, при построении сетки. В отличие от
колоночной, модульная сетка задает вертикальный ритм и главные пропорции
элементов, поддерживая их во всем макете [12].
Число колонок зависит от контента. Если речь идёт о печатной продукции, то
в подавляющем большинстве случаев можно предположить число колонок еще на
стадии первых черновиков. Если нужно сделать равновесную композицию, то
можно обойтись двумя колонками. В этом случае выравнивание лого будет
центральным, а текст нужно будет размещать на глаз (рис. 1.1).
Рисунок 1.1. Макет модульной сетки
Модуль, это по сути пропорция. Ширина модуля равна ширине колонки, а
высота — нескольким строкам. Можно чередовать модули разной высоты. Главное,
чтобы в этом была какая-то логика и закономерность, сохраняющая вертикальный
ритм (рис. 1.2).
Рисунок 1.2. Модуль
1.3. Эко-стиль жизни
«Безопасный для экологии» – так переводится термин eco-friendly,
послуживший основным определением экологичного мышления человека в
настоящем времени. Доброжелательный, осмысленный аспект к окружающей среде
все более накапливает известность, так как вследствие него возможно научиться
причинять значительно меньше вреда нашей экосистеме и попытаться
сформировать наиболее высококачественную степень существования.
Главная концепция движения eco-friendly – сберечь планету и воздержаться
от неразумного потребления естественных ресурсов, резерв каковых, увы, не
безграничен [1].
Эко-продукты и эко-питание. Продукты, которые мы употребляем,
оказывают большое влияние на наше состояние здоровья и формирование наших
Источник: https://baza.diplomsite.ru/previewfile/475