SlideShare a Scribd company logo
BURGER 
Фреймворк Mail.Ruдля контент-проектов 
ЮРИЙ ВЕТРОВ 
MAIL.RUGROUP 
DRIVEN 
DESIGN
О ЧЕМ ЭТА ИСТОРИЯ?
11КОНТЕНТ-ПРОЕКТОВ 
Передали в наше подразделение весной 2012 года –Авто, Афиша, Гороскопы, Дети, Здоровье, Леди, Мото, Новости, Погода, Спорт, ТВ. Многие из них –лидеры в своей нише в Рунете. 
Уже 12 –добавились Cars и Недвижимость, Мотостал частью Авто 
* 
*
УЛУЧШИТЬ И УНИФИЦИРОВАТЬ 
У каждого из продуктов своя история создания и развития. Дизайн во многом делался на аутсорсе, зачастую – несистемно. Информационную архитектуру, взаимодействие и визуальный дизайн нужно было обновить и систематизировать.
СТАТИЧЕСКОЙ СПЕЦИФИКАЦИИ НЕДОСТАТОЧНО 
Вцепочке «гайдлайн → дизайн → верстка → реализация» на каждом из переходов теряются детали и всплывают косяки.
ГАЙДЛАЙН → ДИЗАЙН → ВЕРСТКА → РЕАЛИЗАЦИЯ 
создали лишний паттерн 
контент ломает верстку 
заверстали неточно 
2Ч4Ч4Ч4Ч 
10Ч 
×12ПРОДУКТОВ
ДОКУМЕНТАЦИЮ НЕ ЧИТАЮТ РАЗРАБОТЧИКИ 
Да и дизайнеры тоже филонят, если синхронизироваться должны сразу несколько человек.
ГАЙДЛАЙН ДЛЯ ЛИНЕЙКИ ПРОДУКТОВ? ХА! 
На практике дизайн по спецификации сложно реализовать на 100%, если это делается сразу для нескольких продуктов.
Во-первых, спецификация сама по себе требует регулярного обновления –появляются новые паттерны, находятся более удачные решения для уже имеющихся. 
Во-вторых, по ходу редизайнауспевают реализовать не все и сервис запускается «почти отполированным». А вся линейка продуктов –«почти похожей». И что тогда считать референснымдизайном? 
Конечно, можно провести рефакторинг. Но он оказывается дорогим –его нужно проводить постоянно для каждого из продуктов, при каждом более-менее заметном обновлении.
КОНТРОЛЬ КАЧЕСТВА ДОРОГ И УТОМИТЕЛЕН 
Все это требует огромных усилий и уймы времени от дизайнера на контроль качества реализации.
ОБНОВЛЕНИЯ ДИЗАЙНА УСИЛИВАЮТ ПРОБЛЕМУ 
Нужно снова идти по всей линейке –переделывать и контролировать, переделывать и контролировать…
БЕЗ ТЕХНИЧЕСКОГО РЕШЕНИЯ НЕ ОБОЙТИСЬ 
Только так можно сократить цепочку до «спецификация =дизайн =верстка →реализация». 
А значит избавиться от кучи геморроя по внедрению, улучшению и поддержке продуктов.
ГАЙДЛАЙН =ДИЗАЙН =ВЕРСТКА → РЕАЛИЗАЦИЯ 
генерируется автоматом 
тут риск остается 
временный артефакт 
2Ч4Ч4Ч4Ч 
10Ч 
×1 РАЗ ДЛЯ ВСЕХ 
главный ориентир
ПРОДУКТОВАЯ ЗАДАЧА
ОТ АГРЕГАТОРАК ПРОИЗВОДИТЕЛЮ КОНТЕНТА 
Исторически, многие сервисы Mail.RuGroup как портала были во многом агрегаторамиконтента сторонних проектов. У нас есть большая аудитория за счет провязкипопулярных продуктов (Почта, главная страница, мессенджеры). А ей интересны и более нишевыевещи –например, новости про автомобили, семью, городские события.
ТОЧКА ВХОДА 
Для части пользователей это главная страница Mail.Ru. Здесь есть список популярных материалов, так что пользователи читают новости отсюда. 
http://mail.ru/
РАСПРОСТРАНЕННЫЙ СЦЕНАРИЙ 
Пользователь попадает сразу на новость, минуя главную страницу продукта. И закрывает ее, возвращаясь на главную Mail.Ru. При этом не осознавая разницу между сервисами – для него все это новости.
СНИЗИТЬЗАВИСИМОСТЬ 
Одна из ключевых продуктовых задач –снижение зависимости контент-проектов от главной страницы. Для получения своей аудитории продукты форсировали создание собственного контента, работу с позиционированием и идентичностью, SEO и SMM. И это дало заметный эффект.
ПРОДЛИТЬПУТЬ ПОЛЬЗОВАТЕЛЯ НА САЙТЕ 
От страницы новости к другому контенту. Для трафика с главной Mail.Ru, SEOи SMM. Выход –многочисленные обвязки релевантного контента. Например, фильмы и актеры для Афиши, болезни и консультации для Здоровья, объявления о подержанных машинах в Авто. Нужно также повышать глубину просмотра и другие показатели.
ТЕМАТИЧЕСКИЕ ПРОВЯЗКИ
БУРГЕРЫ! 
Идея родилась в конце 2012 года
НОВАЯ АФИША 
Взяли за основу «бургерный» подход. Это серия «поясов», «строк», «врезов» или «контейнеров», которые активно используются в современных промо-сайтах. Мобильные построены по схожему принципу. 
http://afisha.mail.ru/
ЖУРНАЛЬНЫЙ ПОДХОД 
В привычной колоночной структуре контент зажат в «стакан». «Бургер» позволяет получить более эффектный журнальный дизайн со множеством свободного пространства, крупными шрифтами и иллюстрациями. 
Каждый «пояс» может иметь свою компоновку, что позволяет здорово разнообразить представление контента.
УДОБНО В РАБОТЕ 
Пояса можно легко добавлять и убирать со страницы, менять местами. Или использовать повторно на нескольких страницах, без необходимости учитывать соседние колонки.
КАК УСТРОЕН БУРГЕР 
Легко собирать спец.проектыи новые страницы –как и в бургере, нужно просто положить компоненты между булок, т.е. шапки и футера.
Konstantin Weissиз компании Information Architectsописывает преимущества бургерногодизайна в концепции “containerist”. 
1.Бесконечный стек «поясов». 
2.Легкая расстановка приоритетов. 
3.Контейнеры можно дублировать и использовать на странице повторно. 
4.Как развитие –использование сразу на нескольких страницах. Он может иметь нюансы отображения на каждой из них. 
5.Использование сразу на нескольких сайтах.
АДАПТИВНОСТЬ НА РАЗ-ДВА 
Не нужно думать о сложной логике перетекания колонок – меняется только количество элементов во врезе. На планшетах изменения и вовсе несложные. 
Порядок «поясов» в большом вебе и на мобильных одинаков. Блоки с горизонтальной прокруткой часто превращаются в список.
ПРОБЛЕМЫ 
Страницы длинные –их могут не докручивать до конца. 
Свободное использование пространства –меньше полезной информации на маленьких мониторах. 
Красочно и ярко –может снизиться эффективность рекламы. 
Стали дожидаться первых рабочих версий для проверки. 
* 
*
УНИФИКАЦИЯ КАК ПРИОРИТЕТ 
Стратегическая задача компании –привести все сервисы к единому виду. Но контент-проектам важно иметь свое лицо, повышая узнаваемость своего бренда, чтобы и дальше снижать зависимость от трафика с главной Mail.Ru. 
Как удовлетворить оба требования, чтобы интерфейсы были привычными, но не превращались в придаток портала?
ПРЕДЫСТОРИЯ
БУРГЕРБЫЛ НЕ ПЕРВЫМ 
Это уже наш второй подход к унификации контент-проектов. Все началось с редизайнаНовостей весной 2012года –это ключевой продукт в линейке. Интерфейс имел кучу тематических, партнерских и рекламных обвесов, а также дублирующие друг друга меню. Работа шла по двум фронтам.
НОВОСТИ В НАЧАЛЕ 2012 ГОДА 
http://news.mail.ru/ 
http://news.mail.ru/ 
4,5 МЛН В ДЕНЬ 
В 2014
1. НОВОСТЬ – ГЛАВНЫЙ ЛЕНДИНГ 
Самая посещаемая страница. Важно было избавиться от левой колонки –сместить фокус на контент, а не второстепенные обвесы. 
http://news.mail.ru/
СХЕМА 1+2 
Решением стала компоновка «1+2» –самая заметная и большая часть отдана под контент, а справа идет сдвоенная колонка рекламы и партнерских блоков. Это фокусирует пользователя на основной информации, а все сопутствующее аккуратно собрано рядом.
ЗОНИРОВАНИЕ ИНФОРМАЦИИ 
Повышение стоимости рекламы позволило избавиться от части обвесов. А залипание колонки при скроллинге помогло убрать дыры, возникающие из-за разной высоты новостей. В конце страницы –стандартизированный футер с темами дня и еще одной обменкой.
2. ГЛАВНАЯ И РУБРИКИ 
Больше свободы. Главная посещается на порядок меньше остальных страниц, можно пожертвовать частью обвесов и сделать лицо проекта эффектным. 
http://news.mail.ru/
Мы объявили войну колонкам –как правило, это склад чего попало, который ограничивает и портит компоновку страницы. 
Благодаря этому главная стала «строчной». Она и выглядит более собранной, и работать с ней удобнее. Наверное, оттуда и пришел наш будущий «бургерный» подход. 
С рубриками посложнее –там трафика больше и необходимо было оставить подход «1+2».
ПРОВЕРКА БОЕМ 
Запуск прошел не без проблем, докручивались ключевые показатели –многие блоки работали не так как ожидалось. 
Но когда на основе тех же гайдлайновзапустился Спорт, проблема возникла только с одним из навигационных элементов. Гайдлайныработали!
СТИЛИЗАЦИЯ 
Мы сразу подумали о стилизации контент-проектов – хотелось иметь единое интерфейсное решение, которое будет адаптироваться под тематику и аудиторию с помощью цветовой схемы, шрифтов и декоративных элементов. И уже начали переводить на него другие продукты –Спорт, Дети.
СПОРТ И ДЕТИ 
http://sport.mail.ru/ 
http://deti.mail.ru/
ПЕРВЫЕ ПРОБЛЕМЫ 
Получались близкие по структуре и визуально преемственные, но разные в подходах к созданию и поддержке проекты. 
Для планшетов в портретном режиме компоновка «1+2» требовала отдельной версии –появлялся горизонтальный скролл. 
Необходимо было техническое решение, которое жестко ограничит расхождения.
ТЕХНИЧЕСКОЕ РЕШЕНИЕ 
Жестко ограничит расхождения
ФРЕЙМВОРК ДЛЯ МОБИЛЬНОГО ВЕБА 
Мы прошли этот путьв прошлом году– вместе с разработчиками придумали и создали дизайнерско-технологический фреймворкдля мобильного веба.
СПАСИБО, АНТОН!
БОЛЬШИЕ САЙТЫ БОЛЬШЕ 
Правда, делать на этой же технологии сайты для мобильного и большого веба –не совсем одно и то же. Есть уйма отличий и нюансов. Но снова хвала нашей команде разработки –парни оценили вызов и возможный профит от внедрения, вписавшись в этот непростой, но крайне важный и интересный проект.
КАК РАБОТАЕТ ФРЕЙМВОРК
1. БИБЛИОТЕКА ПАТТЕРНОВ 
В Photoshop и InDesign, которая включает все используемые на проектах решения. А также гайдлайн с основными принципами дизайна. 
В планах уйти от статической документации к живому гайдлайну, использующему готовый код вместо макетов. Это сократит цепочку и избавит нас от ненужных артефактов.
2. ЕДИНАЯ БАЗА КОДА 
Реализует интерфейсные паттерны и описывается в идеологии БЭМ (блок-элемент-модификатор). Одинаковые интерфейсные блоки используются на разных страницах –их оформление не зависит от того, что происходит вокруг. 
Не нужно каждый раз перепроверять, корректно ли показался блок на каждой из страниц.
3. ШАБЛОНИЗАТОР 
Для показа страницы сайта в браузере пользователя. Он собирает итоговую верстку на лету из отдельно сверстанных блоков, графики, стилей и скриптов. 
Для всех типов страниц определяются правила их сборки – набор блоков, их последовательность и контент. Используются собственные технологии вместо идущих с БЭМ.
ОБНОВЛЕНИЕ ДИЗАЙНА 
Если мы нашли новое решение для старого блока (например, новый вид фотогалерей), он меняется в единой базе кода. После этого каждый проект обновляет его из общего репозитория. 
Дизайнеру нужно проверить только одну реализацию, вместо того чтобы отслеживать каждый из сервисов.
МАСШТАБНЫЙ ЗАМАХ 
Это непростой проект, но подход с переводом дизайна на уровень технической реализации критически важен как для дизайнеров, так и для компании.
1. ГАРАНТИЯ 100%90% 
Унификация гарантируется подходом к разработке –все готовые блоки и элементы берутся из единой базы кода и только из нее. Еще на 10% –внимательностью и вдумчивостью при использовании готовых решений.
2. ПОСТОЯННАЯ АКТУАЛЬНОСТЬ 
Уход от героических редизайновраз в несколько лет к регулярной гигиене дизайна. Перезапускиотнимают много сил и теряют тысячи мелких наработок, прикрученных к дизайну за долгое время его развития.
3. МАСШТАБИРОВАНИЕ УЛУЧШЕНИЙ 
От улучшения в одном конкретном продукте выигрывают и остальные. Например, если блок новостей по теме повысил глубину просмотров на Авто, это решение очень быстро попадет и в другие сервисы.
4. МЕНЬШЕ ЛИШНЕЙ РАБОТЫ 
Нужно рисовать меньше макетов –прощай, рутина! Страницу можно собрать из готовых блоков, причем в будущем – совсем без запуска Фотошопа. Это же касается различных спец.проектов.
ИСПОЛЬЗОВАТЬ НЕ РУКИ, А ГОЛОВУ ДИЗАЙНЕРА 
Благодаря уменьшению рутины, есть возможность перевести фокус на продуктовые задачи и решение менее заметных, но также важных дизайнерских проблем. Повышение основных метрик, приятная анимация, тонкие нюансы адаптивности, приведение рекламы в человеческий вид –в бесконечном потоке на них не всегда хватало времени.
КОМПАНИЯ В ПЛЮСЕ 
Системный подход к повышению эффективности продуктов. 
Ускорение вывода на рынок новых функций. 
Гарантированная унификация дизайна. 
За минусом входной цены перевода продуктов на платформу. 
* 
*
КАК ПОЛУЧИТЬ ДОБРО НА ТАКОЙ ПРОЕКТ? 
Инициатива создания фреймворкашла снизу. Способность говорить на понятном бизнесу языке помогла нам убедить менеджмент вложиться в движок.
ЗАПУСК 
В первую волну попали Авто, Афиша, Здоровье и Погода
ПЕРВАЯ ВОЛНА 
АПРЕЛЬ-ОКТЯБРЬ 2014 
http://afisha.mail.ru/ 
http://auto.mai 
http://health.m 
http://pogoda. 
http://****.mail
ИССЛЕДОВАНИЯ И АНАЛИТИКА 
Мы провели серию юзабилити-тестов и хорошенько копнули данные аналитики. Сработал ли «бургерный» подход и что там с его рисками –в первую очередь прокруткой длинных страниц? 
В целом –да, но с нюансами и оговорками.
1. ПОЛЬЗОВАТЕЛИ ПРОКРУЧИВАЮТ СТРАНИЦЫ 
Воронки прокрутки для главных страниц и ключевых разделов показали, что пользователи охотно скроллятвниз и отваливаются мало.
2. ВРЕЗЫ БЫВАЮТ ОПАСНЫМИ 
Если страница содержит более-менее однородный контент – например, список фильмов или подробное описание болезни. Пользователь думает, что страница закончилась, и уходит. 
Из-за этого полоску шарингана странице болезни воспринимали как конец полезного контента, хотя ниже была уйма действительно ценных дополнений.
ВРЕЗЫ, РАЗРЫВАЮЩИЕ ПОТОК
3. АГРЕГАЦИОННЫЕ СТРАНИЦЫ ОК 
Тут контрастные врезы работают хорошо –например, информация о фильме, которая почти полностью состоит из кусочков. Похоже, здесь нет ожиданий того, что является основным контентом. 
Также хорошо помогают ссылки-якори–пользователи еще активнее используют весь контент страницы.
ВЫСОТА И КОНТРАСТНОСТЬ ВРЕЗОВ 
Мы поработали над высотой и контрастностью врезов на проблемных страницах –важно, чтобы они не разрывали однородный поток. Это помогает решить проблему докрутки. Что особенно критично для одной из ключевых продуктовых задач –уводить пользователя дальше лендингаблагодаря тематическим врезкам.
Где-то, как с Афишей, у нас была возможность запустить раннюю версию на часть аудитории и проверить дизайн- решения в полу-боевом режиме. 
Где-то, как с Авто, мы были завязаны на рекламные контракты и должны были запускаться как можно скорее. 
Но благодаря системности технологического решения, эти накопленные знания идут на пользу всей линейке продуктов, а не остаются просто результатами отчетов «к сведению». Так что новые сервисы на движке запустятся уже без этих проблем.
НЮАНСЫ 
Помимо переформатирования процесса работы над контент- проектами мы решили много других важных и интересных задач
СТИЛИЗАЦИЯ С ПОМОЩЬЮ АКЦЕНТНЫХ ЦВЕТОВ 
Каждый из сервисов получит свой цвет, которым кодируется фирменная полоска под заголовком и интерактивные элементы.Прием не уникальный, но за счет точечного применения и правильного оттенка получилось особенно свежо и сочно.
ПРИМЕРЫ СТИЛИЗАЦИИ
ГЕНЕРАТОР ЦВЕТОВ 
КОМПЛЕМЕНТАРНЫХ К СИНЕМУ
Это нововведение относительно мобильного фреймворкаи скоро подход перекочует туда. 
В недавно запущенном мобильном Здоровье применение стиля было делом десяти минут –фреймворкпозволяет проекту иметь свои нюансы отображения стандартных блоков.
Одной из ранних идей стилизации было использование размытой фотографии новости на фоне. Исследования показали, что это не раздражает пользователей. 
Но с технической точки зрения подход оказался ресурсоемким, так что от него отказались. 
http://news.mail.ru/
ШРИФТОВАЯ СЕТКА 
Она проработана с учетом сложностей рендеринга на различных платформах. Кастомныешрифты сейчас используют многие, но зачастую бездумно –не проверяя, как это выглядит на самых массовых в России платформах (Windows 8, Windows 7, Windows XP).
ПРОБЛЕМЫ РЕНДЕРИНГА 
В РУНЕТЕ99% WINDOWS
Мы выбрали Roboto–это один из немногих бесплатных кириллических шрифтов, имеющих широкий спектр начертаний. Да и в начале 2013 он еще не был таким массовым, как сейчас. 
Конечно, хотелось бы использовать что-то более редкое. Но политика лицензирования шрифтов грабительская для крупных компаний –она рассчитывается по количеству показов страниц. В нашем случае это десятки миллионов, так что стоимость аренды выходит неразумной.
ОПИСАНИЕ ШРИФТОВОЙ СЕТКИ
БИБЛИОТЕКА ПАТТЕРНОВ 
Мы собрали приличное количество наработок по решению самых распространенных интерфейсных задач. Это облегчает перевод новых проектов на фреймворки сборку спец.проектов.
ОБЩИЕ ПРИНЦИПЫ БЛИЗКИ К МОБИЛЬНОМУ ВЕБУ 
Карточки для представления второстепенного контента и агрегационных страниц, врезки со слайдерами навылет, «бургерная» структура. Все это облегчит поддержку и развитие для нас, а пользователям даст предсказуемость поведения сервисов.
БОЛЬШОЙ И МОБИЛЬНЫЙ ВЕБ 
http://health.mail.ru/
РЕКЛАМНЫЕ ФОРМАТЫ И МЕСТА 
Он получили не меньше внимания, чем информационная архитектура, принципы взаимодействия и визуальный дизайн. В реальном мире это не надоедливые обвесы, которые делаются в последнюю очередь, а средство к существованию продукта.
Рекламная сетка зачастую определяет внешний вид, задавая ограничения сетки дизайнерской. Мы плотно работаем с коммерческим отделом для того чтобы находить форматы, не рушащие ни дизайн, ни денежный поток проекта. 
Параллакс, альтернативные подходы к брендированию, человеческое представление контекстной рекламы, стандартизация полноэкранных баннеров и другие решения позволяют нам находить компромисс.
ПАРАЛЛАКС
БРЕНДИРОВАНИЕ
СТАНДАРТИЗАЦИЯ
РедизайнАвто начался с проработки обновленной рекламной сетки. Старый формат с четырьмя маленькими баннерами по углам не давал никаких возможностей по обновлению дизайна. При этом его изменение серьезно влияло на бюджет. Много итераций прошло задолго до того, как мы приступили к проработке деталей интерфейса. 
http://auto.mail.ru/
Это один из нюансов продуктовой работы, которая отличается от популярных любительских концептов на Behanceи Dribbble.Нужно работать с ограничениями, а не прятаться от них.
СЕТКА 40/20 
Механизма ритма. Дал свободу в новом «бургерном» формате и учитывает первые редизайны, сделанные в подходе «1+2». 
http://auto.mail.ru/
НАВИГАЦИЯ ПО ДЛИННЫМ СТРАНИЦАМ 
Пока она проработана частично, но мы уже заметили эффективность хороших якорей. Они помогают ориентироваться пользователям и улучшают воронку доскролла.
Мы также рассматривали возможность включения дискретной прокрутки как на многих промо-сайтах, но пока решения на этот счет нет. 
Это улучшит визуальную часть за счет более эффектного использования экранного пространства, но усложнит «казуальную прокрутку» для беглого ознакомления с контентом страницы.
ПРОДУКТОВАЯ КОМАНДА ПРОЧУВСТВОВАЛА ГАЙДЛАЙНЫ 
И помогает нам соблюдать консистентность. Менеджеры часто одергивают нас, если есть готовый подход –так проще и дешевле. А разработчики указывают на нестыковки –они не хотят делать много версий одного и того же паттерна. 
Это еще один уровень контроля качества, повышающий общую дизайн-культуру в компании.
ПЛАНЫ
ПОЛИРОВКА И ШЛИФОВКА 
Мы хорошо поработали над шаблонизатором, который выводит информацию на сайтах. Он позволяет легко собирать новые страницы и обновлять уже собранные сразу по всей продуктовой линейке. 
Предстоит активная полировка визуального представления и продуктовой эффективности, хотя самое тяжелое позади.
СТАТЬЯ ПОКА НЕ ФОНТАН 
CMSтребует значительной доработки. Не везде редакция может красиво заверстать текст, где-то используются специфичные размеры изображений. 
http://auto.mail.ru/
Нам очень нравится то, как эту задачу решили сильные медиа-компании вроде VoxMedia и Look at Media.С помощью собственных редакционных CMS с уймой возможностей и пре-заданных стилей оформления они выдают эффектный журнальный контент, который приятно читать и рассматривать. 
Такая система дает журналистам и редакторам простой инструмент, который генерирует на выходе гарантированно хорошее представление статьи. И мы сейчас занимаемся этим.
СОВРЕМЕННЫЕ CMS
ЖИВОЙ ГАЙДЛАЙН 
Автоматическая спецификация на основе реальных кусков кода вместо картинок. С его помощью также можно будет собирать прототипы в приближенном к реальности виде, минуя InDesign. Примерно как в Bootstrap. 
Это еще один способ стать ближе к конечной реализации.
ЧТО В ИТОГЕ?
Ускорение вывода на рынок новых возможностей продукта. 
Гарантированный способ получить унифицированный дизайн. 
От улучшения в одном конкретном продукте выигрывают все сервисы. 
Дизайнер меньше работает руками и больше –головой.
УХОДИМ ОТ ГЕРОИЧЕСКИХ РЕДИЗАЙНОВ 
Переход к постоянно актуальному интерфейсу. Больше времени можем уделить на продуктовую работу, а не бесконечное обслуживание дизайна.При этом специалист становится продуктовым дизайнером, который перестает мыслить макетами и выходит за рамки Фотошопа.
P.S. 
Это уже наш второй фреймворкдля унификации дизайна после мобильного веба. И есть еще несколько мест, где такой подход может пригодиться. Возможно, к следующей осени будет что рассказать ;)
CREDITS 
ДИЗАЙН И ИНТЕРФЕЙС 
РАЗРАБОТКА 
Г.Глечян, Е.Долгов, Д.Осадчук, А.Гладков, П.Скрипкин, А.Кандауров, Е.Ферулев, С.Соловьева, Ю.Ветров 
С.Михальский, К.Ворожейкин, А.Бекбулатов, С.Ножкин, А.Кусимов, Д.Беляев, Е.Иванов, А.Полещук, В.Васин, М.Трусов, Б.Ребров 
ПОВЕРИЛ В НАС 
А.Рожков
СПАСИБО! 
ЮРИЙ ВЕТРОВ 
Burger photos: Fat & Furious Burger, Recipe Tin Eats, Inspiration Kitchen, Baker by Nature, Lady & Pups, Half-baked Harvest, Bev Cooks 
www.jvetrau.com 
twitter.com/jvetrau
8 МЕСТ 
29 МЕСТ 
КСТАТИ, О БУРГЕРАХ 
МОСКВА 
ПЕТЕРБУРГ 
МИНСК 
160 МЕСТ

