Стажировка 2015. Дизайн. Занятие 1. История дизайна, тренды 2015, логотипы

Стажировка-2015. Дизайнеры. Занятие 1

ИсторИя web-дИзайна. тренды-2015. ЛоготИпы

Стажировка-2015

ИсторИя веб-дИзайна

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


ИсторИя веб-дИзайна1993 выход первой версии графического браузера Mosaic:

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


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


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


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


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


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


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


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


тренды веб-дИзайна 2015

1. Matherial Design

Изобретение Google.http://www.google.com/design/Флэту добавляется ровно столько реалистичности, чтобы сделать интерфейс «говорящим», дающимподсказки пользователям, как имдействовать. Вся анимация также служит этой миссии.

2. Морфинг (morphing)

Изменение формы/цвета/размеракнопок, инпутов в зависимости от изменения их назначения. Один из самых первых примеров — «разъезжающееся» поле поиска на сайте Apple.

http://www.google.com/design/



3. Авторские иллюстрации 4. Авторизация через соцсети

На контрасте с похожими друг на друга «плоскими» иллюстрациями - работы с уникальным авторским стилем.



5. Сторителлинг, сайты-истории 6. Анимированные ховеры

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

Эффекты, побуждающие пользователя кликать, всегда будут востребованы.Библиотеки готовых эффектов для css



7. Рассвет вебграфики

Как и инфографика, вебграфика также передает большие объемы информации, но включает в себя интерактивные элементы, которые позволяют пользователю физически взаимодействовать с информацией.

8. Автоматизация верстки

Дизайнеры могут создавать сайты, не написав ни единой строчки кода.


тренды веб-дИзайна 20159. Встроенные интерактивные 3D-объекты

Когда пользователь может не только запускать своими действиями «запрограммированную» анимацию, но и вертеть объект, как ему заблагорассудится — это максимальный уровень взаимодействия его с сайтом.

14. Персонализированный UX. Так, например, YouTube запоминает, что смотрел пользователь и меняет структуру главной страницы в соответствии с этим. Отражение интересов пользователя — всегда лучше, чем одно универсальное предложение для всех.

10. Акцент на типографику

11. Фоновое видео встроенное на HTML5.

12. Большие фоновые фотографии. Еще больше!

13. «Карточный» дизайн (а-ля Pinterest).


тренды в логотИпах 2015

Сложный лайнартНаложение элементов Полигональные лого



Прямоугольные штампы

Антиформа(негативное пространство)

Потертые текстуры



Многослойные градиенты

Динамическая айдентика

Каллиграфия, рукописные шрифты


ассоцИацИИ в дИзайне логотИпов

Ассоциации первого уровня

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



Ассоциации второго уровня

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



Ассоциации третьегоуровня

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

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

солнце: тепло, энергия, жизнь. цветок: экологичность продукции, забота об окружающей среде.

динамика, скорость и победа

Education

Стажировка 2015. Дизайн. Занятие 1. История дизайна, тренды 2015, логотипы