디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
  - 생활 홈페이지의 제작의        이해
  - 홈페이지몰 상품 만들기
  - 맞춤형 생활 홈페이지          만들기
  - 학원 홈페이지 만들기
  - 펜션 홈페이지 만들기
  - 음식점 홈페이지 만들기
  - 병원 홈페이지 만들기
  - 교회 홈페이지 만들기
  - 커뮤니티 홈페이지 만들        기
쇼핑몰 홈페이지 만들기
학원 홈페이지 만들기
Home > 디자인 센터 > 웹강좌 > 생활 홈페이지 만들기 > 학원 홈페이지 만들기
메인 페이지 만들기 서브 페이지 만들기

4. 학원 홈페이지 만들기

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

[메인페이지]

① 메뉴(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) 내용을 넣어 카피라이트 부분을 완성합니다.

하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 회사소개 사진모음 협력사 오시는길 이용약관 개인정보취급방침 전화상담안내 게시판문의 모바일 한국어 라인 이미지 日本語 라인 이미지 中文 라인 이미지 ENGLISH 라인 이미지 사이트맵 하단 메뉴 배경 이미지
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 1544-8442 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 08507) 서울시 금천구 가산디지털1로 168 우림라이온스밸리 A동 8층 (주)아사달
(우편번호 : 153-786) 서울시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
인터넷 익스플로어 구글 크롬 모질라 파이어폭스
애플 사파리 오페라 넷스케이프
맨위로
디지털콘텐츠 No.1 (주)아사달