그래픽 디자이너와 함께 작업하는 올바른 방법은 무엇입니까? [닫은]

최근에 우리는 그래픽 디자이너 (클라이언트에 의해 배열 된)와 협력하여 우리가 구축 한 Django + Bootstrap 어플리케이션을위한 스킨을 제공했습니다. 디자이너는 몇 가지 기술적 속성 (글꼴 크기, 색상, 몇 가지 치수 등)을 설명하는 문서와 함께 새로운 레이아웃의 일련의 정적 이미지를 제공했습니다.

이를 구현하는 데 엄청나게 많은 시간이 소요되었습니다. 전체 사이트는 기본적으로 프론트 페이지, 인덱스 페이지 및 6 개의 세부 페이지이지만, CSS와 HTML 변경 사항을 구현하는 데 5 일 이상을 보냈습니다. 그래서 사지로 가서 이것을 잘못된 길이 라고 부를 것 입니다.

내 기본 접근 방식은 다음과 같습니다.

1. 정적 이미지와 현재 렌더링을 비교하여 차이를 확인하십시오.
2. CSS / HTML에 어떤 변화가 필요할지 추측
3. 그 변화를
4. 1 단계로 이동하십시오.

특정 문제 중 일부는 디자인에 8 열에서 12 로의 변경 사항이 포함되어 있음을 이해하지 못했으며 잘못된 형식으로 제공된 일부 이미지 (.png는 다른 브라우저 / 플랫폼 조합에서 다르게 렌더링 할 수 있음), 부트 ​​스트랩의 스타일을 취소하려고하는 번거 로움, 픽셀 퍼펙트 렌더링 등을 달성하기 위해 일반적인 CSS 레슬링. 그리고 때로는 특정 행동을 얻기 위해 HTML 템플릿을 재구성해야했습니다.

올바른 방법은 무엇입니까?

우리 회사에는이 직업에 특화된 몇몇 사람들이 있습니다.

그들은 디자이너입니다. 그리고 그들은 HTML을 알고 있습니다. 이들은 디자이너와 프론트 엔드 엔지니어 사이의 다리가 될 수 있습니다. 그들은 보통 있습니다. 이런 식으로 HTML을 통합하면됩니다.

이것은 어려운 일입니다. "24 시간 안에 PSD to HTML"과 같은 사이트가 잘 작동하는 이유가 있습니다. 우리 회사의 솔루션은 사람들에게이 일을 전문으로하는 것입니다. 우리에게는 HTML로 작업하는 것이 매우 쉽습니다.

총알이 없습니다.

"올바른 방법"이 있는지 확실하지 않지만 디자이너와 협력하는 합리적으로 효과적인 방법은 먼저 템플릿을 사용하고 모든 템플릿을 쉽게 교환 할 수있는 스타일이없는 시스템을 만드는 것입니다. 그런 다음 기능적이지만 스타일이 지정되지 않은 (또는 최소한 스타일이 지정된) 인터페이스가 있으면 결과를 디자이너에게 전달하여 스타일을 지정합니다.

