홈페이지제작

표지로 책을 판단할 수 없다고 합니다. 책(및 사람)에 대해서는 사실일 수 있지만 웹사이트의 홈페이지는 그렇지 않습니다. 귀하의 홈페이지는 방문자의 경험을 향상시키거나 중단시킬 수 있으며 심지어 방문자가 검색을 포기하도록 만들 수도 있습니다. 그러나 홈페이지가 웹사이트의 중요한 구성 요소라면 어떻게 그렇게 많은 사람들이 잘못 알고 있을까요? 아래에서 이에 대해 자세히 살펴보고 피해야 할 몇 가지 일반적인 실수를 살펴보겠습니다.

마음가는 곳이 집입니다

홈페이지 없이 웹사이트는 존재할 수 없습니다. 사람들이 귀하의 웹사이트에 도착했을 때 항상 첫 번째 장소가 아닐 수도 있지만 결국에는 도착할 것입니다. 귀하의 온라인 존재는 가상의 벽돌과 박격포입니다. 방문자가 귀하의 홈페이지에 도착하면 말하자면 귀하의 시설 정문을 통과하는 것입니다. 당신이 누구인지, 무엇을 제공하는지, 그리고 그들이 그것을 통해 어떻게 이익을 얻을 수 있는지가 그들에게 분명해야 합니다. 이상적으로는 사용자가 몇 초 안에 이 모든 것을 이해할 수 있을 것입니다.

10초의 법칙

대부분의 경우 홈페이지 방문자의 경험은 웹사이트 전체에서 보내는 시간에 영향을 미칩니다. 웹사이트에서 보낸 시간을 사용자의 "장애 발생 시간"을 분석하는 데 사용되는 개념인 Weibull 분포 에 비유했습니다. 즉, 사용자가 홈페이지에서 보낸 시간을 기준으로 이탈하는 데 걸리는 시간입니다. 연구에 따르면 웹사이트의 99%에 10초의 기회가 있습니다. 즉, 방문자는 10초 이내에 머물 것인지 떠날 것인지 결정합니다. 그게 왜 중요한가요? 10초 안에 가치를 전달할 수 있다는 의미이기 때문입니다. 방문자가 10초 이상 머무르면 사이트에 계속 참여하고 추가 페이지를 방문할 가능성이 높습니다. 하지만 그 10초 안에 그들의 관심을 끌지 못하면 그들이 떠날 위험이 있습니다.

마이크로 인터랙션을 염두에 두고 홈페이지를 디자인하는 방법

좋은 홈페이지는 회사의 가치를 전달해야 하지만 때로는 쉽지 않습니다. 가장 관련성이 높은 이미지, 헤드라인, 본문 카피 및 아이콘을 선택해야 합니다. 그런 다음 방문자의 관심을 끄는 방식으로 표시합니다. 마이크로인터랙션은 사용자를 참여시키는 즉각적인 피드백을 제공하므로 여기에서 도움이 될 수 있습니다. 마이크로 인터랙션의 예는 사용자가 기본 탐색 위로 마우스를 가져가 드롭다운 메뉴 또는 보조 탐색을 표시하는 경우입니다. 이를 염두에 두고 스스로에게 물어볼 수 있는 질문은 "어디서부터 시작해야 할까요?"입니다.

1. 방문자부터 시작

이상적인 방문자에게 중요한 정보와 방문자가 귀하의 사이트에 도착했을 때 어떻게 생각하고 행동하는지에 대한 정보를 수집하는 것부터 시작하십시오. 사용자 조사는 이러한 종류의 데이터를 얻을 수 있는 좋은 방법입니다. 이 정보를 검색하는 데 도움이 될 수 있는 몇 가지 특정 방법은 사용자 인터뷰, 상황별 조회 및 기존 웹 사이트에 대한 사용성 테스트입니다.

2. 레이아웃 결정

홈페이지 레이아웃은 검색 가능성 과 학습 가능성을 지원해야 합니다. 찾기 가능성은 사용자가 사이트에서 필요한 것을 얼마나 쉽게 찾을 수 있는지를 의미하고, 학습 가능성은 사용자가 웹 사이트 및 해당 기능을 탐색하는 방법을 얼마나 빨리 이해하는지를 나타냅니다. 사용자 인터페이스(UI) 디자인 을 어떻게 취급 하느냐에 따라 특히 가치를 전달해야 하는 시간이 제한되어 있기 때문에 여기에서 성공이 결정됩니다. 레이아웃에 대해 염두에 두어야 할 많은 디자인 원칙이 있지만 다음 세 가지부터 시작하는 것이 좋습니다.

타이포그래피