More Related Content

What's hot

DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru
DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.RuDesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru
DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru
Yury Vetrov
 
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.RuФорум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
Yury Vetrov
 
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, командаUser Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда
Yury Vetrov
 
Design Management
Design ManagementDesign Management
Design Management
Stan Ru
 
BHSD MAIL.RU UI/UX 2016 Single interface
BHSD MAIL.RU UI/UX 2016 Single interfaceBHSD MAIL.RU UI/UX 2016 Single interface
BHSD MAIL.RU UI/UX 2016 Single interface
Tema Gladkov
 
Основы быстрого прототипирования
Основы быстрого прототипированияОсновы быстрого прототипирования
Основы быстрого прототипирования
Mitya Osadchuk
 
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Yury Vetrov
 
UX Strategy 101
UX Strategy 101UX Strategy 101
UX Strategy 101
Anastasia Schebrova
 
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопомСтачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
Yury Vetrov
 
BHSD MAIL.RU UI/UX 2016 Restrictions
BHSD MAIL.RU UI/UX 2016 RestrictionsBHSD MAIL.RU UI/UX 2016 Restrictions
BHSD MAIL.RU UI/UX 2016 Restrictions
Tema Gladkov
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
Yury Vetrov
 
Lean UX, Уровни UX, UXD процесс
Lean UX, Уровни UX, UXD процессLean UX, Уровни UX, UXD процесс
Lean UX, Уровни UX, UXD процесс
Mitya Osadchuk
 
