13 웹 사이트 디자인 모범 사례 2021

요즘에는 몇 분 안에 웹 사이트를 가동하고 실행할 수 있습니다. 하지만 라이브 되 고 웹 사이트 및 최적화 되 고 차이가 있다.

왜 디자인이 중요한가? 사람들이 귀하의 웹 사이트에 대한 의견을 형성하는 데 0.05 초 밖에 걸리지 않습니다. 예,당신은 올바르게—50 밀리 초 멀리 날 려 또는 귀하의 웹사이트에 의해 격퇴 하는 사람에 대 한 읽기. 그 의견의 대부분은 디자인에서 형성된다.

웹 사이트 디자인은 또한 전환,신뢰성에 영향을 미치며 궁극적으로 사이트의 성공을 만들거나 깨뜨립니다. 어떤 웹사이트도 완벽하지는 않지만 최대한 최적화해야 합니다.

여기뿐만 아니라 고려해야 할 뭔가:나쁜 경험 후,소비자의 88%는 웹 사이트로 돌아 않을 수 있습니다. 그 꼭대기에,최근 연구 기관의 77%는 가난한 웹사이트 디자인은 그들의 고객의 가장 중요 한 약점 말 발견.

최종선: 당신의 웹 디자인이 사용자 경험을 위해 낙관되지 않는 경우에,당신의 성공에 유해하기 위하여 려고 하고 있다. 이 가이드를 쓴 이유입니다.

웹사이트 디자인에 도움이 필요하십니까?

오늘 웹 사이트 또는 블로그를 디자인하는 데 도움을 받으십시오.

시작하기

웹 사이트 디자인에 많은 요소가 들어갑니다. 이것들은 2021 년에 우선 순위를 정해야 할 가장 중요한 13 가지 요소입니다. 이러한 모범 사례를 따르는 경우 사이트의 성능이 크게 향상됩니다.

이 체크리스트를 사용하여 성공적인 디자인이 있는지 확인하십시오

  1. 텍스트 최소화
  2. 표시,말하지 않음
  3. 짧은 문장 사용
  4. 짧은 단락 사용
  5. 맞는 색 구성표 선택
  6. 탐색 간소화
  7. 모바일용 디자인 최적화
  8. 검색 엔진 최적화 우선 순위 지정
  9. 페이지 로딩 속도 모니터링
  10. 지속적으로 테스트 실행

텍스트 최소화

의 거대한 블록으로 페이지를 채우지 마십시오 텍스트.

나는 때때로 깊이있는 갈 필요가 블로그 게시물에 대해 이야기하고 있지 않다(이 같은!). 웹 페이지(예:홈페이지,방문 페이지)에 대해 이야기하고 있습니다. 여기에 텍스트를 최소한으로 유지하십시오.

웹 사이트 방문자에게 귀하,회사,브랜드 및 제품에 대한 모든 것을 알려주고 싶습니다. 그러나 너는 다만 약간 형안에 저 이야기를 또는—조차 더 나은—약간 낱말 말하기 위하여 어떻게 배운것을 필요로 한다.

쇼,말하지 마

비주얼은 서면 내용을 깨뜨리는 데 도움이 될뿐만 아니라 더 깊은 설명을 제공 할 수도 있습니다. 너가 이는 것에 관하여 너의 방문자를 보이십시요. 그들은 짧은 시간에 더 많은 것을 이해할 것입니다.

해리의 제품 페이지는 이러한 첫 번째 두 가지 디자인 원칙을 모두 구현합니다:

예를 들어 웹 사이트에서 면도기,블레이드,면도 크림 및 기타 남성용 면도 제품을 판매한다고 가정 해 봅시다.

구독 비즈니스 모델로 운영하며 이러한 제품을 월 단위로 고객에게 제공합니다. 당신의 면도기의 디자인은 아주 잘생깁니다—새겨진 경재로 만들고 선물로 주기 위하여 충분히 좋습니다.

