Есть ли графический интерфейс программирования без кодинга (например для JS)?

Question

[Нерон Лордов]

Я люблю делать интерактивные прототипы в Axure, причем стараюсь внедрять дизайн в прототип. Шрифты, там, иллюстрации, иконки, анимация. Короче дизайню прямо в акшуре, обращаясь при необходимости к иллюстратору/фотошопу для подготовки графики. И всё бы хорошо, если бы не анимация. Встроенных стредств анимации мне не хватает - так как они банальны. А встроенные средства программирования удручают, хотя подозреваю с их помощью можно сделать многое, но лет эдак за сто.

Сам я дизайнер. Немного умею HTML, CSS, но с программированием совершенно не в ладах. Мне бы хотелось делать живые прототипы с кастомной анимацией. И для этого мне нужна некая программа с графическим интерфейсом программирования. Как я это вижу - это похоже на рисование блоксхем. Ромбики, квадратики, стрелочки. Чтоб не было кода. Код наводит на меня уныние, не могу я на него смотреть. А квадратики-ромбики - это весело и интересно. Склад ума позволяет проектировать сложные абстракции, но от кода у меня глаза на лоб лезут.

Кто что посоветует?

Answer 1

[tex0]

Визуальное программирование

Comments

[Нерон Лордов]

Очень интересно. А что подходит для прототипирования веб-сайтов? Мне нужно, чтоб на выходе был файл, который клиент сможет открыть без дополнительного ПО. В идеале - html-файлы

[tex0]

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

[tex0]

Liquidos: сори, пометку для вас забыл)

[tex0]

Liquidos: И всё же я не совсем понял для чего вам на выходе html-страница?
Для будущего сайта? Если да, то берите любой конструктор страниц и вперед!
(Гугл в помощ в таком случае)

[Нерон Лордов]

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

[tex0]

Liquidos: да, каюсь, не дочитал.
(повторяй за мной: я никогда больше не буду язвить собеседнику, где бы он был не прав!)

[Нерон Лордов]

tex0 ну вот это уж моё конституционное право)

[Нерон Лордов]

а всё-таки, из списка по ссылке с чего лучше начать и что лучше подойдет для веба?

[tex0]

Liquidos: "ну вот это уж моё конституционное право)" - есть ещё и обязанности, давай не будем о них забывать =) (Так же существуют правила хорошего тона. Вспомни - ты пришёл задавать вопросы, а не тот кто тебе отвечает ;) )

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

[Нерон Лордов]

Я действительно всего не знаю, поэтому и задаю тут вопросы, язвлю. Насчет плагинов тема - мне это в голову не пришло, спасибо.

[tex0]

Liquidos: Пожалуйста. Удачи! ;)

Answer 2

[Владимир Ребров]

Adobe Muse (используйте, код, который она генерит, только для демонстрационных целей)
Но вы должны понимать, что сколь-нибудь серьезная динамика на фронтэнде делается только через кодинг и никак иначе. А так, что-нить простенькое накидать можно.
Indigo Studio
Framer
Proto.io

Comments

[Нерон Лордов]

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

[Roman K]

Liquidos: Это менее удобно, это генерирует много лишнего кода (который генерирует лишний трафик), да и просто ручной код намного чище и лаконичней. Вам нет смысла использовать эти программы, лучше уделить пару недель HTML и CSS.

[Владимир Ребров]

Liquidos: по той же причине, почему нет программ, в которых можно было бы писать музыку, не зная ноты, стихи, не зная языка, и разрабатывать чертежи сложных инженерных сооружений, не зная сопромата.

[Нерон Лордов]

Прототипу не нужен чистый код, у него другие задачи - эффективно визуализировать идею

[Нерон Лордов]

Не верные аналогии. Акшур позволяет прототипирования без кода. Но я из него вырос

[Владимир Ребров]

Roman Kitaev: зачем ТС хтмл?

[Владимир Ребров]

А для визуализации идеи вам и не нужна привязка к коду. Есть же поограммы для создания анимаций. After Effects тот же.

[Нерон Лордов]

Да, мне нужно настраивать поведение интерфейса без кода, а не лезть в хтмл

[Нерон Лордов]

Мне нужна программа для создания _интерактивного_ анимированного прототипа :)

[Владимир Ребров]

Liquidos: аналогии верные. Вы просто слабо себе представляете, что такое кодинг и возможности его автоматизации.

[Нерон Лордов]

Я понимаю что многого хочу, но ведь идея то хорошая)

[Нерон Лордов]

Я очень хорошо представляю возможности Кодина, поэтому я и хочу использовать эти возможности. Но без кода.

[Владимир Ребров]

Странно, мне гугль вывалил на первой же стр подборку сервисов и по для прототипирования ui с анимацией.

