Софт для отрисовки дизайна сразу в html?

Question

[Сергей]

Я дизайнер и традиционно рисую макеты в .psd, после чего отправляю верстальщику. Так вот, хотелось бы исключить 'лишнее звено' в производственном процесе и экономить время для заказчиков. Нужен софт под mac, в котором макеты на лету преобразовываются в код и есть возможность делать адаптивные версии.
Видел подобное, но решил отложить на потом, а вот теперь ничего путного найти не могу(
Была очень крутая программа, не помню названия, помню только что для студенов полагалсь скидка :)

Comments

[Therapyx]

Dreamweaver? п.с. совсем без знаний html, css никак.

[Sergej]

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

Answer 1

[Павел Волынцев]

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

Более перспективным вариантом считаю изучить вёрстку. Это, в принципе, просто ремесло. Там нет магии. Все "тайные знания" уже давно являются достоянием общественности, есть обучающие материалы.

---

Может вам посмотреть на системы прототипирования? Чтобы можно было делать грубо оформленные страницы для составления общей картины.
Пальцем в небо, то есть гугль "fast prototyping":

• Пример https://proto.io/en/tour/ + https://proto.io/en/demos/
  
• Обзор www.sitepoint.com/tools-prototyping-wireframing
  

Comments

[Павел Волынцев]

Я посмотрел webbsy.com и exportkit.com - они дают внешне неплохие страницы, пригодные для landing page. Насколько я понимаю, один PSD - это одна страница HTML и это неудобно для многостраничного приложения с одинаковым оформлением страниц. В общем, на практике применять будет сложно.

[Сергей]

В целом с вами согласен, поэтому про различные psd->html речи и не идет. Сейчас на рынке есть несколько продуктов, в которых можно что называется 'draw a code' - вот нашел macaw, но это практически первопроходец рынка, а было что то еще стоящее, но к сожалению никак не могу найти.

Answer 2

[Stalker_darkway]

Сам верстальщик. Не мега-профи, но адаптивность, кроссбраузерность, всякие фишки на CSS, JavaScript реализовываю неплохо. Решил как-то попробовать пару сервисов которые автоматом генерируют код. Ссылок не дам, потому что постарался поскорее их забыть. Все что я увидел - это длиннющие название классов, куча лишнего кода, не всегда есть возможность добавления эффектов, слабая кроссбраузерность( и все в том же духе, может сейчас что и поменялось). Ну и как правило сайт пишется под какую-то CMS, если это не банальный лендинг который может и без него обойтись. А значит, что структура кода тоже должна соответствовать.
В общем если убрать верстальщика, чтобы сэкономить: время, деньги, то получится так:
Деньги будут сэкономлены. Время с большой вероятностью увеличится, потому что код обязательно где-то править нужно будет. Если знаний таких нет, то... ну либо искать другой более надежный сервис, либо обращаться опять же к верстальщику.
Ах да, забыл сказать: многие бэк-эндеры с таким кодом отправляют куда подальше. Так что есть риск не сдать вовремя проект игнорируя работу верстальщика.

Answer 3

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

Мне кажется проще убрать дизайнера, как лишнее звено. И использовать готовые премиум HTML-шаблоны. Благо их сейчас в продаже тьма. И код у них очень приличный, в отличие от того ада, который сгенерит любой, даже самый продвинутый софт. За адаптивность я вообще молчу.

Answer 4

[Александр Таратин]

https://www.adobe.com/ru/products/edge-reflow.html

Comments

[Сергей]

Спасибо, еще не пробовал, нужно будет на днях разобраться

Answer 5

[Roman]

Не знаю насчет софта под mac ось, почему бы не воспользоваться Webflow ? Забугорные дизайнеры его юзают и не отчаиваются. Пачками лендосы выдают.

1. Нужно разобраться только в позиционировании, чтобы не лепить наобум.
2. Ну и правда там все на английском, но без него сейчас никуда. Так что разбираться стоит.
3. Экспортирует html только по платной подписке.

P. S. Тут конечно от целей нужно отталкиваться. Смотря, что вам нужно нарисовать. Для одностраничников пойдет имхо.

Comments

[Сергей]

Да, в правильном направлении совет ;) webflow для лендингов подойдет, но все таки он достаточно примитивный. Есть Macaw - вот его аналог ищу более продвинутый, к сожалению мало кто знает видимо и советуют Dreamweaver

Answer 6

[Ириней Калачёв]

Macaw Scarlet обещает революцию в дизайне и вёрстке (нынешний Macaw годится лишь для прототипирования). Но волшебства не ждите - без знаний вёрстки толку от него не будет.