리치코리아
홈페이지 제작 기획
- Client
- 리치코리아
- Date
- 2021. 05 - 2021. 07
- Type
- 홈페이지, 워드프레스, 반응형 구축
Overview
리치코리아의 최상위 홈페이지 목적은 “사업의 규모가 느껴지는 전문성” 이었습니다.
리치코리아를 사용하는 소비자에게 전문 자료를 홈페이지 배치하여 구매저항을 감소시켰습니다.
또한 템플릿형 UI / UX디자인에서 벗어난 맞춤형 디자인 & 마이크로 인터렉션을 선보였습니다.
Goal
UI/UX 디자인 리뉴얼
전문성 & 신뢰성 확보
UI/UX Strategy
반응형 웹
반응형 웹에 최적화된 레이아웃과 그리드를 사용해
다양한 환경에서 사이트를 이용할 수 있도록 사용자 편의를 고려하였습니다.
직관적인 UI
전문성을 직관적으로 전달할 수 있도록 정보의 중요도를 정리하고
그에 맞게 Color & UI 가이드를 제작하였습니다.
부드러운 인터랙션
사용자의 스크롤에 따라 자연스럽게 움직일 수 있도록 인터랙션을 적용하였습니다.
RICH KOREA
Design System
전체적으로 세련되고 현대적 스타일의 고딕체로 스마트폰 및 태블릿 같은
작은 화면의 디바이스에서도 텍스트를 보다 쉽게 읽을 수 있도록 가독성을 고려했습니다.
색상은 브랜드의 color system을 사용해 통일성을 제공합니다.
Typography
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15130134/Noto-Sans-Eng.png)
Noto Sans
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15130135/Noto-Sans-Eng2.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/06/15143321/%EC%BB%AC%EB%9F%AC-6.png)
깊은 고민없이
대접할 수 있는 곳
브랜드이미지를 강화하는 히어로섹션
한국 전통 음식점의 브랜드 이미지를 강화하는
사진, 카피라이팅을 활용하여 리치코리아의 브랜딩을 굳혔습니다.
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15143347/%EB%A9%94%EC%9D%B81-6.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15143344/%EB%A9%94%EC%9D%B8%EB%AA%A8%EB%B0%94%EC%9D%BC-4.png)
RICH KOREA
Subpage
BRAND PAGE
리치코리아의 브랜딩 스토리와 메뉴를 소개하는 페이지로
리치코리아를 찾아주신 홈페이지 사용자들에게 필요한 정보를 제공하도록 기획하였습니다.
‣ 브랜드 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17125839/Rectangle-1032-12.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17125830/Rectangle-1032-1-8.png)
MEMBERSHIP PAGE
홈페이지 사용자들의 목적중 하나인 멤버쉽 조회 기능으로
아몽소프트웨어에서는 홈페이지 + 기능개발을 동시에 진행하였습니다.
‣ 멤버쉽 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17125832/Rectangle-1032-2-8.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17125834/Rectangle-1032-3-6.png)
COMPANY INTRODUCTION PAGE
리치코리아가 나아가고자 하는 비전을 소개해주는 페이지로
전문성과 신뢰성을 얻을 수 있는 역할을 맡았습니다.
‣ 회사소개 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17125836/Rectangle-1032-4-6.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17125838/Rectangle-1032-5-3.png)
리치푸드
Mobile Page
완벽한 WEB / MOBILE 반응형 대응
모바일에서도 텍스트 & 사진이 깨지지 않는 반응형 대응 작업을 진행해
PC와 마찬가지로 자연스러운 사용자 경험을 느낄 수 있도록 구현하였습니다.
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15143517/Group-3252.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15143520/Rectangle-1194-8.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15143518/Rectangle-1193-8.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15143521/Rectangle-1195-8.png)