오히려 홈페이지에이 모든 세부 사항에 들어가는 것보다,당신은 단순히 같은 것을 말하는 텍스트와 함께이 제품의 사진을 가질 수 있습니다,”당신의 문에 전달.”당신은 단지 네 단어에 걸쳐 메시지를 얻을.

물론,당신은 더 깊이 방문자가 귀하의 페이지에 도착 세부 사항으로 갈 수 있지만 긴 텍스트 설명은 필요하지 않습니다.

짧은 문장 사용

짧은 문장을 쉽게 읽을 수 있습니다.

큰 텍스트 덩어리로 방문자를 포격하지 마십시오. 그들은 읽기 시작 위치를 알 수 없습니다 및 콘텐츠를 소화 할 수 없습니다.

혼합. 당신이 긴 문장을 필요로 하는 경우에,짧은 것에 그것을 따르십시오. 다양한 도움이됩니다.

짧은 단락을 시도

당신의 이점에 단락 나누기를 사용합니다. 더 긴 단락을 쓰는 것은 괜찮지 만 홈페이지 단락을 몇 문장으로 유지하고 싶습니다.

과용하지 않는 것도 중요합니다. 좋은 일을 너무 많이,실제로 나쁜 일이다.

새로운 정보로 각 단락을 시작,그래서 누군가가 스크롤하는 경우 그들은 그 단락을 읽을 필요가 있는지 신속하게 알 수 있습니다.

당신의 페이지에 불필요한 원본을 삭제하는 것은 불요반사파를 감소시키고 당신의 부르 에 활동에 강조를 더 둔다.

데 CTA 띄는 혼자 자신의 단락은 더 강력한 매장보다 그것은 무리에서의 텍스트입니다.

이 상황에서 매우 유용한 도구는 총알입니다. 단락과 긴 형식의 글쓰기를 추가하는 대신 목록 사용을 고려하십시오. 그 명부안에,탄알 점을 이용하십시요.

연구에 따르면 더 많은 사람들이 다른 형식보다 글 머리 기호로 목록을 볼 것입니다. 이는 페이지의 스캔 가능성을 향상시키고 원하는 가장 중요한 사항을 강조 표시 할 수 있기 때문입니다.

브랜딩 전략에 맞는 색 구성표 선택

웹 사이트에서 선택하는 색상 선택은 생각보다 중요합니다.

방문자는 90 초 이내에 귀하의 웹 사이트를 판단합니다. 그 대부분은 당신이 선택한 색상의 결과입니다.

웹 사이트 색 구성표를 선택하는 가장 좋은 방법은 브랜딩입니다. 당신의 로고를 참조하십시오. 너의 웹사이트에 색깔은 너의 상표 이미지에 적합한가?

다음은 예입니다. 스타벅스를 생각해 보세요.

이 브랜드 이름을들을 때,나는 당신이 당신의 머리에 이미지를 가지고 확신합니다. 어쩌면 로고,사인 또는 상점 위치 일 수 있습니다.

그 이름에 색상을 연결합니까? 이제 자신의 웹 사이트를 살펴 보자.

그들이 녹색 색체 배합 설계로 갔다 아무 놀람도 없다.

이 디자인 선택은 로고와 브랜드 이미지와 일치하여 소비자가 이미 브랜드와 연관시키는 것을 강화합니다. 일관된 것을 유지함으로써 혼란이 없습니다. 이 웹 사이트를 방문하고 색상이 노란색과 빨간색 있다면 그것은 이상한 것입니다. 그것은 그들의 브랜드와는 아무 상관이 없습니다.

우리는 계속 강화에 대해 더 깊이 이야기 할 것입니다.

그들은 크고,대담하고 강력할 필요가 있고 당신의 방문자가 다음 가지고 가야 하는 활동으로 명확하게 밖으로 서 있어야 한다.

그러나 대부분의 웹 사이트에는 3 초 이내에 발견 할 수있는 버튼이 없습니다. 당신이 더 오래 걸리는 그룹에 빠질 수있는 좋은 기회가 있습니다. 그것은 당신이 안으로 있고 싶은 종류가 아니다.

