173
ИКОНОГРАФИКА РАЗРАБОТКА ИКОНОК ДЛЯ МОБИЛЬНЫХ ПРИЛОЖЕНИЙ

Иконографика. Разработка иконок для мобильных приложений

  • Upload
    m18

  • View
    1.157

  • Download
    2

Embed Size (px)

DESCRIPTION

Видео http://youtu.be/C_c0kgKDObE — Основные подходы к генерации идей в рассматриваемой предметной области. — Процесс разработки и приёмы создания реалистичных иконок. — Разбор кейсов. Влияние последних тенденций, переход на новый смысловой уровень. — Прогнозы развития. Видео http://youtu.be/7BHvsODrubY Студия M18 http://m18.ru/

Citation preview

Page 1: Иконографика. Разработка иконок для мобильных приложений

И КО Н О Г РА Ф И К АРАЗРАБОТКА ИКОНОК ДЛЯ МОБИЛЬНЫХ ПРИЛОЖЕНИЙ

Page 2: Иконографика. Разработка иконок для мобильных приложений

САЙТЫИКОНКИИЛЛЮСТРАЦИИАЙДЕНТИКА

РАСКРУТКА ГРУПП ВКОНТАКТЕ

«ШАПКИ» ДЛЯ САЙТОВ

НАРИСОВАТЬ ВИЗИТКУ

РАСПЕЧАТАТЬ ФЛАЕР

ОБРАБОТАТЬ ФОТОГРАФИЮ

САЙТВИЗИТКА ЗА ОДИН ДЕНЬ

ПОЧИНИТЬ КОМПЬЮТЕР

ПЕРЕУСТАНОВИТЬ СИСТЕМУ

ПЕРЕПРОШИТЬ ТЕЛЕФОН

Page 3: Иконографика. Разработка иконок для мобильных приложений
Page 4: Иконографика. Разработка иконок для мобильных приложений

30% 70%РОССИЯ НЕ РОССИЯ

Page 5: Иконографика. Разработка иконок для мобильных приложений

НЕДЕЛЯ МЕСЯЦmin max

Page 6: Иконографика. Разработка иконок для мобильных приложений
Page 7: Иконографика. Разработка иконок для мобильных приложений

FREELANCEMAGAZINE

интервью интервью публикация

Page 8: Иконографика. Разработка иконок для мобильных приложений

О С Н О В Ы

Page 9: Иконографика. Разработка иконок для мобильных приложений

ЗНАКИКОНКА

ЛОГОТИП

СИМВОЛ

ЗНАЧОК

ПИКТОГРАММА

ИЕРОГЛИФ

РИСУНОК

ИЗОБРАЖЕНИЕ

ИЛЛЮСТРАЦИЯ

СЛОВО

это материально выраженная замена предметов, явлений, понятий в процессе обмена информацией

Page 10: Иконографика. Разработка иконок для мобильных приложений

ЗНАКСМЫСЛСОДЕРЖАНИЕ

ВЫРАЖАЕТИМЕЕТ

Предмет, явление, понятие,представляемое данным знаком

Информация которую содержит сам знакили которая которая связывается

с ним в процессе познания

Page 11: Иконографика. Разработка иконок для мобильных приложений
Page 12: Иконографика. Разработка иконок для мобильных приложений

СОДЕРЖАНИЕ СМЫСЛ

Page 13: Иконографика. Разработка иконок для мобильных приложений
Page 14: Иконографика. Разработка иконок для мобильных приложений

СМЫСЛСОДЕРЖАНИЕ

go!

Page 15: Иконографика. Разработка иконок для мобильных приложений

СМЫСЛСОДЕРЖАНИЕ

Page 16: Иконографика. Разработка иконок для мобильных приложений

PHILIPS EL3300Один из первых в мире магнитофоновпод компакт-кассету, 1965 год

Page 17: Иконографика. Разработка иконок для мобильных приложений

PHILIPS EL3300Один из первых в мире магнитофоновпод компакт-кассету, 1965 год

Page 18: Иконографика. Разработка иконок для мобильных приложений

PHILIPS EL3300 ДЕСНА

Page 19: Иконографика. Разработка иконок для мобильных приложений

ФОТОГРАФИЯ

РИСУНОК

ИКОНКА

ФОТОГРАФИЯ

РИСУНОК

ИКОНКА

Page 20: Иконографика. Разработка иконок для мобильных приложений

З Н А К Т Е КС Т

Page 21: Иконографика. Разработка иконок для мобильных приложений
Page 22: Иконографика. Разработка иконок для мобильных приложений
Page 23: Иконографика. Разработка иконок для мобильных приложений

