HTML / CSS 작성에 직접 참여하는 것보다 전체 이미지 모형을 사용하는 것의 이점이 있습니까?

과거에는 많은 회사와 웹 디자이너가 최소한 2 ~ 3 개의 파트 (디자인, 마크 업, 백엔드)의 워크 플로우를 가지고있었습니다. 이것들은 일반화되고 선이 약간 흐려질 수 있습니다 ...하지만 내 요점을 확신합니다.

종종 웹 디자이너는 "비주얼 전용"이었으며 Photoshop 또는 Fireworks와 같은 이미지 편집 소프트웨어에서 매우 세부적인 모형을 만드는 데 책임이있었습니다. 모형은 색상 및 유형 선택에서 배경, 아이콘, 사진 및 사용되는 기타 이미지에 이르기까지 웹 페이지의 모든 가능한 측면을 보여줍니다. 그러나 "디자이너"는 실제 라이브 구성 및 구현과 관련이 없었습니다. 그들은 외모에만 집중했다.

디자인이 승인되면 (이 이미지 파일을 검토하여) 이미지 파일을 라이브 HTML / CSS로 전환하는 2 단계가 수행되었습니다.

• 단일 좌석 또는 프리랜서 환경에서 웹 디자이너 는 슬라이스를 사용하고 일부 내부 응용 프로그램 옵션을 통해 HTML로 내보낼 수 있습니다. 에 드문 경우 설계자는 기본 HTML / CSS 페이지 프레임을 구성 할 수있다.

• 일부 기업 환경에서는,이 모형은 웹 디자이너 ([불꽃 놀이] .png를, .PSD)를 계층화 된 이미지 파일의 형태로 남아있을 것입니다 및 디자이너는 것이 결코 구현에 대해 걱정하지 어떤 마크 업 또는 코드를. "디자이너"는 자신이 만든 이미지 모형을 구현하기 위해 HTML 또는 CSS를 구성하는 방법에 대해 걱정할 필요가 없었습니다. 이미지 파일은 이미지 파일 과 일치 하는 HTML / CSS 구성을 담당하는 "개발자"에게 전달되었습니다 .

나는 아직도 이런 식으로 많은 일들이 일어났다 고 생각한다. 그러나 마크 업 언어 (CSS3 및 브라우저 지원 향상)가 향상됨에 따라 전체 웹 페이지의 래스터 표현을 신중하게 작성하는 데 많은 시간이 걸리는 경우가 많지 않습니다.

현재 마크 업을 사용하면 HTML / CSS를 통해 많은 웹 디자인 요구를 직접 구현하는 것이 매우 쉽고 이미지 응용 프로그램의 사용은 필요할 수있는 작은 이미지 자산이나 사진을 생성하는 것으로 제한됩니다. (부트 스트랩과 같은 라이브러리 및 / 또는 템플릿은이 개념을 더욱 발전 시켰습니다.)

내 워크 플로 에서 특별히 요청 하지 않는 한 전체 페이지 모형에서 크게 벗어났습니다 . 나는 디자인 속도를 높이고 승인 된 것이 브라우저에서 최종적으로 렌더링되는 것에 가깝도록하기 위해 이것을한다. 사실, 몇 년 동안 전체 페이지 모형을 만들지 않았습니다. 그러나이 방법을 사용하는 워크 플로우가 여전히 있다는 것을 알고 있습니다.

디자인 구성을 위해 HTML / CSS로 바로 들어가기 전에 이미지 편집 응용 프로그램에서 전체 페이지 모형을 구성 하면 실제로 이점이 있습니까?

전체 페이지 모형을 만들면 얻을 수있는 이점은 분업입니다.

디자이너와 (프런트 엔드) 개발자가 모두있는 대기업에서 디자이너의 일은 디자인 하는 것이며 개발자의 일은 코드를 작성하는 것입니다 .

이 부서가 있으면 디자이너는 웹 사이트의 모양, 느낌 및 인터페이스 작업에 모든 시간을 할애 할 수 있으며 웹 사이트 작성 방법에 대해 전혀 알 필요가 없습니다. 더 높은 품질의 디자인을 만들고 동시에 원하는 작업을 수행하도록 코드를 작성하지 않기 때문에 의사 결정을 통해 더 정확하게 생각할 수 있습니다.

또한 개발자는 작은 세부 사항과 다양한 상태를 포함하여 코드가 어떻게 보일지 생각하지 않아도 더 많은 코드를 작성할 수 있습니다. 주어진 시간에 최대한 설계를 구현하고 다른 프로젝트로 넘어갈 수 있습니다.

디자이너 가 개발자이기도 하다면, 대부분의 사람들이 더 거친 제품을 만들고 빠르게 테스트하여 반복해서 테스트한다는 점에서 대부분의 사람들이 당신과 함께하기 시작했다고 생각합니다. 이를 통해 완벽한 픽셀 포토샵 문서를 만드는 대신 아이디어를 빠르게 테스트 할 수 있습니다.

그러나 코드가 없는 거칠고 반복적 인 디자인 은 특히 ​​레이아웃과 작업 흐름에 유효하고 매우 유용한 접근 방식입니다. 마크 업 언어와 새로운 기술은 거친 아이디어로 빠르게 작동하지 않았습니다. :)