효과적인 전환 버튼 없이는 전환을 유도할 수 없습니다.

나는 비즈니스 인테리어 페이지(브랜드가 무엇을하고 무엇을 제공하는지 설명하는 페이지)에서 거의 볼 수 없습니다. 이 주요 설계 결함입니다. 방문자가 귀하의 홈페이지로 다시 이동하여 변환 할 것으로 기대할 수 없습니다.

이 디자인이 얼마나 간단한 지보십시오. 이 화면에 최소한의 텍스트입니다,그래서 메시지는 분명하다.

그 결과”무료 가입”이 두드러집니다. 사실,리트머스는 심지어 화면에 하나 이상의 위치에 넣어.

당신이 어디에 두어야하는지 페이지마다 다릅니다. 예를 들어,블로그 게시물 있어야 최고 독자 신속 하 고 또한 하단에 그들은 게시물을 읽은 후 그것을 볼 수 있도록.

더 깊이 들어가세요. 여기 행동요청을 개량하는 11 의 방법은 있는다.

친숙 하 게 작업을 강화

귀하의 메시지가 같은 경우,모든 단일 페이지에 동일 해야 합니다.

사람들이 웹 사이트를 탐색하는 방법에 대해 생각해보십시오. 특정 흐름을 설정하더라도 모든 사람이 페이지에 착륙하고 몇 초 만에 변환하지는 않습니다. 그들은 조금 먼저 주위를 탐색 할 수 있습니다.

예를 들어 전자 상거래 웹 사이트가 있다고 가정 해 봅시다. 이렇게 하면 다음과 같이 표시됩니다:

  • 홈페이지:지금 체크 아웃
  • 카테고리 페이지:오늘 구매
  • 제품 페이지: 구매하려면 클릭

방문자가 홈페이지에 그 버튼 중 하나를 볼 경우,카테고리 페이지에 다른,제품 페이지에 세 번째,더 보강이 없습니다.

대신 메시징과 스타일을 일관되게 유지하십시오. 보석 및 액세서리 브랜드의 좋은 예가 있습니다.

당신이 그들의 안경,시계,또는 보석 페이지에 있다면 그것은 중요하지 않습니다. 당신은 그들의 제품에 대해 동일한”쇼핑”을 보게 될 것입니다.

각 페이지는 또한 웹 사이트의 전반적인 미니멀리스트,흑백 디자인과 일관성을 유지합니다.

이 디자인 원칙을 웹 사이트에도 적용하십시오.

이 버튼을 넘어갑니다. 아이디어는 가능한 한 많은 요소로 이러한 유형의 보강을하는 것입니다.

언어,메시지 및 디자인의 일관성은 브랜드 정체성을 강화하고 방문자의 마음에 지속적인 인상을 남깁니다.

탐색 간소화

웹사이트 방문자가 사이트에서 원하는 것을 찾기가 어렵지 않아야 합니다.

자신의 신발에 자신을 넣어. 왜 당신은 웹 사이트를 방문? 너는 어떻게 저 업무를 달성하는가? 어쩌면 너는 무언가를 사고 싶으나,정보를 더 입수하나,거기서 제안한것을 이는 것을 본다. 그 이유가 무엇이든,방문자가 빨리 알아낼 수 없다면,그들은 떠날 것입니다.

거기에는 너무 많은 경쟁이 있습니다. 사용자는 다루기 웹 사이트 탐색 참아 할 이유가 없다. 그들이해야 할 일은 사이트를 떠나 다른 곳에서 필요한 것을 찾는 것입니다.

복잡한 디자인으로 바퀴를 재발견하지 마십시오. 표준 형식으로 스틱.

예를 들어 대부분의 웹 사이트는 탐색 메뉴를 각 페이지 상단에 수평으로 배치합니다. 너의 메뉴가 어딘가에 있으면,너의 방문자를 혼동한.

