12 가지 최고의 프로토 타이핑 도구

1/2 페이지 : 페이지 1

프로토 타이핑은 모든 디지털 디자인 프로세스에서 필수적인 부분입니다. 디자인을 시뮬레이션하고 다양한 사용자 경험 , 프로젝트 내 여정과 사용자 흐름을 테스트합니다. 디자인의 PDF를 인쇄하고 제공하던 시대는 지났습니다.

많이 있습니다 웹 디자인 도구 하지만 최근 몇 년 동안 프로토 타이핑 도구가 실제로 그 자체로 등장했습니다. 이러한 프로토 타이핑 도구를 사용하면 아이디어에서 멋진 무언가를 만들고 싶든 기술적 인 것을 만들고 싶든 관계없이 직면 할 수있는 모든 디자인 문제를 해결할 수 있습니다. 어떤 프로토 타입이든 경험을 검증 할 수 있도록 인터페이스를 테스트하고 플레이하는 것이 중요합니다.

이러한 도구의 대부분은 가격표와 함께 제공되지만 일부는 단일 프로젝트 또는 제한된 페이지에 대한 무료 액세스를 제공하므로 프로젝트에 적합한 애플리케이션을 찾을 수 있습니다.



특히 와이어 프레임 도구 인 경우 다음 목록을 확인하십시오. 최고의 와이어 프레임 도구 유효한.

주요 그림 : 뉴턴 리베이로

01. Proto.io

가격: $ 24 / 월부터 (무료 시험판)

장점 :

  • 사용자 테스트 기록
  • 공유 가능한 프로토 타입
  • 모바일 앱 사용 가능
  • VR 프로토 타이핑 지원
  • 사용 가능한 추가 기능

단점 :

  • 오프라인 사용에는 적합하지 않음

Proto.io는 거친 아이디어에서 완전한 디자인에 이르기까지 생생한 프로토 타입을 제작하는 놀라운 경쟁자입니다. 이 도구는 또한 상세한 애니메이션 및 사용자 정의 벡터 애니메이션 만들기를 포함하여 프로젝트에 대한 많은 가능성을 제공합니다.

프로토 타입 제작에 도움이되는 도구를 평가할 때 확실히 선두 주자 중 하나입니다. Proto.io를 사용하면 원하는만큼 간단하게 프로젝트를 시작할 수 있습니다. 대략적인 아이디어 만 스케치하면 즉시 크래킹하고 사전 정의 된 자산을 사용하여 개념을 빠르게 발전시킬 수 있습니다.

아이디어에 만족하면 추가 검증 및 반영을 위해 더 세련되고 표현 가능한 와이어 프레임으로 바꿀 수 있습니다. 그 다음 중요한 단계에서는 프로토 타입의 디자인을 조정하여 가능한 한 최종 결과에 충실 할 수 있습니다.

Proto.io는 웹 기반 도구이며 Sketch 및 Photoshop 파일 가져 오기, VR 프로토 타이핑, UI 라이브러리 및 사용자 테스트를위한 화면 녹화를 포함하는 다양한 부가 기능 및 기능과 함께 제공됩니다. 이것은 다른 응용 프로그램으로 전환하는 경우에 정말 도움이 될 수 있습니다.

궁극적으로이 도구를 사용하려면 시간이 좀 걸릴 것입니다. 그것으로 할 수있는 일이 많고 놀 수있는 많은 옵션과 메뉴 항목이 있습니다. 그래도 주위의 방법을 배우고 나면 버리기가 어려울 것입니다. 상세한 애니메이션을 제작할 수 있다는 전망은 이것을 사용하기에 훌륭한 도구이며 가능한 한 현실적으로 아이디어를 실행하는 완벽한 방법이됩니다.

02. Adobe XD CC 2018

가격 : $ 9.99 / 월 | £ 9.98 / 월
무료 평가판 사용해보기 : 우리 | 영국

