“아름다움은 보는 사람의 눈”이라는 글귀처럼 효과적인 웹 디자인은 웹 사이트 디자이너가 아니라 웹 사이트 사용자가 판단한다. 웹 사이트의 유용성에 영향을 미치는 많은 요소가 있으며 형식(모양이 좋음)뿐만 아니라 기능(사용하기가 쉽다)에 관한 것이다.
잘 설계되지 않은 웹 사이트는 실적이 저조하고 Google 애널리틱스의 가장 부적절한 측정 항목 (예 : 이탈률이 높고 사이트에 머문 시간이 짧으며 방문당 페이지가 낮고 전환율이 낮을 때)이 있다. 그래서 좋은 웹 디자인은 무엇일까? 아래에서는 웹 사이트를 예술적으로 기쁘게 하고, 사용하기 쉽고, 매력적이며, 효과적으로 만들어 줄 상위 10가지 웹 디자인 원칙을 탐구해본다.
1. 목적(Purpose)
좋은 웹 디자인은 항상 사용자의 요구를 충족시킨다. 웹 방문자가 정보, 엔터테인먼트, 상호 작용 유형을 찾고 있거나, 아니면 비즈니스 또는 거래하고 있거나? 웹 사이트의 각 페이지에는 분명한 목적이 있어야 하며 가능한 가장 효과적인 방법으로 웹 사이트 사용자의 특정 필요를 충족시켜야 한다.
2. 커뮤니케이션(Communication)
방문자의 궁극적 인 목적은 정보를 얻는 것이고 웹 사이트가 방문자를 효율적으로 알릴 수 있다면 대부분 웹 사이트에서 더 많은 시간을 보낸다. 방문객들과의 원활한 의사 소통을 위해 유용한 트릭은 헤드라인과 하위 헤드라인을 잘 활용하고 와플을 자르기(cutting the waffle) 기법과 긴 뾰족한 문장이 아닌 bullet points를 사용하여 정보를 체계화하는 것이다.
3. 서체(Typefaces)
일반적으로 Arial 및 Verdana와 같은 Sans Serif 글꼴은 온라인으로 읽기 쉽다 (Sans Serif 글꼴은 장식적인 마무리가없는 현대적인 글꼴). 온라인에서 쉽게 읽을 수있는 이상적인 글꼴 크기는 16px이며 최대 3가지 글꼴을 사용하여 디자인을 간소화한다.
4. 색상(Colors)
잘 고안된 색상 표는 사용자 경험을 향상시키기 위해 먼 길을 갈 수 있다. 보완 색상은 균형과 조화를 만든다. 텍스트와 배경에 대비되는 색상을 사용하면 쉽게 읽을 수 있다. 생동감 넘치는 색감은 감정을 조성하므로 드물게 사용되어야 한다 (예 : 버튼/buttons 및 행동 요청/call to actions). 마지막으로, 여백(white space) / 안보이는 면(negative space) 공간은 웹 사이트에 현대적이고 깔끔한 느낌을주는 데 매우 효과적이다. (참고. 보이는 면/positive space, 안보이는 면은 보이지는 않지만 의미나 형태를 가진 면을 의미한다. 착시적 형태라고도 한다.)
5. 이미지(Images)
천 마디 말보다 사진을 통해 말하고 웹 사이트에 적합한 이미지를 선택하면 브랜드 위치를 파악하고 타겟 고객과 연결하는 데 매우 효과적이다. 고품질의 전문 사진이 없다면 스톡 사진을 구입하여 웹 사이트의 모습을 조정해 보거나, 인포그래픽(infographics), 비디오 및 그래픽을 사용하는 것이 가장 잘 쓰여진 텍스트보다 훨씬 효과적으로 소통 할 수 있다.
6. 네비게이션(Navigation)
네비게이션은 사람들이 행동을 취하고 웹 사이트를 쉽게 돌아 다니는 것이 얼마나 쉬운지를 보여준다. 효과적인 탐색을 위한 논리적 방법으로는 논리적 페이지 계층 구조(logical page hierarchy), Breadcrumbs(빵 부스러기) 사용, 클릭 가능한 버튼(Buttons) 디자인, 사용자가 세 번의 클릭으로 찾고있는 정보를 찾을 수있는 ‘세 번의 클릭 규칙(three click rule)’을 따르는 것 등이 있다.
7. 그리드 기반 레이아웃(Grid based Layouts)
웹 페이지에 무작위로 콘텐츠를 배치하면 어수선한 외관이 엉망이 될 수 있다. 그리드 기반의 레이아웃은 내용을 섹션(Sections), 열(Columns) 및 상자(Boxes)로 배열하여 균형 잡힌 느낌을 보여주며 보다 나은 웹 사이트 디자인으로 유도할 수 있다.
8. F & Z 패턴 디자인(F & Z Pattern Design)
눈 추적 연구(Eye tracking studies)에 따르면 사람들은 컴퓨터 화면을 “F & Z” 패턴으로 스캔한다고 한다. 사람들이 보는 대부분의 부분이 화면의 상단과 왼쪽에 있으며 화면의 오른쪽이 거의 보이지 않는다고 한다. 시청자의 시각적 흐름을 강요하려는 것이 아니라 효과적으로 디자인 된 웹 사이트는 독자의 자연스러운 동작과 중요도 (왼쪽에서 오른쪽, 위에서 아래로) 순으로 정보를 표시한다.
9.로드 시간(Load Time)
일반적으로 많은 사람은 오래 걸리는 웹 사이트를 싫어한다. 페이지 로드 시간을 보다 효과적으로 만드는 팁에는 이미지 크기(크기 및 배율) 최적화, 사용되는 코드를 CSS 또는 JavaScript 파일 (HTTP 요청 감소) 및 HTML, CSS, JavaScript (로드 시간 단축을 위해 압축됨) 축소 등이 있다.
10. 모바일 친화적(Mobile Friendly)
이제는 여러 화면 크기의 여러 기기에서 웹 사이트에 액세스하는 것이 일반적이므로 웹 사이트가 모바일 친화적인지 여부를 고려하는 것이 중요하다. 웹 사이트가 모바일 친화적이지 않은 경우 반응형 레이아웃으로 다시 작성하거나 (즉, 웹 사이트가 다른 화면 너비로 조정 됨) 전용 모바일 사이트 (모바일 사용자 전용으로 최적화 된 별도의 웹 사이트)를 만들 수 있다.
댓글을 달려면 로그인해야 합니다.