웹 사이트 모형 : 탐색을위한 4 가지 인기있는 접근 방식

웹 사이트 모형

웹 사이트 모형은 다양한 방법으로 만들 수 있습니다. '최상의'접근 방식은 없지만 특정 UI 및 UX 디자이너의 스타일과 선호도 (및 디자인 프로세스)에 따라 일부는 다른 것보다 더 잘 작동합니다.

이 기사에서는 가장 많이 사용되는 네 가지 옵션 인 엔드 투 엔드 UX 도구, 목업 도구, 그래픽 디자인 도구 및 웹 사이트 목업 사이의 경계를 모호하게 만드는 코딩 된 디자인의 장단점을 살펴 보겠습니다. 및 프로토 타입.

특별히 와이어 프레임 도구를 사용하는 경우 최고의 와이어 프레임 도구 , 또는 더 넓은 컬렉션을 보려면 Google의 메가 라운드 업을 확인하세요. 최고의 웹 디자인 도구 .



GenerateJS 배너

이미지를 클릭하여 자세한 내용을 확인하고 티켓을 수령하세요.(이미지 출처 : Future / Toa Heftiba, Unsplash)

모든 웹 사이트 모형이 동일하다고 생각하는 실수를하지 마십시오. 플랫폼, 충실도 및 코딩에 대한 간단한 결정은 모두 상당히 다른 결과를 생성합니다. 디자인 프로세스를 시작하기 전에 원하는 것과 목표가 무엇인지 파악하십시오. 세 단계를 모두 지원하는 도구를 원할 경우 중간에 전환하는 것보다 먼저 사용하는 것이 가장 좋습니다. 마찬가지로, 완벽하고 사실적인 모형이 필요한 경우 어느 시점에서 그래픽 디자인 편집기를 사용할 것임을 명심하십시오.

01. 엔드-투-엔드 UX 도구

가장 높은 계층에는 목업, 프로토 타이핑, 문서화, 개발자 핸드 오프 및 디자인 시스템과 같은 전체 워크 플로를 만족시키는 것을 목표로하는 엔드-투-엔드 도구가 있습니다. UXPin 2010 년대 초부터 이러한 요구에 부응 해 왔지만 Adobe 및 InVision과 같은 많은 다른 브랜드도 이제 '모든 것을 지배하는 하나의 도구'를 만들려고 노력하고 있습니다.

UXPin

UXPin은 강력한 프로토 타이핑, 목업, 문서 및 개발자 핸드 오프를 자랑합니다.

그렇다면 이러한 도구는 모형 제작을 위해 어떻게 쌓일까요? 그들은 아무 문제없이 그들을 다룰 수 있습니다. 예를 들어 UXPin을 사용하면 여러 상태 및 상호 작용이있는 모형을 만들 수 있습니다. 펜 도구를 포함하여 Photoshop 및 Sketch의 일부 기능을 모방합니다.

반면에 InVision의 스튜디오 , 꽤 멋진 애니메이션 편집이 가능합니다. 동안 Adobe XD XD 디자인 내에서 Photoshop 및 Sketch 파일을 열고 색상, 심볼, 선형 그라디언트 및 문자 스타일을 적용 할 수 있습니다.

Studio InVision

Studio by InVision은 종단 간 워크 플로우 생성을 목표로합니다.

가장 중요한 것은 엔드 투 엔드 도구가 이제 프로젝트 전반에 걸쳐 목업의 일관성을 보장하는 디자인 시스템을 제공하고 있다는 것입니다. 디자인 시스템은 모든 도구에 자산 및 디자인 원칙에 대한 단일 소스를 제공합니다. 많은 목업을 만들 계획이라면이 기능은 거의 필수가됩니다.

웹 사이트 모형을 만들기위한 종단 간 도구를 선택할 때 다음 측면을 고려하는 것이 좋습니다.

  • 충실도 : 비주얼 및 인터랙션 디자인 도구는 얼마나 강력합니까?
  • 일관성 : 작업에서 디자인 일관성을 보장하는 기능은 무엇입니까?
  • 정확성 : 작업중인 요소가 조직의 '진실의 근원'을 반영합니까?
  • 협동 : 이해 관계자 또는 다른 디자이너와 협업 할 수 있습니까?
  • 개발자 핸드 오프 :이 도구는 개발자를위한 사양 및 자산을 어떻게 생성합니까?

02. 전용 목업 도구

다음과 같은 덜 강력한 솔루션 원리 , 프레이머 , Moqups 또는 Balsamiq 목업을 만드는 데 필요한 모든 것을 계속 제공 할 수 있습니다. 추가 워크 플로와 디자인 일관성 기능을 잃게됩니다. 이러한 도구는 생성 프로세스를 가능한 한 쉽게 만들도록 설계되었으므로 프로그램 조작 방법보다는 스타일 결정에 더 집중할 수 있습니다.

전용 목업 도구에는 분명한 이점이 있습니다. 초보자는 사용 편의성에서 이점을 얻는 반면 전문가는 고급 요구 사항에 특별히 맞춘 디자인을 높이 평가합니다. 좀 더 발전된 측면에서 Framer 및 Principle과 같은 도구는 모형을위한 애니메이션 및 상호 작용을 전문으로합니다.

내 사진을 Facebook에서 비공개로 설정하려면 어떻게 해

프레이머

Framer와 같은 도구는 상호 작용을 전문으로합니다.

하단에서 Moqups 및 Balsamiq는 와이어 프레임 및 목업에 사용되는 비 설계 도구보다 더 많은 기능을 제공합니다 (예 : 기조 ),하지만 저 충실도 디자인으로 만 제한됩니다. 그러나 목표가 충실도가 낮은 와이어 프레임을 매우 빠르게 만드는 것이라면 매우 유용 할 수 있습니다.

