디자이너를 위한 프로토타이핑 도구로 워크플로 개선

나는 당신에 대해 모르지만 항상 내 웹 디자인 워크플로를 위한 완벽한 프로토타이핑 도구를 찾고 있습니다. 많은 옵션이 있지만 한 가지 확실한 것은 빠른 프로토타이핑을 통해 프로젝트를 보다 효율적으로 작업할 수 있다는 것입니다.

HTML, CSS 또는 Javascript 팬이 있습니까? 이것이 당신이 즐기는 기술이라면 당신은 그저 Rapid Prototyper일 것입니다. 웹 디자이너로서 점점 더 많은 사람들이 격차를 해소하고 일부 프런트 엔드 개발 작업을 수행하고 있습니다. 우리는 슈퍼스타 비주얼 크리에이티브일 뿐만 아니라 전문 코드 크래프터이기도 합니다.

작동하고 코딩된 프로토타입이 있으면 사이트를 클라이언트와 공유하고 프로세스 초기에 피드백을 얻을 수 있는 기능을 사용하여 신속하게 시작하고 실행할 수 있습니다. 코딩이 자신의 일이 아니지만 여전히 빠른 속도로 프로토타입을 만들고 싶다면 클라이언트에게 고품질 프로토타입을 제공할 수 있는 여러 도구가 있습니다.

왜 래피드 프로토타이핑인가?

신속한 프로토타이핑은 종종 애자일 프로세스의 핵심 구성 요소입니다. 사이트의 실제 작동 예가 설계 및 개발되었으며 종종 프로토타입의 코드를 나중에 실제 개발 프로세스에 재사용할 수 있습니다. 피드백은 프로세스 초기에 구하고 제공되므로 개발 단계에서 변경 사항의 수를 줄이는 데 도움이 됩니다. 설계자들은 종종 다양한 변형을 시도하기 때문에 최종 설계가 향상된다는 데 동의합니다. 프로토타입을 만들 때 코드 관련 여부에 관계없이 빠르고 효율적으로 작업할 수 있는 도구를 선택하는 것이 중요합니다.

Rapid Prototypers는 모든 프로젝트에 가치를 제공하며 고객은 확실히 실제 사례를 보고 싶어합니다. 대부분의 사람들은 시각적이며 프로토타입을 사용할 수 있는 경우 브라우저에서, 가급적이면 여러 장치에서 디자인을 보는 것이 유익하다는 것을 알게 됩니다.

정적 및 작동 프로토타입

전통적으로 디자이너는 종종 Photoshop이나 Illustrator에서 프로토타입을 위한 정적 모형을 만들었습니다. 이러한 정적 모형은 엄청난 가치를 제공하지만 작업 중인 프로토타입은 디자인이 개발되는 즉시 브라우저에서 테스트할 수 있기 때문에 훌륭한 옵션입니다. 많은 디자이너는 코딩 기술이 강할수록 코딩 속도가 빨라지고 브라우저에서 디자인하는 것이 표준이 된다는 것을 알게 됩니다. 원한다면 예전처럼 정적 Photoshop/Illustrator 모형에 의존할 필요가 없습니다.

프로토타입은 얼마나 상세해야 합니까?

제공해야 하는 디자인 세부 사항의 양에는 옳고 그른 답이 없으며 클라이언트와 프로젝트에 따라 다릅니다. 디자인 세계에서 "충실도"라는 용어에 익숙할 것입니다. 이것은 디자인에 포함된 세부 사항과 상호 작용의 양을 나타냅니다. 저충실도는 매우 기본적이며 종종 "스케치와 유사"하며 사용자가 디자인과 상호 작용할 수 없습니다. 매우 적은 설계 세부 사항이 제공되고 낮은 충실도에는 프로토타입의 구성 요소 배치에 대한 기본 정보만 포함됩니다. 충실도가 높은 프로토타입은 종종 사용자 상호 작용을 허용하며 웹 사이트의 실제 표현에 가깝습니다. 디자인 요소는 종종 많은 세부 사항을 포함하고 매우 세련됩니다.

저충실도 프로토타입.

충실도가 높은 프로토타입.

프로토타입을 위해 선택하는 도구는 충실도 요구 사항에 따라 다릅니다. 하나가 다른 것보다 반드시 더 나은 것은 아니며 프로젝트 범위에 따라 다릅니다.

훌륭한 프로토타이핑 도구

이제 프로토타이핑의 기본 사항을 살펴보았으므로 사용 가능한 몇 가지 도구를 살펴보겠습니다. 프로토타이핑 도구는 충실도 수준과 제한 사항이 다릅니다. 조타실에 코딩이 있다면 굉장합니다! 그러나 코드 지식이 필요하지 않은 몇 가지 옵션도 간단히 살펴보겠습니다.

빠른 코딩을 위한 프로토타이핑 도구

프레임워크는 HTML, CSS, JS 등으로 구성된 표준화된 코드의 시작점을 제공하는 도구입니다. 프로토타입의 경우 프레임워크는 웹 프로젝트를 빠르게 생성하기 위한 훌륭한 옵션입니다. 다음 프로토타입에 재사용할 수 있는 스타터 테마를 만드는 것도 큰 도움이 될 수 있습니다.

빠른 빌드를 허용할 수 있는 두 가지 훌륭한 프레임워크가 있습니다. 코딩할 때에도 낮은 충실도 또는 높은 충실도를 선택할 수 있습니다. 래피드 프로토타이핑에 접근할 때 원하는 만큼 상세하게 또는 기본적으로 얻을 수 있습니다. 이러한 도구의 뉘앙스를 배우면 작업 속도에 놀랄 것입니다.

신속한 프로토타입 옵션 1 – Twitter 부트스트랩