웹사이트는 말 없이 존재할 수 없으며 어떻게 디자인하느냐가 중요합니다. 타이포그래피는 브랜드 신뢰도의 확장이기 때문에 홈페이지 디자인에 매우 중요합니다. 예를 들어, 사용자가 사본을 읽기 위해 눈을 가늘게 뜨지 않아도 됩니다. 크기, 배치, 무게 및 색상을 고려하고 모든 내용을 읽을 수 있는지 확인하십시오. 장식용 글꼴을 멀리하십시오. 대신 산세리프체와 같은 보다 현대적인 글꼴을 선택하세요. 예를 들어 Arial은 인기 있는 산세리프 표시 글꼴입니다.
팁: 단순하고 굵게, 매우 얇음, 검정, 밝음 및 일반과 같이 다양한 가중치가 있는 글꼴을 선택하십시오. 콘텐츠의 다른 섹션 간에 고대비를 만드는 것도 도움이 됩니다. 예를 들어, 홈페이지 디자인의 모범 사례는 지원 본문 텍스트보다 헤드라인에 훨씬 더 큰 글꼴을 사용하는 것입니다.

형상

우리가 보는 것은 우리의 결정, 감정 및 기대에 영향을 미칩니다. 요리계에는 '눈으로 먹는다'는 말이 있을 정도다. 웹사이트의 홈페이지도 마찬가지입니다. 우리는 먼저 눈으로 결정하므로 방문자가 공감하고 연결할 수 있는 이미지를 선택하고 있는지 확인하십시오. 그들이 해결하려는 문제를 보여줍니까? 그들이 느낄 수 있는 감정을 표시합니까?

구성

올바른 서체와 이미지를 선택하는 것만으로는 충분하지 않습니다. 모든 것을 하나로 모으는 것이 중요합니다. 이를 수행하는 한 가지 방법은 이미지와 버튼 배치를 조합하는 것입니다. 예를 들어 버튼은 화면의 전체 너비이거나 전체 너비의 1/4을 차지할 수 있습니다. 홈페이지에서 차지하는 공간은 방문자의 관심을 끌거나 주의를 분산시킬 수 있습니다. 이를 결정하려면 방문자가 홈페이지에서 무엇을 하기를 원하는지 생각해야 합니다. 최고의 홈페이지 디자인은 이것을 매우 명확하게 합니다. Apple의 홈페이지 는 명확하고 강력한 클릭 유도 문안이 있는 구성의 좋은 예입니다. : 홈페이지를 통해 방문자를 안내하는 스토리를 만들고 이미지와 텍스트를 통해 해당 스토리를 전달합니다. 그들이 무엇을 하기를 원하는지, 그리고 그들이 홈페이지와 어떻게 상호작용하기를 원하는지 명확해야 합니다. 그리드 를 사용하여 모든 요소의 배치를 결정하는 데 도움이 되는 것처럼 와이어프레임으로 시작하면 도움이 됩니다.

3. 플랫폼 고려

Apple이 2007년 6월에 최초의 iPhone을 출시했을 때 새로운 웹 브라우징 경험을 소개했습니다. 이제 다양한 화면 해상도로 웹 사이트를 볼 수 있는 훨씬 더 많은 장치가 있습니다. 홈페이지에 대한 방문자의 "처음 경험"은 모바일 또는 기타 장치에서 발생할 수 있으므로 반응형 디자인 이 매우 중요합니다. 결과적으로 홈페이지는 대체 표시 영역을 고려해야 합니다. 원활한 경험을 제공하기 위해 타이포그래피, 이미지 및 구성을 조정하는 방법이 데스크탑에서 모바일로 전환되어야 합니다. 이를 달성하는 방법 중 하나는 데스크탑과 같은 큰 화면을 디자인하기 전에 작은 화면을 디자인 하는 " 모바일 우선 " 방법론을 구현하는 것입니다. 이는 디자인 요소를 배치하는 방법에 대한 결정을 내리도록 하고 제품의 기능을 과도하게 사용하여 사용자를 압도하는 "기능염"으로부터 보호하는 역할을 합니다. 홈페이지를 단순하고 적절하게 유지하는 것이 핵심입니다. 모바일 퍼스트를 위한 디자인이 원활한 웹사이트 경험을 만드는 유일한 방법은 아닙니다. 사용 컨텍스트를 이해하는 것도 유익합니다. 사용 컨텍스트는 방문자가 웹 사이트를 자주 방문하는 환경을 의미합니다. 그들의 집에 있습니까? 버스를 기다리는 동안? 기차에서? 이렇게 하면 어떤 플랫폼이 우선 순위가 되어야 하는지 결정하는 데 도움이 됩니다.