PSD 모형과 HTML 모형의 장단점

웹 사이트 또는 응용 프로그램을 구축하는 경우 가능한 한 최종 제품에 가까운 형식으로 모형을 설계하기 때문에 HTML 모형이 훨씬 우수합니다. 이를 통해 기대치를 훨씬 쉽게 설정하고 최종 제품에서 가능한 것만 제한하며 훨씬 더 큰 유연성을 제공합니다.

이 컨벤션은 점차 "브라우저의 디자인"으로 알려지고 있습니다. 브라우저에서 디자인하면 본질적으로 폭포 방식을 우회 할 수 있습니다. Photoshop 모형은 비주얼 디자이너와 상호 작용/UX 디자이너 사이의 장벽을 도입합니다. Photoshop에서 일하는 사람은 최종 제품을 고려하지 않고 브라우저의 제약 조건을 고려하지 않고 시각적 충실도로 완전히 생각할 수 있습니다. 포토샵 모형이 준비되면 UX 팀에 "토스 오버"하여 다음 단계로 넘어갑니다. 이것은 피드백 중심의 반복 프로세스를 장려하지 않습니다.

몇 달 전에 프로토 타이핑 도구를 만드는 데 사용했던이 철학에 대해 블로그 게시물 을 썼습니다. 다음은 내가 참조 할 수있는 몇 가지 기사입니다 (링크 한 Megan Fisher의 기사 포함).

다른 디자이너와 개발자는 그에게 동의합니다.

• 37signals ' 우리가 Photoshop을 건너 뛰는 이유 프로세스 설명 : Photoshop 모형은 대화식이 아닙니다. 그들은 당신에게 앱의 흐름에 대한 느낌을주지 않습니다. 세부 정보에 너무 일찍 초점을 맞출 것을 권장합니다.
• Meagan Fisher의 24ways.org 기사 Markup에서 Mock Your Mockup Clarke의 원리에 대해 자세히 이야기하고 HTML 구조로 시작하여 디자이너가 여러 페이지 레이아웃을 빠르게 반복하는 방법을 설명합니다.
• Design Shack에서 이러한 브라우저에서 디자인을위한 12 가지 팁 을 통해 유용한 정보를 얻을 수 있습니다.

충실도 문제입니다.

문제는 초점을 맞추는 내용에 따라 두 문서 중 하나가 다른 문서보다 충실도가 높아질 수 있다는 것입니다.

HTML 프로토 타입은 실제로 중간 정도의 복잡한 상호 작용을 진정으로 조롱 할 수있는 유일한 방법입니다. PSD 파일 내에 인터랙션 디자인을 완전히 문서화 할 수있는 방법이 없습니다.

반대로, 시각적 디자인이 지속적으로 조정/개선/개시되는 환경에있는 경우 PSD는 시각적 디자인 요소를 처리하기에 더 나은 '기록 문서'일 수 있습니다.

결국 PSD와 HTML에 해당한다고 생각하지 않습니다. 프로젝트 및 팀 구성원별로 요구 사항의 특성에 따라 다른 양으로 필요합니다.

HTML 모형을 사용할 때 발생할 수있는 단점 중 하나는 클라이언트가 응용 프로그램이 무엇인지 말해도 응용 프로그램을 완료했다고 생각할 수 있다는 것입니다.

진심으로, 나는 고객과 관리자 모두-당신이 실제 제품을 만들기 위해 일반적으로 사용하는 도구를 사용하여 모형을 보는 사람들을 알고있었습니다. 실제로 작업을 수행하는 데 몇 주 (또는 긴 시간)가 걸립니다.

모형을 한 단계 제거하면이 오해를 없애는 데 도움이 될 수 있습니다.

그러나 동적 모형을 사용하면 시스템 작동 방식과 응용 프로그램 탐색 방법을보다 잘 이해할 수 있습니다.

대화 형 모형을 준비하는 것은 visual designer의 일이 아니라 UI/UX designer의 일입니다. 사실-그들은 종종 예산상의 이유로 인해 하나이며 동일하지만 그들의 직업은 매우 다릅니다.

귀하의 질문은 실제로 Static vs. Dynamic 모형으로 표현 될 수 있습니다.

내 생각에 동적 모형은 거의 항상 정적보다 우수합니다.

내 의견으로는 주된 이유는 정확한 사용성 테스트에 사용될 수 있기 때문입니다. 실제로 무언가를하고 있다고 상상하는 것은 실제로 수행하는 시간과 걸리는 시간, 클릭 횟수, 움직임 등을 깨닫는 것과 매우 다릅니다. 시스템의 흐름의 실제 느낌.

그러나 가격이없는 것은 없습니다. 동적 모형을 만들려면 대개 더 많은 시간이 필요합니다. 또한 고객에게 더 높은 기대치를 제공합니다. 하나의 버튼을 누르고 시스템에서 무언가를 수행하는 경우 모든 버튼이 동일하게 작동 할 것으로 예상됩니다 (일부는 기본 시나리오와 관련이 없을 수 있음).

