목포대학교
홈페이지 구축 프로젝트
- Client
- 목포대학교 홈페이지 구축 프로젝트
- Date
- 2022. 09 - 2022. 11
- Type
- 홈페이지, 워드프레스, 반응형 구축
Overview
국립목포대학교의 홈페이지 제작 최상위 목적은 “전문성 & 신뢰성 강화”였습니다.
국립대학의 위상과 연구소의 전문성을 보이기 위해선 정적인 홈페이지 모습을 보여줘야 했습니다.
하지만 마이크로 인터렉션을 통해 살아있는 홈페이지 느낌을 줌으로써 홈페이지 트렌드를 따라 전문성과 신뢰성의 브랜딩을 전부 챙길 수 있는 프로젝트였습니다.
Goal
전문성 & 신뢰성 강화
UI/UX Strategy
직관적인 아이콘
콘텐츠를 직관적으로 이해할 수 있도록 목포대학교만의 아이콘을 제작하였습니다.
전문성을 느낄 수 있는 깔끔하고 직관적인 아이콘을 제작하였습니다.
프로페셔널한 UI
전문적이고 다양한 기술 정보를 효과적으로 제공하기 위한 서비스로
청록색을 브랜드 컬러로 정하고 콘텐츠에서 라운드를 제거하여 강한 인상을 주었습니다.
반응형 웹
반응형 웹에 최적화된 레이아웃과 그리드를 사용해
다양한 환경에서 사이트를 이용할 수 있도록 사용자 편의를 고려하여 제작하였습니다.
목포대학교
Design System
전체적으로 세련되고 현대적 스타일의 고딕체로 스마트폰 및 태블릿 같은
작은 화면의 디바이스에서도 텍스트를 보다 쉽게 읽을 수 있도록 가독성을 고려했습니다.
색상은 브랜드의 color system을 사용해 통일성을 제공합니다.
Typography
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/16181322/notosans.png)
Noto Sans
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/16181420/notosans_long.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15125926/Noto-Sans-KR.png)
Noto Sans KR
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15125927/Noto-Sans-KR2.png)
Color System
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170143/%EB%B8%8C%EB%9E%9C%EB%93%9C-1.png)
세계 LNG 단열시스템의
TOTAL SOLUTION PROVIDER
전문성과 신뢰도를 향상시키는 UI 디자인
파란 색감과 해양 이미지를 통해 시각적 경쾌함을 주면서도
전문성은 잃지 않도록 수준 높은 소개문구를 배치하였습니다.
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170507/Rectangle-908-1.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170335/screencapture-ktcs-co-kr-main-do-2022-12-06-13_02_29-1.png)
목포대학교
Subpage
ABOUT CENTER PAGE
연구센터의 비전과 연혁, 조직구성 등을 충실히 소개하여 홈페이지를
방문하는 외부 기관들에게 강한 인상을 주도록 하였습니다.
‣ 센터 소개 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170337/screencapture-vncom-kr-aboutcorp-2022-12-08-11_14_24-3.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170336/screencapture-vncom-kr-aboutcorp-2022-12-08-11_14_24-1-2.png)
RESEARCH FIELD PAGE
실증평가와 기업지원, 인력양성 등의 항목들을 통해
연구센터의 공신력을 높이도록 하였습니다.
‣ 지원분야 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170344/screencapture-vncom-kr-untitled-1-2022-12-08-11_14_39-3.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170342/screencapture-vncom-kr-untitled-1-2022-12-08-11_14_39-1-2.png)
FORUM PAGE
LNG극저온 기술의 고도화와 네트워크 구축, 그리고 이를 통한
사회적 가치 창출 계획을 확인할 수 있습니다.
‣ LNG 미래포럼 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170341/screencapture-vncom-kr-testimonials-2022-12-08-11_14_47-3.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170338/screencapture-vncom-kr-testimonials-2022-12-08-11_14_47-1-2.png)
목포대학교
Mobile Page
완벽한 WEB / MOBILE 반응형 대응
모바일에서도 편리한 사용자 경험을 주도록 완벽한 반응형 대응을 진행하였습니다.
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170505/Group-3235-2.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170328/screencapture-attometal-co-kr-html-media-recruit-html-2022-12-06-12_33_25-1.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170330/screencapture-ktcs-co-kr-bizContactIntroduce-do-2022-12-07-16_08_58.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/12/19170332/screencapture-ktcs-co-kr-esgStategy-do-2022-12-07-16_47_05-1.png)