메뉴의 옵션이 적을수록 좋습니다. 그렇지 않으면 사람들이 필요한 것을 찾기가 너무 어려울 것입니다. 이 개념은 힉의 법칙으로 알려져 있습니다.

당신이 누군가에게 더 많은 옵션을 줄수록 결정을 내리는 데 더 오래 걸릴 것입니다. 저것은 복잡한 디자인 및 항법이 너의 전환율을 분쇄할 것이다 까 왜 이다.

이에 대한 유명한 실험이 있는데,선택의 역설을 논하는 잼 연구라고 한다.

이 실험은 지역 식료품 점에서 수행되었습니다. 소비자는 하루에 24 용지 걸림을 샘플링하고 다음 날에 6 용지 걸림을 제시했다:

  • 첫날 더 큰 디스플레이는 구매자의 60%를 끌어 들였지만 그 중 3%만이 구매했습니다.
  • 둘째 날 6 개의 용지 걸림이 작게 표시되면서 구매자의 40%가 구매했지만 30%는 구매했습니다.

선택을 제한함으로써 전환이 10 배 증가했습니다. 이 동일한 개념을 웹 사이트 탐색에 적용 할 수 있습니다.

불필요한 메뉴 옵션을 제거합니다. 예를 들어,”홈”버튼을 갖는 대신 웹 사이트 로고를 사용하여 홈 화면으로 다시 연결하십시오.

광장의 홈페이지를 살펴보십시오.

디자인은 슈퍼 깨끗합니다. 메뉴 옵션은 매우 제한적입니다. 이렇게 하면 방문자가 자신의 요구에 맞는 선택을 쉽게 선택할 수 있습니다.

화면에 최소한의 텍스트가 있음을 알 수 있습니다.

이러한 유형의 디자인은 웹 사이트 방문자가 탐색 할 때 길을 잃거나 혼란스러워하는 것을 거의 불가능하게 만듭니다.

전자상거래 샵과 같이 웹사이트에 다양한 옵션이 있는 사용자의 경우 복잡한 메뉴를 사용하지 않고도 탐색 프로세스를 간소화할 수 있는 검색 창을 추가할 수 있습니다. 소프트웨어 회사의 많은 기능 탭에 자신의 기능을 넣어보다는 각 기능에 대한 개별 탭을 가지고있다.

모바일 장치 설계 최적화

모바일은 전 세계 대다수가 인터넷에 액세스하는 방식입니다. 즉,모바일에 최적화되지 않은 경우 웹 사이트가 제대로 작동하지 않습니다.

후츠위트의 이 데이터를 살펴보세요:

검색 엔진은이를 인식하고 모바일 친화적 인 사이트를 보상합니다. 여기에 포인트 홈을 칠 수있는 몇 가지 통계입니다:

  • 구글은 스마트 폰 소유자의 87%가 적어도 하루에 한 번 인터넷 검색을 실행하는 장치를 사용하는 것을 알고있다.
  • 모든 구글 검색의 58%는 모바일 장치에서 수행
  • 결과:구글의 첫 페이지 결과의 70%는 모바일 장치에 최적화되어 있습니다.

모바일 검색 엔진 최적화는 구글에서 잘 순위를 위해 할 수있는 가장 중요한 일이다. 진심으로.

웹 사이트가 스마트 폰에서 잘 보이지 않으면 사람들은 곁에 있기를 원하지 않을 것입니다. 따라서 웹 사이트 디자인이 모바일 친화적인지 확인하십시오.

더 자세히 알아보기:모바일에 맞게 웹사이트를 최적화하는 방법을 배우고 싶으십니까? 모바일 친화적 인 웹 사이트에 대한 우리의 완전한 가이드를 확인하십시오.

우선 순위 검색 엔진 최적화

귀하의 사이트에 당신이하는 모든 검색 엔진 최적화에 다시 동그라미 할 필요가있다.

