9. 커뮤니티 홈페이지 만들기
(1) 메인 페이지 만들기
주로 게시물 위주로 운영되는 사이트이므로 메인 이미지 이외의 내용 부분은 이미지 사용을 자제하고 게시판 등의 내용부분이 최대한 많이 노출되도록 제작해야 합니다.
[메인 페이지]
① 메뉴(Menu, Navigation) 만들기
- 해상도 1024*768에 맞춰서 제작할 새로운 문서(document)를 엽니다.
- 로고(logo)는 커뮤니티 시안의 특성에 맞는 적절한 서체를 사용하여 제작하여 상단에 배치합니다. 로고(logo)의 특성에 따라 색상 및 효과를 조절하여 디자인을 완성합니다.
- 로고(logo) 오른쪽 하단에 홈, 로그인, 회원가입, 사이트맵 등의 텍스트 메뉴(text menu)를 배치합니다.
- 커뮤니티 시안의 상단 메뉴의 텍스트(동호회소개, 커뮤니티, 갤러리, 정보마당, 동호회운영)를 배치합니다. 현재 시안 메뉴에 쓰인 국문서체는 Rix고딕 M 서체입니다. 메뉴 오른쪽에는 검색창과 인기검색 배너를 배치합니다.
- ‘동호회소개’ 클릭 시 나타나는 서브메뉴(동호회소개, 회장인사말, 운영진소개, 임원현황, 동호회회칙, 주요행사, 공지사항)를 배치합니다.
② 메인비주얼(Main Visual) 만들기
- 메인비주얼에 사용될 일러스트 이미지와 남녀 사진 이미지를 준비합니다.
- 메인비주얼 부분에 라인으로 틀을 잡습니다.
- 메인비주얼 부분에 하늘 이미지를 배경 이미지(background image)로 배치합니다.
- 메인비주얼 부분에 중심이 되는 일러스트 이미지를 배치합니다.
- 메인비주얼 부분에 다른 구성 요소들과 어울리도록 남녀 사진 이미지를 오른쪽에 배치합니다.
- 마지막으로 전체적인 디자인 콘셉트에 맞게‘사람과 사람이 만나는 즐거운 곳! 우리들의 자유로운 커뮤니티' 텍스트를 왼쪽 상단에 배치하여 타이포그래피(typography) 부분을 완성합니다.
③ 콘텐츠(Contents) 만들기
- 메인 이미지 왼쪽으로 로그인을 배치합니다. 메인 디자인 완성 후 솔루션으로 회원관리 로그인창을 연동해야 하는 부분입니다.
- 로그인 아래쪽으로 접속현황을 배치합니다. 메인 디자인 완성 후 솔루션으로 연동해야 하는 부분입니다.
- 메인이미지 오른쪽으로 ‘아사웹진 무료구독’ 배너와 그 아래쪽에는 QUICK MENU를 배치합니다.
- 게시물이 노출되는‘공지사항', ‘클럽소식' 게시판을 왼쪽에 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다
- ‘공지사항’아래쪽으로는 ‘클럽일정표’를 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.
- ‘클럽일정표’ 아래쪽으로 ‘설문조사’를 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.
- ‘공지사항’ 오른쪽으로는 게시물이 노출되는 '정모/번개게시판' , ‘질문과 답변’, 자료실’게시판을 배치합니다. (메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.)
- ‘정모/번개게시판’오른쪽으로 ‘아사클럽 사진광장’사진게시판을 배치합니다. 메인 디자인 완성 후 솔루션으로 사진게시판을 연동해야 하는 부분입니다.
- ‘아사클럽 사진광장’아래쪽으로‘출석체크 이벤트’와‘아사클럽 소식지’배너를 배치합니다.
- 다음 줄에도 위, 아래 간격을 맞추어 ‘포토갤러리’ 사진게시판을 배치하고, 하단에 카피라이트(Copyright) 내용을 넣어 카피라이트 부분을 완성합니
※‘포토갤러리’는 메인 디자인 완성 후 솔루션으로 사진게시판을 연동해야 하는 부분입니다.