깔끔하고 심플한 느낌의 건물 이미지와 교육을 연상시키는 책과 인물 이미지를 조합하여 제작한 성인 대상의 교육/학원 홈페이지를 만들어 보겠습니다. 생동감이 넘치고 도전적인 붉은 색을 사용하여 강한 주목성을 주고 전체적으로는 차분하고 각 강좌들이 정리되도록 디자인하겠습니다.

[메인페이지]

① 메뉴(Menu, Navigation) 만들기

- 해상도 1024*890에 맞춰서 제작할 새로운 문서(document)를 엽니다.

- 로고(logo)는 교육 시안의 특성에 맞는 심볼 이미지와 적절한 서체를 사용하여 제작하여 왼쪽 상단에 배치합니다. 현재 시안 로고에 사용된 영문서체는 Levenim MT체이며, 한글 서체는 Rix고딕 EB 서체입니다. 로고의 특성에 따라 색상 및 효과를 조절하여 자칫 밋밋할 수 있는 디자인을 다듬어 줍니다.

- 오른쪽 상단에 회색 블럭(block)을 만들고 HOME, LOGIN, SITEMAP, CONTACT US 등의 텍스트 메뉴(text menu)를 배치합니다.

- 교육 시안의 상단 메뉴의 텍스트(아카데미소개, 수강등록, 교육과정, 취업정보, 고객센터)를 배치합니다. 현재 시안 메뉴에 쓰인 국문서체는 Rix고딕 EB 서체입니다.

- ‘아카데미소개’ 클릭 시 나타나는 서브메뉴(인사말, 회사연혁, 학원견학하기, 오시는길, 공지사항)를 배치합니다.

② 메인비주얼(Main Visual) 만들기

- 메인비주얼에 사용될 교육과 관련된 학교 건물 모양의 편집 이미지와 인물 사진을 준비합니다.

- 중앙에 바둑판 모양의 패턴 이미지를 배치한 후 교육과 관련된 학교 건물 모양의 편집 이미지를 배치합니다.

- 다른 구성 요소들과 잘 어울리도록 책을 들고 있는 여성 인물과 탁자, 책, 펼쳐진 책 이미지를 좌측에 배치합니다.

-‘ACADEMY' 알파벳 이미지를 우측에 배치한 후 'A학점’을 연상시키는 알파벳‘A’를 강조하기 위해 붉은색 그라데이션 효과를 줍니다.

-‘ACADEMY' 알파벳 이미지 윗부분에 슬로건 텍스트를 배치하여 메인 비주얼 이미지를 완성합니다.

- 슬로건 작업 시 해당업체의 이미지를 가장 잘 나타낼 수 있는 문구를 넣어줍니다. 대개는 홈페이지 제작을 의뢰한 고객이 제공하지만 경우에 따라서는 디자이너가 직접 만들어야 하는 경우도 있습니다.

- 슬로건 제작 시 굴림체, 돋움체, 궁서체 등은 쓰지 않는 것이 좋습니다. 필기체 느낌이 나는 소주체나 Rix민들레와 같은 폰트와 윤고딕이나 정글고딕 등의 폰트를 적절히 조합하여 사용하면 됩니다.

③ 콘텐츠(Contents) 만들기

- 콘텐츠별로 공간을 분리시키기 위해 검정색과 붉은색으로 구분된 배경 이미지를 제작합니다.

- 검정 색으로 구분된 영역에는‘MEMBER LOGIN’타이틀과‘아이디’및‘비밀번호’입력 폼으로 구성된 로그인 창을 제작합니다. ‘로그인’버튼과 ‘아이디/비밀번호찾기’버튼은 붉은색과 녹색을 사용하여 구분이 되도록 제작합니다. 메인 디자인 완성 후 솔루션으로 로그인 창을 연동해야 하는 부분입니다.

- 붉은 색으로 구분된 영역의 좌측에는 ‘강좌 안내’ 배너를 제작하여 배치합니다. 화살표 버튼을 누를 때마다 이미지가 바뀌도록 플래시로 제작할 배너입니다. 배너 제작 시 텍스트 이미지와 버튼으로 구성된 내용 부분을 먼저 배치합니다. 내용 부분 삽입 후 내용과 관련된 아이콘 이미지를 적절히 조합하여 배너를 제작합니다.

- ‘온라인 수강신청’ 배너와 ‘이달의 베스트강좌’ 배너 삽입을 위해 세로 분할 흰색 라인을 배치합니다. 여성 인물 이미지와 텍스트 이미지를 적절히 조합하여 온라인 수강신청 배너를 제작하여 배치한 후 텍스트 이미지와 아이콘 이미지를 적절히 조합하여 이달의 베스트강좌 배너를 제작하여 하단에 배치합니다.

- 아이콘 이미지와 텍스트를 적절히 조합하여 배너 2개를 제작한 후 하단에는 고객센터 배너를 제작하여 배치합니다.

- 게시물이 노출되는 '공지사항' 게시판을 배너 우측에 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.

- '공지사항' 하단에‘개강안내’배너를 제작하여 배치합니다. [1], [2], [3] 숫자 버튼을 누를 때마다 이미지가 바뀌도록 플래시로 제작할 배너입니다.

- 우측 여백 부분에 ‘추천강좌’ 배너를 제작하여 배치합니다.

- ‘추천강좌’ 배너 하단에 작은 사이즈의 배너 2개를 제작하여 배치합니다.

- 하단에 무게감이 느껴질 수 있도록 연한 회색으로 영역을 만들고 카피라이트(Copyright) 내용을 넣어 카피라이트 부분을 완성합니다.