그리고 여기 저기에 키워드를 추가하는 것만으로는 충분하지 않습니다. 그것은 콘텐츠를 개선하고 끊임없이 그 지역에 사이트 권한을 구축하는 특정 주제 문제를 대상으로 웹 사이트 전체 시스템입니다.

예를 들어,전자 상거래 사이트의 방문 페이지는 다음과 같은 특정 페이지 요소에 초점을 맞추기를 원할 것입니다:

  • 유용성. 방문자가 사용하고 탐색하는 것이 얼마나 쉬운 지.
  • 모바일. 웹 사이트의 모양과 모바일 장치에서 수행하는 방법.
  • 키워드 최적화. 순위를 매기고 싶은 단어와 구문입니다.
  • 내부 링크. 얼마나 자주 당신은 당신의 웹 사이트에 다른 페이지에 링크.
  • 제목. 이것은 종종 웹 페이지에서 가장 큰 텍스트입니다. 따라서,그것은 당신의 방문 페이지에 무거운 대부분의 작업을 수행합니다.

사이트맵을 만듭니다. 이렇게하면 검색 엔진 크롤러가 웹 사이트의 콘텐츠를 쉽게 분석 할 수 있습니다. 사이트맵은 봇에 사이트의 페이지 위치,페이지가 마지막으로 업데이트된 시점,업데이트 빈도 및 사이트의 다른 페이지와의 관계를 표시합니다.

적절 한 사이트맵 검색 엔진 최적화 순위를 손상 시킬 수 있는 중복 콘텐츠 없는 구글을 보여줍니다.

당신이 당신의 사이트를 디자인 할 때,너무,구글에 순위를 고려 덜 분명 요소의 톤이있다.

우리는 이미 페이지 자체에서 개선 할 수있는 몇 가지 측면을 살펴 보았습니다. 그러나 다른 요소는 다음과 같습니다:

  • 도메인. 귀하의 웹 사이트는 귀하의 구글 순위에 매우 중요합니다. 주요 요소는 도메인에 키워드를 포함,얼마나 오래 된 도메인,그리고 도메인 확장자는(예:.,,정부,같은 높은-품질.조직 대 비 전통적 확장).
  • 사이트 품질. 너의 웹사이트는 방문자에게 도움이 되어야 한다. 주요 요소에는’회사 소개’페이지,’연락처’페이지,웹 사이트 업데이트 빈도,웹 사이트 탐색이 얼마나 쉬운 지,가동 시간(웹 사이트 충돌 빈도)및 인증서가 포함됩니다.
  • 뒤로 링크. 이것은 귀하의 웹 사이트가 다른 웹 사이트에 의해 링크 된 빈도를 나타냅니다. 그것은 구글에 잘 순위에 대한 중요한 요소이다. 주요 요인 페이지,품질 및 당신에 게 연결 하는 웹사이트의 권위를 연결의 수를 포함,앵커 텍스트 그들은 당신에 게 링크를 사용 하 고 있는지 여부 그 링크에서 온.에듀 또는.정부 도메인.

페이지 로딩 속도 모니터링

여러분 중 일부는 어떻게 생각하는지 알고 있습니다. 페이지 로딩 속도는 웹 디자인과 어떤 관련이 있습니까? 모든 것.

물론,로딩 시간은 웹 사이트 호스팅 계획,서버,트래픽 및 그 성격의 것들과 관련이 있습니다. 그러나 디자인 선택은 로딩 시간에도 영향을 줄 수 있습니다.

사이트에 요소,특히 이미지,비디오 및 기타 복잡한 미디어 파일을 추가할 때마다 로드 시간이 영향을 받을 수 있습니다. 따라서 웹 사이트 요청을 느리게 할 수 있습니다.

느린 로딩 시간은 높은 포기 율로 이어집니다. 당신은 이것을 무시할 수 없습니다. 너의 페이지가 적재하기 위하여 너무 오래 걸리면,거대한 문제 이기 위하여 가고 있다.