정적 모형을 사용하면 사용 사례를 통해 고객을 안내하는 것이 더 쉬울 수도 있습니다. and 개발자 사용 사례를 통해 "정확한"순서대로 화면을 하나씩 표시하여 모든 사용 사례를 확인하십시오. 의도 한대로 적용됩니다. 동적 인 것을 사용하면 사용자에게 "너무 많은"자유를 줄 수 있으므로 주요 사용 사례 등을 놓칠 수 있습니다.

BTW-HTML 모형을 만들기 위해 프로그래머 일 필요는 없습니다. 프로그래머가 아닌 사람이 그러한 모형을 만들 수 있도록하는 많은 도구 (예 : Axure, Balsamic, Flair Builder 및 기타 도구)가 있습니다.

반응 형 디자인의 인기가 높아짐에 따라 동적 모델 (추정 가능 HTML)을 사용하는 것이 더 더 합리적입니다. 초기 거친 레이아웃을 디자인 할 때 레이아웃의 너비가 어떻게 작동하는지 확인하기 위해 끊임없이 브라우저 크기를 조정합니다.

정적 이미지로 반응 형 디자인을 지정하는 것은 불가능하며 여러 정적 이미지로 표현하는 것은 시간이 많이 걸리고 지나치게 복잡합니다.

일화 답변

최근에 Photoshop에서 기본 템플릿이 디자인 된 사이트 ( "PS"라고 함)에서 작업했지만 사이트의 개별 섹션을 디자인해야했습니다. 비표준 UI 요구 사항으로 여러 섹션을 작업하고 있었고 Photoshop에서이를 모방할지 HTML/CSS로 수행할지 결정해야했습니다. 나는 후자를 선택했고 VERY 감사했습니다.

실제로 HTML로 페이지 컨텐츠 및 탐색 요소를 표시하는 것으로 시작했습니다. 일단 그것을 가지고 나면 CSS로 놀기 시작했고 무엇이 효과가 있는지 보았습니다. 완전히 다른 레이아웃을 여러 개 만들어서 브라우저에서 바로 테스트 할 수있었습니다. 거의 즉각적으로 작동하지 않으며 신속하게 버릴 수 있다는 몇 가지 옵션이 있습니다 (일반적으로 PS에서 디자인을 마쳤습니다). Photoshop에서는 불가능했던 대화 형 (show/hide/etc) 요소도 추가 할 수있었습니다.

예를 들어 HTML과 PS에서 way 더 빠를 몇 가지 예가 있습니다. 셀과 헤더 내부의 가변 텍스트 컨텐츠를 사용하여 PS의 테이블을 시각적으로 디자인하려면 실제로 노력해야합니다. HTML에서는 매우 빠르며 실제로 실제로 어떻게 보이는지 알 수 있습니다.

물론 이것은 CSS로 모든 것을 할 수 없기 때문에 지금까지만 가능합니다. 나는 때때로 포토샵으로 돌아가서 특정 부분에 대해 그런 이미지를 만들지 만 CSS를 통해서만 할 수있는 일을보고 놀랐습니다.

내 테이크

나는 여전히 사례별로 이것을 취할 것입니다. 그러나 앞으로는 분명히 HTML 모형에 의존 할 것입니다.

내가 옳다면, 나는 VB은 처음에는 일부 모형을 빠르게 두드리는 방법으로 쓰여졌다 고 생각한다.) HTML 모형의 길을 따라갑니다.

그러나 나는 입력 할 때 새로운 제품에 대한 모형을 만드는 과정에 있으며 솔직히 PSD 형식으로 보이는 HTML 모형을 만드는 데 노력이 가치가 있다고 생각하지 않습니다. 복잡한 레이아웃 디자인을 사용하면 약간의 텍스트 나 이미지 등이 원하는 위치에 정확하게 표시되도록하려면 비슷한 수준의 기술을 가진 포토샵 아티스트보다 웹 개발자가 더 오래해야합니다.

또한 텍스트 및 기본 디자인 이상의 작업을 수행하려는 경우 Photoshop (또는 유사한 그래픽 패키지)을 사용하여 해당 디자인 작업을 수행 할 수 있습니다. 문제를 복잡하게 만드는 이유는 무엇입니까?

물론 대화 형 모형을 사용하는 데 대한 정당성이 있다면 (예를 들어 특정 대화 형 디스플레이가 어떻게 작동하는지 생각하는 큰 사용자 그룹) 추가 노력이 필요합니다.

그러나 고객에게 응용 프로그램의 여러 창을 어떻게 생각 해야하는지 보여주는 경우 추가 노력에 대한 타당성이 있다고 생각하지 않습니까?