Дизайн успешных продуктов
Дизайн успешных продуктовДизайн успешных продуктов
Дизайн успешных продуктов
Andrey Gargul
 
Дизайн в хаосе
Дизайн в хаосеДизайн в хаосе
Дизайн в хаосе
Artur Kasimov
 
Дизайн-команда в продуктовой компании
Дизайн-команда в продуктовой компанииДизайн-команда в продуктовой компании
Дизайн-команда в продуктовой компании
CodeFest
 
Павел Манахов, Поиск причин юзабилити-проблем
Павел Манахов, Поиск причин юзабилити-проблемПавел Манахов, Поиск причин юзабилити-проблем
Павел Манахов, Поиск причин юзабилити-проблем
Mail.ru Group
 
Юрий Ветров — Алгоритмический дизайн
Юрий Ветров — Алгоритмический дизайнЮрий Ветров — Алгоритмический дизайн
Юрий Ветров — Алгоритмический дизайн
Yury Vetrov
 
Сайдпроекты БВШД 2016
Сайдпроекты БВШД 2016Сайдпроекты БВШД 2016
Сайдпроекты БВШД 2016
Igor Silkin
 
UX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа ДизайнаUX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа Дизайна
Ksenia Sternina
 
Микромоменты: руководство по успешному мобильному маркетингу
Микромоменты: руководство по успешному мобильному маркетингуМикромоменты: руководство по успешному мобильному маркетингу
Микромоменты: руководство по успешному мобильному маркетингу
AIC
 

