Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Презентации / Презентация по информатике на тему "История Web дизайна"

Презентация по информатике на тему "История Web дизайна"


  • Информатика

Поделитесь материалом с коллегами:

история веб-дизайна Автор: учитель информатики Волкова Светлана Валерьевна
Тёмный век веб-дизайна (1989) Cамо начало веб-дизайна можно назвать тёмными в...
Появление на свет браузеров, способных показывать изображения, было первым ша...
Ответом на ограничения HTML был Javascript. Javascript приходит на помощь (19...
Дизайнер мог работать с любыми формами, размерами макетов, анимациями, взаимо...
Его базовая концепция заключалась в разделении функций контейнера содержимого...
Просмотр веба на мобильных телефонах уже сам по себе был испытанием. А кроме...
Умный парень по имени Итан Мэркот решил бросить вызов существующему подходу,...
Отрисовка большего количества макетов требует больше времени. Исходя из этого...
Минимализм является популярнейшим трендом среди многих дизайнеров. Обычно на...
примеры
Плоский (flat) дизайн. В основу flat дизайна ложится двумерный стиль. Основна...
Обычно его позиционируют как легкий, простой, быстрый и открытый. В общем и ц...
Нестандартная геометрия также приобрела популярность в этом году. В основном,...
Ретро стиль взят из эпохи 50-80 годов с афиш, плакатов и прочей атрибутики то...
Акцентирование Это выделение особенной значимости, или важности элемента, при...
Это визуальное разделение двух, или более элементов дизайна. Для лучшей четко...
Понятие балансировки означает соотношение и распределение отдельных элементов...
Его принцип очень легок — упорядочение и сведение всех элементов сайта, чтобы...
Этот эффект подразумевает использование одних и тех же графических элементов...
1 из 43

Описание презентации по отдельным слайдам:

№ слайда 1 история веб-дизайна Автор: учитель информатики Волкова Светлана Валерьевна
Описание слайда:

история веб-дизайна Автор: учитель информатики Волкова Светлана Валерьевна

№ слайда 2 Тёмный век веб-дизайна (1989) Cамо начало веб-дизайна можно назвать тёмными в
Описание слайда:

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

№ слайда 3 Появление на свет браузеров, способных показывать изображения, было первым ша
Описание слайда:

Появление на свет браузеров, способных показывать изображения, было первым шагом в веб-дизайн — такой, каким мы его знаем сегодня. Самым доступным способом структурирования информации была концепция использования таблиц, которые на тот момент стали доступны в HTML. Применение таблиц в таких целях казалось не совсем правильным, поскольку их основным предназначением является структурирование информации. И тем не менее, этот метод создания веб-дизайна был самым распространенным в течение длительного времени. Была тогда и другая проблема — сохранение работоспособности этих хрупких структур. В то же время популярность приобрело «разрезание макетов» на отдельные элементы. Дизайнеры рисовали красивые макеты, а разделением их на части поменьше и склеиванием их так, чтобы дизайн работал как надо, занимались разработчики. С другой стороны, таблицы обладали такими шикарными особенностями, как возможность выравнивать содержимое по вертикали, определять его размеры в пикселях и в процентах. Главным преимуществом таблиц было то, что они позволяли максимально близко воссоздать структуру сетки. Таблицы — начало (1995)

№ слайда 4 Ответом на ограничения HTML был Javascript. Javascript приходит на помощь (19
Описание слайда:

Ответом на ограничения HTML был Javascript. Javascript приходит на помощь (1995)

№ слайда 5 Дизайнер мог работать с любыми формами, размерами макетов, анимациями, взаимо
Описание слайда:

Дизайнер мог работать с любыми формами, размерами макетов, анимациями, взаимодействиями и использовать любой шрифт и все это при помощи одного инструмента — технологии Flash. Конечный результат работы упаковывался в один файл, а после этого отправлялся в браузер для отображения. Все это работало при условии, что у пользователя стояла последняя версия flash plugin и было немного свободного времени для того, чтобы подождать, пока содержимое загрузиться. Выглядело это волшебно. То время было золотой эпохой ярких страниц приветствия, вводных анимаций и всякого рода интерактивных эффектов. К сожалению, технологии явно не хватало открытости, дружественности к поиску, а потребление ресурсов Flash было по-настоящему большим.  Золотая эпоха свободы – Flash (1996)

№ слайда 6 Его базовая концепция заключалась в разделении функций контейнера содержимого
Описание слайда:

Его базовая концепция заключалась в разделении функций контейнера содержимого и функций его представления, таким образом, что сам контент помещался в HTML, а его визуальное форматирование происходило при помощи CSS. CSS (1998)

№ слайда 7 Просмотр веба на мобильных телефонах уже сам по себе был испытанием. А кроме
Описание слайда:

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

№ слайда 8 Умный парень по имени Итан Мэркот решил бросить вызов существующему подходу,
Описание слайда:

Умный парень по имени Итан Мэркот решил бросить вызов существующему подходу, предложив отображать одинаковое содержимое, используя при этом разные формы макетов для его представления, назвав это термином «Responsive web design» (адаптивный веб-дизайн).  Главное преимущество такого подхода заключается в сохранении одного и того же контента на разных макетах.  Адаптивный веб-дизайн (2010)

№ слайда 9 Отрисовка большего количества макетов требует больше времени. Исходя из этого
Описание слайда:

Отрисовка большего количества макетов требует больше времени. Исходя из этого, к нашему общему счастью, дизайнеры решили рационализировать процесс, избавившись от замысловатых эффектов теней и вернувшись обратно к истокам дизайна, отдав приоритет содержимому. Качественные фотоматериалы, подбор шрифтового оформления, красочные иллюстрации и продуманные макеты — таков дизайн, каким мы создаем его сегодня. Упрощение визуальных элементов, или так называемый «плоский дизайн» также является частью этого процесса. Главное его преимущество в том, что материалам, приоритетности отображаемой информации и содержимому в целом уделяется гораздо больше внимания. Глянцевые кнопки заменяются иконками, это позволяет нам использовать векторные изображения и шрифты-иконки. Упрощение (2010)

№ слайда 10 Минимализм является популярнейшим трендом среди многих дизайнеров. Обычно на
Описание слайда:

Минимализм является популярнейшим трендом среди многих дизайнеров. Обычно на сайтах в стиле минимализм внимание пользователя стараются сфокусировать на чем-то конкретном, т.е. рисуется какой-то отдельный элемент, отличный от всего остального (картинка в центре экрана, или большая надпись). К характерным чертам минимализма относятся: 1. Простота и понятность; 2. Минимум графических элементов; 3. Функциональный интерфейс; 4. Черно-белый цвет; 5. Минимальные тени. Стили в web-дизайне

№ слайда 11 примеры
Описание слайда:

примеры

№ слайда 12
Описание слайда:

№ слайда 13
Описание слайда:

№ слайда 14 Плоский (flat) дизайн. В основу flat дизайна ложится двумерный стиль. Основна
Описание слайда:

Плоский (flat) дизайн. В основу flat дизайна ложится двумерный стиль. Основная идея этого стиля — изображение геометрии элемента только с помощью цветов, без каких-либо других способов придания глубины: теней, скосов, рельефов, градиентов. Характерные особенности: 1. Никаких дополнительных эффектов; 2. Использование простых фигур; 3. Контрастные цветовые решения; 4. Акцент на типографике. Стили в web-дизайне

№ слайда 15
Описание слайда:

№ слайда 16
Описание слайда:

№ слайда 17
Описание слайда:

№ слайда 18
Описание слайда:

№ слайда 19 Обычно его позиционируют как легкий, простой, быстрый и открытый. В общем и ц
Описание слайда:

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

№ слайда 20
Описание слайда:

№ слайда 21
Описание слайда:

№ слайда 22
Описание слайда:

№ слайда 23 Нестандартная геометрия также приобрела популярность в этом году. В основном,
Описание слайда:

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

№ слайда 24
Описание слайда:

№ слайда 25
Описание слайда:

№ слайда 26
Описание слайда:

№ слайда 27 Ретро стиль взят из эпохи 50-80 годов с афиш, плакатов и прочей атрибутики то
Описание слайда:

Ретро стиль взят из эпохи 50-80 годов с афиш, плакатов и прочей атрибутики того времени. Довольно часто дизайнеры, вдохновившись такой работой, рисуют сайт в ретро стиле. К популярным элементам оформления можно отнести:  1. Использование текстур (в частности, бумаги во всех её видах — типографская, рваная, пожелтевшая — или текстур, похожих на бумагу), а также использование всевозможных потертостей для придания старины; 2. Декоративные элементы (рамочки, узоры, флажки, ленточки, линии — двойные, тройные); 3. Ретро-цвета (не сочные, а приглушенные); 4. Характерная замысловатая типографика (шрифты плакатного типа). Винтаж (ретро стиль)

№ слайда 28
Описание слайда:

№ слайда 29
Описание слайда:

№ слайда 30
Описание слайда:

№ слайда 31
Описание слайда:

№ слайда 32 Акцентирование Это выделение особенной значимости, или важности элемента, при
Описание слайда:

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

№ слайда 33
Описание слайда:

№ слайда 34 Это визуальное разделение двух, или более элементов дизайна. Для лучшей четко
Описание слайда:

Это визуальное разделение двух, или более элементов дизайна. Для лучшей четкости обозначения разделов (элементов) своего сайта рекомендуется использовать высокое контрастирование. Есть много различных характеристик графики, которыми можно оперировать для достижения необходимой контрастности предметов на вашем сайте. Ими могут являться размер, цвет, шрифты для текста, тип плоскости, на которой расположены ваши раздели и еще много факторов.  Контрастирование

№ слайда 35
Описание слайда:

№ слайда 36 Понятие балансировки означает соотношение и распределение отдельных элементов
Описание слайда:

Понятие балансировки означает соотношение и распределение отдельных элементов на общем полотне макета. Нужно суметь равномерно разместить визуальную нагрузку на глаза читателя. Чем плавнее удастся это сделать, тем дольше посетитель «застрянет» на вашем портале.  Баланс бывает двух видов: Симметричный Ассиметричный  Балансировка

№ слайда 37
Описание слайда:

№ слайда 38
Описание слайда:

№ слайда 39 Его принцип очень легок — упорядочение и сведение всех элементов сайта, чтобы
Описание слайда:

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

№ слайда 40
Описание слайда:

№ слайда 41 Этот эффект подразумевает использование одних и тех же графических элементов
Описание слайда:

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

№ слайда 42
Описание слайда:

№ слайда 43
Описание слайда:


Автор
Дата добавления 11.10.2015
Раздел Информатика
Подраздел Презентации
Просмотров420
Номер материала ДВ-050584
Получить свидетельство о публикации


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