ПОЗОР?

Page 24: Иконографика. Разработка иконок для мобильных приложений

ВНИМАНИЕ,ЛЯГУШКИ

Page 25: Иконографика. Разработка иконок для мобильных приложений

В КАКУЮ СТОРОНУВЫХОД В АЭРОПОРТ?

Page 26: Иконографика. Разработка иконок для мобильных приложений

ТЕПЕРЬ ЯСНО

Page 27: Иконографика. Разработка иконок для мобильных приложений
Page 28: Иконографика. Разработка иконок для мобильных приложений

З Н А КТ Е КС Т

Page 29: Иконографика. Разработка иконок для мобильных приложений

ВАСИЛИЙПРИНЁСФАКЕЛ

ЗИНАИДЕ

Page 30: Иконографика. Разработка иконок для мобильных приложений

ВАСИЛИЙБЕЗ НОГ,

ЗИНАИДАСГОРЕЛА

Page 31: Иконографика. Разработка иконок для мобильных приложений

Г РА Ф И Ч Е С К И ЙИ Н Т Е Р Ф Е Й С

Page 32: Иконографика. Разработка иконок для мобильных приложений
Page 33: Иконографика. Разработка иконок для мобильных приложений

XEROX ALTO Первый в мире компьютериспользующий метафору «рабочего стола»

Page 34: Иконографика. Разработка иконок для мобильных приложений

СЬЮЗЕН КЭРАвтор иконок для Apple Macintosh 1.0 и Windows 3.0

Page 35: Иконографика. Разработка иконок для мобильных приложений

1983 1991

1997 2001

Page 36: Иконографика. Разработка иконок для мобильных приложений

М О Б И Л Ь Н Ы ЙИ Н Т Е Р Ф Е Й С

Page 37: Иконографика. Разработка иконок для мобильных приложений

800 0001 300 000

П Р И Л О Ж Е Н И Я

Page 38: Иконографика. Разработка иконок для мобильных приложений

140 000 000 00085 000 000 000

З А Г Р У З К И

Page 39: Иконографика. Разработка иконок для мобильных приложений
Page 40: Иконографика. Разработка иконок для мобильных приложений
Page 41: Иконографика. Разработка иконок для мобильных приложений
Page 42: Иконографика. Разработка иконок для мобильных приложений
Page 43: Иконографика. Разработка иконок для мобильных приложений
Page 44: Иконографика. Разработка иконок для мобильных приложений
Page 45: Иконографика. Разработка иконок для мобильных приложений

З АЧ Е М ?

Page 46: Иконографика. Разработка иконок для мобильных приложений
Page 47: Иконографика. Разработка иконок для мобильных приложений

«В ЧЕЛОВЕКЕ ВСЁ ДОЛЖНО БЫТЬ ПРЕКРАСНО: И ЛИЦО, И ОДЕЖДА, И ДУША, И МЫСЛИ»

Page 48: Иконографика. Разработка иконок для мобильных приложений

«В ПРИЛОЖЕНИИ ВСЁ ДОЛЖНО БЫТЬ ПРЕКРАСНО: И ИДЕЯ, И ИНТЕРФЕЙС, И КОД, И ИКОНКА»

Page 49: Иконографика. Разработка иконок для мобильных приложений

САМОРЕАЛИЗАЦИЯ

СТАТУС ДИЗАЙН

ОБЩЕНИЕ КОД

БЕЗОПАСНОСТЬ

ФИЗИОЛОГИЧЕСКИЕ

УДОБСТВО

ФУНКЦИОНАЛ

Page 50: Иконографика. Разработка иконок для мобильных приложений

САМОРЕАЛИЗАЦИЯИКОНКА

СТАТУС ДИЗАЙН

ОБЩЕНИЕ КОД

БЕЗОПАСНОСТЬ

ФИЗИОЛОГИЧЕСКИЕ

УДОБСТВО

ФУНКЦИОНАЛ

Page 51: Иконографика. Разработка иконок для мобильных приложений

ЭТО КАК ХОРОШИЙ КОСТЮМ

Page 52: Иконографика. Разработка иконок для мобильных приложений

К Л А С С И Ф И К А Ц И Я

Page 53: Иконографика. Разработка иконок для мобильных приложений

ВИДЫ

ИГРОВЫЕ

ПЕРСОНАЖ

ПРЕДМЕТ

ФУНКЦИЯ

АБСТРАКЦИЯ

БУКВИЦА