또한 25%의 사람들이 로드하는 데 4 초 이상 걸리는 웹 사이트를 포기합니다. 네,4 초. 저것은 너가 있는 모두 이다,또는 너는 각 100 명의 방문자에서 25 을 잃을 것이다. 대부분의 방문자는 페이지가 2 초 이내에 로드될 것으로 예상합니다.

어떻게 웹 디자인에 이것을 적용 할 수 있습니까?1643>

  • 이미지의 파일 크기 줄이기
  • 브라우저 캐싱 도구 활용
  • 웹 사이트 요청 줄이기
  • 파일 축소 및 결합
  • 온라인에서 사용할 수 있는 많은 도구가 있습니다.너는 이 것을 달성한다. 예를 들어,체크 아웃 워드 프레스 로켓 플러그인 파일을 축소하고 결합하기위한 자원으로. 그리고 당신이 당신의 웹 사이트에 디자인을 변경할 때마다 당신이 당신의 로딩 시간을 모니터링 할 수 있도록 구글의 페이지 속도 통찰력 도구를 사용합니다.이 웹 사이트 디자인에 올 때,당신은 단지 그것을 설정하고 그것을 잊지 수 없습니다.

    앞서 말했듯이,어떤 웹 사이트도 완벽하지 않습니다. 항상 디자인을 개선 할 수있는 방법이 있습니다.

    이 때문에 테스트를 실행해야합니다. 이들은 당신이 당신의 웹 사이트에 정기적으로 개선하고 가장 잘 작동하고,더 중요한 것은,전혀 작동하지 않는 것을 볼 요소를 테스트 할 수 있습니다.

    사이트 디자인의 거의 모든 요소를 테스트 할 수 있습니다. 예를 들어 클릭률이 다르지만 동일한 두 개의 서로 다른 랜딩 페이지를 만들 수 있습니다. 한 방문 페이지가 다른 페이지보다 더 잘 수행되면 해당 방문 페이지가 작업을 완료 할 가능성이 있음을 알 수 있습니다.

    다음은 올바른 방향으로 시작하기위한 몇 가지 간단한 제안 사항입니다:방문 페이지에서 사용 중인 이미지 테스트 화면의 텍스트 표현 변형 테스트

  • 탐색 모음의 크기 테스트
  • 옵션이 너무 많아서 하루 종일 이것에 대해 이야기 할 수 있습니다. 이 테스트를 시작하기 전에 알아야 할 모든 것에 대한 나의 가이드를 확인하십시오.

    결론

    웹 사이트의 디자인이 중요하다고 말하는 것은 삼가 될 것입니다. 귀하의 웹 디자인 선택은 궁극적으로 귀하의 사이트가 성공 여부에 영향을 미칠 것입니다.

    • 모든 사람의 웹 사이트를 개선 할 수 있습니다. 이 목록을 가이드로 사용 하 여 이러한 개선 하는 데 도움이 리소스로.
    • 압도 당하지 마십시오. 나는 당신이 하룻밤 사이에 이러한 모든 디자인 제안을 구현할 필요가 있다고 말하는 것이 아니라 어딘가에서 시작해야합니다.
    • 나는이 아이디어를 허공에서 끌어 내지 않았다. 이 목록에있는 모든 것은 설계 원칙과 관련된 연구 및 통계에 의해 뒷받침됩니다.

    기억하십시오:모든 웹 사이트는 진행중인 작업입니다. 너가 일을 안으로 두고 항상 너의 웹사이트를 미조정하면,너는 너의 경쟁자와 너의 가장자리를 개량하기 위하여 가고 있다.

    당신의 웹사이트가 아주 새로운지 또는 십년간 동안 주변에 인 경우에 상관 없습니다. 다음은 2021 년에 따라야 할 웹 디자인 모범 사례입니다.

    웹사이트 디자인에 도움이 필요하십니까?

    오늘 웹 사이트 또는 블로그를 디자인하는 데 도움을 받으십시오.

    시작하기



  • +