모형 : 코딩 대 드로잉?

9

이것은 웹 디자인이 아니라 일반적인 인터페이스 디자인입니다. 김프, 포토샵 등과 같은 그래픽 프로그램에서 인터페이스 목업을 코딩하거나 "그리기"하는 것이 더 낫습니까?

website-design  interface-design  design-process 
— 크리스토퍼
소스
3
나는 항상 "인터페이스를 스케치해라. 만약 당신이 포토샵이나 다른 사람들이 당신이 생각하는 것보다 더 나쁘다고 생각한다면, 당신의 모형을 스케치 한 채로두고, 기본을 내려 놓고, 고객이 무엇을 기대하고 확장 할 수 있는지 알게해라" 나중에 UI에서
— 한나
1
그것은 전적으로 프로젝트에 달려 있습니다. 보편적 인 '최상의'답변은 없습니다.
— DA01

답변:

14

다음과 같은 질문을 해보십시오.

  • 코딩으로 30 분 내에 UI 레이아웃 / 옵션을 몇 개나 탐색 할 수 있습니까? 스케치하여 몇 개를 탐색 할 수 있습니까?

  • 첫 시도에서 UI 디자인을 얼마나 자주 정확하게 얻습니까? 자주 그렇지 않은 경우 스케치와 코드 모형을 변경하는 것이 얼마나 빠르고 쉬운가요?

  • 16 진수 / rgb 코드 (볼 파크 추측뿐만 아니라 정확한 음영 / 색상) 만보고 색상을 즉시 식별 할 수 있습니까? 마음 속에 색상을 그림으로 나타내면 즉시 16 진수로 번역 할 수 있습니까? 16 진수 코드를 입력하는 것과 실제 색상 선택기를 사용하여 색상 구성표를 얼마나 빨리 선택할 수 있습니까?

이 질문을한다는 사실은 당신이 훈련을 통해 디자이너가 아닌 프로그래머 일 가능성이 높다는 것을 나타냅니다. 디자이너라면 클래스 구조, 데이터베이스 디자인, 응용 프로그램 아키텍처 등을 계획하지 않고 코딩에 바로 뛰어 들지 않고 응용 프로그램을 개발하는 것만 큼 터무니없는 일입니다. 숙련 된 개발자라면 이런 종류의 상향식 개발이 어떤 종류의 문제를 일으키는 지

마찬가지로 UI 를 실제로 디자인 하지 않고 코드로 바로 넘어 가면 맹목적으로 코딩하여 좋은 디자인을 완성하는 것이 실용적이지 않기 때문에 결과가 예쁘지 않을 것입니다.

— 레제 마 에스테
소스
OP는 WYSIWYG 코드 편집기를 사용하는 것과 관련이있을 수 있습니다. 개체를 사용하여 색상을 선택하거나 "그릴"수도 있습니다.
— jackJoe
2
실제로 UI를 먼저 디자인하지 않고 코딩하는 것은 매우 유효한 기술입니다. 즉, "코딩"이 UI 또는 UX 부분을 의미하지 않는 경우 :). 대부분의 API와 라이브러리는 실제로 UI를 고려하지 않고 설계되었으므로 실용적이지 않습니다.
— thebodzio
1
@lese, 당신은 폭포 방법을 투구하고 있습니다. 어느 것이 좋을 지 모르지만 요즘 추세는 민첩하게 바뀌는 것인데, 첫날부터 코드 작업을 할 가능성이 큽니다.
— DA01
@ DA01 : 첫날부터 코드 작업을하고 있지만 여전히 하향식 방법론을 적용하고 있습니다. 데이터 아키텍처를 계획하거나 코딩 전에 UI 우선 순위를 정의 할 수 없다고 말하는 민첩성은 없습니다 (대부분의 민첩한 회사는 UML, 클래스 다이어그램 등을 선호합니다).
— Lèse majesté
2
@thebodzio : 그렇습니다. 그것은 관심사 분리를위한 것입니다. 그러나 백엔드 코딩을 말하는 것은 아닙니다. 질문의 디자인 부분 (코딩을 설명하는 데 사용한 프로그래밍 비유가 아님-조금 혼란 스럽습니다)과 관련하여 코딩 할 때 모형 (CSS + HTML 또는 UI 언어가 무엇이든간에 코딩)을 의미합니다 ).
— Lèse majesté
5

