top 12 best wireframe tools make your design success
앱 및 웹 사이트의 UI / UX 디자인을위한 최고의 와이어 프레임 도구 및 목업 도구 검토 :
이 게시물에서는 오늘날 소프트웨어 시장에서 사용 가능한 상위 12 가지 와이어 프레임 도구에 대해 설명합니다.
이 주제를 깊이 파기 전에 Wireframing이 무엇인지, 왜 이것이 필수인지 이해해야합니다. 소프트웨어 개발 수명주기 (SDLC).
와이어 프레임은 다음과 같습니다.
- 소프트웨어 제품의 사용자 인터페이스 (색상, 레이아웃, 컨트롤)의 모양과 느낌을 보여주는 모형 / 대략 스케치
- 소프트웨어 제품의 탐색 구조를 정의합니다.
- 시스템의 특정 동작을 가져옴으로써 요구 사항을 구체화하는 데 도움이됩니다.
- 모든 이해 관계자와 함께 요구 사항을 명시 적으로 검증 할 수 있습니다.
- 사용자가 소프트웨어 요구 사항을 개념화하는 데 도움이되는 시뮬레이션입니다.
- 사용자 상호 작용 및 반응 형 디자인의 큰 요소를 가져옵니다.
와이어 프레이밍의 필요성을 더 명확하게 이해하려면 최고의 IT 회사의 소프트웨어 요구 사항을 정의하는 비즈니스 분석가와 고객이 식료품 항목을 구매할 수있는 식료품 앱을 개발하기 위해 회사와 계약 한 소매 고객 간의 아래 대화를 고려하십시오. 모바일 장치에서.
비즈니스 분석가 : “안녕하세요 Greg, 오늘은 마케팅 부서가 식료품 앱에 포함 할 계획 인 '귀하의 제안'섹션에 대한 요구 사항에 대해 논의하고 싶습니다. 이에 대한 높은 수준의 사용자 인터페이스 요구 사항을 논의 할 수 있습니까?”
고객 :“그게 필요하지 않을 것 같아요. 개발이 첫 번째 빌드를 제공하면 사용자 요구 사항에 대한 피드백을 제공 할 것이라고 생각합니다. 우리는 이것을 사용자 수락 테스트 (UAT) ”.
MP3 변환기에 가장 안전한 YouTube
요구 사항 수집 프로세스 중에 많은 고객 대면 제품 관리자 / 비즈니스 분석가가 이러한 정확한 문제에 직면하는 경우가 많습니다.
위의 경우, 식료품 앱의 사용자 인터페이스의 모양과 느낌은 고객이 사용자 디자인에 만족하지 않는다는 것을 알기 위해 고객을 위해 최선의 추측을하는 디자이너 / 개발자의 단독 재량에 달려 있습니다. 제품의 첫 번째 빌드 / 반복이 전달 된 후.
그렇다면이 불일치를 어떻게 제거 할 수 있습니까? 이러한 목적을 달성하고 요구 사항을 사전에 고정하는 데 도움이되는 많은 와이어 프레임 도구가 있습니다.
전통적으로 대부분의 요구 사항 엔지니어는 두 가지 유형의 Wire Framing Paper & Electronic을 사용합니다. Paper Wireframing은 사용자 인터페이스 디자인을 정의하는 저렴하고 빠르며 기술이 낮은 방법이지만 관련된 화면이 많을 때 탐색 구조를 정확하게 묘사하는 것은 불가능합니다. 이러한 시나리오에서 UI 요구 사항을 실행하고 관리하는 것은 번거 롭습니다.
전자 와이어 프레임 도구는 이러한 어려움을 극복하고 비즈니스 분석가 / 제품 관리자의 삶을 쉽게 만듭니다.
우리 대부분은 어느 시점이나 경력에서 Quick Wireframing을 위해 Basic Microsoft PowerPoint를 사용했습니다. 그렇지 않습니까? 그러나 이것에는 몇 가지 단점이 있으며 그중 몇 가지가 아래에 언급되어 있습니다.
- 설계중인 제품에는 기본 컨트롤이 충분하지 않을 수 있습니다.
- Microsoft PowerPoint를 사용하여 한 번의 클릭으로 끌어서 놓을 수없는 웹 사이트에 대한 목록 상자 컨트롤을 사용하는 예를 들어보십시오.
- 태블릿 및 모바일과 같은 데스크톱 및 핸드 헬드 장치의 다양한 종횡비에 맞게 사용자 디자인을 다시 실행합니다.
- 한 번의 클릭으로 데스크톱 및 태블릿과 같은 다양한 장치에서 사용자 디자인의 모양과 느낌을 경험할 수 없음
- 특정 장치에 대한 와이어 프레임을 설계하는 동안 Android 메뉴 또는 Windows 8 앱 바와 같은 상황 별 컨트롤을로드하는 기능.
위의 단점으로 인해 대부분의 조직은 빠르고 빠르고 번거롭지 않은 와이어 프레이밍을 위해 특수 도구를 사용하는 것을 선호합니다. 우리는 현재 상위 IT 기업에서 사용되고있는 상위 25 개 도구를 분석하여 도달했습니다.
*************
= >> 알려주세요 목록에 다른 목업 도구를 추가하려면.
*************
학습 내용 :
최고의 와이어 프레임, 프로토 타이핑, 목업 도구 및 앱
간다!
앱 및 웹 사이트의 UI / UX 디자인을위한 최고의 오픈 소스 무료 및 상용 와이어 프레임 도구 목록입니다.
# 1) 카쿠
카쿠 지원되는 플랫폼 : 클라우드 및 자체 호스팅
무료 시험판: 14 일
비용: 사용자 당 월 6 달러 – 사용자 3 명부터
- Cacoo에는 20 개 이상의 와이어 프레임 템플릿과 UI 셰이프가 있습니다.
- 팀의 모든 구성원이 최신 와이어 프레임, 토론을보고 이전 변경 사항을 추적 할 수 있습니다.
- 사용자 친화적 인 드래그 앤 드롭 와이어 프레임 도구.
- 강력한 공유 및 공동 작업 기능
- Cacoo를 사용하면 동일한 다이어그램에서 실시간 편집이 가능하므로 팀이 어디에 있든 함께 와이어 프레임 작업을 할 수 있습니다.
- 주석 및 알림 기능을 사용하여 와이어 프레임에서 바로 커뮤니케이션 할 수 있습니다.
************************
# 2) Balsamiq 모형
지원되는 플랫폼 : 데스크탑 및 클라우드
무료 시험판: 30 일
비용: $ 12- $ 89 / 월
- 버튼에서 목록까지 여러 UI 요소에 대한 간편한 드래그 앤 드롭 옵션을 제공합니다.
- 이 도구는 웹 데스크톱 및 모바일 응용 프로그램 용 와이어 프레임을 스케치하는 데 매우 사용자 친화적이므로 '엄청나게 단순'이라는 판매 포인트에 부합합니다.
- 다른 사용자 / 이해 관계자와 협업하고 와이어 프레임에 대한 피드백을받을 수있는 기능을 제공합니다.
- 무료 마이너 버전 업데이트를 통해 단일 사용자 (다중 시스템)의 경우 89 달러에 독립형 데스크톱 애플리케이션 (Windows / Mac)으로 구입할 수 있습니다.
- 클라우드 기반 구독은 활성 프로젝트 당 무제한 사용자 및 모형에 대해 월 $ 12에 구매할 수 있습니다. 언제든지 구독을 취소 할 수있는 유연성을 제공합니다.
- Google 드라이브와 원활하게 통합 할 수있는 옵션이 있습니다.
- 플러그인 옵션은 Atlassian Confluence 서버, 클라우드, JIRA 서버 및 클라우드에서 사용할 수 있습니다.
이 도구에 대한 자세한 내용은 여기
************************
# 3) UXPin Mockups 도구
지원되는 플랫폼 : 구름
무료 시험판: 30 일
비용: $ 19- $ 98 / 월
- 웹, 모바일 및 클라우드 기반 와이어 프레임 용으로 사전 제작 된 1000 개 이상의 UI 요소 제공
- 대화 형 디자인을 구현하는 기능을 제공합니다.
- 신속한 프로토 타이핑을 위해 Sketch 및 Photoshop에서 파일 가져 오기를 지원합니다.
- 부트 스트랩, IOS, Android 및 Windows 와이어 프레임 라이브러리에 대해 정기적이고 일관된 업데이트가 푸시됩니다. 이 훌륭한 기능은 사용자가 다양한 OS 시스템 UI 변경의 복잡성보다는 기능에 더 집중할 수 있도록 도와줍니다.
- UXPin 편집기에 사용자 지정 CSS 코드 조각을 추가하여 기존 UI 요소를 즉시 사용자 지정하는 기능.
- 클릭 한 번으로 반복 / 버전을 관리하여 궁극적으로 설계 결정을 쉽게합니다.
- 호버링, 전환 및 드롭 다운 선택과 같은 사용자 상호 작용을 용이하게합니다.
- 타이포그래피 및 UI 요소의 배경을 사용자 정의하는 옵션
- iPhone에서 데스크탑 화면으로 적응 형 중단 점을 정의하는 옵션이 있습니다.
- 최소한의 상호 작용 및 내보내기 옵션이있는 기본 버전은 사용자 당 월 $ 19에 사용할 수 있습니다.
- 고급 상호 작용 및 UI 요소가 포함 된 전문가 버전, PDF 및 HTML로 내보내기, Photoshop 가져 오기 및 사용자 지정 스타일링은 사용자 당 월 $ 29 /에 이용 가능
- 문서화, 검토, 팀 라이브러리, 프로젝트 상태 및 사용성 테스트 기능이있는 가장 발전된 협업 버전은 98 달러 (사용자 3 명)에 제공됩니다.
이 도구에 대한 자세한 내용은 여기
************************
# 4) 유동적 인 UI
지원되는 플랫폼 : 구름
무료 시험판: 기능 제약으로 무제한
비용: $ 8.25- $ 41.5 / 월
- 웹, 모바일 및 클라우드 기반 와이어 프레임을 위해 사전 제작 된 16 개의 UI 요소 제공
- 사용자가 모바일, 태블릿, 데스크톱 및 웨어러블 (Apple 시계, Android Wear, Galaxy Gear, Pebble)과 같은 다양한 화면을 대상으로하는 UI 디자인과 상호 작용할 수있는 유연성을 제공합니다.
- 와이어 프레임에 전환 및 애니메이션을 추가하는 기능을 제공합니다.
- 와이어 프레임이 완료되는 즉시 초대를 보내고 피드백을 받아 이해 관계자와 팀으로 협업 할 수있는 옵션이 있습니다.
- 버전 유지 관리 기능 제공
- 사용자는 실시간 영상 통화 기능 및 Skype와 유사한 채팅 기능을 사용하여 피드백을받을 수 있습니다.
- 모바일 장치에서 프로토 타입을 테스트하는 옵션이 있습니다.
- 사용자가 모바일 장치에서 프로토 타입을 검색 할 수 있도록 각 프로젝트에 대해 QR 코드가 생성됩니다.
이 도구에 대한 자세한 내용은 여기
************************
# 5) 핫 글루
지원되는 플랫폼 : 구름
무료 시험판: 7 일
비용: $ 13- $ 54 / 월
- 5000 개 이상의 아이콘을 지원하여 사전 구축 된 UI 위젯 라이브러리 (2000 개의 UI 요소)에서 대화 형 및 반응 형 와이어 프레임을 생성하도록 지원
- 데스크톱, 모바일, 태블릿에서 웨어러블에 이르기까지 다양한 화면에 최적화 됨
- 와이어 프레임은 와이어 프레임과 원활하게 상호 작용하고 리뷰 주석을 제공 할 수있는 고객에게 미리보기 링크로 전송 될 수 있습니다.
- 프로젝트에서 공동으로 작업하고 동료를 계정에 초대하고 실시간으로 공동 작업하는 옵션
- 강력한 문서화로 사용자의 학습 곡선 감소
이 도구에 대한 자세한 내용은 여기
************************
# 6) InDesign CC
지원되는 플랫폼 : Windows, Mac
무료 시험판: 30 일
비용: $ 9- $ 79 / 월
- 사용자가 모바일 앱 또는 웹 사이트의 와이어 프레임으로 사용되는 대화식 PDF를 작성할 수있는 Rich UI 위젯 라이브러리
- 연속적인 디자인에서 재사용 할 수있는 UI 요소의 사용자 지정 라이브러리를 생성하는 기능
- 전환, 애니메이션, 비디오 및 전환 상태 지원
- InDesign Search를 사용하여 이미지, 그래픽, 비디오를 포함하는 풍부한 Adobe 스톡 자산
- 데스크탑 및 모바일 브라우저 지원을 통해 검토 및 피드백을 위해 와이어 프레임을 온라인으로 게시 및 배포 할 수있는 기능
- 팀 성과를 추적하는 옵션을 제공합니다.
이 도구에 대한 자세한 내용은 여기
************************
# 7) Microsoft Visio
지원되는 플랫폼 : Windows, 클라우드 (Office365)
무료 시험판: 60 일
비용: $ 13 / 월 (Office365), $ 299- $ 589 (데스크톱 버전)
- 와이어 프레임을 만들기위한 모든 기본 요소를 제공하는 사용하기 쉬운 Microsoft 도구
- Excel 및 Word와 같은 Microsoft 앱과 유사한 친숙한 인터페이스는 신제품의 생소함을 크게 줄이고 학습 곡선을 증가시킵니다.
- 3에 대한 충분한 지원rd사용자가 와이어 프레임을 HTML로 내보내는 데 도움이되는 파티 플러그인
- 동적 라이센스를 위해 Citrix 클라이언트를 통해 액세스 할 수 있지만 성능이 저하됩니다.
- 시스템 성능에 영향을 미치는 무거운 업데이트 / 업그레이드 프로세스
- 공동 작성, 주석 달기, 주석 및 스카이프 지원을 통한 프로젝트 공동 작업 지원
이 도구에 대한 자세한 내용은 여기
************************
# 8) 피 도코
지원되는 플랫폼 : 구름
무료 시험판: 31 일
비용: $ 12- $ 175 / 월
- 터치 제스처, 장치 동작 및 위치 데이터에 대한 추가 지원을 통해 대화 형 와이어 프레임을 생성하는 기능.
- 팀과 협업하고 다른 팀원과 함께 실시간으로 와이어 프레임을 편집 할 수있는 기능
- 버전 유지 관리, CR 추적 및 댓글 기록보기는이 제품에서 큰 장점입니다.
- HTML, 벡터 그래픽, RTF / Word, PDF, PNG, 화면 흐름 PNG로 프로토 타입 내보내기
- 사용자 지정 디자인 된 UI 요소를 재사용 할 수있는 기능을 제공합니다.
- 단순한 인터페이스로 사용자가 제품에 대해 쉽게 배우고 생산성을 높일 수 있습니다.
- 현장 및 원격 테스트 방법을 사용하여 프로토 타입으로 사용성 테스트를 수행하는 옵션이 있습니다.
- Planio 및 JIRA와 같은 앱과 통합되며 애드온 기능을 사용하여 Wiki와 연결하는 옵션을 제공합니다.
이 도구에 대한 자세한 내용은 여기
************************
# 9) 두 번째
지원되는 플랫폼 : 아이 패드
비용: 비어 있는
- 다른 e-prototype 도구와 달리이 앱은 사용자가 장치에서 직접 iPad 용 화면을 디자인 할 수 있도록하여 사용자가 와이어 프레임의 기본을 유지하도록 도와줍니다.
- 다른 두 번째 사용자와 디자인 아이디어를 동기화하는 것은 매우 쉽고 원활합니다.
- 사용자가 컴퓨터 및 모바일 장치의 와이어 프레임을 원활하게 볼 수 있도록 지원
- 콘텐츠가 iPad에서 손으로 작성되었지만 텍스트는 여전히 검색 가능합니다.
- 가장 큰 장점은이 앱이 앱 스토어에서 무료로 제공된다는 것입니다.
이 도구에 대한 자세한 내용은 여기
************************
지원되는 플랫폼 : 구름
무료 시험판: 30 일
비용: $ 29- $ 59 / 월
- 이 도구는 신속한 와이어 프레임을위한 광범위한 와이어 프레임 스텐실 및 위젯 라이브러리의 추가 컬렉션과 함께 와이어 프레임 애플리케이션에서 예상되는 모든 기능을 제공합니다.
- 프로토 타입을 웹 또는 사양 문서로 쉽게 내보낼 수 있습니다.
- 이 클라우드 배포 애플리케이션을 사용하면 유지 관리가 필요없이 데스크톱 및 핸드 헬드 장치에서 애플리케이션을 쉽게 사용할 수 있습니다.
- 다른 이해 관계자와 의견을 쉽게 공유 할 수있는 내장 된 피드백 프레임 워크와 통합
이 도구에 대한 자세한 내용은 여기
# 11) 연필 프로젝트
지원되는 플랫폼 : Windows, Mac 및 Linux
비용: 비어 있는
- 사용자가 데스크탑 및 핸드 헬드 장치 UI 와이어 프레임을 선택할 수 있도록 다양한 기본 제공 모양 컬렉션을 제공합니다.
- 간단한 안내 설치를 통해 사용자는이 앱을 사용하여 빠르게 프로토 타입을 만들 수 있습니다.
- PNG, HTML, PDF, SVG, Open Office / LibreOffice 텍스트 문서 (ODT)와 같은 다양한 파일 형식으로 내보내는 옵션
- 클립 아트 브라우저 도구를 사용하여 웹에서 클립 아트를 검색하고 추가하여 더 나은 와이어 프레임을 구축 할 수있는 완벽한 기능. 벡터 형식을 사용하면 UI 요소를 적절한 크기로 조정할 수 있습니다.
- UI 요소를 특정 페이지에 연결하여 사용자 아키텍처를 구축하는 데 도움이됩니다. 사용자가 응용 프로그램의 탐색 구조를 정의하고 대화 형 와이어 프레임을 만드는 데 큰 도움이됩니다.
- Windows, Linux 및 Max와 같은 다양한 플랫폼을위한 오픈 소스 도구 일뿐만 아니라 Firefox 용 플러그인으로도 제공됩니다.
이 도구에 대한 자세한 내용은 여기
# 12) 플레어 빌더
지원되는 플랫폼 : Mac, Windows 및 클라우드
무료 시험판: 30 일
비용: $ 19 / 월
- JustinMind 서버는 Android, IOS 및 기타 모바일 용으로 설계된 사전 구축 된 UI 라이브러리의 방대한 컬렉션으로 구성된 UI 라이브러리를 자주 업데이트합니다.
- 사용자 지정 UI 라이브러리를 만들고 재사용을 위해 서버로 푸시
- 엔터프라이즈 UI 라이브러리는 특히 Oracle Fusion 또는 SAP UI 라이브러리와 같은 엔터프라이즈 앱을 대상으로합니다.
- 웨어러블 기기를위한 고도의 대화 형 앱 와이어 프레임을 구축하는 데 도움이됩니다.
- JustinMind를 다른 도구와 차별화하는 멋진 기능은 HTML, 문서, 비디오 및 온라인 위젯을 삽입하는 기능입니다.
- 템플릿 생성, 사용자 정의 스타일, Google 글꼴 통합 및 Photoshop, Illustrator 또는 Sketch의 이미지 및 SVG 파일과의 통합 지원
- 패럴 랙스 스크롤링 및 플로팅 메뉴 및 슬라이드 인 레이어와 같은 기타 효과를 사용한 독특한 와이어 프레임 디자인
- 온라인 및 오프라인 댓글을 지원하는 게시, 검토 및 댓글 시스템
- 실제 데이터를 시뮬레이션하여 테스트 도구와 통합하고 매우 우수한 온라인 문서를 제공합니다.
- 인터랙티브 HTML, 문서 및 이미지로 내보내기
- 자동 생성 된 와이어 프레임 사이트 맵을 제공하고 협업 프로토 타이핑을 지원합니다.
- 고급 사용자 관리 및 LDAP와의 통합 지원
이 도구에 대한 자세한 내용은 여기
Mac 크롬을위한 최고의 광고 차단기
이 기사에서 상위 12 개의 와이어 프레임 도구에 대해 논의 했으므로 이제 백만 달러짜리 질문은 어느 도구를 사용할까요? 이 질문은 조직의 요구 사항 및 예산 할당에 따라 더 잘 답변됩니다.
결론
각 도구의 기능, 가격, 라이선스 옵션을 분석했으며 철저한 평가 후 최종 결정을 내려야합니다.
여기에서 와이어 프레임 도구를 놓친 경우 제안과 경험을 가장 환영합니다!
*******************
자유롭게 문의하기 여기에 Wireframe 소프트웨어를 추가하십시오.
*******************
추천 도서
- 최고의 소프트웨어 테스트 도구 2021 (QA 테스트 자동화 도구)
- 복잡한 데이터 모델을 구축하기위한 10 가지 데이터베이스 설계 도구
- 멋진 선 그래프를 만들기위한 12 가지 최고의 선 그래프 작성 도구 (2021 RANKINGS)
- 9 가지 최고의 VoIP 테스트 도구 : VoIP 속도 및 품질 테스트 도구 (2021 목록)
- Android 애플리케이션 테스트를위한 11 가지 최고의 자동화 도구 (Android 앱 테스트 도구)
- 테스트 관리 도구가 가져야하는 4 가지 필수 기능
- 상위 10 개 이상의 최고의 SAP 테스트 도구 (SAP 자동화 도구)
- 네트워크 보안 테스트 및 최고의 네트워크 보안 도구