[Нерон Лордов]

У них возможности огранниченные

[Владимир Ребров]

Отредактировал первый пост. Навскидку, одна точно полностью покрывает ваши требования.

[Нерон Лордов]

Постараюсь попробовать, спасибо мужик

[Владимир Ребров]

Судя по демке Framer.js просто шикарна. Но, конечно, нужно потратить время на освоение.

[Нерон Лордов]

Да я тоже очень заинтересовался, но это под мак ось (((

[Нерон Лордов]

Скачал триальник Adobe Muse, как только доберутся руки опробовать - отпишусь.

Answer 3

[xmoonlight]

Сам я дизайнер. Немного умею HTML, CSS, но с программированием совершенно не в ладах. Мне бы хотелось делать живые прототипы с кастомной анимацией.

Генерация страницы по шаблону.
Например, есть "примитив":
"Карусель":
Список объектов: A,B,C,D
Ориентация: горизонтально
Направление прокрутки: слева направо
Ширина: по всей ширине окна браузера,
Высота: 1 элемент
Синоним: "новые товары"

Добавление свойств и условия их изменения - так же через [+]
А затем, в шаблоне (надпись на блоке), просто указываете: {{{новые товары}}}
или
{{{новые товары}}}
{{{новые товары}}}
{{{новые товары}}}
(для вывода 3-х или создать цикл)

В любом случае - это можно все систематизировать и упорядочить.
Вопрос стоит только в трудозатратах.

Кто что посоветует?

При наличии средств, начинать разработку такого замечательного решения для дизайнеров, облегчающего труд для создания полноценного "живого" шаблона для дальнейшего подключения к back-end'у.

UPD: вот уже подобное скоро выйдет: tutorialzine.com/bootstrapstudio

Comments

[Нерон Лордов]

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

[xmoonlight]

Liquidos:
про готовый шаблонизатор: не встречал подобный...
про стартап: можно - тема интересная!
Правда единственная сложность - это "плывущие" стандарты web...
Можно попробовать начать с архитектуры и далее - просто писать модули..

[Нерон Лордов]

Про "единственную сложность" - поподробнее? Как-то же работают старые версии программ для прототипирования, несмотря на прогресс www

[xmoonlight]

Liquidos: например?

[Нерон Лордов]

Axure 7, например. Выпустили давно, пользуюсь до сих пор. Многие и предыдущей версией пользуются, т.к. лень переносить шаблоны на новую версию. Да и я изредка строчу HTML и CSS по знаниям 10+ летней давности, и ничего - работает всё)

[xmoonlight]

Liquidos: я понял. Вы не делали сложной вёрстки просто напросто....

[Нерон Лордов]

В общем дело не выгорит без команды яйцеголовых и камаза бабок?

[xmoonlight]

Liquidos: Логика верная у Вас. НО!!! На каждую хитрую .... с винтом: можно разработать ОТКРЫТЫЙ РАСПРЕДЕЛЁННЫЙ ПРОЕКТ!

[Нерон Лордов]

так вот почему опен-сорс в тренде)

[xmoonlight]

Liquidos: ну да.... именно.... а потом в коде разобраться могут только те, кто с ним копался)

[Нерон Лордов]

Ну думаю тут для зачинщика важнее успеть срубить бабок и улететь саранчить на другом поле)

[xmoonlight]

Liquidos: нет, просто "отцы" своего популярного Open Source продукта берут дороже за модификацию под заказчика и поддержку в несколько раз. Это - что-то типа инвестирования собственной открытой разработкой в свой PR и будущий доход.

[xmoonlight]

xmoonlight: tutorialzine.com/bootstrapstudio (скоро...)

Answer 4

[Николай]

HTML Designer for Brackets

Comments

[xmoonlight]

Ну, там круто!!!
Но, правда, без шаблонных функциональных блоков....

[Нерон Лордов]

Ух ты, выглядит действительно интересно, скачал, попробую на досуге. Кто-нибудь пробовал эту программулину? Есть комментарии? Николай ?

[nonlux]

Немного поясню, brackets - это редактор кода ( как блокнот например :) ) он opensource. Экспорт psd происходит на серверах adobe через creative clods ( и это не opensource).
Я думаю, для тебя это решение не подходит так как на выходе один фиг html + css без анимаций и код для них писать нужно.

Answer 5

[nonlux]

Если понимаешь приблизительно как работает веб фронт ( html + css + js ). То можешь делать так:
Бери сверстанную страницу прототипа, подключай нужные тебе скрипты js и пиши логику анимаций и переходов в https://developers.google.com/blockly/
и профит )

Comments

[nonlux]

скинь мне на почту в профиле контакты свои, поговорим о наших проблемах детальнее?