장점 :

  • 몇 번의 클릭만으로 상호 작용 추가
  • 깔끔한 UI
  • 간편한 테스트를 위해 프로토 타입 실행 및 내보내기
  • 제한이 거의없는 프로토 타입 제작

단점 :

  • 애니메이션 옵션이 제한됩니다.

Adobe XD는 Adobe에서 디지털 프로젝트를위한 최상의 환경을 제공합니다. 크리에이티브 클라우드 디자인 도구 모음. Adobe 사용자이고 XD를 처음 사용하는 경우 인터페이스가 처음에는 익숙하지 않을 수 있지만 다른 주요 도구와는 비교할 수 없습니다. 한동안 Photoshop에서 디자인을 해왔다면 그것은 도약입니다. 그러나 Adobe 팬이라면 그만한 가치가 있습니다.

이 도구를 사용하면 거의 제한없이 고품질 디자인과 프로토 타입을 만들 수 있습니다. 더 많은 시각적 프로젝트를 위해 항상 무기고 중 하나가 될 것입니다. 그것은 매우 디자인 주도적이며 디자인 프로세스를 더 효율적이고 만족스럽게 만드는 몇 가지 정말 깔끔한 기능과 함께 사용하기가 매우 쉽습니다.

캔버스에는 디자인과 프로토 타입의 두 가지 모드가 있습니다. 인터페이스 및 아트 보드 세트를 만든 후에는 클릭 가능한 요소와 페이지 간의 관계를 그릴 수 있습니다. 슬라이딩, 밀기 및 용해와 같은 전환 스타일 중에서 결정할 수 있습니다. 그런 다음 XD를 사용하면 프로토 타입을 실행하고 내보낼 수 있으므로 프로토 타입을 테스트하고 클라이언트에게 보여줄 수 있습니다.

오늘의 최고의 Adobe Creative Cloud 거래 Adobe권장 소매점 Creative Cloud 모든 앱 49.94 파운드 / 월 전망 ...에서 어도비 벽돌 Creative Cloud 포토 그래피 9.98 파운드 / 월 전망 ...에서 어도비 벽돌 Creative Cloud 단일 앱 19.97 파운드 / 월 전망 ...에서 어도비 벽돌

03. 액셔

가격: $ 29 / 월부터

장점 :

  • 복잡한 사이트 및 아이디어에 적합
  • 동적 데이터 처리에 탁월함
  • 조건부 논리
  • HTML 파일로 내보내기 가능
  • 매우 기능적

단점 :

  • 고 충실도 디자인 프로토 타이핑에 적합하지 않음

Axure는 시장에서 최고의 와이어 프레임 도구 중 하나로 명성을 쌓았으며 동적 데이터가 필요한 더 복잡한 프로젝트를 처리 할 때 완벽한 선택입니다. Axure를 사용하면 구조 및 데이터와 관련하여 더 기술적이고 더 많은주의가 필요한 프로젝트를 조롱하는 데 실제로주의를 집중할 수 있습니다.

고 충실도 디자인의 프로토 타이핑을위한 첫 번째 선택은 아니지만 그럼에도 불구하고 첫 번째 단계의 와이어 프레임 개념을 통해 대규모 프로젝트 / 소프트웨어 플랫폼을 신속하게 채택하는 데 매우 유용합니다.

Axure의 주요 이점은 동적 콘텐츠를 정말 잘 처리하여 특정 사용자 여정이나 상호 작용에 따라 변경하고 변경할 수 있다는 것입니다. 이는 조건부 논리와 변수 및 매개 변수를 설정하여 페이지, 콘텐츠 블록 또는 텍스트를 조작하는 조합을 통해 이루어집니다.

그러나 Axure로 수행 할 수있는 작업의 잠재력은 여기서 멈추지 않습니다. 순서도 및 다이어그램을 시각화하는 데 유용한 옵션이며, 직면 할 수있는보다 기술적 인 여정 중 일부를 명확하게 설명하는 데 도움이됩니다.

