26 10가지법칙
멋진 웹사이트 레이아웃을 디자인하는 10가지 법칙
법칙 1: 어수선함 피하기
레이아웃은 이미지, 버튼의 다양한 배열 그리고 불규칙해 보이는 레이아웃으로 어수선해 보일 수 있습니다. 레이아웃이 어수선하면 방문객이 다음 단계로 넘어가는 것을 방해합니다.
요약
여백이 여러분의 친구입니다.
법칙 2: 폴드(fold) 상단의 디자인을 우선하기
“폴드”는 브라우저 아래의 경계 부분을 의미합니다. 폴드 아래에 있는 모든 콘텐츠는 스크롤로만 도달할 수 있습니다. 항상 핵심 콘텐츠와 정보를 폴드 라인 위에 배치하세요.
정보
모바일 사이트의 경우 폴드가 짧아 방문자가 계속 스크롤하도록 만들 수 있는 공간이 줄어듭니다.
법칙 3: 힉 하이먼 법칙을 명심하기
힉 하이먼의 법칙은 선택지가 늘어나면 개인이 결정하는 데도 시간이 늘어난다고 말합니다. 유저 경험의 각 단계에서 선택지를 제한하여 방문객의 주의가 다른 곳에 쏠리지 않도록 하세요. 하나의 콜 투 액션 버튼이 긴 메뉴 옵션보다 훨씬 더 효과적입니다.
법칙 4: 클릭보다 스크롤을 장려하기
스크롤은 매끄럽게 웹 레이아웃을 이어줍니다. 클릭은 경험할 때까지 로딩시간이 깁니다. 스크롤은 모바일에서 더 직관적이며 사용자가 사이트에 더 오래 머뭅니다.
정보
Crazy Egg의 연구에 따르면 클릭에서 스크롤로 바꾸는 것으로 전환비율이 36% 증가했습니다.
법칙 5: 진정성 있고 자연스러운 사진 사용하기
웹사이트 방문객들이 인위적인 사진을 싫어한다는 사실을 아시나요? 과한 포즈를 취한 모델 사진보다 좀 더 진정성 있는 이미지에 방문객들은 연결감을 느낍니다.
법칙 6: 시각적인 단서 사용하기
버튼을 바라보는 사람 이미지나 메뉴 옵션을 가리키는 화살표처럼 사용자에게 직접적인 이미지 또는 그래픽을 사용하는 것은 방문객을 중요한 행동으로 이끌 수 있는 확실한 테크닉입니다.
법칙 7: 서체는 스타일리시함보다 가독성이 우선
가독성 있고 읽기 쉬운 텍스트는 집중을 방해하지 않으며 다양한 스크린 크기에서 핵심 정보를 읽기 쉽습니다. 세리프체나 이탤릭체보다 깔끔하고 기하학적인 산세리프체 또는 굵은 디스플레이 형태가 웹사이트에 가장 잘 어울립니다.
법칙 8: 색채 심리
색상은 웹사이트 레이아웃에 특정 분위기와 개성을 부여할 수 있는 즉각적인 방법입니다. 색상을 제대로 선택하는 것은 사용자들이 사이트에 반응하는 방법에 영향을 미칩니다.
- 오렌지 : 고객들에게 좋은 가치를 전달
- 블루 : 지능과 상상력과 연관
법칙 9: 모바일용 페이지를 먼저 디자인하기
전 세계 모든 브라우징 세션의 절반 가량은 모바일 기기에서 이뤄집니다. 모바일을 먼저 염두에 두고 웹사이트 레이아웃을 디자인하거나 적어도 동일한 관심을 기울일 필요가 있습니다.
법칙 10: 모두를 위한 디자인
세계보건기구(WHO)는 전 세계에서 적어도 22억 명이 시각 장애를 가지고 있다고 밝혔습니다. 검정 텍스트를 하얀 배경과 함께 사용하는 등 색상 대조를 높이고 큰 크기의 산세리프체를 적용하는 것은 웹사이트를 접근 가능하고 포괄적으로 만들 수 있는 간단한 방법입니다.
초보자를 위한 실용 가이드
1단계: 사이트의 아이덴티티 구축하기
모든 사이트는 사이트 모든 페이지에 걸쳐서 일종의 브랜드 아이덴티티 역할을 하는 통일된 분위기와 스타일이 필요합니다.
효과적인 사이트의 아이덴티티는 다음을 포함합니다:
- 사이트 아이콘
- 로고
- 서체
- 색채 배합
사이트 아이콘
아이콘은 브라우저 탭에 있는 웹사이트 제목 옆에 나타나는 파비콘으로 사용됩니다.
사이트 아이콘은 적어도 512 x 512 픽셀의 정사각형이며 일반적으로 PNG, GIF, ICO 파일로 저장됩니다.
로고
로고는 그래픽에 기업명 같은 약간의 텍스트를 포함할 수도 있습니다. 다양한 기기에서 효과적으로 작동하기 위해 적당한 크기로 만들어져야 합니다.
요약
레티나 디스플레이에서 멋지게 보이게 하려면 로고 크기를 두 배로 키우세요. 예: 100x100 → 200x200 픽셀
웹 폰트 및 서체
웹사이트에서 위계를 만드는 것이 중요하며 그 위계는 H-태그가 됩니다. H1이 가장 중요하고 큰 텍스트 스타일이며, H2, H3… H6까지 이어집니다.
색상
색상은 웹사이트 페이지를 통합할 뿐만 아니라 분위기와 사용자의 인식에 영향을 미칩니다. 웹사이트에서 색상은 HEX 코드로 정의됩니다. HEX 코드는 #RRGGBB 포맷을 가진 RGB 색상의 코드 버전입니다.
2단계: 사이트의 홈페이지 구축하기
홈페이지는 일반적으로 검색 엔진을 통해 도착한 방문객이 마주하는 첫 번째 장소입니다. 홈페이지는 나머지 웹사이트의 스타일 톤을 설정해야 하며 콜 투 액션, 시각적인 단서, 메뉴 옵션을 사용하여 사용자를 다른 페이지로 이끌 수 있어야 합니다.
3단계: 다른 페이지를 위한 서식 만들기
모든 웹사이트에 필요한 핵심 페이지들:
- 어바웃 페이지
- 컨택트 페이지
- 카테고리 페이지
- 서비스 페이지 (기업용 웹사이트)
- 프로젝트 페이지 (블로그 및 포트폴리오용)
- 제품 페이지 (전자상거래용)
- 뉴스 페이지 또는 블로그 포스트 페이지
웹디자이너는 와이어프레임을 사용하여 사이트의 다양한 페이지에서 요소를 배열하는 법을 연구합니다.
