웹 사이트 와이어 프레임 템플릿을 사용하는 방법 + 이유
와이어 프레이밍은 유기적으로 의도적으로 발생하는 설계 프로세스 중 하나입니다. 회의 중에 몇 번이나 아이디어를 스케치 했습니까? 고객 회의를 위해 발표 가능한 와이어 프레임을 몇 번이나 만들었습니까?
두 가지 유형의 와이어 프레임은 디자인 및 반복 프로세스에서 똑같이 중요한 부분입니다.
후자는 작성하는 데 약간의 노력이 더 들며, 여기에서 와이어 프레임 템플릿이 제공됩니다. 효과적으로 사용하는 데 필요한 모든 사항과 시간을 절약하고 와이어 프레임의 품질을 개선하고 도움을 줄 수있는 방법이 여기 있습니다. 아이디어를 실제 형식으로 정리하십시오.
웹 사이트 모형 살펴보기
웹 사이트 와이어 프레임 템플릿이란 무엇입니까?
와이어 프레임은 웹 사이트 디자인 컨셉의 기본 그림입니다. 각 페이지 유형에는 고유 한 와이어 프레임이있을 수 있습니다. 이러한 디자인은 종종 스케치 형태로 시작하여 모형 또는 프로토 타입으로 발전 할 수 있습니다.
웹 사이트 와이어 프레임 템플릿은 사용자 인터페이스 구성 요소가 아닌 와이어 프레임 요소가있는 의사 UI 키트입니다. 많은 템플릿이 이름에 "와이어 프레임 UI 키트"를 사용하지만 정확히는 아닙니다. (그러나 당신은 아이디어를 얻습니다.)
와이어 프레임 템플릿은 Sketch, Adobe XD 또는 Photoshop 용일 수 있습니다. 선택한 템플릿은 도구 및 워크 플로와 일치해야합니다.
훌륭한 와이어 프레임 템플릿에는 다양한 유형의 페이지, 요소에 대한 요소가 있으며 지나치게 화려하지는 않습니다. 캔버스의 이미지 블록, 텍스트 블록, 버튼 블록 및 요소 (데스크톱, 모바일)는 공통적 인 부분입니다.
당신이 필요하지 않은 것은 완성 된 디자인처럼 보이는 것입니다. 흑백 선 스타일 와이어 프레임을 선택합니다. 충실도가 너무 높거나 색상 및 이미지가 포함 된 항목은 고객을 혼란스럽게하여 실제 디자인 컨셉을보고 있다고 생각하게합니다. (그리고 프로젝트의 와이어 프레이밍 단계에서는 원하지 않습니다.)
와이어 프레임 템플릿을 사용해야하는 5 가지 이유
와이어 프레이밍으로 아직 판매되지 않은 경우 설계 프로세스에서 훌륭한 도구가 될 수 있습니다. 템플릿은 모든 것을 가속화합니다.
- 와이어 프레임 템플릿을 사용하면 시간을 절약 할 수있어 프레젠테이션 가능한 방식으로 빠르게 생각할 수 있습니다.
- 와이어 프레임을 사용하면 설계 결함 및 사용성 문제를 조기에 파악할 수 있습니다.
- 와이어 프레임 템플릿을 사용하면 다양한 유형의 페이지 및 페이지 요소에 대해 생각할 수 있으므로 아무것도 남기지 않아도됩니다.
- 와이어 프레임은 견고한 설계 기반을 만듭니다.
- 와이어 프레임 템플릿을 사용하면 고객이 전체 모형에 투자하지 않고도 설계를 이해할 수 있도록 장기적으로 비용을 절감 할 수 있습니다.
와이어 프레임 템플릿을 사용하는 방법
대부분의 와이어 프레임 템플릿은 선택한 소프트웨어에서 이동할 수있는 요소가있는 UI 키트처럼 작동합니다.
정확한 사용법은 도구에 따라 다릅니다.
대부분의 와이어 프레임 템플릿에는 일반적으로 잘 구성된 페이지가 제공되므로 프로젝트의 전체 레이아웃을 간단히 변경하기 만하면됩니다.
드래그 앤 드롭 옵션을 좋아하는 경향이 있습니다. Photoshop 레이어 파일도 좋습니다. 그러나 개인의 선호와 작업 흐름에 따라 달라집니다.
와이어 프레임 템플릿을 효과적으로 사용하는 비결은 워크 플로를 반영하고 사용하려는 소프트웨어를 지원하며 프로세스 전체에 적용 할 수있는 것을 선택하는 것입니다. 많은 도구를 사용하여 와이어 프레임을 개발하여 고급 모형으로 발전시킬 수 있습니다. 계획된 워크 플로우의 일부인 경우 그에 따라 템플릿을 선택하십시오.
와이어 프레임 템플릿을 얻는 방법
웹 사이트 와이어 프레임 템플릿을 사용하는 경우 두 가지 중에서 선택할 수 있습니다.
- 나만의 빌드
- 미리 만들어진 템플릿 다운로드
첫 번째는 가장 맞춤형 솔루션을 제공하지만 시간이 많이 걸릴 수 있습니다.
후자는 다양한 템플릿 유형을 제공하며, 무료 및 프리미엄 옵션 중에서 선택할 수 있습니다.
어떤 옵션을 선택 하느냐에 따라 시간이 흐르고 템플릿을 사용하는 데 걸리는 시간이 줄어 듭니다. 미리 만들어진 템플릿을 사용하는 것이 종종 빠른 시작 경로입니다. 가장 어려운 부분은 올바른 선택을 찾기 위해 사용 가능한 모든 것을 검색하는 것일 수 있습니다.
5 가지 와이어 프레임 템플릿
웹 사이트 와이어 프레임 템플릿을 시작할 준비가 되셨습니까? 다음은 5 가지 템플릿을 테스트하여 프로젝트에 사용하는 느낌을 확인할 수 있습니다.
거친 스케치를위한 클린 UI 키트
이 최소 와이어 프레임 템플릿은 빠른 디자인을 위해 거의 스케 칭 된 스타일을 가진 교체 가능한 부품으로 포장되어 있습니다.
흐름 iOS 와이어 프레임 키트
이 스케치 와이어 프레임 템플릿은 앱 또는 모바일 웹 사이트 개념을위한 훌륭한 출발점입니다. 와이어 프레임 요소는 간단하고 실용적입니다.
와이어 리 와이어 프레임 키트
Wirey에는 Photoshop 및 Sketch 템플릿이 포함되어있어 유선 프레이밍 유연성을 제공합니다. 템플릿에는 200 개 이상의 구성 요소와 1, 000 개의 요소가 포함되어 있으므로 필요한 모든 것이 여기에 있습니다.
반응 형 와이어 프레임 키트
Figma and Sketch 용 와이어 프레임 템플릿은 프로토 타이핑을 통해 초기 와이어 프레이밍에서 벗어나도록 설계되었습니다. 여기에는 반응 형 사고 과정에 집중할 수 있도록 데스크탑, 모바일 및 태블릿 크기를위한 수많은 블록과 템플릿이 포함됩니다.
UX 워크 플로우 와이어 프레임 및 사이트 맵 작성기
이 와이어 프레임 템플릿에는 사용할 준비가 된 페이지 및 사이트 맵 옵션이 포함되어 있습니다. 이와 같은 템플릿은 시작하는 데 약간의 도움이 필요한 경우 프로젝트를 계획하는 데 도움이 될 수 있습니다.
결론
웹 사이트 와이어 프레임 템플릿은 더 쉽게 디자인 할 수있는 바로 가기 중 하나입니다.
나는 종이 위에 스케치 한 와이어 프레임 러이지만 클라이언트가 준비되어 있지 않습니다. 따라서 템플릿을 사용하여 연필 엉망을 표현 가능한 것으로 변환합니다. 템플릿을 사용하면이 작업을 훨씬 빠르고 쉽게 수행 할 수 있으며 관리하기 어려운 팬이 아닌 작업을 수행 할 수 있습니다.
와이어 프레임 템플릿을 사용해 보지 않았다면 이런 이유로 권장합니다. 위의 예 중 하나를 사용하거나 사용하고 재사용 할 수있는 나만의 것을 만들어보십시오.
