간단한 와이어 프레임을 사용하여 디자인을 시작하는 방법 배우기
웹 와이어 프레임은 웹 페이지의 모습을 보여주는 간단한 시각적 가이드입니다. 그래픽이나 텍스트를 사용하지 않고 페이지 구조를 제안합니다. 웹 사이트 와이어 프레임은 전체 사이트 구조를 보여줍니다.
웹 와이어 프레임은 설계 작업을 시작하는 좋은 방법입니다. 엄청난 양의 세부적인 와이어 프레임 을 만들 수는 있지만 냅킨과 펜으로 시작할 수 있습니다. 좋은 와이어 프레임을 만드는 열쇠는 모든 시각적 요소를 제거하는 것입니다. 상자와 선을 사용하여 그림과 텍스트를 표현하십시오.
웹 페이지 와이어 프레임에 포함 할 사항 :
- 기본 그래픽 요소 용 상자
- 헤드 라인 및 서브 헤드 배치
- 간단한 레이아웃 구조
- 행동 촉구
- 텍스트 블록
간단한 웹 와이어 프레임을 만드는 방법
손쉽게 사용할 수있는 종이 조각을 사용하여 웹 페이지 와이어 프레임을 만듭니다. 방법은 다음과 같습니다.
- 큰 사각형을 그립니다 - 전체 페이지 또는 보이는 부분 만 나타낼 수 있습니다. 나는 보통 눈에 보이는 부분부터 시작하여 펼쳐진 부분 아래에있는 요소를 포함하도록 확장합니다.
- 스케치 레이아웃 - 2 열 3 열입니까?
- 머리글 그래픽 상자에 추가 - 열 위에 단일 머리글로 표시하려면 열을 그릴 수도 있고 원하는 위치에 추가 할 수도 있습니다.
- H1 헤드 라인을 원하는 곳에 "헤드 라인"이라고 씁니다.
- H2와 더 낮은 헤드 라인을 원하면 "Sub-Head"라고 씁니다. 비례 - h2가 h1보다 작거나, h3이 h2보다 작은 경우 도움이됩니다.
- 다른 이미지 상자 추가
- 탐색에 추가하십시오. 탭을 계획하는 중이면 상자를 그리고 그 위에 "내비게이션"이라고 적으십시오. 또는 탐색을 원하는 열에 글 머리 기호 목록을 넣으십시오. 내용을 쓰지 마십시오. "내비게이션"이라고 쓰거나 텍스트를 나타내는 줄을 사용하기 만하면됩니다.
- 추가 요소를 페이지에 추가합니다. 텍스트가 포함 된 내용을 식별하지만 실제 내용 텍스트는 사용하지 않습니다. 예를 들어 오른쪽 하단에있는 클릭 유도 문안 버튼을 원할 경우 거기에 상자를 넣고 "클릭 유도 문안"이라고 표시하십시오. "지금 구입하십시오!"라고 쓰지 마십시오. 그 상자에.
간단한 와이어 프레임을 작성하고 15 분 이상 스케치하여 다른 사람에게 보여 주면 안됩니다. 누락 된 내용이 있거나 다른 피드백이 있는지 물어보십시오. 그들이 말한 것을 토대로 다른 와이어 프레임을 작성하거나 가지고있는 와이어 프레임을 유지할 수 있습니다.
왜 Paper Wireframes가 첫 번째 초안에 적합한 지
Visio와 같은 프로그램을 사용하여 와이어 프레임을 만들 수는 있지만 초기 브레인 스토밍 세션에서는 종이를 사용해야합니다. 종이는 영구적 인 것처럼 보이지 않으므로 많은 사람들이 5 분 안에 그것을 던져 버렸다고 가정하고 좋은 피드백을주기를 망설이지 않을 것입니다. 그러나 프로그램을 사용하여 완벽한 사각형과 색상의 멋진 와이어 프레임을 만들면 프로그램 자체에 얽매이지 않고 실시간으로 출현하지 않는 무언가를 완성하는 데 많은 시간을 할애 할 수 있습니다.
종이 와이어 프레임은 쉽게 할 수 있습니다. 그리고 만약 당신이 그것을 좋아하지 않는다면, 당신은 단지 종이를 뭉개 버리고 그것을 재활용에 버리고 새로운 시트를 움켜 잡습니다.