현재 Twitter Bootstrap은 세 번째 버전에 있으므로 그 과정에서 완성되었습니다. 이것은 코드를 작성하려는 경우 작동하는 프로토타입을 만들기 위한 훌륭한 프레임워크입니다. 반응이 빠르고 배우기 쉬우며 버튼, 모델, 아이콘 등과 같은 많은 디자인 구성 요소가 있기 때문에 훌륭합니다. 이러한 요소를 사용하면 웹 프로젝트를 빠르고 쉽게 시작하고 실행할 수 있습니다. 많은 웹사이트가 부트스트랩을 사용하여 구축되므로 프로토타입 코드도 나중에 사용할 수 있습니다.

신속한 프로토타입 옵션 2 – 기초

Twitter Bootstrap과 마찬가지로 Foundation은 프로토타입을 빠르게 만들 수 있는 훌륭한 옵션입니다. 이 프레임워크는 부트스트랩보다 기본적이며 기본값이 많지 않기 때문에 미리 CSS 스타일 지정이 더 필요합니다. 또한 재사용 가능한 코드를 개발하는 동시에 신속하게 가동 및 실행할 수 있기 때문에 훌륭한 선택입니다. 이 도구를 사용하여 선호도에 따라 저충실도 또는 초고충실도가 될 수 있는 프로토타입을 만들 수 있습니다.

코딩이 필요 없는 프로토타입 옵션

약속한 대로 코딩이 필요하지 않은 몇 가지 프로토타이핑 옵션이 있습니다. 고충실도와 저충실도, 또는 그 사이에 다양한 옵션이 있습니다.

신속한 프로토타입 옵션 3 - 오래된 종이와 연필

이 정적 프로토타입은 매우 빠르게 만들 수 있습니다. 이 방법은 사용하기 쉽고 기능에 이미 익숙해야 합니다! 충실도가 낮은 것으로 간주되지만 스케치는 프로젝트의 부담을 덜어주고 아이디어가 자유롭게 흐를 수 있도록 합니다. 믿거나 말거나, 때로는 이것이 프로토타입에 필요한 전부일 수 있습니다. 프로젝트와 클라이언트에 따라 다릅니다.

신속한 프로토타입 옵션 4 – 스타일 타일

스타일 타일은 프로토타이핑의 정적 접근 방식을 선호하고 충실도가 높은 것을 원하는 경우 훌륭한 옵션입니다. 디자인 모형은 웹 디자인에서 강력한 위치를 차지합니다(결국 디자인 요소는 페이지를 구축하는 데 필요한 것입니다). 그러나 전체 페이지 목업을 만드는 데 시간을 투자하기 전에 스타일 타일이 훌륭한 솔루션입니다. 이는 상세한 전체 프로토타입에 시간을 투자하기 전에 중요한 단계로 사용됩니다. 이것들은 정적 모형이 가질 수 있는 모든 시각적 정보를 포함합니다. 색상, 이미지, 버튼 스타일 등이 포함되어 고객에게 디자인 요소가 어떻게 생겼는지에 대한 아이디어를 제공합니다.

신속한 프로토타입 옵션 5 - Omnigraffle

OmniGraffle은 웹사이트 와이어프레임을 신속하게 생성할 수 있는 훌륭한 옵션으로, 정확도가 낮거나 중간 정도인 프로토타입 역할을 합니다. 링크를 추가하고 미리 설정된 스타일과 개체 등을 선택할 수 있습니다. 프로토타입을 매핑한 다음 클라이언트와 상호 작용할 수 있는 것을 만드는 좋은 방법입니다.

신속한 프로토타입 옵션 6 – Invision Ap

InVision은 기존의 정적 프로토타입을 업로드하고 코드 없이도 대화형으로 만들 수 있기 때문에 고유한 옵션입니다. 정적 프로토타입을 활용하고 클라이언트와 공유하고 피드백을 추적하는 좋은 방법입니다. 또한 이 도구를 사용하여 사용자 테스트를 수행하고 다른 피드백을 전달할 수 있습니다.

신속한 프로토타입 옵션 7 Axure

Axure를 사용하면 대화형 프로토타입을 만들 수 있습니다. 또한 사용할 수 있는 다양한 UI 요소가 있어 아이디어를 개발하고 공유할 수 있습니다. 빠른 와이어프레임에서 색상, 그라디언트, 이미지 등이 포함된 세련된 디자인에 이르기까지 이 도구는 다양한 충실도 옵션을 제공합니다. 또한 편리한 공유 옵션이 제공되므로 사용자가 클릭하여 프로젝트가 어떻게 작동하는지 확인할 수 있습니다.

신속한 프로토타입 옵션 8 – Lucidchart

Lucidchart는 클라우드 기반이며 여러 장치에서 작동합니다. 여러 사람이 프로젝트에 참여하는 경우 공동 작업도 쉬워집니다. 팀과 실시간 채팅이 가능하며 프로토타입에 직접 의견을 남길 수도 있습니다. 제공되는 많은 UI 요소를 사용하여 동적이고 중간 정도의 충실도 웹사이트 프로토타입이 생성됩니다.

무엇 향후 계획?

원하는 프로토타이핑 도구를 찾을 때 고려해야 할 사항이 많이 있습니다. 라이브 코드를 선호하든 원하지 않든 다양한 충실도 옵션을 제공하는 도구가 있습니다. 혼자 일하거나 팀 커뮤니케이션에 크게 의존하는 경우 필요에 맞는 완벽한 커뮤니케이션을 찾을 수 있습니다.

이제 완벽한 프로토타이핑 도구로 무장했으므로 Rapid Prototyper의 배지를 자랑스럽게 착용할 수 있습니다.