웹 기획 - 홈페이지 와이어프레임 작성건 실제 예시

안녕하세요 시란입니다.

이번 포스팅에서는 저번에 말씀 드렸듯이 와이어프레임에 대해서 한번 소개해보고자 합니다. 

 

지난 포스팅 링크는 아래와 같아요 참고로 지난 포스팅에서는 웹 기획에서 홈페이지 벤치 마킹을 했었어요.

https://siran.tistory.com/199

웹 기획 - 홈페이지 벤치 마킹 참고 문서

 

네 그럼 제가 대략적으로 작성한 와이어프레임을 소개드리겠습니다. 

홈페이지는 간략하게 6page로 되어있어요. 

메인페이지와 메인메뉴에서 들어갈 수 있는 5개의 페이지가 준비되어있습니다. 

하나하나 보도록 하겠습니다. 

 

먼저 메인 페이지입니다. 

각각 번호에 대한 설명을 드리겠습니다. 

1. 홈페이지 로고가 들어가는 부분입니다. 

2. 메인 페이지 메뉴입니다.  버튼 클릭 시 해당하는 페이지로 넘어갑니다. 

3. 저희 건물과 사무실 공간 이미지 입니다. 슬라이드쇼 형태로 넘길 수 잇습니다. 

4. 공용오피스대관 문의 버튼입니다. 7.위치로 자동으로 넘어가도록 되어있습니다. 

5. 공용오피스 가격정보입니다. 각각 1인 사무실/ 일반 사무실 가격입니다.

6. 저희가 제공하는 서비스, 혜택을 아이콘으로 표현했습니다. 

7. 대관 문의 문구와 버튼들이며, 대관문의 버튼 클릭시 대관 페이지로 넘어갑니다. 

8. 건물 위치와 정보, 연락처 등이 있스빈다. 

9. sns가 들어갈 곳이며 facebook 링크입니다. 

 

다음은 첫번째 페이지 소개 페이지 입니다. 

마찬가지로 각 번호 설명 드리겠습니다. 

1. 저희 건물 소개 그루기와 건물 사진등이 들어갑니다. 배경에 내용이 들어가며, 글귀는 배경 위쪽에 있어야 합니다. 

2. 저희 공용오피스 이용 또는 입주 기업 소개 들입니다. 사진과 글귀가 들어가며, 필요시 사진 클릭하면 회사 링크로 연결됩니다. 

 

다음은 오피스 공간 소개 페이지입니다. 

1. 사무실 사진들입니다. 슬라이드쇼 형태로 되어있습니다. 

2. 공용공간 사진들 입니다. 슬라이드쇼 형태로 되어있습니다. 

3. 메인페이지와 마찬가지로 저희 오피스의 제공 서비스와 혜택들입니다. 아이콘으로 간단하게 표시되어있스빈다. 

4. 메인페이지와 마찬가지로 오피스 가격 정보입니다. 

5. 저희 건물 위치 입니다. 지도 그림으로 표현됩니다.

6. 건물의 위치에 대한 설명글과 대중교통 이용방법에 대해서 설명합니다. 

7. 구글 지도가 들어가는 부분입니다. 

 

다음은 대관문의 페이지입니다. 

1. 방문 문의 폼으로 되어있고 해당 폼에는 이름과 전화번호 등 방문자 정도를 입력하는 기능이 있어야 하빈다. 

2. 방문 신청 버튼이며 버튼 클릭시 담당자에게 메일로 전달됩니다. 

 

다음은 공지사항 게시판 페이지 입니다. 총 2개의 탭으로 이루어져있습니다. 

1. 공지사항 탭입니다. 

2. 공지사항 게시판입니다. 글 검색 기능도 필요합니다. 

 

1. 행사 일정 탭입니다. 

2. 행사 일정을 캘린더 형태로 파악하며, 월별로 일정 확인이 가능해야합니다. 그리고 작성자는 로그인 따로 필요 없이 글 작성 시 비번 입력하게 되면 됩니다. 

3. 행사 소식이며 글과 그림으로 배치됩니다. 그리고 날짜순으로 배치하며, 지난 행사와 현재 진행중인 행사 구분이 필요합니다. 또한 진행중인 행사는 앞쪽에 배치되는 기능도 필요합니다. 

 

다음은 FAQ 페이지 입니다. 

1. FAQ 글씨 (단순글씨)

2.FAQ 항목 별 버튼(탭)

3. 탭에 다라 FAQ 내용이 변경되어야 합니다. 

4. 주차공간 관련 안내 내용이 들어갑니다. (입주기업 주차금지 등등)

5. (삭제 예정...)

 

네 지금까지 홈페이지 제작을 위한 홈페이지 와이어프레임을 작성했으며, 

해당 작성된 내용을 소개드렸습니다. 

물론 처음 작성해보는 건이라 조금 초보틱해 보일 수 있지만 도움이 됐으면 하는 마음에 업로드 합니다. 

 

그럼 다음번에도 좋은 내용으로 찾아뵙겠습니다. 

감사합니다.