View
57
Download
1
Category
Preview:
Citation preview
Стажировка-2015. Дизайнеры. Занятие 1
ИсторИя web-дИзайна. тренды-2015. ЛоготИпы
Стажировка-2015
ИсторИя веб-дИзайна
1969 зарождение интернета 1972 широкий доступ1980-е Тим Бернерс-Ли: зарождение гипертектста (WWW)1991 первый веб-сайт:
Стажировка-2015
ИсторИя веб-дИзайна1993 выход первой версии графического браузера Mosaic:
Интуитивно понятный интерфейс, стабильность работы, простота установки и кросс-платформенность (Mosaic стал первым браузером, доступным одновременно для всех действующих на тот момент операционных систем, включая Windows, Macintosh и Unix). Вслед за этим появились браузеры Netscape Navigator и Microsoft Internet Explorer.
Стажировка-2015
ИсторИя веб-дИзайна1996 начало новой эры, «позорный период» для веб-дизайнеров
Стажировка-2015
ИсторИя веб-дИзайна1996 первый дизайн веб-сайта от Altavista. Просто и полезно. Появляется YAHOO
Стажировка-2015
ИсторИя веб-дИзайнаТенденции: яркая палитра, системные шрифты, отсутствие эффектов, черный текст, красные заголовки и синие подчеркнутые ссылки
Стажировка-2015
ИсторИя веб-дИзайна1998 начинается более серьёзный подход к дизайну (рамки, табличные макеты, меню с эффектами при наведении)
Стажировка-2015
ИсторИя веб-дИзайна2005 эпоха web 2.0 (округлость, имитация выпуклых поверхностей, имитация отражений)
Стажировка-2015
ИсторИя веб-дИзайна2008-2011 новые тенденции мобильных веб-приложений благодаря Apple появляются мобильные версии сайтов и приложения для mobile в дизайне сайтов - ретро, лёгкость, прозрачность
Стажировка-2015
ИсторИя веб-дИзайна 2012-2014 Минимализм + Flat UI, long shadow, адаптивный дизайн, фиксированное меню вверху страницы, изображения на фон страницы, дизайнерская типографика, параллакс, flat-иллюстации.
Стажировка-2015
тренды веб-дИзайна 2015
1. Matherial Design
Изобретение Google.http://www.google.com/design/Флэту добавляется ровно столько реалистичности, чтобы сделать интерфейс «говорящим», дающимподсказки пользователям, как имдействовать. Вся анимация также служит этой миссии.
2. Морфинг (morphing)
Изменение формы/цвета/размеракнопок, инпутов в зависимости от изменения их назначения. Один из самых первых примеров — «разъезжающееся» поле поиска на сайте Apple.
Стажировка-2015
тренды веб-дИзайна 2015
3. Авторские иллюстрации 4. Авторизация через соцсети
На контрасте с похожими друг на друга «плоскими» иллюстрациями - работы с уникальным авторским стилем.
Стажировка-2015
тренды веб-дИзайна 2015
5. Сторителлинг, сайты-истории 6. Анимированные ховеры
Сайт-история сильнее вступает в коммуникацию с пользователем, нежели «просто сайт», где сухо перечисляют преимущества продукта. Сайт-история — это современная форма промо-сайта, однако требующая серьезной работы с контентом.
Эффекты, побуждающие пользователя кликать, всегда будут востребованы.Библиотеки готовых эффектов для css
Стажировка-2015
тренды веб-дИзайна 2015
7. Рассвет вебграфики
Как и инфографика, вебграфика также передает большие объемы информации, но включает в себя интерактивные элементы, которые позволяют пользователю физически взаимодействовать с информацией.
8. Автоматизация верстки
Дизайнеры могут создавать сайты, не написав ни единой строчки кода.
Стажировка-2015
тренды веб-дИзайна 20159. Встроенные интерактивные 3D-объекты
Когда пользователь может не только запускать своими действиями «запрограммированную» анимацию, но и вертеть объект, как ему заблагорассудится — это максимальный уровень взаимодействия его с сайтом.
14. Персонализированный UX. Так, например, YouTube запоминает, что смотрел пользователь и меняет структуру главной страницы в соответствии с этим. Отражение интересов пользователя — всегда лучше, чем одно универсальное предложение для всех.
10. Акцент на типографику
11. Фоновое видео встроенное на HTML5.
12. Большие фоновые фотографии. Еще больше!
13. «Карточный» дизайн (а-ля Pinterest).
Стажировка-2015
тренды в логотИпах 2015
Сложный лайнартНаложение элементов Полигональные лого
Стажировка-2015
тренды в логотИпах 2015
Прямоугольные штампы
Антиформа(негативное пространство)
Потертые текстуры
Стажировка-2015
тренды в логотИпах 2015
Многослойные градиенты
Динамическая айдентика
Каллиграфия, рукописные шрифты
Стажировка-2015
ассоцИацИИ в дИзайне логотИпов
Ассоциации первого уровня
самые очевидные связи, которые возникают у человека мгновенно, когда он обращает внимание на предмет или явление. Если обзывать их каким-то одним словом, то, пожалуй, подойдет термин «рефлекс» — моментальная реакция на раздражение, врожденная или приобретенная с опытом. Мозг почти не работает. Эмоции нулевые.
Стажировка-2015
ассоцИацИИ в дИзайне логотИпов
Ассоциации второго уровня
связи между событиями, предметами, явлениями и фактами, найденные после некоторой мыслительной деятельности, основанной на знаниях и опыте человека. Если обозвать их каким-то одним словом, то, пожалуй, подойдет термин «логика». Первые импульсы и рефлексы оставлены позади. Частично начинают включаться эмоции.
Стажировка-2015
ассоцИацИИ в дИзайне логотИпов
Ассоциации третьегоуровня
связи между событиями, предметами, явлениями и фактами, бессознательно улавливаемые человеком. Графический образ, основанный на ассоциации третьего уровня, может иметь крайне условное отношение к предмету, который он символизирует, или не иметь его вовсе.
Как показывает практика, ассоциации третьего уровня максимально эффективны при ребрендинге и хорошо приживаются на старой компании, которая всем известна.
солнце: тепло, энергия, жизнь. цветок: экологичность продукции, забота об окружающей среде.
динамика, скорость и победа
Recommended