먼저 "그리기"에 투표했습니다. GUI에서는 적절한 레이아웃 / 프레젠테이션이 핵심이며 시각적 수단을 설계해야합니다. GUI를 디자인하면 각 변경 사항을 "상상"하고 "코드로 변환"한 다음 테스트하지 않고도 디자인을 신속하게 변경할 수 있습니다. 다른 방법도 가능하지만 거의 나아지지는 않습니다 (예 : 몇 개의 버튼처럼 프로젝트가 매우 작고 "코드"수준에서 작업하는 데 익숙하고 익숙합니다. 디자인 중에 일부 패턴이 나타날 수 있습니다. 약간 수정하여 재사용).

특정 위젯 툴킷을 설계하는 경우 사용 가능한 경우 일부 "GUI 디자이너"애플리케이션을 사용할 수도 있습니다. GUI 실행 과정에서 프로그램 된 GUI의 모양을 정확하게 보여주고 프리젠 테이션 수준에서 GUI 설명을 사용할 수 있도록 내보낼 수 있기 때문에 GUI 디자인 프로세스 속도가 훨씬 빨라집니다.

— 테 보지 오
소스
2
"그리고 당신은"코드 "수준에서 일하는 데 익숙하고 익숙합니다."UI / UX 팀 이 코드 수준에서 작업 할 수 있어야합니다 . 모든 디자이너가 코더 일 필요는 없지만 팀은 시각적 디자인만큼이나 디자인하는 모든 것을 구축하고 엔지니어링을 이해할 수 있어야합니다.
— DA01
팀 전체를 의미하는 한 동의 할 수 있습니다. 코딩하지 않고 UI / UX를 디자인 할 때 코드 내부 작업에 대한 지식이 실제로 방해가 될 수 있다고 생각합니다. 도구". "툴킷 사고"가 당신의 상상력의 일부를 잠그기 때문에, 당신의 디자인이 훌륭한 아이디어를 제거 할 수 있다는 것을 의미합니다. 그리고 다시… 그것은 칼날의 한 면일뿐입니다 :) 게다가, 문제는 "모의 품"에만 관한 것이 었습니다.
— thebodzio
1
'잠깐만 기다려주십시오'라는 주장은 많이 들리지만, 프리젠 테이션 레이어 코드를 배우는 것에 대해 완고하게 반대하는 시각 설계자에게서 나옵니다. 이 사람들은 플래시에서 모든 일을하는 경향이 있습니다. :) 나는 그것이 인쇄 디자인과 다르지 않다고 제안하고 싶다. 인쇄가 어떻게 작동하는지 아는 것이 인쇄 디자이너로서 '지켜지지 않습니다'. 오히려 RIP를 질식시킬 파일을 만들지 못하거나 프린터가 300 % 잉크 적용 범위에서 비명을지를 수 있습니다. 매체와 관련 제약 조건을 이해하는 것입니다.
— DA01
1
WYSIWYG는 '시각적 사고'를 촉진하기위한 것이 아닙니다. 무언가를 배우고 싶지 않은 사람들이 절뚝 거리는 것을 허용하기위한 것입니다. ;) 제약에 관해서는 매체를 정의합니다. 멋진 그림을 그릴 수는 있지만 하중과 스팬의 기본 사항을 이해하지 못하는 건축가는 실제로 아무것도 그릴 수 없기 때문에 크게 유지됩니다.
— DA01
1
(그리고 내 의견 중 많은 부분은 UX 팀과 함께 또는 UX 팀과 협력하여 형성되는 방법을 모른 채 형성되었습니다. 대부분의 시간을 혁신하지는 않지만 절반 만 고려한 디자인입니다. 구현, 타임 라인, 사용자 또는 예산 측면에서 실용적이지 않은 솔루션 [ '벽'이 아니라 디자인 솔루션을 정의하는 데 도움이되는 모든 추가 제약 사항] PS : 좋은 토론!
— DA01
3

UI 디자인의 경우 목표가 다른 세 단계가 있습니다.

  1. 스케치. 먼저, 어떤 요소가 있고 어떤 요소가 서로 잘 맞는지에 대한 기본 아이디어를 얻고 싶습니다. 이 단계에서 미세한 디테일이나 미적 완벽주의는 산만합니다. 나는 화이트 보드와 뚱뚱한 지우기 가능한 펜을 사용하므로 너무 많은 세부 사항에 산만 해지지 않고 다양한 아이디어를 낙서하고 언제든지 다시 시작할 수 없습니다. 작은 포스트잇 메모 만 스케치하거나 손을 사용하지 않는 사람 (예 : 오른 손잡이 인 경우 왼손)만으로 미학에 전혀주의를 기울이지 않고 100 % 집중하는 사람들에 대해 들었습니다. 아이디어와 기능에. ( Frank Prendegast의 이미지가 아닙니다 )

화이트 보드 와이어 프레임 사진

  1. (2!) 시뮬레이션 중입니다.둘째, 시간이 많이 걸리는 구현 작업을 시작하기 전에 사람들의 직관과 즉각적인 응답이 무엇인지에 대해 가능한 한 많이 살펴보고 피드백을 받고 싶습니다. 올바른 작업을 수행하는 경우 종종 '판화 판'으로 돌아가 비판을 찾고 가능한 한 많은 예기치 않은 문제를 가능한 빨리 파악해야합니다. 당신이 미친 코딩 기계이고 그것이 가장 편안하게 일하는 것이라면, 코딩은 훌륭하지만 대부분의 사람들은 Fireworks, Photoshop, 전용 와이어 프레이밍 소프트웨어 또는 Flash Catalyst와 같은 UI 중심 인터페이스 빌더와 같은 작업에서 더 빨리 일할 것입니다 (최종 제품이 플래시가 아닌 경우에는 목표를 구현하기 전에 좋은 피드백을 얻는 것이 좋습니다).

  2. (3!) 구현 중입니다. 마지막으로, 당신은 일을 구현하고 조기에 자주 더 많은 피드백을 얻을 수있는 방법으로 목표를 세웁니다.

프로젝트주기의이 세 부분은 목표가 다르므로 큰 프로젝트 인 경우 각 단계에서 작업에 가장 적합한 도구를 사용하는 것이 좋습니다.

— 사용자 56
소스
2

이 질문은 약간 모호하며 답변도 마찬가지입니다.

또한 팀과 마찬가지로 프로젝트도 크게 달라질 수 있습니다.

즉, '최고'는 없습니다. 그것은 당신과 당신의 팀에 가장 적합한 워크 플로우에서 모든 도구를 사용하는 것에 관한 것입니다.

일반적으로 말하자면, 이것이 당신이 목표로 해야하는 워크 플로우 유형이라고 말하고 싶습니다.

  1. 스케치. 연필 + 종이. 화이트 보드. 반복합니다. 가능한 많은 팀원과 협력하십시오.
  2. 로우 파이 목업. PSD 일 수도 있고 visio 일 수도 있습니다. 종이가 될 수 있습니다. 사용자는 이것들을 테스트합니다.
  3. 프로토 타입 제작을 시작하십시오. 작업 코드에서 최대한 많은 작업을 시작하고자하는 곳입니다. 필요에 따라 Photoshop으로 이동하여 최대한 빨리 코드로 내용을 가져옵니다. 사용자 테스트 / 반복을 계속하십시오.
— DA01
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.