본문 바로가기

상세페이지

상세페이지 디자인 퀄리티를 높이기 위한 TIP

상세페이지 디자인 시 화려한 요소나 복잡한 합성 작업이 아니더라도 몇 가지 규칙을 지키면 완성도 높은 상세페이지 디자인을 제작할 수 있습니다. 오히려 화려하고 눈에 띄는 요소는 상세페이지에서 다루는 제품을 강조하는데 좋지 않은 영향을 줄 수 있습니다.

 

여백

상세페이지 디자인이 아니더라도 디자인에는 적정 여백이 필요합니다. 강조하고 싶은 부분에는 여백을 충분히 주어 강조 콘텐츠를 돋보이게 할 수 있습니다. 여백은 각 콘텐츠의 계층에 따라 차등을 주어 규칙적으로 배치 합니다. 

 

제목과 설명글 사이의 여백, 설명글 문단 사이의 행간도 포함됩니다. 콘텐츠의 계층이 상위 그룹일 수록 여백을 넓게 배치하며 반복되는 내용의 여백은 동일하게 주어 통일성을 유지합니다.

 

 

이미지

이미지 사용 시 가장 중요한 부분은 해상도 입니다. 가령 흐릿한 이미지를 사용할 경우가 있는데요. 아무리 좋은 모양을 담고 있는 이미지라 할지라도 선명하지 않은 이미지는 상세페이지 디자인의 품질을 낮추어 신뢰도를 떨어트립니다.

 

상세페이지 디자인에서 가장 중요한 이미지는 제품이므로 제품이 포함된 이미지는 배경이 너무 복잡하거나 화려하지 않은 이미지를 선택하여 시선이 배경보다 제품에 머무를 수 있도록 합니다.

 

색상

상세페이지 디자인에서는 많은 색상을 요구하지 않습니다. 제품과 연관된 주요 색상과 함께 사용할 수 있는 보조색 2~3

가지 정도를 사용합니다. 너무 많은 색상을 사용하면 상세페이지의 통일감이 떨어지며 상세페이지가 시각적으로 복잡해 보일 수 있습니다.

기본적으로 본문 텍스트에는 검정색, 또는 검정색에 가까운 회색을 사용하여 가독성을 높이되 강조하고 싶은 부분은 주요 색상으로 포인트를 줄 수 있습니다.

 

폰트

상세페이지는 제품의 정보를 전달하는 것이 목적입니다. 디자인 요소를 입혀 제품을 매력적으로 보이게 하며 중요 메세지를 강조할 수 있습니다. 메세지를 전달할 때는 폰트를 어떻게 사용하느냐에 따라 효과가 달라질 수 있는데요.

 

본문 설명글에는 가독성이 좋은 고딕체를 사용하는 것이 불문율이며 간혹 상세페이지 내용이 많지 않거나 특정 컨셉을 위해 명조체를 사용할 수는 있지만 많이 사용 되지는 않습니다.

 

상세페이지의 제목 폰트는 제품과 어울리는 디자인의 폰트를 사용해도 좋습니다. 개성있는 폰트를 사용하여 상세페이지 첫 부분인 인트로 화면에서 시선을 잡아주는 것도 필요합니다. 제목 텍스트의 크기는 본문보다 압도적으로 크기 때문에 어느정도 개성있는 디자인이 가미된 폰트를 사용해도 가독성에 크게 영향을 미치지 않지만 꼭 체크해야 할 부분은 잘 읽혀야 하는 것입니다.