12 оттенков серого. Построение корпоративной системы...
DESCRIPTION
Проблемы при разработке дизайна крупных веб проектов, длительностью больше трёх месяцев. Проблемы: — Отсутствие модульности и единообразия в оформлении страниц при разработке крупных проектов — Процесс разработки графической концепции сайта растянут во времени, дизайнер часто забывает о том, что он создавал в самом начале, если проект длится больше месяца — Балансирование между примитивностью и излишним многообразием графического оформления: получается либо нашпигованный графикой и эффектами монстр, либо посредственный шаблон Решение: — Разработка гайдлайнов, правил разработки дизайна — Систематизация и фиксация оформления сайта помощью карт — Создание динамических алгоритмов разработки дизайна Видео http://youtu.be/7BHvsODrubY Студия M18 http://m18.ru/TRANSCRIPT
12 ОТ ТЕНКОВ СЕР ОГОП О С Т Р О Е Н И Е К О Р П О РАТ И В Н О Й С И С Т Е М Ы Г РА Ф И Ч Е С К И Х ГА Й Д Л А Й Н О В
САЙТЫИКОНКИИЛЛЮСТРАЦИИАЙДЕНТИКА
РАСКРУТКА ГРУПП ВКОНТАКТЕ
«ШАПКИ» ДЛЯ САЙТОВ
НАРИСОВАТЬ ВИЗИТКУ
РАСПЕЧАТАТЬ ФЛАЕР
ОБРАБОТАТЬ ФОТОГРАФИЮ
САЙТВИЗИТКА ЗА ОДИН ДЕНЬ
ПОЧИНИТЬ КОМПЬЮТЕР
ПЕРЕУСТАНОВИТЬ СИСТЕМУ
ПЕРЕПРОШИТЬ ТЕЛЕФОН
БРИФ
ДИЗАЙН
ПРОГРАММИРОВАНИЕ И CMS
ПРОЕКТИРОВАНИЕ
ВЁРСТКА
ПУБЛИКАЦИЯ
БРИФ
ДИЗАЙН
ПРОГРАММИРОВАНИЕ И CMS
ПРОЕКТИРОВАНИЕ
ВЁРСТКА
ПУБЛИКАЦИЯ
МЕСЯЦ ГОДmin max
П Е Р Е Г Р У З К А
Общество, в котором большинство работающих занято производством, хранением, переработкой и реализацией информации, особенно высшей её формы — знаний. Для этой стадии развития общества и экономики характерно увеличение роли информации, знаний и информационных технологий в жизни.
ИНФОРМАЦИОННОЕОБЩЕСТВО
Термин, описывающий трудности понимания проблемы и принятия решений, причиной которой является избыток информации.
ИНФОРМАЦИОННАЯПЕРЕГРУЗКА
1 8 +
1996
2000
2002
крутая 3D шапка
2004
2007
2011
2013
2014
1995
2014
В С Е С Л ОЖ Н О
БОЛЬШОЕ КОЛИЧЕСТВО КОНТЕНТА
НОВЫЕ ВИДЫ КОНТЕНТА
ВИДЖЕТЫ
НОВЫЕ ЭЛЕМЕНТЫ ИНТЕРФЕЙСА
АНИМАЦИИ
АДАПТАЦИИ
ОДНОСТРАНИЧНЫЕ ФОРМАТЫ
ВЕБШРИФТЫ
ВЕКТОРНЫЕ ИЗОБРАЖЕНИЯ
ПРОЧИЕ ЭФФЕКТЫ CSS3
П Р О Б Л Е М А
ОДНООБРАЗИЕ РАЗНООБРАЗИЕ
ОДНООБРАЗИЕ РАЗНООБРАЗИЕ
ШАБЛОН КОНТЕНТРАЗНООБРАЗИЕОДНООБРАЗИЕ
БЫСТРО МЕДЛЕННОКОНТЕНТ
РАЗНООБРАЗИЕШАБЛОН
ОДНООБРАЗИЕ
ДЁШЕВО ДОРОГОМЕДЛЕННО
КОНТЕНТРАЗНООБРАЗИЕ
БЫСТРОШАБЛОН
ОДНООБРАЗИЕ
СИСТЕМА ХАОСДОРОГО
МЕДЛЕННОКОНТЕНТ
РАЗНООБРАЗИЕ
ДЁШЕВОБЫСТРО
ШАБЛОНОДНООБРАЗИЕ
ГЛ О Б А Л Ь Н О
ДИСГАРМОНИЯ СИСТЕМЫ
СКЛЕРОЗ
РАСПЫЛЕНИЕ
ВИЗУАЛЬНЫЙ ПЕРЕДОЗ
ПЕРЕДАЧА В ВЁРСТКУ
СЛОЖНАЯ ВЁРСТКА
Л О К А Л Ь Н О
А А
Я К Н О П К А
S U P E R Х О В Е Р 3 D Х О В Е Р
G H O S T Х О В Е Р
Я С С Ы Л К А
ГД Е Р О Д И Т Е Л Ь С К И Й РА З Д Е Л ?
ГД Е ХО В Е Р ? ГД Е Т Е К У Щ И Й РА З Д Е Л ?
1
2
3
ПРИМЕР #1
ПРИМЕР #2
ПРИМЕР #2
ПРИМЕР #2
ПРИМЕР #2
ПРИМЕР #3
ПРИМЕР #3
С Л Е Д С Т В И Е
СРЫВ СРОКОВ РАЗРАБОТКИ
ТРЕШОВЫЙ САЙТ
СЛ ОЖ Н О В Н О С И Т Ь И З М Е Н Е Н И Я
П Р О Б Л Е М Ы В КО М А Н Д Е
Б Ы Л О
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 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 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 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 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 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 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
ВРЕМЯ СОБИРАТЬ ПСД
Подход разработки дизайна интерфейса сайта основанный на большом количестве PSD файлов, передаваемых в вёрстку в качестве результата.
С ТА Л О
цветовая гамма, кнопки, блоки, типографика
ЭЛЕМЕНТ
ЭЛЕМЕНТЫ
КОНСТРУКЦИЯ
МАКЕТ
КАРКАСКОНСТРУКЦИЯ КОНСТРУКЦИЯ
?
ВЕБ ДИЗАЙНЕР = ?
ВЕБ ДИЗАЙНЕР = ХУДОЖНИК
ВЕБ ДИЗАЙНЕР = ВОИН
ВЕБ ДИЗАЙНЕР = ИНЖЕНЕР
ИНЖЕНЕР ПРАВИЛА
ИНЖЕНЕР СПЕЦИФИКАЦИИ
ИНЖЕНЕР КАРТЫ
КАРТА ИНЖЕНЕРНЫХ СЕТЕЙ
UI KIT, сочетания элементов, конструкций и их состояния
КАРТА КОНСТРУКЦИЙ
макеты страниц и их состояния
КАРТА МАКЕТОВ
версии экранов для адаптивного сайта на одном холсте, плюс брейкпоинты
КАРТА АДАПТАЦИЙ
схема пользовательских сценариев и взаимосвязей между экранами
КАРТА ВЗАИМОДЕЙСТВИЙ
когда UI KIT недостаточно
КАРТА ОТСТУПОВ
полезна для запущенных случаев и для арт-директора
КАРТА ПРАВОК
SHIFT+CTRL+EЧем меньше возможностей,тем больше внутренняя свобода
ADJUSTMENTLAYERS
COLORRANGE
П Р О Ц Е С С
Э Л Е М Е Н Т Ы
К О Н С Т Р У К Ц И И
К А Р К А С
К А Р ТА К О Н С Т Р У К Ц И Й
К Л Ю Ч Е В Ы Е М А К Е Т Ы
К А Р ТА М А К Е Т О В
К А Р ТА В З А И М О Д Е Й С Т В И Й
А Д А П ТА Ц И И
И Н С Т Р У К Ц И И
В Ё Р С Т К А
П Р О Е К Т И Р О В А Н И Е
Э Л Е М Е Н Т Ы
К О Н С Т Р У К Ц И И
К А Р К А С
К А Р ТА К О Н С Т Р У К Ц И Й
К Л Ю Ч Е В Ы Е М А К Е Т Ы
К А Р ТА М А К Е Т О В
К А Р ТА В З А И М О Д Е Й С Т В И Й
А Д А П ТА Ц И И
И Н С Т Р У К Ц И И
В Ё Р С Т К А
П Р О Е К Т И Р О В А Н И Е
М А С Ш ТА Б
Х РА Н Е Н И Е
ГОЛОВА АРТДИРЕКТОРА
СОСТАВИТЬ ОДИН РАЗ И ЗАБЫТЬ
Д И Н А М И Ч Е С К И Е ГА Й Д Л А Й Н Ы
ГОЛОВА АРТДИРЕКТОРА
СОСТАВИТЬ ОДИН РАЗ И ЗАБЫТЬ
Д И Н А М И Ч Е С К И Е ГА Й Д Л А Й Н Ы
ГОЛОВА АРТДИРЕКТОРА
СОСТАВИТЬ ОДИН РАЗ И ЗАБЫТЬ
Д И Н А М И Ч Е С К И Е ГА Й Д Л А Й Н Ы
наполняемкорпоративнуюбазу знаний
В Н Е Д Р Е Н И Е
ИТЕРАЦИОННЫЙ ПОДХОД
НАРОД ПРОТИВ
ДОЛГО И ОПАСНО
П Л Ю С Ы
УСКОРЕНИЕ ВЁРСТКИ
АККУРАТНЫЙ САЙТ
ПРОЩЕ ВНОСИТЬ ИЗМЕНЕНИЯ
РАБОТА В КОМАНДЕ
М И Н У С Ы
ТЯЖЁЛЫЕ ФАЙЛЫ
ВРЕМЯ НА ВНЕДРЕНИЕ
ЛОВУШКА КАЧЕСТВА
FACEBOOK.COM/M18RU
VK.COM/KUCHINMD FB.COM/SHOOMOV
M18.RU
ДЕНИС ШУМОВМИХАИЛ КУЧИН