Презентация Юрия Ветрова "Burger-Driven Design. Фреймворк Mail.Ru для унификации контент-проектов" с конференции User Experience Russia 2014.

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 РАЗ ДЛЯ ВСЕХ
главный ориентир

14. ПРОДУКТОВАЯ ЗАДАЧА

15. ОТ АГРЕГАТОРАК ПРОИЗВОДИТЕЛЮ КОНТЕНТА
Исторически, многие сервисы Mail.RuGroup как портала были во многом агрегаторамиконтента сторонних проектов. У нас есть большая аудитория за счет провязкипопулярных продуктов (Почта, главная страница, мессенджеры). А ей интересны и более нишевыевещи –например, новости про автомобили, семью, городские события.

16. ТОЧКА ВХОДА
Для части пользователей это главная страница Mail.Ru. Здесь есть список популярных материалов, так что пользователи читают новости отсюда.
http://mail.ru/

17. РАСПРОСТРАНЕННЫЙ СЦЕНАРИЙ
Пользователь попадает сразу на новость, минуя главную страницу продукта. И закрывает ее, возвращаясь на главную Mail.Ru. При этом не осознавая разницу между сервисами – для него все это новости.

18. СНИЗИТЬЗАВИСИМОСТЬ
Одна из ключевых продуктовых задач –снижение зависимости контент-проектов от главной страницы. Для получения своей аудитории продукты форсировали создание собственного контента, работу с позиционированием и идентичностью, SEO и SMM. И это дало заметный эффект.

19. ПРОДЛИТЬПУТЬ ПОЛЬЗОВАТЕЛЯ НА САЙТЕ
От страницы новости к другому контенту. Для трафика с главной Mail.Ru, SEOи SMM. Выход –многочисленные обвязки релевантного контента. Например, фильмы и актеры для Афиши, болезни и консультации для Здоровья, объявления о подержанных машинах в Авто. Нужно также повышать глубину просмотра и другие показатели.

20. ТЕМАТИЧЕСКИЕ ПРОВЯЗКИ

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.
Как удовлетворить оба требования, чтобы интерфейсы были привычными, но не превращались в придаток портала?

30. ПРЕДЫСТОРИЯ

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. ФРЕЙМВОРК ДЛЯ МОБИЛЬНОГО ВЕБА
Мы прошли этот путьв прошлом году– вместе с разработчиками придумали и создали дизайнерско-технологический фреймворкдля мобильного веба.

44. СПАСИБО, АНТОН!

45. БОЛЬШИЕ САЙТЫ БОЛЬШЕ
Правда, делать на этой же технологии сайты для мобильного и большого веба –не совсем одно и то же. Есть уйма отличий и нюансов. Но снова хвала нашей команде разработки –парни оценили вызов и возможный профит от внедрения, вписавшись в этот непростой, но крайне важный и интересный проект.

46. КАК РАБОТАЕТ ФРЕЙМВОРК

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. ВРЕЗЫ БЫВАЮТ ОПАСНЫМИ
Если страница содержит более-менее однородный контент – например, список фильмов или подробное описание болезни. Пользователь думает, что страница закончилась, и уходит.
Из-за этого полоску шарингана странице болезни воспринимали как конец полезного контента, хотя ниже была уйма действительно ценных дополнений.

64. ВРЕЗЫ, РАЗРЫВАЮЩИЕ ПОТОК

65. 3. АГРЕГАЦИОННЫЕ СТРАНИЦЫ ОК
Тут контрастные врезы работают хорошо –например, информация о фильме, которая почти полностью состоит из кусочков. Похоже, здесь нет ожиданий того, что является основным контентом.
Также хорошо помогают ссылки-якори–пользователи еще активнее используют весь контент страницы.

66. ВЫСОТА И КОНТРАСТНОСТЬ ВРЕЗОВ
Мы поработали над высотой и контрастностью врезов на проблемных страницах –важно, чтобы они не разрывали однородный поток. Это помогает решить проблему докрутки. Что особенно критично для одной из ключевых продуктовых задач –уводить пользователя дальше лендингаблагодаря тематическим врезкам.

67. Где-то, как с Афишей, у нас была возможность запустить раннюю версию на часть аудитории и проверить дизайн- решения в полу-боевом режиме.
Где-то, как с Авто, мы были завязаны на рекламные контракты и должны были запускаться как можно скорее.
Но благодаря системности технологического решения, эти накопленные знания идут на пользу всей линейке продуктов, а не остаются просто результатами отчетов «к сведению». Так что новые сервисы на движке запустятся уже без этих проблем.

68. НЮАНСЫ
Помимо переформатирования процесса работы над контент- проектами мы решили много других важных и интересных задач

69. СТИЛИЗАЦИЯ С ПОМОЩЬЮ АКЦЕНТНЫХ ЦВЕТОВ
Каждый из сервисов получит свой цвет, которым кодируется фирменная полоска под заголовком и интерактивные элементы.Прием не уникальный, но за счет точечного применения и правильного оттенка получилось особенно свежо и сочно.

70. ПРИМЕРЫ СТИЛИЗАЦИИ

71. ГЕНЕРАТОР ЦВЕТОВ
КОМПЛЕМЕНТАРНЫХ К СИНЕМУ

72. Это нововведение относительно мобильного фреймворкаи скоро подход перекочует туда.
В недавно запущенном мобильном Здоровье применение стиля было делом десяти минут –фреймворкпозволяет проекту иметь свои нюансы отображения стандартных блоков.

