UI/UX 협업에 필요한 프토토타이핑 툴 정리
스케치 Sketch
The digital design toolkit
Save, share and organize your designs, in one place Seamless integration to the Mac app makes saving to Cloud as easy as hitting ⌘S. From there, you can organize designs into Projects, share them with collaborators (or a whole team) and keep track of chang
www.sketch.com
맥 OS용 프로그램.
유료. 1년 99달러 (체험사용 가능, 1년 후 갱신시 69달러.)
스케치 클라우드로 파일 다운/업로드 방식으로 협업. (플러그인 제플린, 인비전을 통해 공유)
- 학습 사이트 https://www.sketch.com/docs/
제플린(Zeplin)
Zeplin
Connected space for product teams. Handoff designs and styleguides with accurate specs, assets, code snippets—automatically.
zeplin.io
인비전(invision)
Adobe XD
https://www.adobe.com/kr/products/xd.html
무료
어도비 툴과 호환성 높음(단축키 등)
프로토타이핑 간단한 애니메이션 구현 가능
피그마(figma)
Figma: the collaborative interface design tool.
A better way to design. Design, prototype, and gather feedback all in one place with Figma.
www.figma.com
브라우저 기반 툴. OS 구애받지 않음
스케치와 호환
무료
오토세이브
플러그인 필요없음
애니메이션 구현 가능(복잡한 건 프로토파이, 프레이머)
- 피그마 비디오 튜토리얼(유튜브) https://www.youtube.com/figmadesign
오리가미 스튜디오(Origami studio)
Origami Studio — Design Prototyping
A new tool for designing modern interfaces, built and used by designers at Facebook
origami.design
맥 전용, 무료
학습사이트
https://origami.design/tutorials/getting-started/Getting-Started.html
Origami Studio — Getting Started
An introduction to using Origami Studio.
origami.design
프로토파이(Protopie)
ProtoPie - Interactive prototyping tool for all digital products
ProtoPie is the easiest tool used to turn your UX design ideas into highly interactive prototypes for mobile, desktop, web, all the way to IoT.
www.protopie.io
프로토타입 제작 후 동영상 공유
- 학습 페이지 https://www.protopie.io/learn/
- 비디오 튜토리얼 https://www.youtube.com/playlist?list=PLC9f0dp5svDXk0QtXgGGPlQNKXqb3bF7M
프레이머(Framer)
Framer - A lightning fast interactive design tool.
Got creative ideas? Bring them to life with Framer X.
www.framer.com
애니메이션 프로토타입 제작용 - 하이피델리티 프로토타이핑(High Fidelity Prototyping)
유료
12달러 / 개월
스케치, 피그마, 포토샵파일 임포트 가능
커피스크립트 : 코딩으로 프로토타이핑 작성
A Pattern Library for Prototyping | Framer Examples
Browse hundreds of pre-made interaction patterns. Duplicate to open in Framer, follow a tutorial, and customize to your project.
www.framer.com
'디자인 > 기타' 카테고리의 다른 글
| 디자인 이미지를 "있어 보이게" 만들어 줄 무료 목업 사이트 모음 (0) | 2020.05.11 |
|---|---|
| 무료 다운로드 가능한 디자인 리소스 사이트들 (계속 업데이트 중) (0) | 2020.04.11 |
| 무료 3D 프로그램 블렌더(Blender) 설치 및 조작법 (0) | 2020.03.30 |
| 포토샵 없이 무료로 인물 누끼따는 사이트 : removebg (0) | 2020.03.26 |
| 웹브라우저 기반 가벼운 3D 제작 프로그램 : 벡터리(Vectery) (0) | 2020.03.22 |
댓글