이런 종류의 디자인 패턴의 좋은 예는 jQueryUI ( http://jqueryui.com/ )입니다.

먼저, 지금까지 웹 프런트 엔드를 사용한 적이 없다는 것을 인정해야합니다.

하지만 최종 디자인이 어떻게 생겼는지에 대한 논문을 작성하는 것이 좋습니다. 이렇게하면 매 페이지마다 다른 테이블을 설명 할 때 냄새가 나기 때문에 일관성이 있다는 것을 확신 할 수 있습니다. 실제로 코드를 작성하고 있기 때문에 이미지보다 구현에 더 가깝기 때문에 Prose는 구현을 더 쉽게 만들 수 있습니다.

또한 디자이너가 전체 페이지가 아닌 구성 요소에 집중하도록하십시오. 페이지의 구성 요소를 올바르게 가져 오면 전체 페이지에 구성하는 것이 훨씬 쉬운 단계입니다.

여러 디자이너들과 HTML / CSS를 개발하고 있으며 이미 언급했듯이 "실버 글 머리 기호"는 없습니다. 내가 함께 일한 디자이너들은 html / css에 대해 전혀 몰랐다. 그들 중 일부는 웹 디자인에 대한 경험이 있었으며, 그들이 그 지식을 가지고있을 때, UX가 반응 할 때 항상 웹 사이트를 개발하고 더 나은 웹 사이트로 만들기가 더 쉬워집니다.

나는 웹 사이트를 찾고있는 일부 회사가 모르거나 무시하는 것을 추측합니다 : 누구나 기본 지식을 갖춘 그래픽 디자이너 / 웹 개발자 / 웹 디자이너 / UI 디자이너라고 말할 수 있습니다 (또는 아무도 보지 못했습니다). "실제 웹 사이트"는 추가 마일리지를 유지하고 유지 관리 가능하고 효과적인 웹 사이트를 생성 할 수 있습니다. 나는 클라이언트를 "교육"하고 웹 디자인에는 그래픽 디자이너가 가지고 있지 않은 "인쇄 전용"기술이 포함되어 있다고 설명합니다. 이것이 효과가있을 때 나는 이미 클라이언트와 함께 일했던 디자이너들에게 보낸다.

이것은 종종 여러 가지 이유로 인해 그래픽 기술이 있고 웹 디자인 기술이없는 사람들로 웹 사이트를 구축하게됩니다. 이 상황에서 가장 좋은 방법은 내가 코딩 시간을 절약하고 undevellopable 레이아웃으로 끝낼하지 않는 발견하는 것입니다 설계 과정에 참여 하고 디자이너와 통신 하고 / 할 수는 없습니다 어떤 더 나은 / 더 간단 할 것입니다 무슨 설명 당신의 관점에서.

일부 상황에서는이를 구성하기가 어려울 수 있지만, 웹 디자인이 웹 프로젝트의 확대를 형성한다고 생각하면 시간과 돈을 절약 할 수 있다고 클라이언트와 디자이너에게 설명하는 것이 중요합니다. 시간과 돈을 절약하기 위해 디자인 프로세스에 참여하게되어 기쁩니다.

이것은 대부분의 프로젝트에서 따르려고하는 웜 흐름입니다.

1. 디자이너는 그래픽 표준이 존재하지 않으면 그래픽 표준을 작성합니다 (보통 여기에 관여하지 않습니다. 디자이너에게 웹 호환 글꼴 (예 : Google 글꼴)을 제안하려고합니다)
2. 디자이너가 만든 목업. 클라이언트가보기 전에 여기에 참여하여 디자이너와 협력하여 웹 호환 레이아웃 (특히 반응 형 레이아웃) 을 작성합니다 .
3. 고객은 mokup의 유효성을 검사합니다
4. 나는 mokup을 코딩한다.

코딩 프로세스 중에 디자이너와 의사 소통하고 작업하는 데 소요되는 시간이 절약되며, 이로 인해 더 간단하고 유지 관리가 쉬우 며 코드가 완성됩니다.

이것은 금요일 저녁에 고객이 보았고 지금이 문장으로 원하고있는 매우 예쁜 mokup으로 당신을 부르는 행복한 디자이너로부터 당신을 구하지 않습니다. " 그런 다음 전체 이론이 무너지고 그 순간에 일자리를 찾고 있다면 매주 끝낼 수 있습니다.

결론 :

나는 이것이 프로젝트가 아닌 관련 코드와 크게 다르다고 생각하지 않습니다. 다른 사람들과 함께 일하는 가장 좋은 방법은 그들과 의사 소통하는 것입니다.

그래픽 디자이너가 풀 스택 웹 개발자가되면서 나에게 이것은 쉬운 일이었습니다. UX 디자인 팀과 제품을 구현하는 개발자 사이에 커뮤니케이션 격차가있는 경우가 많습니다. 물론 문서는 도움이되지만 전략에 대한 대면 대화가 발생하면 프로세스가 훨씬 자연스럽게 느껴질 수 있습니다. 또한 시간이 모든 사람에게는 부족하다는 것을 알고 있지만 디자인 및 레이아웃 단계에서 참여하려고 노력하십시오. 이것은 디자이너와 개발자 사이에 커뮤니케이션이 필요할 때 엄청나게 도움이 될 수 있습니다. 이 프로젝트는보다 통합 된 팀 노력과 "글쎄, 나는 벽을 넘어서 내 역할을 다했다"시나리오를 덜 받는다. 디자인과 개발 작업이 동시에 진행되는 것이 매우 유익하다는 것을 알게되었습니다. 설계 팀이 프로세스 초기에 와이어 프레임을 제공하도록 권장하십시오. 이렇게하면 레이아웃과 위치 지정만을 다루는 하나의 스타일 패스를 수행 할 수 있습니다. 그런 다음, 집회가 더 풍성 해지고 완전 해지면서. 모양 및 기타 스타일 속성에 대해 다른 CSS 패스를 가져옵니다. 적어도 이것은 당신이 한 번에 모든 것에 집중하지 않아도됩니다.

비슷한 문제에 직면하고 있습니다. Greasemonkey 또는 Tampermonkey와 같은 도구를 그 목적으로 사용할 수 있다는 아이디어가 있습니다. 지난주에, 나는이 아이디어에 대한 의견을 물었다 : 동적 웹 애플리케이션의 UI를 아웃소싱하는 방법? 만족스러운 답변을 얻지 못했습니다.

이 도구를 사용하면 CSS, HTML 및 Javascript를 페이지에 삽입 할 수 있습니다. 내 생각에는 작업 사이트의 URL을 디자이너에게 제공하고 Greasemonkey 스크립트가 반환 될 것으로 기대합니다. 이론적으로 기존 사이트에 이들을 매우 빠르게 통합 할 수 있어야합니다. 이런 식으로 HTML과 CSS를 작성하고 사이트를 실제로 작동시키는 것은 디자이너의 일입니다. 그러나 디자이너 측에서는 훨씬 더 많은 프로그래밍 기술이 필요합니다.

이 아이디어에는 많은 정교함이 필요하다는 것을 알고 있습니다. 그러나 나는 아직 그것을 시도하지 않았으며 다른 사람이 이것을하고 있는지 모른다. 구현에 문제가있을 수 있습니다.