What's hot (20)

DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru
DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.RuDesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru
DesignCamp2012: Юрий Ветров — Метро-дизайн в Mail.Ru
 
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.RuФорум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
Форум Технологий Mail.Ru 2011: Юрий Ветров — Как создаются интерфейсы в Mail.Ru
 
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, командаUser Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, команда
 
Design Management
Design ManagementDesign Management
Design Management
 
BHSD MAIL.RU UI/UX 2016 Single interface
BHSD MAIL.RU UI/UX 2016 Single interfaceBHSD MAIL.RU UI/UX 2016 Single interface
BHSD MAIL.RU UI/UX 2016 Single interface
 
Основы быстрого прототипирования
Основы быстрого прототипированияОсновы быстрого прототипирования
Основы быстрого прототипирования
 
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
 
UX Strategy 101
UX Strategy 101UX Strategy 101
UX Strategy 101
 
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопомСтачка! 2016: Юрий Ветров — Дизайн с выхлопом
Стачка! 2016: Юрий Ветров — Дизайн с выхлопом
 
BHSD MAIL.RU UI/UX 2016 Restrictions
BHSD MAIL.RU UI/UX 2016 RestrictionsBHSD MAIL.RU UI/UX 2016 Restrictions
BHSD MAIL.RU UI/UX 2016 Restrictions
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
 
Lean UX, Уровни UX, UXD процесс
Lean UX, Уровни UX, UXD процессLean UX, Уровни UX, UXD процесс
Lean UX, Уровни UX, UXD процесс
 
Дизайн успешных продуктов
Дизайн успешных продуктовДизайн успешных продуктов
Дизайн успешных продуктов
 
Дизайн в хаосе
Дизайн в хаосеДизайн в хаосе
Дизайн в хаосе
 
Дизайн-команда в продуктовой компании
Дизайн-команда в продуктовой компанииДизайн-команда в продуктовой компании
Дизайн-команда в продуктовой компании
 
Павел Манахов, Поиск причин юзабилити-проблем
Павел Манахов, Поиск причин юзабилити-проблемПавел Манахов, Поиск причин юзабилити-проблем
Павел Манахов, Поиск причин юзабилити-проблем
 
Юрий Ветров — Алгоритмический дизайн
Юрий Ветров — Алгоритмический дизайнЮрий Ветров — Алгоритмический дизайн
Юрий Ветров — Алгоритмический дизайн
 
Сайдпроекты БВШД 2016
Сайдпроекты БВШД 2016Сайдпроекты БВШД 2016
Сайдпроекты БВШД 2016
 
UX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа ДизайнаUX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа Дизайна
 
Микромоменты: руководство по успешному мобильному маркетингу
Микромоменты: руководство по успешному мобильному маркетингуМикромоменты: руководство по успешному мобильному маркетингу
Микромоменты: руководство по успешному мобильному маркетингу
 

Similar to UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унификации контент-проектов

О разработке сайтов в целом
О разработке сайтов в целомО разработке сайтов в целом
О разработке сайтов в целомUplab_University
 
Юрий Ветров — Внедрение UX-стратегии
Юрий Ветров — Внедрение UX-стратегииЮрий Ветров — Внедрение UX-стратегии
Юрий Ветров — Внедрение UX-стратегии
Yury Vetrov
 
Netlab
NetlabNetlab
Юрий Ветров - Продуктовый дизайнер. Современное понимание профессии - Mail.Ru...
Юрий Ветров - Продуктовый дизайнер. Современное понимание профессии - Mail.Ru...Юрий Ветров - Продуктовый дизайнер. Современное понимание профессии - Mail.Ru...
Юрий Ветров - Продуктовый дизайнер. Современное понимание профессии - Mail.Ru...
WG_ Events
 
Основы разработки сайтов by Uplab
Основы разработки сайтов by UplabОсновы разработки сайтов by Uplab
Основы разработки сайтов by Uplab
Digital-агентство Uplab
 
"Внедрение UX-стратегии" Ветров Юрий, Mail.Ru Group
"Внедрение UX-стратегии" Ветров Юрий, Mail.Ru Group"Внедрение UX-стратегии" Ветров Юрий, Mail.Ru Group
"Внедрение UX-стратегии" Ветров Юрий, Mail.Ru Group
it-people
 
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
borovoystudio
 
3D-визуализация и создание промо-сайта
3D-визуализация и создание промо-сайта3D-визуализация и создание промо-сайта
3D-визуализация и создание промо-сайта
IRCIT.Uspeshnyy
 
DUMP-2013 Проектирование интерфейсов - Как коню из вакуума не попасть в черну...
DUMP-2013 Проектирование интерфейсов - Как коню из вакуума не попасть в черну...DUMP-2013 Проектирование интерфейсов - Как коню из вакуума не попасть в черну...
DUMP-2013 Проектирование интерфейсов - Как коню из вакуума не попасть в черну...it-people
 
Конференция ЛидФест-2015, Нижний Новгород
Конференция ЛидФест-2015, Нижний НовгородКонференция ЛидФест-2015, Нижний Новгород
Конференция ЛидФест-2015, Нижний Новгород
R52.ru | Интернет-компания
 
Куда движется SEO-2022? Тренды, итоги, топ-7 основных событий 2021
Куда движется SEO-2022? Тренды, итоги, топ-7 основных событий 2021Куда движется SEO-2022? Тренды, итоги, топ-7 основных событий 2021
Куда движется SEO-2022? Тренды, итоги, топ-7 основных событий 2021
Дмитрий Севальнев
 
Готовые решения для бизнеса: как создать и запустить свой сайт быстро и дешево
Готовые решения для бизнеса: как создать и запустить свой сайт быстро и дешевоГотовые решения для бизнеса: как создать и запустить свой сайт быстро и дешево
Готовые решения для бизнеса: как создать и запустить свой сайт быстро и дешево
Astra Media Group, Russia
 
office 365
office 365office 365
office 365
Olga Nagornaya
 
Internet Trends
Internet TrendsInternet Trends
презентация компании
презентация компаниипрезентация компании
презентация компанииDmitry Galakhov
 
РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала ...
РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала ...РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала ...
РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала ...
Yury Vetrov
 
Мастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного вебМастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного веб
Technosphere1
 

Similar to UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унификации контент-проектов (20)

