Подготовка и исследование
В первую очередь, проведем первичное исследование — соберем информацию путем прямого взаимодействия с предметом. Идем в магазин, чтобы купить связку бананов и понаблюдать за покупателями. Подмечаем, чем руководствуются люди при выборе продукта, делаем заметки в блокноте.
Фоткаем натуру со всех возможных ракурсов, чем больше — тем лучше. Пригодится для создания иллюстраций. Я снимал на айфон при дневном свете на подоконнике.
Кушаем натуру и читаем интернет. Методом рефлексии (наблюдением за собой) фиксируем интересные моменты на которые стоит обратить внимание, войдя в роль покупателя. Например, точно будет интересно какие в природе существуют сорта бананов и как их правильно выбирать. Я просто писал список из слов, которые могли бы быть заголовком для каждого раздела.
Главная задача лендинга — убедить пользователя совершить действие: позвонить, подписаться, купить, скачать, лайкнуть, и т. д.
В нашем случае, вызвать желание сходить в ближайший магазин и купить. Эта задача должна решаться в той или иной степени в каждом из блоков.
Пишем структуру будущего сайта в виде списка и попробуем визуализировать их бумаге:
- Обложка
- Пищевая ценность
- Сорта
- История
- Рецепты
- Как выбрать
- Карта с магазинами
Почему на бумаге? Просто это инструмент, который не включает режим «перфекционист». Часто, делая прототип на экране, можно плавно перейти в решение задач вроде «что-то мне не нравится толщина линий в макете», «серый какой-то скучный», «на типографику смотреть тошно, надо подвигать» и сам прототип уходит на второй план. А тут все просто. Картинка — блок с крестиком, заголовок —толстая линия, абзац — прямогуольник с диагональю. Рисуй хоть криво, хоть ровно. Получается намного быстрее и продуктивнее.
Жаль, что привык я к этому методу относительно недавно. Это конечно не «волшебная палочка», но позволяет немного приблизиться к предсказуемому результату.
Книги, которые помогут в верстке. Начальный минимум:
- Йозеф Мюллер-Брокман. Модульные сетки в графическом дизайне. Arthur Niggli, 1996
- Ян Чихольд. Облик книги.Издательство Студии Артемия Лебедева, 2009
- Джеф Раскин. Новые направления в проектировании компьютерных систем. Символ плюс, 2005
- Брюс Тогнаццини. Главные принципы интерактивного дизайна(на английском)
- Эдвард Тафти. Представление информации. Graphic Press, 1990
- А. Э. Мильчин, Л. К. Чельцова. Справочник издателя и автора. Редакционно-издательское оформление издания. ОЛМА-Пресс, 2006
Ок, у нас есть структура и какой-то прототип. Теперь можно посмотреть на существующие решения. Мы не будем смотреть только лендинги про фрукты, но и любые други продающие какой-либо товар. Многие блоки и элементы кочуют из одного сайта в другой. Это можно называть штампами, клише. Но раз они есть в большинстве работ, то может быть это решения которые работают? Однако, есть и негативный момент — все лендинги сейчас на одно лицо. Нужно это учитывать. Очень важный момент, что сперва нужно достать из своей головы мысли и возможные решения, а затем уже смотреть что делают другие.
Для организации и хранения изображений я использую программу Inboard. Она позволяет делать full-page скриншоты сайтов и хранить картинки по различным категориям и назначать им теги. Я создаю отдельную папку для каждого проекта и периодически сохраняю разные штуки которые мне приглянулись: красивая палитра, живопись которая цепляет, крутое интерфейсное решение. Я практикую этот метод, т.к. чаще всего в голове эта информация не оседает. Если есть возможность распечатать и завесить стену — отлично. Получится некий мудборд, задающий планку качества.
Обложка
Обложка—это первое что видит пользователь заходя на сайт. На обложке отражена суть продукта. Стараемся максимально посвятить этот блок банану. Часто, изображение на обложке называют eye-catcher «ловушка для глаз». Внимание человека инстинктивно приковывается к движущемуся объекту. Дак вот, для усиления эффекта можно добавить банану небольшую анимацию, например поворот.
Есть два способа реализации этого эффекта. Фотосъемка (стоп-моушн) и 3д-графика. Последнее делается тогда, когда снимать вживую либо слишком дорого и долго, либо невозможно вовсе (например визуализация еще несуществующего объекта).
Т.к. проект учебный, в целях развития собственных навыков я выбрал визуализацию.
Все начинается с создания 3д-модели. В последствии мы создадим текстуру, анимацию, настроим свет, материалы и получим наш результат. Как вот, замоделим сразу несколько вариантов, чтобы примерить на обложку подходящий. Что касается софта, моделировал в Cinema 4D и немного правил геометрию в Zbrush (в нем очень удобно работать с органикой).
Такой навык как 3д-визуализация в арсенале очень полезен. Научиться этому совсем не сложно, в интернете много туториалов по моделированию и визуализации. Рекомендую DigitalTutors, там все четко и без лишней воды. Смысл в том, что вам первое время нужно копировать все за лектором. Со временем вы научитесь представлять объект в редакторе через призму модификаторов и операций самостоятельно.
Я остановился на варианте с одним бананом. После того как мы закончили модель, займемся текстурой. Тут нам пригодятся фотографии. Фотошопим из разных кусков и натягиваем на модель.
Теперь нужно это красиво отрендерить. Я использую Octane Render, его отличие от стандартного C4D (и других подобных) состоит в том, что для вычислений он использует не центральный процессов CPU, а процессор графического ускорителя GPU. Это дает возможность видеть вполне приемлемый результат практически в реальном времени. Ни разу не пожалел о покупке.
Тестовая картинка готова. Сразу подмечаем моменты, которые требуется поправить в дальнейшем. А именно, кончики банана слишком фейково выглядят. Нужно добавить в них немного жизни и несовершенства. С такой картинкой можно начать рисовать дизайн.
Рисовал в Sketch. Вообще, все что для экрана уже давно делаю там.
Анимация поворота банана
Сложная анимация для сайта, чаще всего представляет собой последовательность кадров — как раз то, что получается на выходе рендера. Открываем сиквенцию в After Effects, правим цвет и делаем маску с рызмытием по краям, чтоб картинка без видимых переходов ложилась на фон с заливкой.
Пищевая ценность
Пищевая ценность — это длинный список микроэлементов, влияние которых на организм известно далеко не каждому. Необходимо переформулировать это в более понятную форму. Например, вместо «бананы содержат n-мг калия» можно написать «бананы богаты калием —он необходим мозгу, сердцу и мышцам». По этому же принципу пишем остальное. Со списком микроэлементов содержащихся в банане можно ознакомиться по ссылке.
Блок о пищевой ценности также нуждается в иллюстрации. Тут подойдет открытый банан, как-бы намекающий на внутреннее содержание продукта. Сперва я хотел добавить анимацию открытия, но отказался от этой идеи, т.к. рендер не выглядел убедительно и требовал ретуши. А капитально ретушировать 30 кадров в секунду непростое занятие и оно отнимет много времени. Ну или изначально нужно делать высокополигональную модель и текстуры большого разрешения. Работать с таким объемом информации на моем макбуке будет затруднительно. Поэтому, для появления иллюстрации на странице я использовал стандартные средства анимации: прозрачность, поворот и позиция.
В итоге получился вот такой рендер. Маленькая хитрость: если в итоге нужно детальное изображение, скажем, в 1000 px по одной стороне, то лучше работать в масштабе умноженном на 3. При интерполяции в финале, картинка обогатится множеством деталей.
Сверсталось все вот в такой экран. Информацию по микроэлементам в основном брал из википедии и других статей. Кстати, в макете использовал иконки icons8.
Сорта
Для рядового россиянина бананы это просто бананы. Многие даже не задумываются о существовании других сортов. Задача этого блока—показать что есть не только бананы которые лежат в ближайшем супермаркете. Снова обращаемся к википедии, выписываем наиболее популярные и делаем из них карточки.
История
Выписываем упоминания о бананх и привязываем к таймлайну.
Рецепты
Для макета я использовал рецепты и картинки с allrecipes.com, вот только у них копирайт не позволяет использовать их в своем макете. Тут я вспомнил про чудесный Food Club.
© Ни одно авторское право реально не защитит авторов фотографий и рецептов от копирования. Но Вам ничего не будет стоить, если в знак благодарности в конце Вашего поста будет стоять ссылка на сайт и имя кулинара, опубликовавшего рецепт. Спасибо тем, кто не просто копирует чужие фотографии, а помогает развивать интересные интернет-проекты.
Как выбрать
Блок с советами о том, на что стоит обратить внимание при покупке.
В итоге получился вот такой лендинг. Далее, нам нужно показать как ведет себя сайт вживую. Конечно, верстать его мы не будем, но зато можем анимировать. Есть множество инструментов для создания живых прототипов, таких FramerJS, Facebook Origami, Priciple, но большой минус всех этих систем — отсутсвие шейповой анимации. Поэтому я выбрал After Effects.
Вот и все. Писать о своей работе — очень полезный опыт.
Если вам понравилась эта история, поделитесь ей с другими читателями или нажмите сердечко
