Документ охватывает историю веб-дизайна с 1969 года, описывая ключевые события и тренды, такие как появление первых браузеров и эволюцию дизайна до 2015 года. В нем рассматриваются основные направления развития дизайна, включая минимализм, адаптивный дизайн, и новые технологии, такие как интеграция 3D-объектов и персонализированный пользовательский опыт. Также рассматриваются современные тренды в логотипах и ассоциации, которые влияют на восприятие брендов.

1. Стажировка-2015. Дизайнеры. Занятие 1
История web-дизайна.
Тренды-2015. Логотипы

2. Стажировка-2015
История веб-дизайна
1969 зарождение интернета
1972 широкий доступ
1980-е Тим Бернерс-Ли: зарождение гипертектста (WWW)
1991 первый веб-сайт:

3. Стажировка-2015
История веб-дизайна
1993 выход первой версии графического браузера Mosaic:
Интуитивно понятный интерфейс, стабильность работы, простота установки и кросс-
платформенность (Mosaic стал первым браузером, доступным одновременно для всех
действующихнатотмоментоперационныхсистем,включаяWindows,MacintoshиUnix).
Вслед за этим появились браузеры Netscape Navigator и Microsoft Internet Explorer.

4. Стажировка-2015
История веб-дизайна
1996 начало новой эры, «позорный период» для веб-дизайнеров

5. Стажировка-2015
История веб-дизайна
1996 первый дизайн веб-сайта от Altavista. Просто и полезно.
Появляется YAHOO

6. Стажировка-2015
История веб-дизайна
Тенденции: яркая палитра, системные шрифты, отсутствие эффектов, черный текст,
красные заголовки и синие подчеркнутые ссылки

7. Стажировка-2015
История веб-дизайна
1998 начинается более серьёзный подход к дизайну (рамки, табличные макеты,
меню с эффектами при наведении)

8. Стажировка-2015
История веб-дизайна
2005 эпоха web 2.0 (округлость, имитация выпуклых поверхностей,
имитация отражений)

9. Стажировка-2015
История веб-дизайна
2008-2011 новые тенденции мобильных веб-приложений благодаря Apple
появляются мобильные версии сайтов и приложения для mobile
в дизайне сайтов - ретро, лёгкость, прозрачность

10. Стажировка-2015
История веб-дизайна
2012-2014 Минимализм + Flat UI, long shadow, адаптивный дизайн,
фиксированное меню вверху страницы, изображения на фон
страницы, дизайнерская типографика, параллакс, flat-иллюстации.

11. Стажировка-2015
Тренды веб-дизайна 2015
1. Matherial Design
Изобретение Google.
http://www.google.com/design/
Флэту добавляется ровно столько
реалистичности, чтобы сделать
интерфейс «говорящим», дающим
подсказки пользователям, как им
действовать.
Вся анимация также служит
этой миссии.
2. Морфинг (morphing)
Изменение формы/цвета/размера
кнопок, инпутов в зависимости от
изменения их назначения. Один из самых
первых примеров — «разъезжающееся»
поле поиска на сайте Apple.

12. Стажировка-2015
Тренды веб-дизайна 2015
3. Авторские иллюстрации 4. Авторизация через соцсети
На контрасте с похожими друг на друга
«плоскими» иллюстрациями - работы
с уникальным авторским стилем.

13. Стажировка-2015
Тренды веб-дизайна 2015
5. Сторителлинг, сайты-истории 6. Анимированные ховеры
Сайт-история сильнее вступает в
коммуникацию с пользователем, нежели
«просто сайт», где сухо перечисляют
преимущества продукта.
Сайт-история — это современная форма
промо-сайта,однакотребующаясерьезной
работы с контентом.
Эффекты, побуждающие
пользователя кликать, всегда будут
востребованы.
Библиотеки готовых эффектов для css

14. Стажировка-2015
Тренды веб-дизайна 2015
7. Рассвет вебграфики
Как и инфографика, вебграфика
также передает большие объемы
информации, но включает в себя
интерактивные элементы, которые
позволяют пользователю физически
взаимодействовать с информацией.
8. Автоматизация верстки
Дизайнеры могут создавать сайты, не
написав ни единой строчки кода.

15. Стажировка-2015
Тренды веб-дизайна 2015
9. Встроенные интерактивные
3D-объекты
Когда пользователь может не только
запускать своими действиями
«запрограммированную» анимацию,
но и вертеть объект, как ему
заблагорассудится — это максимальный
уровень взаимодействия его с сайтом.
14. Персонализированный UX.
Так, например, YouTube запоминает,
что смотрел пользователь и
меняет структуру главной страницы
в соответствии с этим. Отражение
интересов пользователя — всегда
лучше, чем одно универсальное
предложение для всех.
10. Акцент на типографику
11. Фоновое видео встроенное на
HTML5.
12. Большие фоновые фотографии.
Еще больше!
13. «Карточный» дизайн (а-ля Pinterest).

16. Стажировка-2015
Тренды в логотипах 2015
Сложный лайнартНаложение элементов Полигональные лого

17. Стажировка-2015
Тренды в логотипах 2015
Прямоугольные
штампы
Антиформа
(негативное пространство)
Потертые текстуры

18. Стажировка-2015
Тренды в логотипах 2015
Многослойные градиенты
Динамическая айдентика
Каллиграфия, рукописные шрифты

19. Стажировка-2015
ассоциации в дизайне логотипов
Ассоциации
первого уровня
самые очевидные связи, которые
возникают у человека мгновенно,
когда он обращает внимание
на предмет или явление. Если
обзывать их каким-то одним словом,
то, пожалуй, подойдет термин
«рефлекс» — моментальная реакция
на раздражение, врожденная или
приобретенная с опытом. Мозг почти
не работает. Эмоции нулевые.

20. Стажировка-2015
ассоциации в дизайне логотипов
Ассоциации
второго уровня
связи между событиями,
предметами, явлениями и фактами,
найденные после некоторой
мыслительной деятельности,
основанной на знаниях и опыте
человека. Если обозвать их каким-
то одним словом, то, пожалуй,
подойдет термин «логика». Первые
импульсы и рефлексы оставлены
позади. Частично начинают
включаться эмоции.

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