현대카드 홈페이지 제작방식을 알아보자!

현대카드 홈페이지 제작방식을 알아보자!

 

 

[intro]

​

현대자동차그룹 계열의 신용카드사 현대카드!

업계최초 세이브포인트제도를 도입하여

현대카드만의 브랜드 정체성을 담아 디자인을 하고

틀에박힌 가로형이아닌 세로형 카드로

다른 카드사와의 특별함을

강조하고 있는 카드사 입니다.

자 그럼 현대카드홈페이지는 어떻게 제작되고

사용자에게 어떤 장점을 선보이고 있는지

한번 알아볼까요?

 

---

 

[main page]

​

먼저 메인페이지부터 살펴볼까요?

메인페이지는 현대카드만의 독톡하고

톡톡튀는 감성이 돋보이는 color​가 사용자의 시선을 사로잡네요.

​

1.

현재 선보이고 이벤트에대한 문구를

홈페이지 접속시 최상단에 팝업을 삽입하여

사용자에게 진행중인 이벤트 또는 출시한 카드를 홍보하고 있네요.

작고 사소한 부분이지만 이런 팝업은

사용자에게 잠시나마 시선을 잡아 해당 페이지로

이동 할수 있게 행위를 유도하기 때문에 홈페이지 제작시

빼놓을 수 없는 요소중 하나라고 생각합니다.

​

2.

현대카드의 로고는 좌측상단에 위치해 있네요.

digital 이라는 이미지가 와닿게

픽셀형식으로 텍스트를 꾸며 현대카드만의

아이덴티티가 강조되는것 같네요.

​

3.

navigation은 홈페이지의 전체적 분위기에 어울리게

심플하게 디자인 되어있네요.

nav에도 눈에 띄는 효과같은 것을 주어

강조하는 것도 좋지만

현대카드 홈페이지처럼 심플하게 제작하는것 또한

다른데에 컬러감이 많으면

심플한것도 포인트가 될 수 있기에

개인적으로 좋은것 같다고 생각되네요.

​

4.

해당배너는 타 사이트와는 다르게

세로형의 슬라이드배너를 좌측에 삽입했는데요.

세로형카드를 출시한 현대카드의 브랜드정체성을

녹여낸 부분같아 이런 사소한 부분에도

아이디어가 돋보여 신선했습니다.

​

5.

서브페이지로 이동할수 있는 섹션으로

최대한 심플하고 명확한 이미지와 텍스트로

사용자에게 정보전달함에 있어 혼동을 주지 않고

디자인 또한 조잡해 보이지 않네요.

홈페이지 또는 앱제작 시

목적에 맞게 디자인,설계하는 것이 매우 중요하다는 것은

다들 알고 계시죠?

카드사 홈페이지의 경우도 카드사용의 목적,혜택 등 정보전달이

주된 성격을 띄는 사이트이기 때문에

예쁜디자인도 중요하지만

정보전달을 명확하게하기위해 제작하는게

개인적으로 중요하다고 생각됩니다.

 

[navigation1]

​

상단 네비게이션에 마우스를 가져다대면

선택한 카테고리에 색상이 hover되고

하위카테고리 sub이 펼쳐지는 형식으로 제작되었네요.

​

1.

하위 sub의 좌측에는

이벤트진행중인 카드 이미지를 삽입하여

사용자가 현대카드에서 진행하고 있는 이벤트를

확인할 수 있네요.

​

2.

하위sub의 ui또한 심플하게 제작되어있는데요.

사용자가 빠르게 원하는 정보를 얻을 수 있는 것이

심플함의 가장 큰 장점이라고 생각됩니다.

심플하지만 사용자가 본인이

선택하고있는 부분이 어떤부분인지 알려주기위해

마우스 hover시에는 컬러변경으로

포인트를 주었네요.

 

 

[sub_page1]

​

1.

서브페이지로 이동하면 메인매너가

화면중앙에 크게 삽입되어 있네요.

해당배너의 상세페이지로 이동할 수 있는 버튼을

이미지 위로 삽입하여

사용자가 홈페이지 이용 시 편리함을 제공하는

장점을 주고 있는것 같아요.

​

2.

해당 서브페이지의 경우 우측으로

페이지스크롤 이동 박스가 삽입되어 있는데요.

원하는 카테고리 클릭 시

페이지내에서 원하는 내용의 섹션으로

스크롤이동을 하는 제작방식을 사용했습니다.

이러한 방식을 사용자에게 편리성을 제공하고

시각적으로 동적인 느낌을 주어

홈페이지 이용시 지루하지 않고

화려한 효과는 아니지만 충분한 동적 효과를 주곤 합니다.

 

 

[navigation2]

​

1.

navigation의 검색버튼을 클릭하면

하위로 검색어를 입력할 수있는 영역이 생기는 데요.

사용자가 검색어를 입력전에

인기검색어를 제시하여

사용자에게 편리성을 제공하는 점이

개인적으로 장점으로 느껴지네요.

​

 

[join]

​

회원가입 ui와 디자인 또한

심플하게 제작되었는데요.

사용자가 원하는 방식의 인증으로 가입하게 유도하고

깔끔한 제작으로 혼동방지에 도움을 줄것 같네요

​

1.

다만 개인적으로 아쉬운점이 있다면

해당부분이 어떤기능이고

일반과 다이너스 회원의 개념의 설명이 없어

이 부분에 대한 보완이 있었다면

좋지 않았을까라고 조심스럽게 생각해 봤습니다.

 

[고객센터]

​

홈페이지, 앱제작시

고객센터와 같은 정보전달이 중요한 페이지의 경우

앞서 계속 언급했지만

정보전달이 명확해야되고 접근성이 쉬워야한다고 생각합니다.

​

현대카드도 사용자가 홈페이지 접속 시

사용자가 원하는 정보를 빠르고 쉽게 습득할 수 있도록

제작되어있는 것 같네요.

 

1.

사용자가 먼저 검색하기전에

자주묻는 질문을 제공함으로써

사용자에게 친절함을 느낄수 있게 제작되었네요.

​

2.

해당질문을 클릭 또는 hover시에 color가

변경되는 효과를 주는 포인트가 좋은것 같습니다.

 

마치며

그래픽 디자인의 거장, 데이비드 카슨은 했던말이 있죠.

"커뮤니케이션과 가독성을 혼동하지 말라"

우리는 웹사이트 제작시

웹에서 중요한 가독성, 편리함, 반응성 그리고 접근성을

가장 중요시하고 잊어서는 안되겠죠?

전형적인 것이 사용하기 편하다고

중요한 것을 잊어버리게 된다는 것을 다시한번 깨달으며

이번 분석 포스팅을 마무리하겠습니다.

장마철 건강유의하시고 다음 포스팅에서 뵈요:)