그리고 프로젝트의 기술적 측면에 대해 말하면 Axure는 디자인의 기술적 측면뿐만 아니라 데이터 주도 또는 동적 플랫폼을 다루기위한 쇼핑 목록의 맨 위에 있어야합니다. 따라서 디자인은 단순한 외관 점검 일뿐입니다. 형태보다 기능이 떠 오릅니다.

04. 종이 접기 스튜디오

가격: 비어 있는

Origami는 원래 팀이 제품을 만들고 디자인 할 수 있도록 Facebook에서 개발했습니다. 이제 무료로 사용할 수 있습니다. Apple 개발자로 등록한 다음 Quartz Composer와 함께 Xcode를 다운로드하고 설치하여 Mac에서 Origami를 실행할 수 있습니다.

비디오 편집자가되는 방법

이 도구는 다른 프로토 타이핑 옵션보다 설치에 더 많은 작업이 필요합니다. 그러나 일단 설치되면 스크롤, 탭, 스 와이프 및 페이지 링크를 시뮬레이션하는 디자인 개념을 만들 수 있습니다. Origami의 문서, 튜토리얼 및 방법 비디오를 통해 쉽게 시작할 수 있습니다.

Sketch 및 Photoshop 디자인을 Origami로 가져올 수 있으며 프로젝트 레이어가 보존되어 필요에 따라 연결, 애니메이션 및 변형 준비가됩니다. Origami는 모바일 디자인 중심이 아닙니다. 반응 형 웹 사이트를 디자인하고 텍스트 입력, FaceTime 카메라 및 OS X 드래그 앤 드롭과 같은 기능을 시뮬레이션 할 수 있습니다.

클릭 한 번으로 프로토 타입 구성 요소 (애니메이션 포함)를 내보낼 수 있으므로 엔지니어가 프로젝트에 복사하여 붙여 넣을 수 있습니다. Origami에는 디자인에 사용자 정의 배경을 추가하고, 전체 화면으로보고, 다양한 장치를 시뮬레이션 할 수있는 프레젠테이션 도구가 포함되어 있습니다.

무료 프로토 타이핑 솔루션 인 Origami는 많은 것을 제공합니다. 그러나 한 가지 단점은 아직 고객이나 디자인 팀이 프로젝트 또는 버전 관리 기록에 직접 댓글을 달 수 없다는 것입니다.

애프터 이펙트 CC 2015 무료 다운로드

05. Webflow

Webflow를 사용하면 프로토 타입을 빠르고 원활하게 디자인 할 수 있지만이 도구가 실제로 빛나는 곳은 프로토 타입이 모두 완료되었을 때입니다. 버튼 클릭만으로 완성 된 프로토 타입을 생산 준비가 된 사이트로 전환 할 수 있습니다.

최근 Webflow는 게임을 바꾸는 새로운 기능인 프로토 타입 용 CMS를 도입했습니다. Webflow의 CMS는 완전히 시각적이므로 한 줄의 코드를 작성하지 않고도 강력하고 동적 인 사이트를 만들 수 있습니다. 특히 유용한 또 다른 기능은 블로그 페이지 프로토 타입 개념을 사용하여 블로그를 만드는 기능입니다.

프리랜서 디자이너이고 디자인을 프로덕션 사이트로 전환 할 개발자를 찾는 데 어려움이있는 경우 Webflow가 적합 할 수 있습니다. 사용자 계정을 설정하거나 콘텐츠를 관리 할 관리자를 지정할 수도 있으며 클라이언트는 시각적으로 변경할 수 있습니다.

또는 프로토 타입을 코드로 쉽게 내보낼 수 있습니다. Webflow의 깔끔하고 의미 론적 코드는 엔지니어의 코드 정리 시간을 절약 할 수 있습니다.

Webflow는 프로토 타입에 끌어다 놓을 수있는 사이트 템플릿 및 웹 구성 요소와 함께 제공됩니다. 이는 일반적으로 사용되는 디자인 자산을 다시 만들 필요가 없음을 의미하므로 프로토 타이핑 프로세스의 속도를 높입니다.