목업 도구와 관련하여 간단한 와이어 프레임 솔루션이 적합할지 아니면 고급 화면 디자인이 필요한지 결정해야합니다. 어떤 목업 도구를 선택하든 협업 워크 플로의 손실과 엔드 투 엔드 도구가 제공하는 설계 일관성이 떨어지는 기능을 기꺼이 받아 들일 수 있는지 확인하십시오.

03. 그래픽 디자인 소프트웨어

일부 디자이너는 다음과 같은 소프트웨어로 맹세합니다. 포토샵 CC , 스케치 또는 일러스트 레이터 CC , 특히 픽셀까지 제어 할 수있는 도구에 특히 능숙하거나 익숙한 사용자. 그래픽 디자인 플랫폼은 최고 수준의 사실 성과 시각적 충실도를 목표로하는 경우 가장 잘 작동합니다. 그리고 우리 가이드에서 설명했듯이 Photoshop CC를 사용한 신속한 프로토 타이핑 , 생각보다 쉬울 수 있습니다.

포토샵 CC

Photoshop은 세밀한 제어를 제공하지만 간단한 모형에는 과도하게 사용할 수 있습니다.

그래픽 디자인 소프트웨어로 작업하면 고도로 정의 된 색상을 거의 끝없이 선택할 수 있으므로 특정 브랜딩 규칙과 같이 엄격하고 사전 설정된 색상 구성의 제한 내에서 작업하는 경우 이러한 프로그램이 가장 적합 할 수 있습니다. 선택권. 이 프로그램은 색상 옵션 외에도 훨씬 더 많은 시각적 도구를 제공하므로 세부 사항의 세부 사항을 해결할 수 있습니다.

그러나 이러한 유형의 소프트웨어를 사용할 때의 단점은 설계 코딩을 시작할 때 번역하기 어려울 수 있다는 것입니다. Photoshop에서 작동 한 것이 코드 (글꼴, 그림자, 그라디언트 효과 등의 요소)에서 항상 작동하지 않을 수 있으며, 이는 프로토 타이핑 단계에 대한 솔루션을 찾는 데 시간을 낭비 할 수 있습니다.

스타일이 많은 페이지의 경우 모형 단계에서 특정 시각적 세부 사항을 망치는 데 도움이 될 수 있습니다.이 경우 Photoshop 또는 Sketch가 가장 많은 옵션을 제공합니다. 마찬가지로, 까다 롭거나 만족스럽지 않은 고객을 상대하는 경우 화려하고 인상적인 모형을 제시하면 더 쉽게 이길 수 있습니다.

목업은 UXPin으로 드래그 할 수 있습니다.

Photoshop 또는 Sketch에서 만든 목업은 UXPin으로 끌어서 놓을 수 있습니다.

Photoshop 또는 Sketch에서 만든 모형을 UXPin을 사용하여 프로토 타이핑 단계로 드래그 앤 드롭 할 수 있다는 점도 언급 할 가치가 있습니다. 이를 통해 몇 번의 클릭만으로 모든 레이어 (평탄화 없음)를 쉽게 애니메이션 할 수 있으며 프로토 타입을 시작할 때 처음부터 시작할 필요가 없습니다.

비주얼이 유일한 우선 순위가 아니라면 와이어 프레임, 목업 및 프로토 타이핑을 한곳에서 모두 수행 할 수있는 도구를 사용하는 것이 더 효율적일 수 있습니다. 그래픽 디자인 소프트웨어는 최적의 시각화를 찾지 않는 한 목업의 가치보다 더 문제가 될 수 있습니다. 이러한 도구는 공동 작업을 위해 설계되지 않았기 때문에 개발자와 정기적으로 소통해야합니다.

04. 코딩 된 목업

당신이 주로 디자이너이고 코딩에 익숙하지 않다면 이것은 분명히 선택 사항이 아닙니다. 논의 된대로 목업 가이드 , 코딩 된 모형은 기본 선택이 아닙니다.

대부분의 코딩은 프로토 타이핑 단계 (HTML / JavaScript 프로토 타입을 만드는 경우)까지 또는 나중에 (프로토 타이핑 도구를 사용하는 경우)까지 연기 될 수 있습니다. 그러나 복잡성과 잠재적 인 장애물에도 불구하고 모형 단계에 코드 도입을 옹호하는 존경할만한 디자이너가 많이 있습니다.

도구와 기술의 향상은 레이아웃 디자인에서 점점 더 많은 가능성이 열리고 있음을 의미하지만 모든 것이 코드에서 쉽게 (또는 가능할 수도)있는 것은 아닙니다. 코드로 시작하면 할 수있는 것과 할 수없는 것을 즉시 알 수 있습니다. 코드에 익숙하다면 이것으로 시작하는 것이 덜 낭비 적이라고 주장 할 수도 있습니다. 모형은 어쨌든 HTML / CSS로 끝날 것입니다.

그러나 앞서 언급했듯이 코딩이있는 모형은 코딩의 어려움보다 더 많은 이유로 인기있는 전략이 아닙니다. 코드를 너무 일찍 시작하면 창의력과 실험 준비가 제한 될 수 있습니다. 아이디어가 얼마나 흥미로워 보일 수 있는지보다 코드에서 실행 가능성에 대해 걱정하기 쉽기 때문입니다.

코딩을 도입 할시기는 귀하에게 달려 있습니다. 디자인 목표를 알고 있는지 확인하고 기능의 우선 순위를 지정하는 방법에 대해 개발자에게 최신 정보를 제공하십시오.

뷰 파인더로 캐논 포인트 및 촬영

더 읽어보기 :