О разработке сайтов в целом
О разработке сайтов в целомО разработке сайтов в целом
О разработке сайтов в целом
 
Юрий Ветров — Внедрение UX-стратегии
Юрий Ветров — Внедрение UX-стратегииЮрий Ветров — Внедрение UX-стратегии
Юрий Ветров — Внедрение UX-стратегии
 
Netlab
NetlabNetlab
Netlab
 
Юрий Ветров - Продуктовый дизайнер. Современное понимание профессии - Mail.Ru...
Юрий Ветров - Продуктовый дизайнер. Современное понимание профессии - Mail.Ru...Юрий Ветров - Продуктовый дизайнер. Современное понимание профессии - Mail.Ru...
Юрий Ветров - Продуктовый дизайнер. Современное понимание профессии - Mail.Ru...
 
Основы разработки сайтов by Uplab
Основы разработки сайтов by UplabОсновы разработки сайтов by Uplab
Основы разработки сайтов by Uplab
 
"Внедрение UX-стратегии" Ветров Юрий, Mail.Ru Group
"Внедрение UX-стратегии" Ветров Юрий, Mail.Ru Group"Внедрение UX-стратегии" Ветров Юрий, Mail.Ru Group
"Внедрение UX-стратегии" Ветров Юрий, Mail.Ru Group
 
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
 
3D-визуализация и создание промо-сайта
3D-визуализация и создание промо-сайта3D-визуализация и создание промо-сайта
3D-визуализация и создание промо-сайта
 
DUMP-2013 Проектирование интерфейсов - Как коню из вакуума не попасть в черну...
DUMP-2013 Проектирование интерфейсов - Как коню из вакуума не попасть в черну...DUMP-2013 Проектирование интерфейсов - Как коню из вакуума не попасть в черну...
DUMP-2013 Проектирование интерфейсов - Как коню из вакуума не попасть в черну...
 
Artsofte для dump2013
Artsofte для dump2013Artsofte для dump2013
Artsofte для dump2013
 
Конференция ЛидФест-2015, Нижний Новгород
Конференция ЛидФест-2015, Нижний НовгородКонференция ЛидФест-2015, Нижний Новгород
Конференция ЛидФест-2015, Нижний Новгород
 
Mobile credentials
Mobile credentialsMobile credentials
Mobile credentials
 
Куда движется SEO-2022? Тренды, итоги, топ-7 основных событий 2021
Куда движется SEO-2022? Тренды, итоги, топ-7 основных событий 2021Куда движется SEO-2022? Тренды, итоги, топ-7 основных событий 2021
Куда движется SEO-2022? Тренды, итоги, топ-7 основных событий 2021
 
Готовые решения для бизнеса: как создать и запустить свой сайт быстро и дешево
Готовые решения для бизнеса: как создать и запустить свой сайт быстро и дешевоГотовые решения для бизнеса: как создать и запустить свой сайт быстро и дешево
Готовые решения для бизнеса: как создать и запустить свой сайт быстро и дешево
 
office 365
office 365office 365
office 365
 
Internet Trends
Internet TrendsInternet Trends
Internet Trends
 
Internet Trends
Internet TrendsInternet Trends
Internet Trends
 
презентация компании
презентация компаниипрезентация компании
презентация компании
 
РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала ...
РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала ...РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала ...
РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала ...
 
Мастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного вебМастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного веб
 

More from Yury Vetrov

Yury Vetrov — Algorithm-Driven Design
Yury Vetrov — Algorithm-Driven DesignYury Vetrov — Algorithm-Driven Design
Yury Vetrov — Algorithm-Driven Design
Yury Vetrov
 
Как работают британские дизайн-студии
Как работают британские дизайн-студииКак работают британские дизайн-студии
Как работают британские дизайн-студии
Yury Vetrov
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform Thinking
Yury Vetrov
 
UX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX StrategyUX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX Strategy
Yury Vetrov
 
WUD2012 Tallinn: Y.Vetrov — How to Turn Around an Aircraft Carrier
WUD2012 Tallinn: Y.Vetrov — How to Turn Around an Aircraft CarrierWUD2012 Tallinn: Y.Vetrov — How to Turn Around an Aircraft Carrier
WUD2012 Tallinn: Y.Vetrov — How to Turn Around an Aircraft Carrier
Yury Vetrov
 
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
Yury Vetrov
 
IT2Days:Usability / UXRussia Junior: Всемирная история интерфейсов. 1001 прод...
IT2Days:Usability / UXRussia Junior: Всемирная история интерфейсов. 1001 прод...IT2Days:Usability / UXRussia Junior: Всемирная история интерфейсов. 1001 прод...
IT2Days:Usability / UXRussia Junior: Всемирная история интерфейсов. 1001 прод...
Yury Vetrov
 
Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...
Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...
Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...
Yury Vetrov
 
