6 가지 최고의 무료 프로토 타이핑 도구

웹 사이트를 디자인하든 앱을 디자인하든, 프로토 타이핑은 디자인 단계의 중요한 부분으로, 당신과 당신의 고객이 당신이 무엇을 만들고 있는지, 그리고 그것이 사용하는 느낌에 대한 아이디어를 얻을 수 있도록합니다. 좋은 프로토 타입은 기능을 설명하고 피드백을 수집하는 데 많은 시간을 절약 할 수 있으며, 올바른 도구를 사용하면 프로덕션으로 이동하기 전에 잠재적 인 문제를 빠르게 반복하고 수정할 수 있습니다. 사용자 테스트 .

기존 스튜디오는 이미 하나 이상의 최고의 프로토 타이핑 도구 하지만 이제 막 시작하고 현금 흐름이 문제인 경우 비즈니스의 다른 곳에서 사용할 수있는 돈을 지출하는 것을 꺼릴 수 있습니다. 고맙게도 유료 서비스의 무료 버전부터 프리미엄 서비스가 제공하는 많은 기능을 수행하는 완전 무료 프로토 타이핑 도구에 이르기까지 훌륭한 무료 옵션이 있습니다. 시도해 볼 수있는 최고의 6 가지가 있습니다.

01. 종이 접기 스튜디오

무료 프로토 타이핑 도구 : Origami



Origami는 Facebook에서 개발 한 Mac 전용 도구입니다.(이미지 출처 : Facebook)

제품을 구축하고 디자인하기위한 도구로 Facebook에서 개발 한 종이 접기 Mac 사용자는 무료로 사용할 수 있습니다. 시작하려면 등록 된 Apple 개발자 여야하며 Xcode 및 Quartz Composer가 설치되어 있어야합니다.하지만 필요한 단계를 거치면 풍부한 온라인 문서 덕분에 Origami로 만들기를 쉽게 시작할 수 있습니다. 튜토리얼 및 기성품 프로토 타입.

프로젝트 레이어가 보존 된 Sketch 및 Photoshop에서 디자인을 가져오고 시뮬레이션 된 스크롤, 탭, 스 와이프 및 페이지 링크로 개념을 만들 수 있습니다. 모바일 앱뿐만 아니라 Origami를 사용하여 텍스트 입력 및 드래그 앤 드롭과 같은 기능이있는 반응 형 웹 사이트를 만들 수 있으며 작업이 끝나면 프로젝트에 추가 할 프로토 타입을 쉽게 내보낼 수 있습니다.

02. 웹 플로우

무료 프로토 타이핑 도구 : Webflow

Webflow는 그 능력을 맛볼 수 있도록 두 가지 무료 프로젝트를 제공합니다.(이미지 출처 : Webflow)

Webflow 모든 팀 규모에 대해 많은 유료 플랜이 제공되지만, 맛보기를 찾고 있다면 시작하는 데 큰 도움이되는 무료 옵션이 있습니다. 두 개의 프로젝트, 클라이언트 청구 및 무료 스테이징을 허용하지만 코드 내보내기 또는 프로젝트 전송 옵션.

시각적 CMS를 사용하면 코드를 작성하지 않고도 동적이고 반응이 빠른 프로토 타입을 만들 수 있으며 템플릿 및 구성 요소 라이브러리가 함께 제공되어 프로젝트를 더욱 쉽게 빌드 할 수 있습니다. 프로토 타입은 Slack, Google Drive 및 MailChimp를 포함한 400 개 이상의 서비스에 연결할 수 있으며, 문제가 발생하면 도움이되는 풍부한 온라인 문서가 있습니다.

03. Vectr

무료 프로토 타이핑 도구 : Vectr

프로토 타입을 만들고 피드백을 수집하는 데 유용한 벡터 디자인 도구가 있습니다.(이미지 출처 : Vectr)

무료 크로스 플랫폼 벡터 디자인 앱으로 구축되었습니다. Vectr 무료 프로토 타이핑 도구로도 잘 작동합니다. 다른 벡터 앱에 비해 기능이 약간 슬림 할 수 있지만 쉽게 익히고 사용할 수 있도록 설계되었으며 몇 가지 자습서 (Vectr 사이트에 집중할 수있는 내용이 많음)를 따르면 준비가 된 것입니다. 디자인을 시작합니다.

