Портфолио, видео preview макета сайта, как он работает...?

Question

[Алексей Просто]

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

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

То есть нужно сидеть и серьёзно так заморочить себя с adobe after effect (есть навыки, но ведь это титанический труд будет)? Как упростить процесс? Есть ли что-то готовое? Есть ли вообще материал по этой теме?

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

Answer 1

[Андрей]

Наверное только руками в видеоредакторе.
Скажу даже больше, я и сверстанные и готовые продукты (SaaS) делаю руками в видеоредакторе. Только так можно сделать качественно.
Да, долго и дорого, но по другому я на результат даже смотреть не могу.

Answer 2

[Сергей Тилион]

Многие анимации реального интерфейса, которые демонстрируют дизайнеры на Behance, делаются в Principle principleformac.com В нём ты можешь писать скринкаст того как ты взаимодействуешь с собранным прототипом (в прототип суются картинки из готового макета), получается демка, сохраняешь, заливаешь на Vimeo, вставляешь в презентации на Behance.

А что для винды есть — не знаю. Вообще нереально быть хорошим дизайнером на винде, как я понял. Здесь гетто дизайнерского софта, а на маке - Эльдорадо. И именно на маке (ИМХО) создаются тренды, в том числе за счёт большого количества офигенного современного дизайнерского ПО.

Comments

[Андрей]

Если вы профессионал, то всё это всего лишь инструменты для решения задач. Не важно на какой ОС. На винде всего этого вторичного хлама нет, потому что не получится это впарить хомячкам, которые думают, что купив мак и "фотошоп", они станут дизайнерами.
Зачем мне новый, неизвестный, дорогой и узкоспециализированный софт, для того, для чего уже есть Illustrator + AfterEffects?

[Сергей Тилион]

Андрей: Здесь всё упирается в скорость и стандартизацию. Если вы создаёте продукт в Люстре и АЕ с той же скоростью, с которой другие в Скетче и Принципл, то вы, безусловно, большой молодец. Вот только перейдя на Скетчи и Принципл вы, со своей скоростью, сможете рисовать ещё вдвое быстрее, переборов свою привычку сидеть работать в монструозной программе не созданной для вашей задачи (мы говорим об интерфейсной анимации). А что касается стандартов, то вы можете рисовать интерфейсы хоть в Xara 3D, только работу не найдёте, потому что в индустрии другие стандарты. Точно так же как в серьёзных студиях становится всё труднее найти работу фотошоперам, которые возомнили себя богомерзкими хомячками и по глупости своей пересели на Скетч. Который ускоряет работу и позволяет лучше прорабатывать адаптивность, но это не важно, они просто хомячки.

Answer 3

[Сергей Константинов]

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