12 оттенков серого. Построение корпоративной системы...

120
12 ОТТЕНКОВ СЕРОГО ПОСТРОЕНИЕ КОРПОРАТИВНОЙ СИСТЕМЫ ГРАФИЧЕСКИХ ГАЙДЛАЙНОВ

Upload: m18

Post on 09-Jul-2015

1.026 views

Category:

Design


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

12 ОТ ТЕНКОВ СЕР ОГОП О С Т Р О Е Н И Е К О Р П О РАТ И В Н О Й С И С Т Е М Ы Г РА Ф И Ч Е С К И Х ГА Й Д Л А Й Н О В

Page 2: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 3: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

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

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

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

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

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

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

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

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

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

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

Page 4: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 5: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

БРИФ

ДИЗАЙН

ПРОГРАММИРОВАНИЕ И CMS

ПРОЕКТИРОВАНИЕ

ВЁРСТКА

ПУБЛИКАЦИЯ

Page 6: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

БРИФ

ДИЗАЙН

ПРОГРАММИРОВАНИЕ И CMS

ПРОЕКТИРОВАНИЕ

ВЁРСТКА

ПУБЛИКАЦИЯ

Page 7: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

МЕСЯЦ ГОДmin max

Page 8: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

П Е Р Е Г Р У З К А

Page 9: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

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

ИНФОРМАЦИОННОЕОБЩЕСТВО

Page 10: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

Термин, описывающий трудности понимания проблемы и принятия решений, причиной которой является избыток информации.

ИНФОРМАЦИОННАЯПЕРЕГРУЗКА

Page 11: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

1 8 +

Page 12: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

1996

Page 13: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

2000

Page 14: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

2002

Page 15: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

крутая 3D шапка

2004

Page 16: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

2007

Page 17: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

2011

Page 18: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

2013

Page 19: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

2014

Page 20: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

1995

Page 21: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

2014

Page 22: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

В С Е С Л ОЖ Н О

Page 23: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

БОЛЬШОЕ КОЛИЧЕСТВО КОНТЕНТА

Page 24: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

НОВЫЕ ВИДЫ КОНТЕНТА

ВИДЖЕТЫ

НОВЫЕ ЭЛЕМЕНТЫ ИНТЕРФЕЙСА

Page 25: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

АНИМАЦИИ

АДАПТАЦИИ

ОДНОСТРАНИЧНЫЕ ФОРМАТЫ

Page 26: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ВЕБШРИФТЫ

ВЕКТОРНЫЕ ИЗОБРАЖЕНИЯ

ПРОЧИЕ ЭФФЕКТЫ CSS3

Page 27: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

П Р О Б Л Е М А

Page 28: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ОДНООБРАЗИЕ РАЗНООБРАЗИЕ

Page 29: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ОДНООБРАЗИЕ РАЗНООБРАЗИЕ

Page 30: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ШАБЛОН КОНТЕНТРАЗНООБРАЗИЕОДНООБРАЗИЕ

Page 31: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

БЫСТРО МЕДЛЕННОКОНТЕНТ

РАЗНООБРАЗИЕШАБЛОН

ОДНООБРАЗИЕ

Page 32: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ДЁШЕВО ДОРОГОМЕДЛЕННО

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

БЫСТРОШАБЛОН

ОДНООБРАЗИЕ

Page 33: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

СИСТЕМА ХАОСДОРОГО

МЕДЛЕННОКОНТЕНТ

РАЗНООБРАЗИЕ

ДЁШЕВОБЫСТРО

ШАБЛОНОДНООБРАЗИЕ

Page 34: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ГЛ О Б А Л Ь Н О

Page 35: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ДИСГАРМОНИЯ СИСТЕМЫ

Page 36: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

СКЛЕРОЗ

Page 37: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

РАСПЫЛЕНИЕ

Page 38: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ВИЗУАЛЬНЫЙ ПЕРЕДОЗ

Page 39: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ПЕРЕДАЧА В ВЁРСТКУ

Page 40: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

СЛОЖНАЯ ВЁРСТКА

Page 41: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

Л О К А Л Ь Н О

Page 42: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 43: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 44: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

А А

Page 45: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 46: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

Я К Н О П К А

S U P E R Х О В Е Р 3 D Х О В Е Р

G H O S T Х О В Е Р

Page 47: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

Я С С Ы Л К А

ГД Е Р О Д И Т Е Л Ь С К И Й РА З Д Е Л ?

ГД Е ХО В Е Р ? ГД Е Т Е К У Щ И Й РА З Д Е Л ?

Page 48: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

1

2

3

Page 49: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 50: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 51: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ПРИМЕР #1

Page 52: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ПРИМЕР #2

Page 53: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ПРИМЕР #2

Page 54: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ПРИМЕР #2

Page 55: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ПРИМЕР #2

Page 56: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ПРИМЕР #3

Page 57: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ПРИМЕР #3

Page 58: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

С Л Е Д С Т В И Е

Page 59: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

СРЫВ СРОКОВ РАЗРАБОТКИ

ТРЕШОВЫЙ САЙТ

СЛ ОЖ Н О В Н О С И Т Ь И З М Е Н Е Н И Я

П Р О Б Л Е М Ы В КО М А Н Д Е

Page 60: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

Б Ы Л О

Page 61: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D

Page 62: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D

Page 63: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D P S D

