웹 사이트 도식을 수행하는 방법

회사 웹 사이트가 기본 사이트 다이어그램을 넘어서면 개별 페이지의 위치를 ​​결정할 수 있습니다. 웹 사이트 도식 또는 와이어 프레임은 디자인 요소, 색 구성표, 스타일 스타일 또는 대화 형 요소 자체를 통합하지 않고 페이지 기능의 기본 요소를 제공합니다. 도식을 바닥 평면으로 간주하고 완성 된 페이지를 가구로 간주합니다. 벽을 다시 칠하고 가구를 재배치하거나 교체하여 페이지가 어떻게 합쳐 지는지를 바꾸려면 사이트 페이지의 기능을 설정하는 상자와 자리 표시자를 사용하여 온라인 공간을 계획 할 수 있습니다.

1.

귀하의 페이지에 나타날 반복 항목을 나열하십시오. 여기에는 로고, 사이트 탐색, 사진 영역, 텍스트 영역, 머리글, 바닥 글 및 사이드 바와 같은 요소가 포함됩니다.

2.

페이지 요소의 상대적 크기와 수직 및 수평 위치를 보여주는 다이어그램을 그립니다. 이 다이어그램을 종이로 스케치하거나 이미지 편집 또는 일러스트레이션 프로그램에서 작업하거나 온라인 와이어 프레임 응용 프로그램을 사용하여 결합 할 수 있습니다.

삼.

웹 사이트에 필요한 각 유형의 페이지에 대한 페이지 다이어그램을 만듭니다. 홈페이지에는 제품 또는 서비스 페이지, 연락처 페이지 또는 블로그와 다른 페이지 요소가있을 수 있습니다.

4.

위치 표시 텍스트를 사용하여 단어가 표시되는 위치를 나타냅니다. serif와 sans serif 서체 중 하나를 선택할 수는 있지만 회로도는 유형 스타일 실험 및 데모 용 장소가 아닙니다.

5.

요소가 작동하는 방법이나 링크되는 위치에 대한 메모를 사용하여 와이어 프레임에 주석을 답니다. RSS, Twitter, Facebook 및 파트너 또는 제조업체 사이트를 비롯하여 외부 사이트 또는 서비스에 링크되는 아이콘을 추가하십시오.

6.

검토, 토론 및 승인을 위해 와이어 프레임을 순환시키고 필요에 따라 와이어 프레임을 수정하십시오. 실제 페이지에 필요한 모든 되풀이 요소가 회로도에 포함되어 있고 요소의 상대적 위치와 크기가 웹 사이트 요구 사항에 맞으면 와이어 프레임 단계 이상으로 나아갈 수 있습니다.

팁

• 웹 사이트 회로도는 일반적으로 디자인 과정에서 모형 및 프로토 타입보다 우선합니다. 목업은 실제로 구현하려는 양식에 색 구성표, 스타일 및 기타 디자인 세부 정보를 표시합니다. 프로토 타입은 실물 모형을 뛰어 넘는 형식으로 실제 페이지 모양을 보여주는 견본으로 발전합니다.
• 브라우저 기반 버전과 모바일 버전을 동시에 만들 계획이라면 둘 이상의 디자인 플로우에 대한 회로도를 작성해야 할 수 있습니다.
• 손으로 도식을 그릴 경우 컬러 펜이나 연필을 사용하여 디자인이나 개발 프로세스에서 더 중요한 페이지 레이아웃의 특정 영역을 강조하십시오. 예를 들어 특정 개인이 코딩 할 모듈을 나타내는 특정 색상을 선택할 수 있습니다. 이 색은 설계 요소가 아니라 계획 요소를 나타냅니다.

경고

• 웹 사이트 디자인 도구에서 회로도를 개발하고 와이어 프레임 용 CSS를 만드는 경우 사이트 개발의 스키 매틱 단계를 디자인 연습으로 전환하지 마십시오. 와이어 프레임은 스타일이 아닌 기능을 전달합니다.