1. 작품명 : 영진직업전문학교 로고 및 메인페이지 리뉴얼
2. 훈련과정명 : (디지털디자인) 웹퍼블리셔,UI/UX,웹디자인 (5개월)
2-1. 적용능력단위 : 스마트문화앱UX설계, 스마트문화앱UI디자인, 웹프로그래밍(비NCS), 수정보완, 프로젝트실무(비NCS)
3. 출품자 성명 : 정민혜, 경승하
4. 지도 교수 : 이선희 교수님, 김정현 교수님, 전은영 교수님
5. 제작기간 : 2021.06 ~ 2021. 07
6. 제작의도 : 최신 디자인 트렌드를 참고하여 심미성을 강화하고, 기존 아쉬웠던 사용성 부분을 개선하여 타 직업전문학교와 차별화 된 사이트 제공
7. 작품상세설명 :
되도록 크롬으로 접속해주시길 바랍니다.
html5, css3, javascript를 이용하여 제작한 반응형 웹 메인 페이지입니다.
Desktop PC, Laptop PC, Tablet (가로/세로), Mobile 등 기기의 크기에 맞춰 다르게 반응하도록 설정하여 사용성을 개선하였고
타 직업전문학교와 비교했을 때 차별성이 다소 부족했던 기존 사이트의 단점을 개선하여 심미성 또한 강화하였습니다.
① Desktop PC, Laptop PC
header(웹페이지 상단부 메뉴 영역): 서브메뉴와 메인메뉴의 양쪽 여백이 같도록 제작하여 통일성을 부여하면서도
서브메뉴에는 배경색 (#379d6b)을 삽입하여 메인 메뉴와 공간이 분리된 상태임을 시각적으로 표현하였습니다.
서브메뉴의 SNS메뉴와 메인 메뉴 위에 마우스 커서가 올라왔을 때 내려오는 하위 메뉴에 애니메이션 효과를 부여하여 동적인 요소를 추가하였고
메인 메뉴에 따라 하위 메뉴 박스가 하나씩 내려오도록 하여 사용자가 현재 어떤 메인 메뉴의 하위 메뉴를 보고 있는지 알 수 있도록 조치하였습니다.
또한 스크롤을 사용할 경우 서브메뉴는 가려지고 메인메뉴가 화면의 최상단에 위치하여 콘텐츠 영역을 보다 쾌적하게 확인할 수 있습니다.
contents: 한 화면에 콘텐츠 요소가 최대 2개까지만 보일 수 있도록 하여 정보전달력을 강화하였습니다.
메인페이지의 경우에는 슬라이드를 마우스 커서를 이용하여 이동할 수 있고
현재 모집 과정의 경우에는 슬라이드 위에 마우스 커서를 올리면 과정에 대한 자세한 정보를 확인할 수 있으며,
포트폴리오의 경우에는 오른쪽의 미리보기 이미지를 클릭하면 왼쪽의 이미지가 해당 이미지로 변경되도록 제작하였습니다.
② Tablet (가로/세로), Mobile
header(웹페이지 상단부 메뉴 영역): pc와 달리 심볼과 햄버거 메뉴를 이용해 헤더의 공간을 줄였고
햄버거 메뉴를 통해 서브메뉴와 메인메뉴를 확인할 수 있도록 하였습니다.
메뉴 화면의 최하단부에 전화 연결 버튼과 sns 버튼을 추가하여 모바일로 접속한 사용자들이 간단하게 학교의 연락망을 확인할 수 있게 조치하였습니다.
contents: pc 버전과 비교하였을 때 모바일 화면에 조금더 최적화 될 수 있도록 디자인과 기능적인 면을 수정하면서도
pc버전의 기능을 모바일에서도 최대한 이용할 수 있도록 하였습니다.