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

41

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

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

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

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

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

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

Стив Беннетт
источник
2
Мне кажется, тебе нужен лучший дизайнер. Кто-то, кто понимает сеть.
кодек

Ответы:

15

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

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

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

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

Флориан Маргейн
источник
Интересно - mypsdtohtml.com . Интересно, на что похож HTML - и могут ли они обрабатывать такие вещи, как теги-шаблоны Django.
Стив Беннетт
1
@SteveBennett у них есть портфолио :) Почему вы хотите, чтобы они обрабатывали теги шаблонов django? У них есть PSD, они дают вам HTML. Я не понимаю, что еще они будут делать. Вы же не ожидаете, что они интегрируют ваш код? ;)
Флориан Маргейн
1
Ха, вы положили в свой портфель свою работу среднего качества ? :) В любом случае, если они преобразуют кучу статических изображений в кучу статических HTML-страниц ... все равно стоит потрудиться, чтобы превратить их в динамически генерируемые страницы, разложить их на вложенные шаблоны и т. Д. Интересно, какие сайты этот процесс на самом деле будет полезен для.
Стив Беннетт
1
@ SteveBennett, я чувствую, что разложить полностью собранные html-страницы на динамические шаблоны и партиалы было бы относительно просто - это по сути простой рефакторинг кода. Я думаю, что для большинства проектов было бы гораздо проще с точки зрения программиста, чем создавать html / css непосредственно из psds.
Бен Ли
6

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

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

Ева
источник
1
Да, одна ошибка, которую мы сделали, заключалась в создании бесполезных слоев кожи. 1 Необработанный начальный загрузчик, затем 2 незначительных изменения, затем 3 довольно грубых скина для демонстрации, затем 4 профессиональных скина - что совершенно не похоже на шаг 3. Некоторые из этих дополнительных CSS действительно начали мешать.
Стив Беннетт
ошибки допускаются, просто убедитесь, что вы учитесь на них, в общем, старайтесь максимально упростить ситуацию, оставаясь модульной :)
Ева
3

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

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

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

SpaceTrucker
источник
+1 за "сосредоточиться на компонентах, а не на целых страницах". Отличная идея.
Стив Беннетт
0

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

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

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

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

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

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

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

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

Вывод :

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

веб-Тики
источник
-1

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

CF Grugan
источник
1
этот пост довольно трудно читать (стена текста). Не могли бы вы изменить его в лучшую форму?
комнат
-2

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

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

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

lunr
источник
3
Извините за обобщение, но многие «графические дизайнеры» не знают HTML и CSS, они знают Photoshop, Corel / Illustrator, InDesign, Quark и т.д. статических изображений ». Если бы они знали HTML и CSS, они были бы «передовыми разработчиками».
Дхауст
В этом случае дизайнер утверждал, что знает немного CSS и HTML, и выражал части дизайна таким образом (например, цвета #abc), но этого недостаточно, чтобы добиться большой разницы. И некоторые термины (например, «padding») оказались неоднозначными, а не их значения CSS.
Стив Беннетт