Page 64: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D P S D P S D

Page 65: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D P S D P S D

P S D P S D P S D P S D

Page 66: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D P S D P S D P S D P S D

Page 67: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D P S D P S D P S D P S D

Page 68: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D P S D P S D P S D P S D

Page 69: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

Page 70: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

Page 71: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

P S D P S D P S D P S D

Page 72: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ВРЕМЯ СОБИРАТЬ ПСД

Page 73: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

Подход разработки дизайна интерфейса сайта основанный на большом количестве PSD файлов, передаваемых в вёрстку в качестве результата.

С ТА Л О

Page 74: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

цветовая гамма, кнопки, блоки, типографика

ЭЛЕМЕНТ

Page 75: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ЭЛЕМЕНТЫ

КОНСТРУКЦИЯ

Page 76: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

МАКЕТ

КАРКАСКОНСТРУКЦИЯ КОНСТРУКЦИЯ

Page 77: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

?

Page 78: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ВЕБ ДИЗАЙНЕР = ?

Page 79: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ВЕБ ДИЗАЙНЕР = ХУДОЖНИК

Page 80: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ВЕБ ДИЗАЙНЕР = ВОИН

Page 81: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ВЕБ ДИЗАЙНЕР = ИНЖЕНЕР

Page 82: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ИНЖЕНЕР ПРАВИЛА

Page 83: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ИНЖЕНЕР СПЕЦИФИКАЦИИ

Page 84: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ИНЖЕНЕР КАРТЫ

Page 85: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

КАРТА ИНЖЕНЕРНЫХ СЕТЕЙ

Page 86: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

UI KIT, сочетания элементов, конструкций и их состояния

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

Page 87: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 88: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 89: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

макеты страниц и их состояния

КАРТА МАКЕТОВ

Page 90: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 91: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

версии экранов для адаптивного сайта на одном холсте, плюс брейкпоинты

КАРТА АДАПТАЦИЙ

Page 92: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 93: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 94: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 95: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

схема пользовательских сценариев и взаимосвязей между экранами

КАРТА ВЗАИМОДЕЙСТВИЙ

Page 96: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 97: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 98: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

когда UI KIT недостаточно

КАРТА ОТСТУПОВ

Page 99: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 100: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

полезна для запущенных случаев и для арт-директора

КАРТА ПРАВОК

Page 101: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 102: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

SHIFT+CTRL+EЧем меньше возможностей,тем больше внутренняя свобода

Page 103: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ADJUSTMENTLAYERS

Page 104: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

COLORRANGE

Page 105: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

П Р О Ц Е С С

Page 106: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

Э Л Е М Е Н Т Ы

К О Н С Т Р У К Ц И И

К А Р К А С

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

К Л Ю Ч Е В Ы Е М А К Е Т Ы

К А Р ТА М А К Е Т О В

К А Р ТА В З А И М О Д Е Й С Т В И Й

А Д А П ТА Ц И И

И Н С Т Р У К Ц И И

В Ё Р С Т К А

П Р О Е К Т И Р О В А Н И Е

Page 107: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

Э Л Е М Е Н Т Ы

К О Н С Т Р У К Ц И И

К А Р К А С

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

К Л Ю Ч Е В Ы Е М А К Е Т Ы

К А Р ТА М А К Е Т О В

К А Р ТА В З А И М О Д Е Й С Т В И Й

А Д А П ТА Ц И И

И Н С Т Р У К Ц И И

В Ё Р С Т К А

П Р О Е К Т И Р О В А Н И Е

Page 108: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

М А С Ш ТА Б

Page 109: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов
Page 110: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

Х РА Н Е Н И Е

Page 111: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ГОЛОВА АРТДИРЕКТОРА

СОСТАВИТЬ ОДИН РАЗ И ЗАБЫТЬ

Д И Н А М И Ч Е С К И Е ГА Й Д Л А Й Н Ы

Page 112: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ГОЛОВА АРТДИРЕКТОРА

СОСТАВИТЬ ОДИН РАЗ И ЗАБЫТЬ

Д И Н А М И Ч Е С К И Е ГА Й Д Л А Й Н Ы

Page 113: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ГОЛОВА АРТДИРЕКТОРА

СОСТАВИТЬ ОДИН РАЗ И ЗАБЫТЬ

Д И Н А М И Ч Е С К И Е ГА Й Д Л А Й Н Ы

наполняемкорпоративнуюбазу знаний

Page 114: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

В Н Е Д Р Е Н И Е

Page 115: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ИТЕРАЦИОННЫЙ ПОДХОД

НАРОД ПРОТИВ

ДОЛГО И ОПАСНО

Page 116: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

П Л Ю С Ы

Page 117: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

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

АККУРАТНЫЙ САЙТ

ПРОЩЕ ВНОСИТЬ ИЗМЕНЕНИЯ

РАБОТА В КОМАНДЕ

Page 118: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

М И Н У С Ы

Page 119: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

ТЯЖЁЛЫЕ ФАЙЛЫ

ВРЕМЯ НА ВНЕДРЕНИЕ

ЛОВУШКА КАЧЕСТВА

Page 120: 12 оттенков серого. Построение корпоративной системы графических гайдлайнов

FACEBOOK.COM/M18RU

VK.COM/KUCHINMD FB.COM/SHOOMOV

M18.RU

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