БРЕНД

ФОТО

ТЕКСТ

Page 54: Иконографика. Разработка иконок для мобильных приложений

ИГРОВЫЕ

Page 55: Иконографика. Разработка иконок для мобильных приложений

ПЕРСОНАЖ

Page 56: Иконографика. Разработка иконок для мобильных приложений

ПРЕДМЕТ

Page 57: Иконографика. Разработка иконок для мобильных приложений

ФУНКЦИЯ

Page 58: Иконографика. Разработка иконок для мобильных приложений

АБСТРАКЦИЯ

Page 59: Иконографика. Разработка иконок для мобильных приложений

БУКВИЦА

Page 60: Иконографика. Разработка иконок для мобильных приложений

БРЕНД

Page 61: Иконографика. Разработка иконок для мобильных приложений

ТЕКСТ

Page 62: Иконографика. Разработка иконок для мобильных приложений

ФОТО

Page 63: Иконографика. Разработка иконок для мобильных приложений

ШАШЛЫК

Page 64: Иконографика. Разработка иконок для мобильных приложений

П Р О Ц Е С СРА З РА Б О Т К И

Page 65: Иконографика. Разработка иконок для мобильных приложений

ИГРОВЫЕПЕРСОНАЖФУНКЦИЯАБСТРАКЦИЯ

БУКВИЦАБРЕНДФОТОГРАФИЯТЕКСТ

Page 66: Иконографика. Разработка иконок для мобильных приложений

ПОСТАНОВКА ЗАДАЧИ

РАЗРАБОТКА КОНЦЕПЦИИ

ЭСКИЗЫ И СТИЛЬБОРД

ЧЕРНОВАЯ ПРОРИСОВКА

ФИНАЛЬНАЯ ПРОРИСОВКА

АДАПТАЦИИ

Page 67: Иконографика. Разработка иконок для мобильных приложений

ПОСТАНОВКА ЗАДАЧИ

РАЗРАБОТКА КОНЦЕПЦИИ

ЭСКИЗЫ И СТИЛЬБОРД

ЧЕРНОВАЯ ПРОРИСОВКА

ФИНАЛЬНАЯ ПРОРИСОВКА

АДАПТАЦИИ

Page 68: Иконографика. Разработка иконок для мобильных приложений

1 . П О С Т А Н О В К А З А Д А Ч И

Page 69: Иконографика. Разработка иконок для мобильных приложений

БРИФВВОДНАЯ ИНФОРМАЦИЯ

Page 70: Иконографика. Разработка иконок для мобильных приложений

2 . С Т Р У К Т У Р И Р О В А Н И Е

Page 71: Иконографика. Разработка иконок для мобильных приложений

ИНФОРМАЦИОННАЯ БАЗАРЕФЕРЕСЫ, КОРКУРЕНТЫ, АНАЛОГИ

Page 72: Иконографика. Разработка иконок для мобильных приложений

Pinterest Realtime Board Tumbler Illustrator

Page 73: Иконографика. Разработка иконок для мобильных приложений

3 . А Н А Л И З

Page 74: Иконографика. Разработка иконок для мобильных приложений

КАРТА АССОЦИАЦИЙИДЕИ И ОБРАЗЫ ИЗ БАЗЫ

Page 75: Иконографика. Разработка иконок для мобильных приложений

CoggleGoogle Keep

Page 76: Иконографика. Разработка иконок для мобильных приложений

4 . Г Е Н Е Р А Ц И Я

Page 77: Иконографика. Разработка иконок для мобильных приложений
Page 78: Иконографика. Разработка иконок для мобильных приложений

КОМБИНАЦИЯ

+

Page 79: Иконографика. Разработка иконок для мобильных приложений

ТРАНСФОРМАЦИЯСВОЙСТВ

Page 80: Иконографика. Разработка иконок для мобильных приложений

С Т Р У К Т У Р И Р О В А Н И Е

А Н А Л И З

Г Е Н Е Р А Ц И Я

Page 81: Иконографика. Разработка иконок для мобильных приложений

РЕБУСОЧЕВИДНЫЙСЮЖЕТ

БАЛАНС

Page 82: Иконографика. Разработка иконок для мобильных приложений

РЕБУСБАНАЛЬНО

Page 83: Иконографика. Разработка иконок для мобильных приложений

НЕПОНЯТНООЧЕВИДНЫЙСЮЖЕТ

Page 84: Иконографика. Разработка иконок для мобильных приложений
Page 85: Иконографика. Разработка иконок для мобильных приложений
Page 86: Иконографика. Разработка иконок для мобильных приложений
Page 87: Иконографика. Разработка иконок для мобильных приложений

