Дизайн сайта в фотошопе, как сделать всё нормально?

Question

[Ajih]

Недавно заметил как наш главный дизайнер создает дизайны в Photoshop, аргументируя это тем, что проще нарисовать страницу сайта чем написать код для отдельного элемента, так вот, мне это тоже стало интересным и мне бы хотелось побольше об этом узнать:
1)После создания дизайна (установки фонового изображения, добавления таблиц, списков и т.п.) как сделать их активными? (Переход на другие страницы, добавление скриптов)
2)Чем фотошопный дизайн лучше/хуже написанного дизайна?
3)Существуют готовые решения для Photoshop для подобных случаев?

Answer 1

[Анна Бакурова]

ого! Что???
2)Чем фотошопный дизайн лучше/хуже написанного дизайна?

- это Вы что ли дизайн кодом делаете? Это вообще студия или разработчики вольного типа? Если студия то это крах!
Все дизайны сначала "рисуются" и только потом пишется код
Так вот дизайнеры это те кто рисуют, а кто код пишет это как минимум верстальщик.

Comments

[Анна Бакурова]

+ У вас вопрос поставлен так что на него нельзя ответить даже в рамках статьи огромной.
Тут нужно изучать вообще принцип, схему работы и взаимодействии людей при создании сайтов.

[Lorri]

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

Answer 2

[Мари Арти]

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

1) все элементы активными делаются на этапе верстки = код. для анимации можно использовать бесплатные js-библиотеки и править их под свои нужны, можно хорошенько изучить css и писать собственные простые анимации, опять же можно писать свои небольшие jquery-скрипты для эффектов.
переходы на другие страницы - просто ссылки, которые настраиваются в cms.

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

3) автоматики нет. но можно выучить html+css+js.

Answer 3

[Оптимус Пьян]

Он просто рисунок рисует а потом по нему другой человек (верстальщик) верстать будет. В фотошопе быстрее чисто внешний вид сделать утвердить и отдать "в производство".

Comments

[Ajih]

Это ясно, только мне хотелось бы узнать ответы на 3 заданных вопроса в описании

[Оптимус Пьян]

Ajih: 1. Открыть редактор кода любой и написать в нём html код и в нём ссылки, в код же вставить скрипты 2. Тем что это картинка и она не работает 3. Нет готовых решений по превращению photoshop в код нет но есть Adobe Muse, Dreaweaver

Answer 4

[kopch]

Есть всякие сервисы вроде inVision. Много чего умеют. А вообще мне уже проще сразу дизайн верстать. Свой модульный фрэймворк + jeet + stylus + nib + rupture + animate.css ... или их аналоги — сильно экономят время.

Comments

[Мари Арти]

вы какие-то серьезные вещи делали без макета или шаблонные? и как у вас дизайн такой принимали?

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

[Lorri]

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

[Lorri]

miminari13: я буду обновлять страницу перед комментированием =)

[kopch]

Да, утверждается прототип, затем уже всё идёт сразу в продакшн. Без прототипов, конечно, не обойтись.

[kopch]

Модульный фрэймворк на Stylus, позволяет довольно быстро изменения вносить. Макет утверждается сразу в html. Обычно поменять пару блоков, по скорости выходит почти так же, как в ФШ или Скетче, если учитывать все экраны. А, временами, намного быстрее.

[kopch]

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

[Lorri]

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

[kopch]

Я в основном по интернет-магазинам. Там обычно не более 20 экранов. Экономия времени в основном на том, что пиксель-пёрфект уже отжил своё и много времени ещё экономится на адаптивном дизайне. Я согласен с вами, но в вашем случаи скорее менеджерская война. А когда работаешь один, то просто делаешь, как тебе удобно.
Я обычно делаю в Скетче прототипы и параллельно накидываю основные элементы UI сразу в css. И к моменту, как утверждается 1 прототип у меня обычно готовы UI элементы. Сверстать всё по сетке — не сложнее чем всё это сделать в Скетче или ФШ. А клиент сразу видит, как это всё будет работать на всех экранах. Если что-то сложное не успеваешь, то можно и картинку вставить на время. По сути так можно проект любой сложности делать.
Проблема лишь в том, что у меня все рабочие процессы отработаны и заточены под меня лично, месяцами я их оттачивал. И если вдруг, кто-то внезапно вклинится в процесс, то врят ли он оценит мою систему..))..
Можно конечно подобный процесс разработки внедрить и в команду, в том же Яндексе для унификации процесса придумали БЭМ, например. Просто придётся тратить время на обучение сотрудников системе, которая многим может и не показаться удобной.