x
 
Андрей
4 июня 2012

Привет! Хочу сделать красивый блог с пошаговыми рецептами. Но удобный и красивый.

Подскажите, как лучше расположить список ингредиентов, насколько большими делать картинки промежуточных шагов, как эти шаги разделять визуально.

Спасибо :-)



Андрей!

Первое, о чём стоит подумать — как готовить по вашему рецепту. Переключать шаги или даже прокручивать текст на экране грязными руками не слишком удобно:


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

Список ингредиентов должен отличаться от основного текста рецепта чуть ли не цветом и текстурой, чтобы легко возвращаться к нему глазом. У «Афиши-Еды» список выделен плотностью шрифта и мгновенно считывается, даже если убрать графические разделители:

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


Если не томить свиную брюшину в течение восьми часов, то большую часть времени приготовления занимает подготовка продуктов из списка: мойка, чистка, нарезка и тёрка. Субъективно кажется, что готовка даже не началась, а между тем все эти банальные подготовительные операции обычно размазаны внутри текста рецепта. И не дай бог начать готовить по шагам, не заготовив продукты: непременно выяснится, что в последний момент нужно добавить мелко нарезанную кинзу.

Поэтому я предпочитаю формат ингредиентов в уже подготовленном виде и желательно в человеческих мерах измерения:

Кстати, в американских рецептах ингредиенты почти всегда уже в состоянии chopped или minced.

Порядок продуктов в списках обычно случаен. Авторы рецептов, к сожалению, пренебрегают группировкой — лишь иногда можно встретить разделы «для соуса» и «для гарнира». Между тем, рецепты станут удобнее, если сгруппировать ингредиенты по технике приготовления: сначала лук и специи для сотейника, затем ингредиенты мясного бульона, наконец хлеб и сыр для гренки. Если соль и перец сразу идут в сотейник, нечего им делать в традиционном конце списка.

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

Биоинженер Мэтью Ветергрин придумал рецептограмму Ганта:

А журнал «Гуд» год назад объявил конкурс редизайна рецептов. Ниже самые милые и осмысленные, по моему мнению, работы:


Поделиться
Отправить

Комментарии

Александр Дебкалюк
4 июня 2012

При возможности посмотрите упомянутое приложение, а свой блог или его концепт (хоть и бумажный набросок) проверьте на близких — понаблюдайте за тем, на каких этапах им нужен список ингредиентов, легко ли засекать время и следить за ним.

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

Чтобы не марать экран, мобильное приложение с рецептами Джейми Оливера для телефонов и планшетов позволяет листать шаги приготовления голосовыми командами Next, Previous.

Николай Гурьянов
4 июня 2012

Мне нравится, когда рецепты снабжены видеоверсией, как, например, на сайте Талерка.ру Андрея Азарова:
http://www.talerka.ru/recept/usa/new_england_clam_chowder/

Для кулинарного блога в самый раз.

Федот Березной
4 июня 2012

На приводимых разворотах примеры выделения ингредиентов.

Рамкой и отдельным полем (большой рамкой во всю страницу):

Федот Березной
4 июня 2012

В американских кулинарных книгах 20-х годов XX века:

Александр Ким
4 июня 2012

Мне было бы приятно увидеть на любой странице с рецептом видео, чтобы понимать, правильно ли я делаю и правильно ли получается.

Ну и всякие хитрости подсмотреть не помешает: как повар держит нож, как шинкует и т. д.

Игорь Семиохин
5 июня 2012

Ещё как пример хорошего сайта рецептов можно привести Панир — http://panir.ru/

Вполне себе удобный для приготовления сайт, весь процесс готовки по максимуму сведён в единое место, что не заставляет делать (или значительно уменьшает) движения по листанию. Ингредиенты сведены так же в одном месте. Ну и сочная картинка (промежуточных картинок только не хватает, но их можно сделать всплывающими окнами при наведении для сверки с оригиналом в процессе).

Андрей Азаров
19 июня 2012

Автор сайта http://panir.ru/ честно признался мне, что перед работой над своим сайтом был вдохновлён моим — http://www.talerka.ru/

Если действительно хотите совет, то скачайте моё приложение с видеорецептами — http://itunes.apple.com/…/id484985988?mt=8&ign-mpt=uo=2 (http://itunes.apple.com/ru/app/talerka/id484985988?mt=8&ign-mpt=uo=2) — оно бесплатное. Там увидите, что, во-первых, оно не засыпает, как почти все приложения на русском языке, во-вторых, там нет пошаговых фото, и поэтому не надо трогать экран, в-третьих, там есть видео и текст на одной странице (айпад-версия), в-четвёртых, зачем вам свой блог, если в Талерке 3.0 появится функция добавления рецепта?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

4 5 Числа, кратные 5 или 10 кажутся больше, чем остальные 4 6




Недавно всплыло

Поделитесь соображениями, как работать, путешествуя 8 Визуализация проявляет 4 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 1