User Experience 2010: Как показывать интерфейс клиенту (так, чтобы не было му...
User Experience 2010: Как показывать интерфейс клиенту (так, чтобы не было му...User Experience 2010: Как показывать интерфейс клиенту (так, чтобы не было му...
User Experience 2010: Как показывать интерфейс клиенту (так, чтобы не было му...
Yury Vetrov
 
Software People 2010: Форматы работы команды проектирования интерфейсов с кли...
Software People 2010: Форматы работы команды проектирования интерфейсов с кли...Software People 2010: Форматы работы команды проектирования интерфейсов с кли...
Software People 2010: Форматы работы команды проектирования интерфейсов с кли...Yury Vetrov
 
User Experience / UPA Europe 2009: Когда проектирование заказывать не нужно. ...
User Experience / UPA Europe 2009: Когда проектирование заказывать не нужно. ...User Experience / UPA Europe 2009: Когда проектирование заказывать не нужно. ...
User Experience / UPA Europe 2009: Когда проектирование заказывать не нужно. ...
Yury Vetrov
 
Software People 2009: Управление ожиданиями от процесса проектирования интерф...
Software People 2009: Управление ожиданиями от процесса проектирования интерф...Software People 2009: Управление ожиданиями от процесса проектирования интерф...
Software People 2009: Управление ожиданиями от процесса проектирования интерф...
Yury Vetrov
 
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
Yury Vetrov
 
UXRussia 5: Юзабилити-экспертиза в прямом эфире (Юрий Ветров, Александр Хмеле...
UXRussia 5: Юзабилити-экспертиза в прямом эфире (Юрий Ветров, Александр Хмеле...UXRussia 5: Юзабилити-экспертиза в прямом эфире (Юрий Ветров, Александр Хмеле...
UXRussia 5: Юзабилити-экспертиза в прямом эфире (Юрий Ветров, Александр Хмеле...
Yury Vetrov
 

More from Yury Vetrov (14)

Yury Vetrov — Algorithm-Driven Design
Yury Vetrov — Algorithm-Driven DesignYury Vetrov — Algorithm-Driven Design
Yury Vetrov — Algorithm-Driven Design
 
Как работают британские дизайн-студии
Как работают британские дизайн-студииКак работают британские дизайн-студии
Как работают британские дизайн-студии
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform Thinking
 
UX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX StrategyUX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX Strategy
 
WUD2012 Tallinn: Y.Vetrov — How to Turn Around an Aircraft Carrier
WUD2012 Tallinn: Y.Vetrov — How to Turn Around an Aircraft CarrierWUD2012 Tallinn: Y.Vetrov — How to Turn Around an Aircraft Carrier
WUD2012 Tallinn: Y.Vetrov — How to Turn Around an Aircraft Carrier
 
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
WUD2011: Юрий Ветров — Design Thinking. Тренинг от Stanford d.School для Mail...
 
IT2Days:Usability / UXRussia Junior: Всемирная история интерфейсов. 1001 прод...
IT2Days:Usability / UXRussia Junior: Всемирная история интерфейсов. 1001 прод...IT2Days:Usability / UXRussia Junior: Всемирная история интерфейсов. 1001 прод...
IT2Days:Usability / UXRussia Junior: Всемирная история интерфейсов. 1001 прод...
 
Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...
Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...
Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...
 
User Experience 2010: Как показывать интерфейс клиенту (так, чтобы не было му...
User Experience 2010: Как показывать интерфейс клиенту (так, чтобы не было му...User Experience 2010: Как показывать интерфейс клиенту (так, чтобы не было му...
User Experience 2010: Как показывать интерфейс клиенту (так, чтобы не было му...
 
Software People 2010: Форматы работы команды проектирования интерфейсов с кли...
Software People 2010: Форматы работы команды проектирования интерфейсов с кли...Software People 2010: Форматы работы команды проектирования интерфейсов с кли...
Software People 2010: Форматы работы команды проектирования интерфейсов с кли...
 
User Experience / UPA Europe 2009: Когда проектирование заказывать не нужно. ...
User Experience / UPA Europe 2009: Когда проектирование заказывать не нужно. ...User Experience / UPA Europe 2009: Когда проектирование заказывать не нужно. ...
User Experience / UPA Europe 2009: Когда проектирование заказывать не нужно. ...
 
Software People 2009: Управление ожиданиями от процесса проектирования интерф...
Software People 2009: Управление ожиданиями от процесса проектирования интерф...Software People 2009: Управление ожиданиями от процесса проектирования интерф...
Software People 2009: Управление ожиданиями от процесса проектирования интерф...
 
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
 
UXRussia 5: Юзабилити-экспертиза в прямом эфире (Юрий Ветров, Александр Хмеле...
UXRussia 5: Юзабилити-экспертиза в прямом эфире (Юрий Ветров, Александр Хмеле...UXRussia 5: Юзабилити-экспертиза в прямом эфире (Юрий Ветров, Александр Хмеле...
UXRussia 5: Юзабилити-экспертиза в прямом эфире (Юрий Ветров, Александр Хмеле...
 

UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унификации контент-проектов

  • 1. BURGER Фреймворк Mail.Ruдля контент-проектов ЮРИЙ ВЕТРОВ MAIL.RUGROUP DRIVEN DESIGN
  • 2. О ЧЕМ ЭТА ИСТОРИЯ?
  • 3. 11КОНТЕНТ-ПРОЕКТОВ Передали в наше подразделение весной 2012 года –Авто, Афиша, Гороскопы, Дети, Здоровье, Леди, Мото, Новости, Погода, Спорт, ТВ. Многие из них –лидеры в своей нише в Рунете. Уже 12 –добавились Cars и Недвижимость, Мотостал частью Авто * *
  • 4. УЛУЧШИТЬ И УНИФИЦИРОВАТЬ У каждого из продуктов своя история создания и развития. Дизайн во многом делался на аутсорсе, зачастую – несистемно. Информационную архитектуру, взаимодействие и визуальный дизайн нужно было обновить и систематизировать.
  • 5. СТАТИЧЕСКОЙ СПЕЦИФИКАЦИИ НЕДОСТАТОЧНО Вцепочке «гайдлайн → дизайн → верстка → реализация» на каждом из переходов теряются детали и всплывают косяки.
  • 6. ГАЙДЛАЙН → ДИЗАЙН → ВЕРСТКА → РЕАЛИЗАЦИЯ создали лишний паттерн контент ломает верстку заверстали неточно 2Ч4Ч4Ч4Ч 10Ч ×12ПРОДУКТОВ
  • 7. ДОКУМЕНТАЦИЮ НЕ ЧИТАЮТ РАЗРАБОТЧИКИ Да и дизайнеры тоже филонят, если синхронизироваться должны сразу несколько человек.
  • 8. ГАЙДЛАЙН ДЛЯ ЛИНЕЙКИ ПРОДУКТОВ? ХА! На практике дизайн по спецификации сложно реализовать на 100%, если это делается сразу для нескольких продуктов.
  • 9. Во-первых, спецификация сама по себе требует регулярного обновления –появляются новые паттерны, находятся более удачные решения для уже имеющихся. Во-вторых, по ходу редизайнауспевают реализовать не все и сервис запускается «почти отполированным». А вся линейка продуктов –«почти похожей». И что тогда считать референснымдизайном? Конечно, можно провести рефакторинг. Но он оказывается дорогим –его нужно проводить постоянно для каждого из продуктов, при каждом более-менее заметном обновлении.
  • 10. КОНТРОЛЬ КАЧЕСТВА ДОРОГ И УТОМИТЕЛЕН Все это требует огромных усилий и уймы времени от дизайнера на контроль качества реализации.
  • 11. ОБНОВЛЕНИЯ ДИЗАЙНА УСИЛИВАЮТ ПРОБЛЕМУ Нужно снова идти по всей линейке –переделывать и контролировать, переделывать и контролировать…
  • 12. БЕЗ ТЕХНИЧЕСКОГО РЕШЕНИЯ НЕ ОБОЙТИСЬ Только так можно сократить цепочку до «спецификация =дизайн =верстка →реализация». А значит избавиться от кучи геморроя по внедрению, улучшению и поддержке продуктов.
  • 13. ГАЙДЛАЙН =ДИЗАЙН =ВЕРСТКА → РЕАЛИЗАЦИЯ генерируется автоматом тут риск остается временный артефакт 2Ч4Ч4Ч4Ч 10Ч ×1 РАЗ ДЛЯ ВСЕХ главный ориентир
  • 15. ОТ АГРЕГАТОРАК ПРОИЗВОДИТЕЛЮ КОНТЕНТА Исторически, многие сервисы Mail.RuGroup как портала были во многом агрегаторамиконтента сторонних проектов. У нас есть большая аудитория за счет провязкипопулярных продуктов (Почта, главная страница, мессенджеры). А ей интересны и более нишевыевещи –например, новости про автомобили, семью, городские события.
  • 16. ТОЧКА ВХОДА Для части пользователей это главная страница Mail.Ru. Здесь есть список популярных материалов, так что пользователи читают новости отсюда. http://mail.ru/
  • 17. РАСПРОСТРАНЕННЫЙ СЦЕНАРИЙ Пользователь попадает сразу на новость, минуя главную страницу продукта. И закрывает ее, возвращаясь на главную Mail.Ru. При этом не осознавая разницу между сервисами – для него все это новости.
  • 18. СНИЗИТЬЗАВИСИМОСТЬ Одна из ключевых продуктовых задач –снижение зависимости контент-проектов от главной страницы. Для получения своей аудитории продукты форсировали создание собственного контента, работу с позиционированием и идентичностью, SEO и SMM. И это дало заметный эффект.
  • 19. ПРОДЛИТЬПУТЬ ПОЛЬЗОВАТЕЛЯ НА САЙТЕ От страницы новости к другому контенту. Для трафика с главной Mail.Ru, SEOи SMM. Выход –многочисленные обвязки релевантного контента. Например, фильмы и актеры для Афиши, болезни и консультации для Здоровья, объявления о подержанных машинах в Авто. Нужно также повышать глубину просмотра и другие показатели.
  • 21. БУРГЕРЫ! Идея родилась в конце 2012 года
  • 22. НОВАЯ АФИША Взяли за основу «бургерный» подход. Это серия «поясов», «строк», «врезов» или «контейнеров», которые активно используются в современных промо-сайтах. Мобильные построены по схожему принципу. http://afisha.mail.ru/
  • 23. ЖУРНАЛЬНЫЙ ПОДХОД В привычной колоночной структуре контент зажат в «стакан». «Бургер» позволяет получить более эффектный журнальный дизайн со множеством свободного пространства, крупными шрифтами и иллюстрациями. Каждый «пояс» может иметь свою компоновку, что позволяет здорово разнообразить представление контента.
  • 24. УДОБНО В РАБОТЕ Пояса можно легко добавлять и убирать со страницы, менять местами. Или использовать повторно на нескольких страницах, без необходимости учитывать соседние колонки.
  • 25. КАК УСТРОЕН БУРГЕР Легко собирать спец.проектыи новые страницы –как и в бургере, нужно просто положить компоненты между булок, т.е. шапки и футера.
  • 26. Konstantin Weissиз компании Information Architectsописывает преимущества бургерногодизайна в концепции “containerist”. 1.Бесконечный стек «поясов». 2.Легкая расстановка приоритетов. 3.Контейнеры можно дублировать и использовать на странице повторно. 4.Как развитие –использование сразу на нескольких страницах. Он может иметь нюансы отображения на каждой из них. 5.Использование сразу на нескольких сайтах.
  • 27. АДАПТИВНОСТЬ НА РАЗ-ДВА Не нужно думать о сложной логике перетекания колонок – меняется только количество элементов во врезе. На планшетах изменения и вовсе несложные. Порядок «поясов» в большом вебе и на мобильных одинаков. Блоки с горизонтальной прокруткой часто превращаются в список.
  • 28. ПРОБЛЕМЫ Страницы длинные –их могут не докручивать до конца. Свободное использование пространства –меньше полезной информации на маленьких мониторах. Красочно и ярко –может снизиться эффективность рекламы. Стали дожидаться первых рабочих версий для проверки. * *
  • 29. УНИФИКАЦИЯ КАК ПРИОРИТЕТ Стратегическая задача компании –привести все сервисы к единому виду. Но контент-проектам важно иметь свое лицо, повышая узнаваемость своего бренда, чтобы и дальше снижать зависимость от трафика с главной Mail.Ru. Как удовлетворить оба требования, чтобы интерфейсы были привычными, но не превращались в придаток портала?
  • 31. БУРГЕРБЫЛ НЕ ПЕРВЫМ Это уже наш второй подход к унификации контент-проектов. Все началось с редизайнаНовостей весной 2012года –это ключевой продукт в линейке. Интерфейс имел кучу тематических, партнерских и рекламных обвесов, а также дублирующие друг друга меню. Работа шла по двум фронтам.
  • 32. НОВОСТИ В НАЧАЛЕ 2012 ГОДА http://news.mail.ru/ http://news.mail.ru/ 4,5 МЛН В ДЕНЬ В 2014
  • 33. 1. НОВОСТЬ – ГЛАВНЫЙ ЛЕНДИНГ Самая посещаемая страница. Важно было избавиться от левой колонки –сместить фокус на контент, а не второстепенные обвесы. http://news.mail.ru/
  • 34. СХЕМА 1+2 Решением стала компоновка «1+2» –самая заметная и большая часть отдана под контент, а справа идет сдвоенная колонка рекламы и партнерских блоков. Это фокусирует пользователя на основной информации, а все сопутствующее аккуратно собрано рядом.
  • 35. ЗОНИРОВАНИЕ ИНФОРМАЦИИ Повышение стоимости рекламы позволило избавиться от части обвесов. А залипание колонки при скроллинге помогло убрать дыры, возникающие из-за разной высоты новостей. В конце страницы –стандартизированный футер с темами дня и еще одной обменкой.
  • 36. 2. ГЛАВНАЯ И РУБРИКИ Больше свободы. Главная посещается на порядок меньше остальных страниц, можно пожертвовать частью обвесов и сделать лицо проекта эффектным. http://news.mail.ru/
  • 37. Мы объявили войну колонкам –как правило, это склад чего попало, который ограничивает и портит компоновку страницы. Благодаря этому главная стала «строчной». Она и выглядит более собранной, и работать с ней удобнее. Наверное, оттуда и пришел наш будущий «бургерный» подход. С рубриками посложнее –там трафика больше и необходимо было оставить подход «1+2».
  • 38. ПРОВЕРКА БОЕМ Запуск прошел не без проблем, докручивались ключевые показатели –многие блоки работали не так как ожидалось. Но когда на основе тех же гайдлайновзапустился Спорт, проблема возникла только с одним из навигационных элементов. Гайдлайныработали!
  • 39. СТИЛИЗАЦИЯ Мы сразу подумали о стилизации контент-проектов – хотелось иметь единое интерфейсное решение, которое будет адаптироваться под тематику и аудиторию с помощью цветовой схемы, шрифтов и декоративных элементов. И уже начали переводить на него другие продукты –Спорт, Дети.
  • 40. СПОРТ И ДЕТИ http://sport.mail.ru/ http://deti.mail.ru/
  • 41. ПЕРВЫЕ ПРОБЛЕМЫ Получались близкие по структуре и визуально преемственные, но разные в подходах к созданию и поддержке проекты. Для планшетов в портретном режиме компоновка «1+2» требовала отдельной версии –появлялся горизонтальный скролл. Необходимо было техническое решение, которое жестко ограничит расхождения.
  • 42. ТЕХНИЧЕСКОЕ РЕШЕНИЕ Жестко ограничит расхождения
  • 43. ФРЕЙМВОРК ДЛЯ МОБИЛЬНОГО ВЕБА Мы прошли этот путьв прошлом году– вместе с разработчиками придумали и создали дизайнерско-технологический фреймворкдля мобильного веба.
  • 45. БОЛЬШИЕ САЙТЫ БОЛЬШЕ Правда, делать на этой же технологии сайты для мобильного и большого веба –не совсем одно и то же. Есть уйма отличий и нюансов. Но снова хвала нашей команде разработки –парни оценили вызов и возможный профит от внедрения, вписавшись в этот непростой, но крайне важный и интересный проект.
  • 47. 1. БИБЛИОТЕКА ПАТТЕРНОВ В Photoshop и InDesign, которая включает все используемые на проектах решения. А также гайдлайн с основными принципами дизайна. В планах уйти от статической документации к живому гайдлайну, использующему готовый код вместо макетов. Это сократит цепочку и избавит нас от ненужных артефактов.
  • 48. 2. ЕДИНАЯ БАЗА КОДА Реализует интерфейсные паттерны и описывается в идеологии БЭМ (блок-элемент-модификатор). Одинаковые интерфейсные блоки используются на разных страницах –их оформление не зависит от того, что происходит вокруг. Не нужно каждый раз перепроверять, корректно ли показался блок на каждой из страниц.
  • 49. 3. ШАБЛОНИЗАТОР Для показа страницы сайта в браузере пользователя. Он собирает итоговую верстку на лету из отдельно сверстанных блоков, графики, стилей и скриптов. Для всех типов страниц определяются правила их сборки – набор блоков, их последовательность и контент. Используются собственные технологии вместо идущих с БЭМ.
  • 50. ОБНОВЛЕНИЕ ДИЗАЙНА Если мы нашли новое решение для старого блока (например, новый вид фотогалерей), он меняется в единой базе кода. После этого каждый проект обновляет его из общего репозитория. Дизайнеру нужно проверить только одну реализацию, вместо того чтобы отслеживать каждый из сервисов.
  • 51. МАСШТАБНЫЙ ЗАМАХ Это непростой проект, но подход с переводом дизайна на уровень технической реализации критически важен как для дизайнеров, так и для компании.
  • 52. 1. ГАРАНТИЯ 100%90% Унификация гарантируется подходом к разработке –все готовые блоки и элементы берутся из единой базы кода и только из нее. Еще на 10% –внимательностью и вдумчивостью при использовании готовых решений.
  • 53. 2. ПОСТОЯННАЯ АКТУАЛЬНОСТЬ Уход от героических редизайновраз в несколько лет к регулярной гигиене дизайна. Перезапускиотнимают много сил и теряют тысячи мелких наработок, прикрученных к дизайну за долгое время его развития.
  • 54. 3. МАСШТАБИРОВАНИЕ УЛУЧШЕНИЙ От улучшения в одном конкретном продукте выигрывают и остальные. Например, если блок новостей по теме повысил глубину просмотров на Авто, это решение очень быстро попадет и в другие сервисы.
  • 55. 4. МЕНЬШЕ ЛИШНЕЙ РАБОТЫ Нужно рисовать меньше макетов –прощай, рутина! Страницу можно собрать из готовых блоков, причем в будущем – совсем без запуска Фотошопа. Это же касается различных спец.проектов.
  • 56. ИСПОЛЬЗОВАТЬ НЕ РУКИ, А ГОЛОВУ ДИЗАЙНЕРА Благодаря уменьшению рутины, есть возможность перевести фокус на продуктовые задачи и решение менее заметных, но также важных дизайнерских проблем. Повышение основных метрик, приятная анимация, тонкие нюансы адаптивности, приведение рекламы в человеческий вид –в бесконечном потоке на них не всегда хватало времени.
  • 57. КОМПАНИЯ В ПЛЮСЕ Системный подход к повышению эффективности продуктов. Ускорение вывода на рынок новых функций. Гарантированная унификация дизайна. За минусом входной цены перевода продуктов на платформу. * *
  • 58. КАК ПОЛУЧИТЬ ДОБРО НА ТАКОЙ ПРОЕКТ? Инициатива создания фреймворкашла снизу. Способность говорить на понятном бизнесу языке помогла нам убедить менеджмент вложиться в движок.
  • 59. ЗАПУСК В первую волну попали Авто, Афиша, Здоровье и Погода
  • 60. ПЕРВАЯ ВОЛНА АПРЕЛЬ-ОКТЯБРЬ 2014 http://afisha.mail.ru/ http://auto.mai http://health.m http://pogoda. http://****.mail
  • 61. ИССЛЕДОВАНИЯ И АНАЛИТИКА Мы провели серию юзабилити-тестов и хорошенько копнули данные аналитики. Сработал ли «бургерный» подход и что там с его рисками –в первую очередь прокруткой длинных страниц? В целом –да, но с нюансами и оговорками.
  • 62. 1. ПОЛЬЗОВАТЕЛИ ПРОКРУЧИВАЮТ СТРАНИЦЫ Воронки прокрутки для главных страниц и ключевых разделов показали, что пользователи охотно скроллятвниз и отваливаются мало.
  • 63. 2. ВРЕЗЫ БЫВАЮТ ОПАСНЫМИ Если страница содержит более-менее однородный контент – например, список фильмов или подробное описание болезни. Пользователь думает, что страница закончилась, и уходит. Из-за этого полоску шарингана странице болезни воспринимали как конец полезного контента, хотя ниже была уйма действительно ценных дополнений.
  • 65. 3. АГРЕГАЦИОННЫЕ СТРАНИЦЫ ОК Тут контрастные врезы работают хорошо –например, информация о фильме, которая почти полностью состоит из кусочков. Похоже, здесь нет ожиданий того, что является основным контентом. Также хорошо помогают ссылки-якори–пользователи еще активнее используют весь контент страницы.
  • 66. ВЫСОТА И КОНТРАСТНОСТЬ ВРЕЗОВ Мы поработали над высотой и контрастностью врезов на проблемных страницах –важно, чтобы они не разрывали однородный поток. Это помогает решить проблему докрутки. Что особенно критично для одной из ключевых продуктовых задач –уводить пользователя дальше лендингаблагодаря тематическим врезкам.
  • 67. Где-то, как с Афишей, у нас была возможность запустить раннюю версию на часть аудитории и проверить дизайн- решения в полу-боевом режиме. Где-то, как с Авто, мы были завязаны на рекламные контракты и должны были запускаться как можно скорее. Но благодаря системности технологического решения, эти накопленные знания идут на пользу всей линейке продуктов, а не остаются просто результатами отчетов «к сведению». Так что новые сервисы на движке запустятся уже без этих проблем.
  • 68. НЮАНСЫ Помимо переформатирования процесса работы над контент- проектами мы решили много других важных и интересных задач
  • 69. СТИЛИЗАЦИЯ С ПОМОЩЬЮ АКЦЕНТНЫХ ЦВЕТОВ Каждый из сервисов получит свой цвет, которым кодируется фирменная полоска под заголовком и интерактивные элементы.Прием не уникальный, но за счет точечного применения и правильного оттенка получилось особенно свежо и сочно.
  • 72. Это нововведение относительно мобильного фреймворкаи скоро подход перекочует туда. В недавно запущенном мобильном Здоровье применение стиля было делом десяти минут –фреймворкпозволяет проекту иметь свои нюансы отображения стандартных блоков.
  • 73. Одной из ранних идей стилизации было использование размытой фотографии новости на фоне. Исследования показали, что это не раздражает пользователей. Но с технической точки зрения подход оказался ресурсоемким, так что от него отказались. http://news.mail.ru/
  • 74. ШРИФТОВАЯ СЕТКА Она проработана с учетом сложностей рендеринга на различных платформах. Кастомныешрифты сейчас используют многие, но зачастую бездумно –не проверяя, как это выглядит на самых массовых в России платформах (Windows 8, Windows 7, Windows XP).
  • 75. ПРОБЛЕМЫ РЕНДЕРИНГА В РУНЕТЕ99% WINDOWS
  • 76. Мы выбрали Roboto–это один из немногих бесплатных кириллических шрифтов, имеющих широкий спектр начертаний. Да и в начале 2013 он еще не был таким массовым, как сейчас. Конечно, хотелось бы использовать что-то более редкое. Но политика лицензирования шрифтов грабительская для крупных компаний –она рассчитывается по количеству показов страниц. В нашем случае это десятки миллионов, так что стоимость аренды выходит неразумной.
  • 78. БИБЛИОТЕКА ПАТТЕРНОВ Мы собрали приличное количество наработок по решению самых распространенных интерфейсных задач. Это облегчает перевод новых проектов на фреймворки сборку спец.проектов.
  • 79. ОБЩИЕ ПРИНЦИПЫ БЛИЗКИ К МОБИЛЬНОМУ ВЕБУ Карточки для представления второстепенного контента и агрегационных страниц, врезки со слайдерами навылет, «бургерная» структура. Все это облегчит поддержку и развитие для нас, а пользователям даст предсказуемость поведения сервисов.
  • 80. БОЛЬШОЙ И МОБИЛЬНЫЙ ВЕБ http://health.mail.ru/
  • 81. РЕКЛАМНЫЕ ФОРМАТЫ И МЕСТА Он получили не меньше внимания, чем информационная архитектура, принципы взаимодействия и визуальный дизайн. В реальном мире это не надоедливые обвесы, которые делаются в последнюю очередь, а средство к существованию продукта.
  • 82. Рекламная сетка зачастую определяет внешний вид, задавая ограничения сетки дизайнерской. Мы плотно работаем с коммерческим отделом для того чтобы находить форматы, не рушащие ни дизайн, ни денежный поток проекта. Параллакс, альтернативные подходы к брендированию, человеческое представление контекстной рекламы, стандартизация полноэкранных баннеров и другие решения позволяют нам находить компромисс.
  • 86. РедизайнАвто начался с проработки обновленной рекламной сетки. Старый формат с четырьмя маленькими баннерами по углам не давал никаких возможностей по обновлению дизайна. При этом его изменение серьезно влияло на бюджет. Много итераций прошло задолго до того, как мы приступили к проработке деталей интерфейса. http://auto.mail.ru/
  • 87. Это один из нюансов продуктовой работы, которая отличается от популярных любительских концептов на Behanceи Dribbble.Нужно работать с ограничениями, а не прятаться от них.
  • 88. СЕТКА 40/20 Механизма ритма. Дал свободу в новом «бургерном» формате и учитывает первые редизайны, сделанные в подходе «1+2». http://auto.mail.ru/
  • 89. НАВИГАЦИЯ ПО ДЛИННЫМ СТРАНИЦАМ Пока она проработана частично, но мы уже заметили эффективность хороших якорей. Они помогают ориентироваться пользователям и улучшают воронку доскролла.
  • 90. Мы также рассматривали возможность включения дискретной прокрутки как на многих промо-сайтах, но пока решения на этот счет нет. Это улучшит визуальную часть за счет более эффектного использования экранного пространства, но усложнит «казуальную прокрутку» для беглого ознакомления с контентом страницы.
  • 91. ПРОДУКТОВАЯ КОМАНДА ПРОЧУВСТВОВАЛА ГАЙДЛАЙНЫ И помогает нам соблюдать консистентность. Менеджеры часто одергивают нас, если есть готовый подход –так проще и дешевле. А разработчики указывают на нестыковки –они не хотят делать много версий одного и того же паттерна. Это еще один уровень контроля качества, повышающий общую дизайн-культуру в компании.
  • 93. ПОЛИРОВКА И ШЛИФОВКА Мы хорошо поработали над шаблонизатором, который выводит информацию на сайтах. Он позволяет легко собирать новые страницы и обновлять уже собранные сразу по всей продуктовой линейке. Предстоит активная полировка визуального представления и продуктовой эффективности, хотя самое тяжелое позади.
  • 94. СТАТЬЯ ПОКА НЕ ФОНТАН CMSтребует значительной доработки. Не везде редакция может красиво заверстать текст, где-то используются специфичные размеры изображений. http://auto.mail.ru/
  • 95. Нам очень нравится то, как эту задачу решили сильные медиа-компании вроде VoxMedia и Look at Media.С помощью собственных редакционных CMS с уймой возможностей и пре-заданных стилей оформления они выдают эффектный журнальный контент, который приятно читать и рассматривать. Такая система дает журналистам и редакторам простой инструмент, который генерирует на выходе гарантированно хорошее представление статьи. И мы сейчас занимаемся этим.
  • 97. ЖИВОЙ ГАЙДЛАЙН Автоматическая спецификация на основе реальных кусков кода вместо картинок. С его помощью также можно будет собирать прототипы в приближенном к реальности виде, минуя InDesign. Примерно как в Bootstrap. Это еще один способ стать ближе к конечной реализации.
  • 99. Ускорение вывода на рынок новых возможностей продукта. Гарантированный способ получить унифицированный дизайн. От улучшения в одном конкретном продукте выигрывают все сервисы. Дизайнер меньше работает руками и больше –головой.
  • 100. УХОДИМ ОТ ГЕРОИЧЕСКИХ РЕДИЗАЙНОВ Переход к постоянно актуальному интерфейсу. Больше времени можем уделить на продуктовую работу, а не бесконечное обслуживание дизайна.При этом специалист становится продуктовым дизайнером, который перестает мыслить макетами и выходит за рамки Фотошопа.
  • 101. P.S. Это уже наш второй фреймворкдля унификации дизайна после мобильного веба. И есть еще несколько мест, где такой подход может пригодиться. Возможно, к следующей осени будет что рассказать ;)
  • 102. CREDITS ДИЗАЙН И ИНТЕРФЕЙС РАЗРАБОТКА Г.Глечян, Е.Долгов, Д.Осадчук, А.Гладков, П.Скрипкин, А.Кандауров, Е.Ферулев, С.Соловьева, Ю.Ветров С.Михальский, К.Ворожейкин, А.Бекбулатов, С.Ножкин, А.Кусимов, Д.Беляев, Е.Иванов, А.Полещук, В.Васин, М.Трусов, Б.Ребров ПОВЕРИЛ В НАС А.Рожков
  • 103. СПАСИБО! ЮРИЙ ВЕТРОВ Burger photos: Fat & Furious Burger, Recipe Tin Eats, Inspiration Kitchen, Baker by Nature, Lady & Pups, Half-baked Harvest, Bev Cooks www.jvetrau.com twitter.com/jvetrau
  • 104. 8 МЕСТ 29 МЕСТ КСТАТИ, О БУРГЕРАХ МОСКВА ПЕТЕРБУРГ МИНСК 160 МЕСТ