문제가있어 도움이 필요한 경우 언제든지 Webflow의 자세한 문서를 확인하거나 유용한 방법 비디오 과정을 볼 수 있습니다. 물론 Webflow를 처음 사용하는 경우이 지원은 학습 곡선을 최소화하는 데 도움이됩니다.

Webflow는 본질적으로 반응하므로 웹 사이트 레이아웃은 데스크톱, 모바일, 태블릿 등 모든 기기에 최적화됩니다. 이것으로 충분하지 않다면 모바일 장치와 모든 최신 브라우저에서 작동하는 애니메이션을 디자인 할 수 있습니다. Webflow에는 확장 성이 내장되어있어 라이브 프로토 타입을 Slack, MailChimp, Google Drive 및 400 개 이상의 기타 서비스에 쉽게 연결할 수 있습니다.

06. 스케치

가격: $ 99 / 년 (무료 시험판)

장점 :

  • 깔끔한 UI
  • 기능면에서 매우 유연함
  • 손쉬운 프로토 타입 제작
  • 심볼 및 재사용 가능한 자산 구축
  • 사용 가능한 추가 기능
  • 프로토 타입을 쉽게 공유

단점 :

  • 애니메이션 옵션이 제한됩니다.

Sketch는 디자인 커뮤니티에서 사랑받는 애플리케이션입니다. 사용이 간편하고 멋진 인터페이스를 만드는 데 필요한 모든 것을 제공합니다. 최근까지 Sketch는 InVision으로 프로토 타이핑하기 위해 타사 확장에 의존했지만 이제는 자체 환경을 모두 제공합니다.

미리 정의 된 아트 보드를 사용하면 아주 적은 노력으로 매우 빠르게 Sketch를 사용할 수 있습니다. 그래픽이나 타이핑으로로드하기 만하면됩니다. 이 도구로 디자인하는 것은 사랑스럽고 쉽습니다.

Sketch에서 정말 잘 작동하는 기능 중 하나는 기호를 처리하는 방법입니다. 이것은 작거나 큰 인터페이스 개체를 패키징하고 반복해서 재사용하는 깔끔한 방법입니다. 심볼을 사용하여 비파괴적인 방식으로 편집 할 수도 있습니다. 예를 들어, 텍스트, 아이콘 및 테두리를 사용하는 심볼로 압축 된 버튼 요소가있을 수 있습니다. 디자인 주위의 기호를 재사용하고 필요한 경우 텍스트 요소를 변경할 수 있습니다. 소스에서 심볼을 편집하는 경우 글꼴 스타일 및 색상과 같은 항목을 변경할 수 있으며 디자인 주변의 모든 심볼이 업데이트됩니다. 매우 깔끔하고 종종 큰 시간을 절약합니다.

프로토 타이핑의 경우 캔버스와 페이지의 개체 간의 관계를 그릴 수 있습니다. 이러한 관계는 연결을 시작할 수있는 페이지 간의 링크를 제공하고 사용자가 사이트를 탐색 할 때 사용자의 여정을 시뮬레이션 할 수 있도록합니다. 또한 Sketch 내에서 고유 한 링크로 프로토 타입을 공유하고 필요할 때 프로젝트를 업데이트 할 수 있습니다.

스케치는 많은 사람들이 좋아하고 볼만한 가치가 있습니다. 매우 깨끗하고 다재다능한 디자인 도구입니다. 설계 프로세스를 더 빠르고 쉽게 만드는 데 도움이되는 다양한 확장 기능이 있습니다.

07. 프레이머

가격: $ 15 / 월 (무료 평가판)

Framer는 가장 인기있는 프로토 타이핑 도구 중 하나입니다. 코드를 사용하면 어떤 것이 든 프로토 타입을 만들 수있어 참신하고 획기적인 디자인이 가능하다는 전제를 기반으로합니다.

