Marvel과 완벽한 프로토 타입 및 핸드 오프 디자인

Sep 11, 2025

어떻게

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

엔터프라이즈 팀을위한 앱 및 브랜드의 새로운 디자인 핸드 오프 도구보다 짧은 학습 곡선을 사용하면 팀에서 웹 및 모바일 응용 프로그램을 프로토 타이핑하는 데 필요한 경이로운 방식의 SWIFT 및 쉽게 솔루션이 될 수있는 방법을 탐구 할 수있는 더 좋은 시점이 없습니다.

Marvel은 팀이 스케치 된 아이디어에서 테스트 된 개념에 대한 초기에 대한 디자인 (스케치 또는 경이로운 것 중 하나로 만들어졌습니다)을 돕습니다. 그 협업 도구는 이해 관계자가 자신의 말할뿐만 아니라 디자인 워크 플로우의 일부가 될뿐만 아니라 이해 관계자를 장려합니다.

01. 첫 번째 마블 프로젝트를 만듭니다

Marvel's new design screen, indicating the locations of the buttons to create new designs. — 프로젝트를 선택하면 두 개의 버튼 중 하나를 클릭하여 디자인 프로세스를 시작합니다.

Marvel에 가입하여 귀하의 이름과 이메일 주소 만 필요한 곳이 필요합니다. 디자인 프로젝트 또는 프로토 타입 프로젝트를 선택하십시오. 프로토 타입 프로젝트는 이미 설계 한 화면을 업로드 할 때입니다 (일반적으로 스케치). 디자인 프로젝트는 처음부터 시작할 때 Marvel의 디자인 도구를 사용하여 낮은 충실도 모형을 만드는 것입니다 (이것은 급격한 반복 및 브레인 스토밍을위한 놀라운 옵션입니다).

디자인 프로젝트를 선택한 다음 이름을 지정한 다음 iPhone X를 선택하고 프로젝트 작성 버튼을 클릭하십시오. 여기서 (여기에서 프로젝트 대시 보드를 호출 할 것), 왼쪽의 디자인 버튼을 클릭하거나 창 중간에 디자인 시작 버튼을 클릭하십시오.

02. 저 충실도 프로토 타입을 디자인합니다

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — 이 카메라 화면과 같이 기성품 구성 요소를 사용하고 적응할 수 있습니다.

우리의 핵심 목표는 마지막 결과가 어떻게 생겼는지에 대해 걱정하지 않고도 우리의 아이디어를 빨리 시각화하는 것입니다. 여기에서 탭 막대와 같은 모양, 이미지, 텍스트, 기성품 구성 요소 및이 카메라 화면 (왼쪽 측면 바에서 선택된 전체 화면 구성 요소)을 만들 수 있습니다 (왼쪽 사이드 바에서 선택하고 오른손을 사용하여 다시 젖은 상태로 표시됨). 사이드 바).

그림 그리기, 텍스트 레이어 만들기 및 간단한 시각적 변화를 만드는 것은 비 디자이너가 비록 설계자가 아닌 디자이너가 얼마나 빨리 아이디어를 던지고 프로젝트 추가 버튼을 클릭 할 수 있는지를 좋아할 것입니다.

벡터 드로잉, 마스킹 및 기타 복잡한 디자인 도구를 기대할 수는 없지만이 인터페이스는 스케치, Adobe XD 또는 Figma 사용자가 스케치, Adobe XD 또는 Figma 사용자가 스케치에서 더 높은 충실도 디자인을 가져 오는 경우에 익숙하지 않습니다. 잠시 동안). 기대할 수있는 것은 확대 / 축소, 정렬, 그룹화, 기본 시각적 디자인 도구, 드래그, 크기 조정 및 회전 및 몇 가지 편리한 키보드 단축키와 같은 마우스 컨트롤입니다.

03. 피드백 받기

그러나 Marvel은 디자이너를위한 것이 아닙니다. 업계 표준 디자인 응용 프로그램에서 최종 디자인을 만들 수있는 디자이너가 필요할 수 있지만, 모든 종류의 이해 관계자 (관리자, 고객, 개발자 등)에서 제공해야합니다.