СТИЛЬБОРДЭСКИЗЫ

Page 88: Иконографика. Разработка иконок для мобильных приложений

ЧЕРНОВАЯПРОРИСОВКА

БАЗОВЫЕ ФОРМЫ

КОМПОЗИЦИЯ

ПРОПОРЦИИ

ЦВЕТ

ТЕНИ

ТЕКСТУРЫ

Page 89: Иконографика. Разработка иконок для мобильных приложений

КОМПОЗИЦИЯ

ЦВЕТ

ТЕНИ

ТЕКСТУРЫ

ОТРАЖЕНИЯ

ДЕТАЛИ

ПОСТОБРАБОТКА

ФИНАЛЬНАЯПРОРИСОВКА

Page 90: Иконографика. Разработка иконок для мобильных приложений

АДАПТАЦИЯРАЗМЕРОВ

Page 91: Иконографика. Разработка иконок для мобильных приложений

К Е Й С Ы

Page 92: Иконографика. Разработка иконок для мобильных приложений
Page 93: Иконографика. Разработка иконок для мобильных приложений

G O L D E N K E Y

Page 94: Иконографика. Разработка иконок для мобильных приложений
Page 95: Иконографика. Разработка иконок для мобильных приложений
Page 96: Иконографика. Разработка иконок для мобильных приложений
Page 97: Иконографика. Разработка иконок для мобильных приложений
Page 98: Иконографика. Разработка иконок для мобильных приложений
Page 99: Иконографика. Разработка иконок для мобильных приложений
Page 100: Иконографика. Разработка иконок для мобильных приложений
Page 101: Иконографика. Разработка иконок для мобильных приложений
Page 102: Иконографика. Разработка иконок для мобильных приложений
Page 103: Иконографика. Разработка иконок для мобильных приложений
Page 104: Иконографика. Разработка иконок для мобильных приложений

Ж У Р Н А Л Ы

Page 105: Иконографика. Разработка иконок для мобильных приложений
Page 106: Иконографика. Разработка иконок для мобильных приложений
Page 107: Иконографика. Разработка иконок для мобильных приложений
Page 108: Иконографика. Разработка иконок для мобильных приложений
Page 109: Иконографика. Разработка иконок для мобильных приложений
Page 110: Иконографика. Разработка иконок для мобильных приложений
Page 111: Иконографика. Разработка иконок для мобильных приложений
Page 112: Иконографика. Разработка иконок для мобильных приложений
Page 113: Иконографика. Разработка иконок для мобильных приложений
Page 114: Иконографика. Разработка иконок для мобильных приложений
Page 115: Иконографика. Разработка иконок для мобильных приложений
Page 116: Иконографика. Разработка иконок для мобильных приложений
Page 117: Иконографика. Разработка иконок для мобильных приложений
Page 118: Иконографика. Разработка иконок для мобильных приложений
Page 119: Иконографика. Разработка иконок для мобильных приложений
Page 120: Иконографика. Разработка иконок для мобильных приложений
Page 121: Иконографика. Разработка иконок для мобильных приложений
Page 122: Иконографика. Разработка иконок для мобильных приложений
Page 123: Иконографика. Разработка иконок для мобильных приложений

С Л Е ТАТ Ь . Р У

Page 124: Иконографика. Разработка иконок для мобильных приложений
Page 125: Иконографика. Разработка иконок для мобильных приложений
Page 126: Иконографика. Разработка иконок для мобильных приложений

Сохранить связь с существующим логотипом

Визуализация темы приложения туризма и полётадля новых пользователей

Визуальная привлекательность и позитивнаяцветовая гамма иконки

1.

2.

3.

ЦЕЛИ

Page 127: Иконографика. Разработка иконок для мобильных приложений
Page 128: Иконографика. Разработка иконок для мобильных приложений
Page 129: Иконографика. Разработка иконок для мобильных приложений
Page 130: Иконографика. Разработка иконок для мобильных приложений
Page 131: Иконографика. Разработка иконок для мобильных приложений
Page 132: Иконографика. Разработка иконок для мобильных приложений

КАРТА АССОЦИАЦИЙ

Поисктуров

Отдых ПляжР акушки

З онт

Лежак

Море

В олна

Песок

Пальмы

В печатления

КруговоротКарусель

Фотограф ии

Достопримечательности Пирамиды

ОтелиЗ везды

Коктейли

Чемодан

Наклейка

В ещи