이 답변으로 Guffa를 선택하겠습니다. 명확하게 말하면, 나는 Guffa를 골라 내려고하지 않고, 글 머리 기호는 제가 듣는 매우 일반적인 것입니다. 몇 가지 반점도 제시하고 싶습니다. 나는 구파가 틀렸다고 말하는 것이 아니라 옳습니다. 나는 단지 대위를 제공하고 있습니다.

1. HTML과 CSS에서 다른 작업을 수행하는 방법을 알아 내기 위해 시간이 걸리면 디자인 프로세스의 창의적인 부분이 어려움을 겪습니다.

코드를 창의적으로 고려하지 않는 경우에도 마찬가지입니다. Photoshop과 HTML / CSS / JS는 아티스트가 작업 할 수있는 매체입니다. 페인트가 숯처럼 독창적 인 것처럼 Photoshop도 HTML / CSS / JS처럼 매체를 독창적으로 만들 수 있습니다.

그리고 HTML / CSS / JS에서 직접 작업하는 것의 큰 이점은 그것의 다차원 성입니다. 하루가 끝나면 Photoshop은 평평한 캔버스입니다. HTML / CSS / JS는 유동성, 상호 작용, 애니메이션 등을 포함하는 동적 캔버스입니다.

결론적으로, 이 경우 코드가 더 창의적인 매체 라고 주장합니다 .

2. 디자이너와 코더가 다른 사람인 경우 디자이너가 HTML과 CSS에 능숙하더라도 코딩에 거의 능숙하지 않습니다. 결과는 부풀고 유지하기 어려운 비효율적 인 코드 (다양한 정도)가됩니다.

슬프게도 이에 대한 반론은 내가 자주하는 일입니다. 전담 역할을 수행하는 대부분의 개발자는 전담 역할이 더 많은 표준 조직에서 더 큰 조직에서 일하고 학제 간 지식이 부족하기 때문에 ( 프리젠 테이션 레이어 코드가 부족한 경우가 종종 있습니다.)

요컨대, 나는 시각적 디자인 능력이 코딩 능력을 나타내는 것으로 간주하지 않을 것입니다. 한 단계 더 나아가 디자인과 코딩을 아는 재능있는 일반인은 비록 최고의 디자이너 나 최고의 코더가 아니더라도 사실 때문에 단순히 분리 된 팀보다 더 나은 전반적인 제품을 만들 수 있다고 주장합니다. 그들이 만들면서 더 큰 그림을 볼 수 있습니다. 번역에서 손실이 훨씬 적습니다.

3. 디자인의 모양을 명확하게보기 전에 코드를 작성하기 시작하면 코드를 구성하는 방법에 대한 정보를 선택하지 않아도됩니다. 위험은 코드를 악화시키고 디자인의 가능성을 제한한다는 것입니다.

그러나 코드로 디자인한다고해서 이것이 프로덕션 코드 인 것은 아닙니다. 우리가 만든 대부분의 코드가 순전히 디자인과 프로토 타이핑을위한 프로젝트 인 프로젝트를 진행했습니다. 완료되면 완전히 다시 작성합니다. 이것은 우리가 첫 번째 코딩 라운드에서 많은 'gotchas'를 찾을 수 있다는 추가 이점을 가졌습니다.

4. HTML과 CSS 코드는 디자인을 조금만 변경하면 디자인 프로세스를보다 정적으로 만들 수 있습니다. 코드에서 쉽게 변경할 수있는 사항으로 제한 할 위험이 있습니다.

이에 대한 반론은 디자이너가 Photoshop에서 쉽게 만들 수있는 변경 사항으로 제한됩니다. 어느 쪽이든 아주 좋은 논쟁은 아닙니다.

Photoshop 모형을 먼저하지 않는 유일한 이유는 디자이너가 코드의 한계를 이해하지 못하기 때문입니다. 당신은 클라이언트가 최종적으로 가질 수 없었던 무언가를 고객에게주고 싶지 않습니다.

PSD가 CSS / HTML (브라우저 간 및 미디어 간 제한 사항)에서 매우 밀접하게 복제 될 수있는 것을 나타내는 한, Photoshop (또는 InDesign)에서 할 수 있습니다. 이미지를 더 빠르고 쉽게 조작 할 수 있습니다. CSS에서 나에게 조롱하면 코딩하기 전에 코딩하는 것이 좋습니다.

디자인 요소를 코드 생성 요소와 별도로 유지해야하는 몇 가지 이유가 있습니다.

• HTML과 CSS에서 다른 작업을 수행하는 방법을 알아 내기 위해 시간이 걸리면 디자인 프로세스의 창의적인 부분이 어려움을 겪습니다.

• 디자이너와 코더가 다른 사람인 경우 디자이너가 HTML과 CSS에 능숙하더라도 코딩에 거의 능숙 하지 않습니다 . 결과는 부풀고 유지하기 어려운 비효율적 인 코드 (다양한 정도)가됩니다.

• 디자인의 모양을 명확하게보기 전에 코드를 작성하기 시작하면 코드를 구성하는 방법에 대한 정보를 선택하지 않아도됩니다. 위험은 코드를 악화시키고 디자인의 가능성을 제한한다는 것입니다.

• HTML과 CSS 코드는 디자인을 조금만 변경하면 디자인 프로세스를보다 정적으로 만들 수 있습니다. 코드에서 쉽게 변경할 수있는 사항으로 제한 할 위험이 있습니다.