이것이 사실 일 수 있지만 프로토 타입을 디자인하고 애니메이션화하기위한 도구의 독점적 인 코딩 언어가 장벽이 될 수 있습니다. 가파른 학습 곡선의 끝에서 보상을 보지 못하는 사람들, 특히 Framer 외부에서 사용할 수없는 언어의 경우가 있습니다.

그러나 도전을 받고 싶은 사람들을 위해 Framer의 코딩 언어 문서는 매우 잘 구성되어 있으며 언어 작동 방식을 보여주는 많은 예제가 있습니다. 방법 비디오와 Udemy 및 O'Reilly에 대한 과정이 있습니다.

이 접근 방식은 코딩을 처음 접하는 디자이너에게 특히 유용합니다. 코드가 얼마나 유연하고 강력한 지 직접 볼 수 있습니다. 또한 Framer의 Mac 앱은 잘 설계되어 있으며 코드를 작성할 때 실시간 미리보기를 제공하므로 처음으로 코드를 작성하는 사람들에게 고무적입니다.

디자인 프로토 타입을 만들기 위해 HTML / CSS를 작성하는 것을 선호하는 코딩 경험이있는 디자이너에게 좋지 않다는 말은 아닙니다. Framer는 여러분이 찾고 있던 도구 일 수 있습니다. 다른 앱의 드래그 앤 드롭 도구에 제한을받지 않습니다. 또한 Framer는 코드를 사용하여 프로토 타입을 빌드하기 때문에 Twitter 및 Parse와 같은 소스에서 프로토 타입에 실시간 데이터를 통합 할 수 있습니다.

다른 도구와 마찬가지로 Framer는 Sketch 및 Photoshop 프로젝트를 지원하며 디자인의 레이어도 유지합니다. 또 다른 이점은 대부분의 다른 도구와 달리 After Effects 파일을 가져올 수도 있다는 것입니다. 프로토 타입을 공유 할 준비가되면 Framer는 클라이언트와 공유 할 수있는 URL을 생성 할 수 있습니다. 이러한 공유 가능한 URL은 실시간 미리보기를 위해 모바일 장치에서 열 수 있습니다. Framer를 사용하면 VR 프로토 타입을 만들 수도 있습니다.

08. Vectr

Vectr에서 프로토 타입을 디자인 할 수 있습니다.

Vectr의 웹 또는 데스크톱 앱에서 프로토 타입을 디자인 할 수 있습니다.

가격: 비어 있는

Mac 및 Windows 용 Vectr의 웹 또는 데스크톱 앱에서 프로토 타입을 디자인 할 수 있습니다. 앱이 무료라는 점을 감안하면 인상적입니다. 프로토 타입은 데스크톱에서 작업하든 웹 브라우저에서 작업하든 동기화 된 상태를 유지하므로 준비가되었을 때 작업 할 수 있고 항상 최신 변경 사항에 액세스 할 수 있습니다.

Vectr 프로토 타입은 URL로 공유 할 수 있으며 강력한 협업을 위해 Slack과 같은 앱에 통합 할 수 있습니다. 추가로 목업을 공유하는 사람들은 주석을 달고 편집 할 수 있습니다.

현재 Vectr는 다른 많은 옵션만큼 기능이 풍부하지는 않지만 이것이 익숙해지는 것을 방해해서는 안됩니다. 예정된 기능의 인상적인 목록을 자세히 설명하는 앱 로드맵이 게시되었습니다. 여기에는 완전한 오프라인 데스크톱 앱, 더 많은 플랫폼, 기본 제공 버전 제어, 기본 제공 디자인 자산 마켓 플레이스, 전체 공동 편집, 이미지 효과, 플러그인, 클릭 가능한 모형, 기본 제공 피드백 및 주석 도구, 오프라인 데스크톱 앱이 포함됩니다. .

5 가지 훌륭한 프로토 타이핑 도구에 대해 읽어보십시오 ...

  • 1

현재 페이지: 페이지 1

다음 페이지 2 쪽