Как правильно работать с графическим дизайнером? [закрыто]

Недавно мы работали с графическим дизайнером (по согласованию с клиентом), чтобы обеспечить обложку для приложения Django + Bootstrap, которое мы создали. Дизайнер предоставил серию статических изображений нового макета вместе с документом, описывающим некоторые технические атрибуты (размеры шрифта, цвета, несколько размеров и т. Д.).

Это оказалось невероятно трудоемким для реализации этого. Хотя весь сайт был в основном главной страницей, индексной страницей и полдюжиной страниц с подробностями, я потратил как минимум 5 дней на реализацию изменений CSS и HTML. Так что я выйду на конечности и назову это «Неправильный путь» .

Мой основной подход был:

1. Сравните статическое изображение и текущий рендеринг, и обратите внимание на разницу.
2. Угадайте, какие изменения потребуются в CSS / HTML
3. Сделать это изменение
4. Переходите к шагу 1.

Некоторые из конкретных проблем заключались в том, что я не понимал, что дизайн включает в себя изменение с 8 столбцов на 12, некоторые изображения предоставлены в неправильном формате (файлы .png могут отображаться по-разному в разных комбинациях браузера / платформы), из-за проблем, пытающихся отменить стиль Bootstrap, обычная борьба CSS для достижения идеального рендеринга пикселей и т. д. И иногда мне приходилось реорганизовывать шаблоны HTML, чтобы получить определенное поведение.

Какой правильный путь?

В моей компании есть несколько человек, специализирующихся на этой работе.

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

Это тяжелая работа. Есть причина, по которой сайты типа "PSD to HTML in 24h" работают хорошо. Решение в нашей компании состоит в том, чтобы люди специализировались на этом. Для нас работа с HTML очень проста.

Там нет серебряной пули.

Я не уверен, что существует «правильный путь», но достаточно эффективный способ сотрудничества с дизайнером - это сначала создать систему без стилей, которая использует шаблоны и позволяет легко обмениваться всеми шаблонами. Затем, когда у вас есть функциональный, но не стилизованный (или минимально стилизованный) интерфейс, вы передаете результаты дизайнеру для стилизации.

Достойным примером такого шаблона проектирования будет jQueryUI ( http://jqueryui.com/ )

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

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

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

Я разработал HTML / CSS с несколькими дизайнерами, и, как уже говорилось, «серебряной пули» не существует. Дизайнеры, с которыми я работал, почти ничего не знали о html / css. У некоторых из них был некоторый опыт в веб-дизайне, и я должен сказать, что когда у них есть эти знания, всегда получается, что их легче разрабатывать и «лучший веб-сайт», особенно когда речь идет об отзывчивости UX.

Я думаю, что некоторые компании, ищущие веб-сайт, не знают / игнорируют это: любой может сказать, что он является графическим дизайнером / webdevelopper / webdesigner / UI дизайнером с базовыми знаниями (или даже без, да, я видел это) в любой из них. Принимая во внимание, что «настоящие» могут сделать все возможное и создать поддерживаемые, эффективные веб-сайты. Я пытаюсь «обучить» клиента и объяснить, что веб-дизайн включает в себя навыки, которых «только для печати» графические дизайнеры не имеют. Когда это работает, я обычно отправляю клиента к дизайнерам, с которыми я уже работал, и у меня общий рабочий процесс.

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

Хотя это может быть трудно организовать в некоторых ситуациях, стоит объяснить клиенту и дизайнеру, что «если вы думаете, что веб-дизайн формирует значимость веб-проекта, вы в конечном итоге экономите время, деньги и головные уборы» и что вы будете с удовольствием участвую в процессе проектирования, чтобы сэкономить время и деньги.

Это тот процесс, которому я стараюсь следовать в большинстве проектов:

1. Дизайнер создает графические стандарты, если они не существуют (я обычно здесь не участвую. Я просто пытаюсь подсказать дизайнеру веб-совместимые шрифты, например: шрифты Google)
2. Макет сделан дизайнером. Я участвую здесь и работаю с дизайнером над созданием веб-совместимых макетов (особенно для адаптивных) до того, как клиент это увидит .
3. клиент проверяет макуп
4. Я код макета

Время, которое я трачу на общение и работу с дизайнером, экономится во время процесса кодирования, и в итоге получается более простой, понятный и понятный код.

Это не спасает вас от счастливого дизайнера, звонящего вам в пятницу вечером с очень симпатичным макетом, который клиент видел и теперь хочет с этим предложением: «Эй, блин, не мог бы ты написать это для меня, крайний срок… вчера! " Тогда вся теория рушится, и если вы ищете работу в этот момент, вы хороши для головного урока весь уик-энд.

Вывод :

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

Поскольку графический дизайнер стал веб-разработчиком с полным стеком, для меня это было самой легкой частью. Я обнаружил, что во многих случаях существует разрыв связи между командой разработчиков UX и разработчиками, которые реализуют продукт. Конечно, документы помогают, но процесс может начать казаться намного более естественным, как только начнутся разговоры о стратегии лицом к лицу. Кроме того, я знаю, что времени мало для всех, но постарайтесь принять участие на этапе проектирования и верстки. Это может очень помочь, когда требуется связь между дизайнером и разработчиком. Проект требует больше объединенной командной работы, а не сценария «Ну, я сделал свое дело, через стену идет». Я считаю очень полезным, чтобы работа по проектированию и разработке проводилась параллельно, Поощряйте команду разработчиков на ранних этапах поставки вам каркасов. Таким образом, вы можете сделать один проход стиля, который имеет дело только с макетом и позиционированием. Затем, по мере того, как кампании становятся более богатыми и полными. Сделайте еще один проход CSS для внешнего вида и других атрибутов стиля. По крайней мере, это избавляет вас от необходимости сосредоточиться на всем сразу.

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

С помощью этих инструментов вы можете внедрить CSS, HTML и Javascript на страницу. По моей идее, вы даете URL рабочего сайта дизайнеру и ожидаете взамен скрипты Greasemonkey. Теоретически вы сможете очень быстро интегрировать их в существующий сайт. Таким образом, дизайнер будет писать HTML и CSS, чтобы сайт действительно работал. Это требует гораздо больше навыков программирования на стороне дизайнера.

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