ШортыПальмы

Б инокль

Б локнот

Футболка

Пляжки

Г лобус

ПолётБ илет

Птица

Перо

Орел

С амолет Б умажный самолет

Аэропорт Т абло прибытия

Паспорт

Поиск

ФильтрацияР езультат

Цель

Подбор

ПараметрыГ раф ики

С писок

Простота

Компас

Карта

МаршрутТ раектория

ПалецМетка

Г орящие турыОгонь

Календарь

С етка

Б ренд « С летать.ру»

Б уква « S »

Логотип

Паттерн

Цветовая гамма

Page 133: Иконографика. Разработка иконок для мобильных приложений

КАРТА АССОЦИАЦИЙ

Поисктуров

Отдых ПляжР акушки

З онт

Лежак

Море

В олна

Песок

Пальмы

В печатления

КруговоротКарусель

Фотограф ии

Достопримечательности Пирамиды

ОтелиЗ везды

Коктейли

Чемодан

Наклейка

В ещи

ШортыПальмы

Б инокль

Б локнот

Футболка

Пляжки

Г лобус

ПолётБ илет

Птица

Перо

Орел

С амолет Б умажный самолет

Аэропорт Т абло прибытия

Паспорт

Поиск

ФильтрацияР езультат

Цель

Подбор

ПараметрыГ раф ики

С писок

Простота

Компас

Карта

МаршрутТ раектория

ПалецМетка

Г орящие турыОгонь

Календарь

С етка

Б ренд « С летать.ру»

Б уква « S »

Логотип

Паттерн

Цветовая гамма

Page 134: Иконографика. Разработка иконок для мобильных приложений
Page 135: Иконографика. Разработка иконок для мобильных приложений
Page 136: Иконографика. Разработка иконок для мобильных приложений
Page 137: Иконографика. Разработка иконок для мобильных приложений
Page 138: Иконографика. Разработка иконок для мобильных приложений
Page 139: Иконографика. Разработка иконок для мобильных приложений
Page 140: Иконографика. Разработка иконок для мобильных приложений
Page 141: Иконографика. Разработка иконок для мобильных приложений

1

Page 142: Иконографика. Разработка иконок для мобильных приложений
Page 143: Иконографика. Разработка иконок для мобильных приложений
Page 144: Иконографика. Разработка иконок для мобильных приложений
Page 145: Иконографика. Разработка иконок для мобильных приложений
Page 146: Иконографика. Разработка иконок для мобильных приложений
Page 147: Иконографика. Разработка иконок для мобильных приложений

2

Page 148: Иконографика. Разработка иконок для мобильных приложений
Page 149: Иконографика. Разработка иконок для мобильных приложений

3

Page 150: Иконографика. Разработка иконок для мобильных приложений
Page 151: Иконографика. Разработка иконок для мобильных приложений
Page 152: Иконографика. Разработка иконок для мобильных приложений
Page 153: Иконографика. Разработка иконок для мобильных приложений
Page 154: Иконографика. Разработка иконок для мобильных приложений
Page 155: Иконографика. Разработка иконок для мобильных приложений
Page 156: Иконографика. Разработка иконок для мобильных приложений
Page 157: Иконографика. Разработка иконок для мобильных приложений
Page 158: Иконографика. Разработка иконок для мобильных приложений
Page 159: Иконографика. Разработка иконок для мобильных приложений
Page 160: Иконографика. Разработка иконок для мобильных приложений
Page 161: Иконографика. Разработка иконок для мобильных приложений
Page 162: Иконографика. Разработка иконок для мобильных приложений
Page 163: Иконографика. Разработка иконок для мобильных приложений
Page 164: Иконографика. Разработка иконок для мобильных приложений
Page 165: Иконографика. Разработка иконок для мобильных приложений
Page 166: Иконографика. Разработка иконок для мобильных приложений
Page 167: Иконографика. Разработка иконок для мобильных приложений
Page 168: Иконографика. Разработка иконок для мобильных приложений
Page 169: Иконографика. Разработка иконок для мобильных приложений
Page 170: Иконографика. Разработка иконок для мобильных приложений
Page 171: Иконографика. Разработка иконок для мобильных приложений

П Р О Г Н О З

Page 172: Иконографика. Разработка иконок для мобильных приложений

АНИМАЦИЯ

ПОСТМОДЕРН

GLITCH ART

Page 173: Иконографика. Разработка иконок для мобильных приложений

FACEBOOK.COM/M18RU

M18.RU

ДЕНИС ШУМОВМИХАИЛ КУЧИН