귀하의 주요 역할이 팀에 상관없이 슈퍼 쉽게 말할 수 있습니다. "이봐, 이것이 아이디어가 될 수 있겠습니까?"그리고 시각적으로 그것을 보여줍니다. 마블의 팝 모바일 앱은 이러한 단순화 된 설계 도구를 모바일 장치에 가져 오는 것만으로 인해 진입 장벽을 줄여줍니다. 왜냐하면 그 얼굴을 보자, 아이디어가 가장 이상한 시간에 우리에게 올 수 있습니다. 용지에 스케치 된 아이디어는 장치 카메라를 사용하여 대화 형 경향 화면으로 변환 할 수 있습니다. 디자인은 민주당이 될 필요가 있습니다. 복잡한 설계 응용 프로그램을 사용하지 않고 제한없이 누구에게도 말할 수있는 경우가 있습니다.

04. Marvel을 스케치와 통합합니다

생산적으로 팀과 함께 낮은 충실도 아이디어를 브레인 스토밍 한 후에는 선택 앱의 첫 번째 반복을 조롱하고 싶습니다. 모든 디자인 응용 프로그램에서 내 보낸 PNG 화면을 완전히 업로드 할 수있는 동안 스케치는 프로세스를 자동화하는 전용 스케치 플러그인이 있으므로 프로세스를 자동화하는 전용 스케치 플러그인이 있으므로 나중에 개발자가 나중에 개발자가 검사 할 수 있도록 설계를 읽을 수 있기 때문입니다. 디자인 핸드 오프에 대한 Photoshop 지원은 나중에 올 것이지만 Adobe XD를 만들었으므로 Adobe는 사용자 인터페이스 디자인을 위해 Photoshop을 터치하지 않습니다.

대시 보드에서 설정을 클릭하십시오. 통합 및 gt; 스케치 플러그인을 누른 다음 플러그인을 다운로드하십시오. 설계 파일을 설치하고 디자인 파일이 열리면 Marvel Bar의 모든 단추를 선택하거나 Sync Marvel 막대의 모든 버튼을 눌러 화면을 동기화하기 위해 Marvel Project를 선택하기 시작합니다.

05. 프로토 타입 상호 작용

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — 드래그 - 선택 영역을 한 화면에서 다른 화면으로 연결하기 위해 핫스팟을 만듭니다.

그러나 물론 우리가 상호 작용을 추가하지 않은 경우 우리는 프로토 타입을 테스트 할 수 없으므로 지금 해보자. 우리가 동기화하는 화면을 표시하고 화면에서 화면을 클릭하여 화면 모드로 들어갑니다.

여기에서 우리는 창의 양쪽에 왼쪽 및 오른쪽 화살표를 사용하여 화면을 탐색하고 타이머를 클릭하여 특정 시간 (프레젠테이션에 유용한 경우에 유용한 경우) 이후 화면을 통해 화면을 클릭하거나 추가 할 코멘트 없음을 클릭합니다. 첫 번째 주석이나 주석 화면에 있습니다.

아마도 화면의 왼쪽 상단과 아래쪽 모서리 근처에 나타나는 고정 헤더와 고정 바닥 글 버튼이 각각 표시되는 첫 번째 방법은 아마도 알려주는 것입니다. 이 버튼은 드래그 할 수 있으며 스크롤 가능한 뷰포트의 맨 위에 고정 된 헤더 섹션의 컷오프 영역을 표시하도록 이동할 수도 있습니다. 오른쪽 아래 및 하단 모서리의 텍스트 필드를 사용 하여이 값을 수동으로 지정할 수도 있습니다.

그러나 실제로 하나의 화면을 다른 화면으로 연결합니까? 간단한 : 마우스를 사용하여 다른 화면에 링크 할 화면에서 영역을 끕니다 (이를 '핫스팟'이라고합니다). 그렇게하면 인터페이스가 사용자가 가져가는 위치, 상호 작용 중에 발생하는 모든 전환과 해당 상호 작용 (탭, 스 와이프 등)을 활성화하는 데 필요한 제스처를 사용자 정의 할 수있는 창 맨 아래에 인터페이스가 나타납니다. 짐마자