73. Одной из ранних идей стилизации было использование размытой фотографии новости на фоне. Исследования показали, что это не раздражает пользователей.
Но с технической точки зрения подход оказался ресурсоемким, так что от него отказались.
http://news.mail.ru/

74. ШРИФТОВАЯ СЕТКА
Она проработана с учетом сложностей рендеринга на различных платформах. Кастомныешрифты сейчас используют многие, но зачастую бездумно –не проверяя, как это выглядит на самых массовых в России платформах (Windows 8, Windows 7, Windows XP).

75. ПРОБЛЕМЫ РЕНДЕРИНГА
В РУНЕТЕ99% WINDOWS

76. Мы выбрали Roboto–это один из немногих бесплатных кириллических шрифтов, имеющих широкий спектр начертаний. Да и в начале 2013 он еще не был таким массовым, как сейчас.
Конечно, хотелось бы использовать что-то более редкое. Но политика лицензирования шрифтов грабительская для крупных компаний –она рассчитывается по количеству показов страниц. В нашем случае это десятки миллионов, так что стоимость аренды выходит неразумной.

77. ОПИСАНИЕ ШРИФТОВОЙ СЕТКИ

78. БИБЛИОТЕКА ПАТТЕРНОВ
Мы собрали приличное количество наработок по решению самых распространенных интерфейсных задач. Это облегчает перевод новых проектов на фреймворки сборку спец.проектов.

79. ОБЩИЕ ПРИНЦИПЫ БЛИЗКИ К МОБИЛЬНОМУ ВЕБУ
Карточки для представления второстепенного контента и агрегационных страниц, врезки со слайдерами навылет, «бургерная» структура. Все это облегчит поддержку и развитие для нас, а пользователям даст предсказуемость поведения сервисов.

80. БОЛЬШОЙ И МОБИЛЬНЫЙ ВЕБ
http://health.mail.ru/

81. РЕКЛАМНЫЕ ФОРМАТЫ И МЕСТА
Он получили не меньше внимания, чем информационная архитектура, принципы взаимодействия и визуальный дизайн. В реальном мире это не надоедливые обвесы, которые делаются в последнюю очередь, а средство к существованию продукта.

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

83. ПАРАЛЛАКС

84. БРЕНДИРОВАНИЕ

85. СТАНДАРТИЗАЦИЯ

86. РедизайнАвто начался с проработки обновленной рекламной сетки. Старый формат с четырьмя маленькими баннерами по углам не давал никаких возможностей по обновлению дизайна. При этом его изменение серьезно влияло на бюджет. Много итераций прошло задолго до того, как мы приступили к проработке деталей интерфейса.
http://auto.mail.ru/

87. Это один из нюансов продуктовой работы, которая отличается от популярных любительских концептов на Behanceи Dribbble.Нужно работать с ограничениями, а не прятаться от них.

88. СЕТКА 40/20
Механизма ритма. Дал свободу в новом «бургерном» формате и учитывает первые редизайны, сделанные в подходе «1+2».
http://auto.mail.ru/

89. НАВИГАЦИЯ ПО ДЛИННЫМ СТРАНИЦАМ
Пока она проработана частично, но мы уже заметили эффективность хороших якорей. Они помогают ориентироваться пользователям и улучшают воронку доскролла.

90. Мы также рассматривали возможность включения дискретной прокрутки как на многих промо-сайтах, но пока решения на этот счет нет.
Это улучшит визуальную часть за счет более эффектного использования экранного пространства, но усложнит «казуальную прокрутку» для беглого ознакомления с контентом страницы.

91. ПРОДУКТОВАЯ КОМАНДА ПРОЧУВСТВОВАЛА ГАЙДЛАЙНЫ
И помогает нам соблюдать консистентность. Менеджеры часто одергивают нас, если есть готовый подход –так проще и дешевле. А разработчики указывают на нестыковки –они не хотят делать много версий одного и того же паттерна.
Это еще один уровень контроля качества, повышающий общую дизайн-культуру в компании.

92. ПЛАНЫ

93. ПОЛИРОВКА И ШЛИФОВКА
Мы хорошо поработали над шаблонизатором, который выводит информацию на сайтах. Он позволяет легко собирать новые страницы и обновлять уже собранные сразу по всей продуктовой линейке.
Предстоит активная полировка визуального представления и продуктовой эффективности, хотя самое тяжелое позади.

94. СТАТЬЯ ПОКА НЕ ФОНТАН
CMSтребует значительной доработки. Не везде редакция может красиво заверстать текст, где-то используются специфичные размеры изображений.
http://auto.mail.ru/

95. Нам очень нравится то, как эту задачу решили сильные медиа-компании вроде VoxMedia и Look at Media.С помощью собственных редакционных CMS с уймой возможностей и пре-заданных стилей оформления они выдают эффектный журнальный контент, который приятно читать и рассматривать.
Такая система дает журналистам и редакторам простой инструмент, который генерирует на выходе гарантированно хорошее представление статьи. И мы сейчас занимаемся этим.

96. СОВРЕМЕННЫЕ CMS

97. ЖИВОЙ ГАЙДЛАЙН
Автоматическая спецификация на основе реальных кусков кода вместо картинок. С его помощью также можно будет собирать прототипы в приближенном к реальности виде, минуя InDesign. Примерно как в Bootstrap.
Это еще один способ стать ближе к конечной реализации.

98. ЧТО В ИТОГЕ?

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 МЕСТ