정말 유용한 협업 기능 중 하나는 링크 공유 옵션입니다. 이를 통해 다른 사람에게 링크를 보낼 수 있으며 그들은 실시간으로 편집하는 것을보고 빠른 피드백을 제공 할 수 있습니다. 완료되면 완성 된 디자인을 JPG, PNG 또는 SVG로 내보낼 수 있습니다.

포토샵에서 이미지를 뒤집는 방법

04. 저스틴 마인드

무료 프로토 타이핑 도구 : Justinmind

Justinmind의 무료 와이어 프레임 도구는 다양한 옵션을 제공합니다.(이미지 출처 : Justinmind)

Justinmind의 강력한 프로토 타이핑 도구는 무료로 다운로드 할 수 있지만 전체 기능을 사용하려면 유료 구독에 등록해야합니다. 그러나 더 기본적인 프로젝트의 경우 Justinmind 또한 영원히 무료이며 웹 및 모바일 앱 모두에 대해 무제한 프로토 타입, 페이지 및 사용자를 만들 수있는 와이어 프레임 도구를 제공합니다.

15 일 평가판 기간 동안 고급 웹 상호 작용 및 모바일 제스처, 효과, 전환 및 애니메이션과 같은 고급 기능에 액세스 할 수 있으므로 평가판 기간이 끝나면 전체 기능 세트에 대한 비용을 지불 할 의향이있을 수 있습니다. 다 떨어졌다. 하지만 그때 쯤이면 Justinmind가 프로토 타이핑 도구로 비용을 지불할지 여부를 알 수있을 것입니다.

05. 피그 마

무료 프로토 타이핑 도구 : Figma

Figma의 무료 옵션은 공동 제작에 탁월합니다.(이미지 출처 : Figm)

프로토 타입을 공동으로 작업하고 싶은 사람이라면 Figma 훌륭한 솔루션입니다. 디자이너가 실시간으로 함께 작업 할 수 있고 진행중인 작업을 클라이언트 및 이해 관계자와 쉽게 공유 할 수 있으며, 결정적으로 상호 작용, 애니메이션 및 동적 콘텐츠로 완성 된 실제 거래처럼 느껴지는 프로토 타입을 구축 할 수 있습니다. 오버레이.

Figma의 전문가 버전은 유료이지만 도구를 빠르게 익히는 데 이상적인 무료 스타터 버전이 있습니다. 무제한 클라우드 스토리지 및 30 일 버전 기록을 통해 최대 2 명의 편집자와 3 개의 프로젝트를 허용하므로 시작 및 실행에 적합합니다. 하지만 학생이라면 Figma의 프로페셔널 플랜에 무료로 액세스하여 무제한 프로젝트 등을 제공해야한다는 사실을 아는 것이 좋습니다.

06. 인비 전

무료 프로토 타이핑 도구 : InVision

InVision을 사용하면 평면 디자인을 클릭 가능한 프로토 타입으로 간편하게 전환 할 수 있습니다.(이미지 출처 : Webflow)

InVision 매력적인 인터랙티브 프로토 타입을 만들기위한 다양한 도구를 제공하며 여기에서 다루는 많은 플랫폼과 마찬가지로 유료로 작동하지만 무료 버전으로 작동합니다. 이 경우 InVision의 무료 버전은 하나의 프로토 타입으로 제한되지만 Figma의 경우와 마찬가지로 학생들에게 무료 업그레이드가 제공됩니다.

InVision을 사용하면 정적 디자인을 클릭 가능한 프로토 타입으로 전환하는 것이 매우 간단합니다. 핫스팟을 클릭하여 창작물로 끌어서 클릭 또는 호버 동작을 시뮬레이션하고, 프로토 타입의 다른 화면에 링크를 추가하고, 전환을위한 제스처를 사용하여 실제 상호 작용을 시뮬레이션 할 수 있습니다. 작업을 공유하는 것도 마찬가지로 쉽습니다. 프로토 타입은 브라우저 나 모바일에서 열 수 있으며 InVision의 LiveShare 기능은 프로토 타입을 실시간으로 보여줄 수도 있음을 의미합니다.

관련 기사:

Creative Bloq는 iStock by Getty Images와의 유료 파트너십의 일환으로이 콘텐츠를 제작했습니다. 이 기사의 내용은 완전히 독립적이며 Creative Bloq의 편집 의견을 반영합니다.