Веб-макет для Dev

"что такое процесс/рабочий процесс"

Нет ни одного. Вернее, не один . Это будет варьироваться от проекта к проекту, от команды к команде.

Общие процессы, которые я видел.

1. Отправьте Dev большой PSD

Дизайнер проводит все свое время в Photoshop, а затем отправляет файл разработчику, чтобы выяснить, как превратить его в HTML. Это может работать, когда у дизайнера нет навыков разработки, а разработчик достаточно хорошо разбирается в дизайне, чтобы он мог правильно определить, какие части PSD должны быть изображениями, текстом, CSS и т. д.

2. Создавайте макеты, каркасы, руководства по стилю

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

3. Дизайнеры — это разработчики и/или разработчики и дизайнеры работают бок о бок.

В некоторых случаях веб-дизайнер является способным разработчиком внешнего интерфейса. Или веб-дизайнер находится в той же команде, что и фронтенд-разработчик. В этом сценарии гораздо меньше формальной документации и гораздо больше совместной работы, а дизайн корректируется в реальном коде, в котором он будет поставляться.

и многие другие...

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

Вариант 1 хорошо работает в очень маленьких командах.

Вариант 2 редко работает. Но это, как правило, является «нормой» для компаний из списка Fortune 500, которые вкладывают значительные средства в аутсорсинговую разработку и дизайн.

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

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

О шрифтах:

Конечно, если вы используете какой-то основной шрифт, вы можете описать его, но если у разработчика есть psd, разработчик может проверить его без ваших комментариев, если слой представлен в виде текста, а не просто графического слоя.

О #цветах

Как и в случае со шрифтами, я думаю, что разработчику проще проверить это с помощью фотошопа.

Только одно замечание, которое я заметил во время работы. Например, фотошоп позволяет дизайнерам создавать некоторые слои с плавающим значением, например, 33,33 pt и т. д. Но, например, если мы говорим о веб-сайте или мобильном приложении, мы не можем разделить, например, слой шириной 100 пикселей на 3 части, просто если какая-то часть будет иметь один дополнительный пиксель, например 33, 33, 34 или любой другой порядок этих значений. Просто знайте об этом.

Я согласен с Матросовым Александром, и, будучи новичком здесь, не могу комментировать, но есть что добавить.

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

Как человек, работающий с разработчиком, я думаю, что было бы очень полезно поделиться с ним PSD-файлом в Creative Cloud (и я имею в виду не только то, что я менеджер по продукту в Adobe), потому что вы не только можете позволить людям загружать PSD но вы также можете сразу увидеть все шрифты / размеры шрифтов, цвета, используемые градиенты и использовать измерения в браузере, чтобы получить значения (и текст) и с этого момента лучше сотрудничать.

Вот дополнительная информация об этом: http://helpx.adobe.com/creative-cloud/help/extract-css-images-psd-files.html

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