그리드 기반 와이어 프레임 스케치를위한 최고의 자원
의 과정 인터페이스 설계 항상 시작하다 아이디어 창출. 여기에는 시각화, 다른 사이트 연구 및 신속한 프로토 타이핑이 포함됩니다. 이 초기 아이디어 단계는 레이아웃 및 사용자 경험 이해 당신은 지어 주려합니다. 그렇다면 새 프로젝트에서 실제로 어떻게 와이어 프레임 작업을 수행해야합니까??
나는 전통적인 종이와 연필을 필요로하는 추가 도구가있는 팬입니다. 그러나 디지털 와이어 프레임 또한 크고 현대적인 디자이너에게는 실용적인 옵션입니다. 이 기사에서는 두 기술 모두에 대한 최상의 리소스를 공유하여 자신 만의 기술을 만들 수있게 도와 드리고자합니다. 그리드 기반 UI 와이어 프레임.
조기 UI / UX 개념화
우선 a와 b 사이의 차이점을 와이어 프레임 및 원기. 이 두 단어는 동일한 프로세스와 관련되기 때문에 종종 상호 교환 적으로 사용됩니다.
에이 와이어 프레임 ~이다. 단일 정적 스케치 웹 페이지 또는 앱 UI의 단추 텍스트, 여백, 요소 크기 또는 애니메이션을 설명하는 설명 선이있을 수 있습니다. 그러나 와이어 프레임은 단지 개별 페이지의 대략적인 초안.
유사하게, a 원기 ~ 같다. 서로 다른 페이지가 함께 링크되는 방식을 보여주는 순서도. 프로토 타입은 와이어 프레임을 연결하여 다른 버튼이나 링크가 다른 페이지로 연결되는 방법을 보여줍니다..
이러한 정의는 돌로 조각되어 있지 않으며, 일부 디자이너는 고유 한 용어를 사용하고 있으며, 정확한 말씨에 동의하지 않을 수 있습니다. 그러나 이것이 내가 일반적으로 묘사 한 방식이며, 많은 디자이너가이 용어를 가장 잘 이해하고 있습니다..
그래서이 초기 개념 조각들로 정확히 무엇을해야할까요? 그들은 정말로 필요한가요? 나는 프로토 타이핑이 항상 필요한 것은 아니라고 말하고 싶지만 복잡한 인터랙션을 가진 앱을 디자인하는 것은 매우 좋은 생각이다..
그러나 와이어 프레임 항상 좋은 생각이다. 모든 새로운 프로젝트에 대해. 그것은 당신을 돕는다. 큰 그림에 집중하다 세부 사항에 대해 걱정할 필요가 없습니다. 전체 페이지가 어떻게 배치되어 있는지를 알 수 있습니다. 구체적인 레이아웃을 디자인 할 때 이것은 매우 중요합니다..
와이어 프레임 작업의 목표
새 프로젝트를 시작할 때마다 숙고해야합니다. 해결하려는 대상. 각 사이트는 특정 목표를 염두에두고 만들어졌습니다. 많은 사이트는 여러 목표를 가지고있어 어떤 목표는 다른 목표보다 중요합니다..
최적의 전략을 찾을 수 있도록 와이어 프레임을 가이드로 사용하십시오. 웹 사이트의 목표 캡처. 이것은 아마도 첫 번째 와이어 프레임에서 발생하지 않으므로 다음과 같이 준비하십시오. 서로 다른 생각을 많이 잡아라..
다른 유사한 웹 사이트를 찾아보고 가장 좋은 기능을 적어보십시오. 콘텐츠 구성 방법 및 각 페이지 이동 방법 분석.
와이어 프레임을 상호 작용 관점. 이것들은 단지 예쁜 그림이 아닙니다. 그것들은 디지털 인터페이스를 표현한 것이며,이를 염두에두고 아이디어를 스케치하고 싶습니다..
그리드 기반 리소스를 손에 들고 있으면 종이로 만들어 졌든 디지털이든 상관없이 빠른 스케치에서 많은 도움이 될 수 있습니다. 이제 와이어 프레임 생성에 필요한 최상의 리소스를 확인해 보겠습니다..
그리드 스케치 패드
프린터 용지의 기본적인 축소판 스케치를 사용하여 언제든지 시작할 수 있습니다. 거친 아이디어를 그리다.. 개인적으로, 저는 보통 프린터 용지에 대한 작업을 시작합니다. 그리드에 대해 덜 신경 쓰고 아이디어 생성.
점 그리드 스케치 패드 네가 원한다면 갈 수있는 가장 좋은 방법이야. 아이디어를 정리하다, 더 많은 구조를 제공하십시오. 그리드는 항목 간 거리 추정 페이지에서 대칭의 일종 와이어 프레임에서.
원하는 경우 많은 훌륭한 제품이 있습니다. 종이에 와이어 프레임 시작, 예를 들어 Rhodia Dot Pad는 일상적인 사용을 위해 다양한 크기로 제공됩니다. 80 페이지 밖에 나오지 않지만 이것은 대부분의 그리드 스케치북에서 전형적입니다.
또 다른 매우 시원하고 사용자 정의가 가능한 제품은 Dotgrid입니다. Dotgrid의 모든 아이템은 Rhodia 책보다 비싸지 만, 더 많은 재료와 커스텀 커버 디자인이 있습니다..
Dotgrid는 주문을 받아 들일 수도 있습니다. 나만의 맞춤 스케치 패드 디자인. 각 책에는 100 장이 포함되어 있기 때문에 앞면과 뒷면을 포함하여 그리드 스케치 용으로 약 200 페이지를 얻을 수 있습니다..
내가 언급하고 싶은 두 개의 다른 점 격자 스케치북에는 하드 커버와 나선형 바운딩 인 Behavior Dot Grid가 포함되어 있습니다. 단 50 개의 종이 만 포함되어 있습니다..
Responsive Design Sketchbook은 웹 디자이너에게 최고의 리소스 중 하나입니다. 다른 제품 디자이너도 반응 형 디자인 스케치북이 필요하지 않지만 웹 디자이너는 다양한 디바이스 폭에서 아이디어를 생성한다. 격자 레이아웃 위에.
이 반응 형 디자인 패드는 또한 총 100 페이지 인 50 장이 있지만 각 페이지에는 네 가지 반응 형 그리드 데스크톱, 랩톱, 태블릿 및 스마트 폰 : 반응 형 디자인의 여러 가지 중단 점을 나타냅니다..
비록 디자인이 Dotgrid 서적에 비해 부드럽지 만 웹 디자이너를위한 반응적인 스케치 북을 고려한 사람은 아무도 없습니다. 당신이 그런 일에 빠지면 시운전을 위해 주문할 가치가 있습니다..
당신이 정말로 손수 만든 물건을 입고 돈을 쓰고 싶지 않다면 나만의 그리드 페이지 인쇄하기 인터페이스 스케치. 이 무료 사이트 제안 다른 표 템플릿 손으로 그린 와이어 프레임을 인쇄하고 사용할 수 있습니다..
그리드는 프린터 용지의 스타일에 따라 A4 및 US 크기로 제공됩니다. 전체 길이의 웹 브라우저 용 템플릿이나 다른 iPhone 화면과 같은 다양한 옵션 중에서 선택할 수 있습니다..
이러한 모든 옵션은 유용하며 탐색 할 가치가 있습니다. 연필 스케치. 종이는 새로운 아이디어를 빠르게 얻을 수있는 가장 쉬운 매체 중 하나이므로 UI 디자이너가 선호하는 선택입니다.
디지털 도구 및 웹 앱
너무 많은 훌륭한 와이어 프레임 프로그램이있어 분석 마비를 위험에 빠뜨리지 않고서는 거의 다룰 수 없으므로 이제는 몇 가지 최상의 옵션에 집중하겠습니다. 그리드 기반 와이어 프레임.
먼저 Illustrator와 같은 Adobe 도구를 사용하여 나만의 와이어 프레임 만들기. 이것은 모든 사람의 워크 플로우의 일부가 아니며 Illustrator는 확실히 무료가 아닙니다. 그러나 이미 Adobe Creative Cloud를 사용하고 있다면 시작하는 것이 좋습니다..
1. Moqups
Moqups는 최고의 온라인 도구 중 하나입니다. 와이어 프레임. 시각적 편집기 및 자산 라이브러리를 사용하여 페이지 전체로 끌어서 놓기.
각각의 새로운 Moqups 프로젝트에는 미리 정의 된 그리드, 밝은 보라색 선을 사용하여 요소를 맞추어 정렬 할 수 있습니다. 그리드로 디자인하는 것이 훨씬 쉬운 웹 도구입니다..
사이트는 사용자를 300 페이지 개체로 제한하는 무료 계획에서 기본적으로 작동합니다. 사이트에는 프리미엄 옵션이 있지만 월 수수료를 지불하는 것만으로 Adobe 도구를 사용하거나 Sketch를 한 번 구매하는 것보다 더 성가 시게됩니다.
2. 그리드 Papr
그리드 Papr 웹 앱은 무료로 제공되며 와이어 프레임에 공개 계정과 비공개 계정을 모두 제공합니다. 프로젝트의 이름을 만들고 모든 컴퓨터에서 편집 할 수있는 와이어 프레임에 대한 고유 한 URL을 얻습니다..
각각의 새로운 와이어 프레임 격자가 붙어있다. 모든 요소에 대해 그리드에 맞추기를 수행 할 수 있습니다. 기능은 간단하지만 충분히 빠릅니다. 몇 분 안에 lo-fi 와이어 프레임을 만드십시오.. 원하는 것을 페이지에 끌어다 놓은 다음 그리드를 따라 별 모양의 와이어 프레임을 만듭니다..
3. Wireframe.cc
Wireframe.cc는 와이어 프레임에 사용할 수있는 가장 단순하고 최소한의 도구 중 하나입니다. 그것은 깔끔한 인터페이스 ~와 미리 만들어진 그리드 과 구성된 도구 모음. 캔바스에 새 요소를 만들려면 간단히 클릭하고 드래그하면됩니다. 작업 내용을 저장하고 공유 할 수도 있습니다..
이것은 옵션 프리미엄 플랜으로 무료로 제공되는 또 다른 도구입니다. 각 플랜은 매월 청구되므로 가격 구조에서 Moqups와 매우 유사합니다. 무료 도구는 계정없이 모든 컴퓨터에서 사용할 수 있습니다..
4. 모킹 버드
Mockingbird는 대부분의 와이어 프레임 도구보다 훨씬 많은 기능을 제공하는 또 다른 훌륭한 옵션입니다. 무료로 시작할 수 있지만 재판은 7 일로 제한됩니다. 이것은 일부 사용자에게는 성가심 일 수 있지만 도구는 정말 놀랍고 모든 브라우저에서 실행됩니다..
Mockingbird에는 다음과 같은 UI 요소의 끝없는 라이브러리가 있습니다. 탭, 아코디언, 드롭 다운 메뉴, 비디오 플레이어 및 간단한 텍스트 링크. 기본 그리드는 960g 그리드 시스템을 사용하지만 선택할 수 있습니다 12, 16 및 24 열.
최종 단어
기존 또는 디지털 와이어 프레임을 선택하든 관계없이 항상 산출물의 품질. 이런 종류의 일을 할 때 배워야 할 것이 많기 때문에 가장 편안하다고 느끼는 도구를 찾으십시오..
최선의 방법은 앞으로 나아갈 것입니다. 그냥 와이어 프레임 시작. 가장 좋아하는 것이 무엇이든간에 (종이 또는 디지털) 마음을 느끼고 직접 만들어보십시오. 이 기사의 자료는 자신 만의 디지털 인터페이스를 와이어 프레임으로 시작하는 데 필요한 것 이상을 제공합니다..
(Oykun Yilmaz의 표지 사진)