물론 우리는 저 충실도 모형에서도 이러한 프로토 타이핑 도구를 사용할 수 있습니다. 사실, 해당 기능을 사용하여 토론하고 반복하는 동안 모든 것을하는 것이 좋습니다.

06. 개발자에게 디자인을 나눠주는 것

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — 디자인 핸드 오프는 디자인과 개발자가 서로 일할 수 있도록 쉽게 만들 수 있습니다.

팀이 최종 디자인에 대한 완전한 신뢰를 유지하고 주석 처리 및 사용자 테스트 도구를 사용하여 검증 된 이제는 검사하고 코드를 검사 할 수있는 개발자에게 손을 뻗을 시간입니다. 디자인이 전달되면 디자이너가 '완료'되지 않고 디자이너와 개발자가 항상 완료 될 때까지 개발을 감독하기 위해 항상 의사 소통해야한다는 것을 기억하는 것이 중요합니다. 개발자는 몇 가지 질문을 할 수도 있으므로 주석의 주석 기능은 여전히 매우 적극적이어야합니다.

재생 버튼을 누른 다음 왼쪽 하단 모서리에있는 핸드 오프를 클릭하여 디자인 핸드 오프 인터페이스를 엽니 다. 여기에서 개발자는 디자인 요소를 클릭하고 오른쪽에있는 사이드 바 (스케치, Fig-Figobe 또는 Adobe XD)의 사이드 바를 사용하여 자신이 무엇인지 만드는 개별 스타일을 검사 할 수 있습니다. 유일한 차이점은 개발자가 복사본 버튼을 클릭하여 스타일을 클립 보드에 코드로 복사 할 수 있습니다.

이 기사는 원래 웹 디자이너 및 개발자를위한 세계 최고의 판매 매거진 인 NET 301에 발표되었습니다. 구입 문제 301. 또는 Net에 가입하십시오 ...에

반복 프로토 타이핑에 대한보다 많은 통찰력을 얻으십시오

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby는 2012 년 4 월 25-27 일부터 뉴욕을 창출 할 때마다 반복적 인 프로토 타입 테스트가 뉴욕을 생성하는 데 도움이되는 방식을 발견하는 데 도움이되는 방식을 알게되었습니다.

대부분의 회사가 새로운 웹 디자인을 만들어야 할 때, 프로세스는 일반적으로 피칭 아이디어로 시작하여 디자인으로 이동 한 다음 개발을 수행 한 다음 살아갑니다. 그러나 그것이 작동하지 않으면 어떨까요? 그것은 많은 시간, 노력 및 돈이 아님을 알아 내기 위해 돈을 쓸 수 있습니다.

다행히도, 그녀의 이야기에서 2018 년 4 월 25-27 일부터 뉴욕을 생성합니다 , Clearhead의 연구 책임자 인 Marisa Morby는 반복적 인 프로토 타이핑 및 테스트를 사용하여 전통적인 설계 프로세스보다 빠르고, 쉽고 저렴한 새로운 디자인을 생성하고 유효성을 검사하는 더 좋은 방법을 보여줍니다.

2018 년 4 월 25-27 일부터 뉴욕을 창출합니다. 지금 티켓을 가져 가라 ...에

관련 기사:

10 상단 프로토 타이핑 도구
18 최고의 와이어 프레임 도구
프로토 타이핑을 피하는 방법

Marvel과 완벽한 프로토 타입 및 핸드 오프 디자인

01. 첫 번째 마블 프로젝트를 만듭니다

02. 저 충실도 프로토 타입을 디자인합니다

03. 피드백 받기

04. Marvel을 스케치와 통합합니다

05. 프로토 타입 상호 작용

06. 개발자에게 디자인을 나눠주는 것

반복 프로토 타이핑에 대한보다 많은 통찰력을 얻으십시오

어떻게 - 가장 인기있는 기사

Flash 게임을 HTML5로 변환

CSS 사용자 정의 특성에 대한 소개

Photoshop에서 현실적인 파도를 페인트하는 방법

Khroma와 함께 무한한 색상 팔레트를 생성한다

WordPress API를 사용하여 블로그 전원

UX 전략의 네 가지 교리

InDesign에서 책 표지를 디자인하는 방법

공간 헬멧에 곡선 된 유리를 페인트하는 방법

카테고리