웹 사이트 와이어 프레임은 웹 페이지에 요소 배치를 보여주는 간단한 선 그림입니다. 나중에 복잡한 디자인 대신 디자인 과정의 시작에서 간단한 와이어 프레임의 레이아웃을 편집하여 많은 시간을 절약 할 수 있습니다.
와이어 프레임을 사용하면 웹 사이트 프로젝트를 시작할 수있는 좋은 방법입니다. 색상 그래프, 유형 및 기타 디자인 요소를 혼란스럽게하지 않으면 서 레이아웃에 집중할 수 있기 때문입니다. 웹 페이지의 위치와 각 요소가 차지하는 공간 비율에 집중하십시오. 이는 고객의 요구에 따라 결정될 수 있습니다.
01 / 03
웹 사이트 와이어 프레임에 포함 할 내용
웹 페이지 의 모든 중요한 요소는 웹 사이트 와이어 프레임에 표현되어야합니다. 실제 그래픽 대신 간단한 모양을 사용하고 레이블을 지정하십시오. 이러한 요소는 다음과 같습니다.
- 탐색 : 사용자가 사이트의 주요 섹션을 방문하기위한 버튼입니다.
- 회사 로고 : 상자로 표시 할 수 있습니다.
- 콘텐츠 영역 : 콘텐츠의 다른 섹션은 어디에 표시됩니까?
- 검색 창
- 사용자 로그인 영역
02 of 03
웹 사이트 와이어 프레임을 만드는 방법
웹 사이트 와이어 프레임을 만드는 다양한 방법이 있습니다. 그들은 다음을 포함합니다 :
종이에 손으로 그리기
이 방법은 클라이언트와 직접 대면 할 때 편리합니다. 어떤 요소가 어디로 가야하는지에 초점을 맞춰 종이에 레이아웃 아이디어를 스케치하십시오.
Adobe Photoshop, Illustrator 또는 기타 소프트웨어 사용
대부분의 그래픽 소프트웨어 패키지는 와이어 프레임을 만드는 데 필요한 모든 기본 도구를 갖추고 있습니다. 단순한 선, 도형 및 텍스트 (요소에 레이블 지정) 만 있으면 표시 가능한 와이어 프레임을 만드는 데 필요한 모든 것입니다.
이 유형의 작업에 대해 생성 된 소프트웨어 사용
Photoshop 과 Illustrator가 그 트릭을 수행 할 수 있지만, 일부 소프트웨어 패키지는 이러한 유형의 작업을 위해 특별히 개발되었습니다. OmniGraffle은 셰이프, 선, 화살표 및 텍스트 도구를 제공하여 빈 캔버스에서 사용할 수있는 와이어 프레임 생성을 단순화하는 소프트웨어입니다. Graffletopia에서 맞춤 그래픽 세트를 무료로 다운로드 할 수도 있습니다. Graffletopia는 일반 웹 버튼과 같은 더 많은 요소를 사용할 수 있도록 해줍니다.
03 of 03
혜택
웹 사이트 와이어 프레임을 사용하면 원하는 레이아웃을 얻기 위해 간단한 선 그리기를 조정할 수 있습니다. 복잡한 요소를 페이지 주위로 이동하는 대신 몇 개의 상자를 새로운 위치로 끌어 오면 시간이 거의 걸릴 수 있습니다. 당신이나 고객이 레이아웃에 우선적으로 집중하는 것이 훨씬 더 생산적입니다 ... "나는 그 색상이 맘에 들지 않습니다!"와 같은 코멘트로 시작하지 않을 것입니다. 대신에, 최종 레이아웃과 구조로 시작할 것입니다. 귀하의 디자인을 기반으로합니다.