상세페이지 영역 구분하는 방법, 다양한 내용 배치 방법
1. 상세페이지 영역 구분하는 방법
- 1. 배경 이미지, 컬러로 영역 구분
- 인접한 영역의 배경 컬러는 다르게 넣어야 명확히 구분됨
- 2. 사선으로 영역 구분
- 보다 스타일리시하고 개성 있는 상세페이지 제작 가능
- 사각형 도형 생성 > [Direct Selection Tool] 사용해 사선으로 만들고 싶은 점을 드래그하여 원하는 형태로 변경
- 3. 여백으로 영역 구분
- 영역과 영역 사이의 공간을 넓게 주어 여백으로 구분
- 시원시원하고 깔끔한 느낌 제공 가능
- 디자인 감각이 부족한 초보자의 경우 상세페이지가 허술해 보일 수 있는 단점 존재
- 다양한 형태의 영역 구분
- 컬러로 구분, 사선으로 구분, 여백으로 구분 등 여러 영역 구분 방법을 혼합하여 사용
2. 다양한 내용 배치 방법
- 지그재그 배치
- 제품의 장점이나 설명 부분에 자주 사용
- 레이아웃을 깔끔하게 표현할 수 있는 비교적 쉬운 표현 방법
- 함축적인 제목, 짧은 설명글, 숫자와 함께 사용(숫자의 경우, 설명 텍스트가 많은 경우 생략)
- 방사형 배치
- 제품의 성분이나 특장점을 표현하는데 적합
- 원을 그리듯 방사형 형태로 균일한 위치에 짧은 내용 배치
- 단순 나열 배치
- 내용이 많지 않은 이미지형 상세페이지에 적합
- 이미지가 차지하는 영역이 크기 때문에 초점이 맞지 않거나 작은 이미지는 사용하지 않는 것이 좋음
- 제목, 2-3줄가량의 설명 내용, 이미지 영역