342374
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
+Добавить материал
и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
Дистанционные курсы профессиональной переподготовки и повышения квалификации для педагогов

Дистанционные курсы для педагогов - курсы профессиональной переподготовки от 6.900 руб.;
- курсы повышения квалификации от 1.500 руб.
Престижные документы для аттестации

ВЫБРАТЬ КУРС СО СКИДКОЙ 50%

ВНИМАНИЕ: Скидка действует ТОЛЬКО сейчас!

(Лицензия на осуществление образовательной деятельности № 5201 выдана ООО "Инфоурок")

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

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

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

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

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 слайд
Описание слайда:

Общая информация

Номер материала: ДВ-050584

Вам будут интересны эти курсы:

Курс повышения квалификации «Табличный процессор MS Excel в профессиональной деятельности учителя математики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Современные информационные технологии и их использование в работе преподавателей. Системы автоматизированного проектирования одежды и организация технологического процесса»
Курс повышения квалификации «Основы создания интерактивного урока: от презентации до видеоурока»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс повышения квалификации «Облачные технологии в образовании»
Курс «Фирменный стиль» (Corel Draw, Photoshop)
Курс «Оператор персонального компьютера»
Курс «1С: Предприятие 7.7»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»

Благодарность за вклад в развитие крупнейшей онлайн-библиотеки методических разработок для учителей

Опубликуйте минимум 3 материала, чтобы БЕСПЛАТНО получить и скачать данную благодарность

Сертификат о создании сайта

Добавьте минимум пять материалов, чтобы получить сертификат о создании сайта

Грамота за использование ИКТ в работе педагога

Опубликуйте минимум 10 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

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

Опубликуйте минимум 15 материалов, чтобы БЕСПЛАТНО получить и скачать данное cвидетельство

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

Опубликуйте минимум 20 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Грамота за активное участие в работе над повышением качества образования совместно с проектом "Инфоурок"

Опубликуйте минимум 25 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Почётная грамота за научно-просветительскую и образовательную деятельность в рамках проекта "Инфоурок"

Опубликуйте минимум 40 материалов, чтобы БЕСПЛАТНО получить и скачать данную почётную грамоту

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