새 작업복을 찾기 위해 소매점에 들어가는 것을 상상해 보십시오. 주위를 둘러보면 바닥의 얼룩, 정리되지 않은 선반, 이상한 냄새가 보입니다. 가게에 남아서 소매점에서 사시겠습니까? 매장 디자인은 고객의 행동 방식에 영향을 미칩니다. 웹사이트도 마찬가지입니다. Clutch가 612명을 대상으로 한 설문조사에 따르면 참가자의 83% 가 웹사이트 디자인이 미학적으로 만족스럽고 최신 상태인지 알아차리는 것으로 나타났습니다. 또는 참가자의 50%가 콘텐츠가 관련이 없거나 요구 사항을 충족하지 못한다고 생각하면 웹사이트를 영원히 떠날 것입니다. 그렇다면 고객이 좋아할 웹사이트는 어떻게 디자인해야 할까요? 그것이 이 기사의 전부입니다. 좋은 웹 디자인이 필수적인 이유를 보여주고 고품질 웹 사이트를 구축하는 데 활용할 수 있는 15가지 웹 디자인 원칙을 공유합니다. 좋은 웹 디자인이 중요한 이유는 무엇입니까? 평균 웹 디자이너는 연간 $57,000를 벌며 이는 연간 평균 $44,000인 주니어 웹 개발자보다 약 $8,000 더 많습니다. 디자이너들은 정당한 이유 때문에 합리적으로 많은 보상을 받습니다. 그들의 작업은 매우 중요합니다. Kinsta가 경쟁 업체와 어떻게 비교되는지 확인하십시오. 제공업체 선택 비교하다 새로운 리드가 웹사이트를 방문하면 브랜드와의 향후 상호작용을 형성하는 첫인상이 결정됩니다. 이 시점에서 그들은 당신에 대한 첫 번째 의견을 발전시킵니다. 웹사이트는 또한 업계 내에서 브랜드의 아이덴티티, 비전 및 위치를 전달합니다. 비슷한 제품을 가진 가까운 경쟁자가 있는 경우 사람들이 "와우"하게 만드는 웹 사이트는 더 기억에 남고 경쟁자보다 브랜드 인지도를 높일 것입니다. 또한 강력한 웹 사이트는 검색 엔진 최적화(SEO) 노력을 향상시킬 수 있습니다. 검색 엔진은 검색 결과에서 웹사이트 순위를 매길 때 사람들이 웹사이트에 어떻게 반응하는지 고려합니다. 이탈률이 낮고 사람들이 사이트의 여러 페이지를 자주 방문하는 경우 검색 엔진은 이탈률이 높은 경쟁자보다 더 높은 순위를 매길 것입니다. 여기서 기술 SEO 도 중요합니다. 잘 디자인된 제목, 페이지 구조 및 링크가 있는 웹 사이트는 더 쉽게 액세스할 수 있습니다. 따라서 검색 엔진과 고객 모두가 선호합니다. 몇 가지 중요한 웹 디자인 원칙을 살펴보겠습니다. 새 사이트 구축? ✨ 먼저 읽어보세요... ???? 트윗하려면 클릭 효과적인 웹 디자인의 15가지 원칙 "웹 디자인 원칙"이라고 할 때 웹 사이트 또는 웹 페이지의 질감 및 시각적 요소를 디자인하기 위한 일반적인 규칙을 참조합니다. 모든 브랜드는 웹 디자인 원칙을 다르게 수용합니다. 일부는 모범 사례 와 일치하고 일부는 그렇지 않습니다. 훌륭한 웹사이트를 만드는 데 도움이 되도록 다음은 15가지 웹 디자인 원칙(및 이를 효과적으로 사용하는 웹사이트의 예)입니다. 1. 페이지 탐색이 쉬워야 합니다. 웹사이트에서의 사용자 경험에 대한 Clutch의 연구에서 참가자의 94%는 웹사이트 탐색을 "가장 중요한 웹사이트 기능"으로 보았습니다. 놀라운 일이 아닙니다. 검색 엔진 사용자가 "모바일 디자인"에 대한 정보를 찾기 위해 귀하의 웹사이트를 방문했지만 찾을 수 없다면 자연스러운 다음 단계는 "뒤로"를 클릭하고 다른 웹사이트를 시도하는 것입니다. 잘 계획된 탐색을 어떻게 수용합니까? Cool Club 웹사이트에서 영감을 얻으세요. Cool Club 홈페이지에 들어가면 웹사이트의 레이아웃이 매우 명확합니다. 왼쪽에 있는 버튼을 사용하여 주요 제품 섹션(예: "카드 게임" 및 "버킷 목록")으로 이동할 수 있으며, 오른쪽에 있는 버튼을 사용하여 "정보" 및 "연락처" 페이지로 이동할 수 있습니다. 쿨클럽 홈페이지 쿨 클럽 Cool Club의 제품 페이지도 탐색하기가 매우 쉽습니다. 이 브랜드는 현재 54개의 멋진 변형과 해당 페이지를 특징으로 하는 대화형 카드 데크를 보유하고 있습니다. 아래로 스크롤하여 더 보고 싶은 카드를 클릭하기만 하면 됩니다. Cool Club의 웹사이트는 양방향입니다. Cool Club의 웹사이트는 양방향입니다. 비슷하게 효과적인 웹사이트를 만들려면 콘텐츠를 머리글과 바닥글 에 대한 명확한 범주로 정렬 하고 설명적인 제목을 지정하십시오. 그런 다음 사람들이 유사한 주제를 쉽게 탐색할 수 있도록 주제별로 페이지를 정렬합니다. 또한 웹 사이트 전체에서 머리글과 바닥글을 일관되게 만드십시오. 2. 항상 부정적인 공간 활용 네거티브 스페이스(또는 "공백")는 이미지, 비디오, 텍스트, 버튼 등 페이지의 주제 주변 영역입니다. 많은 열성적인 마케터들은 방문자에게 더 많은 정보를 제공함으로써 더 많은 참여를 유도할 수 있기를 바라며 페이지의 모든 여유 공간을 채우기 위해 서두릅니다. 그러나 이것은 종종 압도적이고 혼란스러운 페이지를 초래합니다. 거기에서 네거티브 스페이스가 등장합니다. 네거티브 스페이스를 사용하면 각 페이지의 가장 중요한 요소가 강조됩니다. 색상의 부족은 방문자의 눈을 더 밝은 영역으로 이끌기 때문입니다. 물론 "음수 공간 사용"이 "지루한 흰색 웹 사이트 만들기"를 의미하지는 않습니다. 대신 Garoa와 마찬가지로 브랜드 색상을 사용하여 공간을 활용할 수 있습니다. 가로아 홈페이지 Garo는 분위기를 위해 음의 공간을 사용합니다. Garoa의 홈페이지는 크림 같은 팔레트를 사용하여 여전히 부정적인 공간을 활용하면서 분위기를 구축합니다. 그 결과 덜 중요한 부분이 아닌 중앙의 '가을 피부 관리' 섹션의 소개 콘텐츠로 시선이 집중됩니다. 귀하의 웹사이트에서 계층 구조 를 보여주기 위해 공백을 활용해야 합니다 . 3. 페이지는 일관성이 있어야 하지만 매력적이어야 합니다. "Cadbury", "Hershey's" 또는 "Nike"와 같은 브랜드 이름을 읽을 때 로고, 글꼴 및 디자인 스타일의 비전이 바로 떠오를 것입니다. 이것이 일관된 브랜딩의 힘입니다. 웹사이트를 디자인할 때 일관된 요소로 페이지를 만들어 브랜드에 명확한 시각적 아이덴티티를 부여하십시오. 그것의 의미는: 헤더 전체 에 동일한 글꼴 , 스타일 및 색상 사용 시각적 요소 사이의 공백을 페이지 간에 동일하게 유지 임의의 색상 대신 색상 팔레트 사용 뉴스 및 블로그 게시물과 같은 긴 형식의 콘텐츠에 대한 레이아웃 지침 설정 모든 페이지에 웹사이트 템플릿 사용 일관된 페이지가 완전히 균일하게 보일 필요는 없습니다. 대신 요소를 혼합하여 일관성과 참여의 균형을 맞출 수 있습니다. 예를 들어, H1, H2 및 H3 제목에 다른 글꼴과 색상을 사용할 수 있습니다. 또는 다양한 유형의 페이지 레이아웃을 변경하여 내용을 혼합할 수 있습니다. 4. 보색 수용 보색은 디자인을 압도적이고 보기 흉하게 만들지 않고 혼합할 수 있는 색상 쌍입니다. 화면에 색상이 표시되는 방식은 인쇄에 사용되는 CMYK(청록색, 자홍색, 노란색 및 검정색) 모델이 아니라 RGB(빨간색, 녹색 및 파란색) 색상 모델을 따릅니다. 화가는 또한 보색을 빨강-녹색, 파랑-주황색 및 노랑-보라색으로 간주하는 RYB(빨강-노랑-파랑) 색상 모델을 사용합니다. 어떤 모델을 선호하든 보색을 사용하면 흑백과 유사한 목적을 달성합니다. 보색 은 강조를 제공하고 브랜드에 대한 명확한 시각적 아이덴티티를 만듭니다. Swab World's 웹사이트에서 볼 수 있습니다. 아래 스크린샷에서 혈액암 자선단체는 녹색과 마젠타 색조를 사용합니다. 이러한 색상은 다른 웹사이트 섹션을 방문할 때 다른 보색 조합으로 변경됩니다(모든 색상의 채도가 비슷하므로 브랜딩이 일관되게 유지됨). Swab World 웹사이트 Swab World 웹사이트의 보색 보색은 디자인에 사용하기 쉬운 원칙입니다. 단순하게 유지하려면 두 가지 보색을 선택하고 대조되는 요소(예: H2 및 본문 텍스트)에 추가하십시오. 또는 각 페이지에 각 색상의 여러 음영을 사용하십시오. 5. 타겟 청중을 염두에 두고 디자인하라 Cool Kids, Garoa, Swab The World의 웹사이트를 보면 각 웹사이트마다 고유한 "느낌"이 있음을 알 수 있습니다. 그 느낌은 웹 사이트 디자인을 청중에게 맞추는 데서 비롯됩니다. 개인화는 여기에서 궁극적인 목표입니다. 우리 대부분은 우리가 소속되고 대표되는 브랜드의 제품과 서비스를 구매하는 것을 좋아합니다. 실제로 조사에 따르면 소비자의 72% 가 "자신의 신념과 가치에 부합하는" 회사의 구매를 중요하게 여깁니다. 따라서 누군가가 귀하의 웹 사이트를 방문하여 자신의 가치, 목표 및 우선 순위가 반영된 것을 보면 귀하로부터 구매할 가능성이 더 높아집니다. 웹사이트 디자인을 청중에게 개인화하려면 다음을 고려하십시오. 타겟 시장, 구체적으로 어떤 이미지가 반향을 일으키나요? 청중에게 적합한 톤(예: 프로페셔널, 미니멀리즘, 경쾌한 등) 타겟 시장이 웹사이트를 방문하여 볼 수 있는 주제 웹 디자인을 통해 브랜드 포지셔닝을 전달하는 방법 청중이 반응하는 클릭 유도문안(CTA) (클릭률(CTR) 을 최적화하기 위해 어디에 배치해야 하는지 ) 웹사이트 자동화를 사용하여 사용자 프로필 및 브랜드와의 이전 상호 작용을 기반으로 개인 경험을 제공할 수 있는 경우 보너스 포인트. 대상 인구 통계에 서로 다른 것을 판매하는 경쟁업체나 브랜드에서 영감을 얻는 것이 도움이 될 수 있습니다. 6. 글꼴은 읽기 쉽고 접근 가능해야 합니다. 웹사이트에서 사용 하는 글꼴 에 따라 방문자가 귀하가 작성한 내용을 읽을 수 있는지 여부가 결정됩니다. 말할 것도 없이 그것들은 매우 중요합니다. 글꼴을 선택할 때 가장 먼저 고려해야 할 사항은 웹 안전성입니다. 웹 안전 글꼴 은 운영 체제 및 웹 브라우저에서 지원되므로 대부분의 장치에서 작동합니다. 접근성도 고려해야 합니다. 접근 가능한 글꼴 은 크고 작은 크기에서 명확하고 읽기 쉬워야 합니다. 예를 들어, 필기체 기반 글꼴은 접근하기가 쉽지 않은 반면 Times New Roman은 접근하기 쉽습니다. 또한 글꼴을 선택할 때 다른 웹사이트의 글꼴 동향을 살펴보십시오. 2021년 데이터 과학자 Michael Li는 1,000개 이상의 웹사이트 에서 글꼴을 분석했습니다 . 그는 다음과 같은 경향을 발견했습니다. 트래픽을 1000% 이상 증가시킨 방법을 알고 싶으십니까? WordPress 내부자 팁이 포함된 주간 뉴스레터를 받는 20,000명 이상의 다른 사람들과 함께하십시오! 지금 구독 85%의 글꼴이 셰리프를 사용하지 않습니다(신문 유형의 글자에 약간의 선이 추가됨). 상위 5개 글꼴에는 Sans Serif, Arial, Helvetica, Helvetica Neue 및 Roboto가 포함됩니다. H1 헤더에는 세리프가 없을 확률이 58%입니다(단락 텍스트의 경우 93%). 단락 글꼴의 가장 일반적인 두 가지 크기는 14픽셀과 16픽셀입니다. 이 정보를 수용하여 사람들이 웹사이트에서 찾는 글꼴 스타일을 선택할 수 있습니다. 또는 다른 작업을 선택할 수도 있습니다. Virgin은 두 번째 옵션을 선택한 브랜드입니다. Virgin은 아래 스크린샷에서 최소 5개의 글꼴을 사용했습니다. 이 글꼴은 페이지의 섹션을 구분하고 매력적으로 보이게 합니다. 버진 웹사이트 Virgin은 명확하고 읽기 쉽고 매력적인 글꼴을 사용합니다. 7. Fitt의 법칙과 Hick의 법칙을 따르십시오. 심리학자 Paul Fitts는 1954년에 Fitt의 법칙을 처음 개발했지만 2022년에는 여전히 웹 디자인과 매우 관련이 있습니다. Fitt의 법칙은 목표의 크기가 누군가가 도달하는 데 걸리는 시간에 영향을 미친다고 주장합니다. 웹 디자인 또는 UX(사용자 경험) 컨텍스트에서 이는 사람들이 더 큰 버튼을 클릭하는 데 시간이 덜 걸리고 더 작은 버튼을 클릭하는 데 더 많은 시간이 걸린다는 것을 의미합니다. 따라서 Fitt의 법칙을 활용하려면 클릭하기 쉽도록 CTA 버튼을 매우 크고 눈에 띄게 만들어야 합니다. 여기서 "쉬움"이 중요합니다. 영국 심리학자 윌리엄 에드먼드 힉과 미국 심리학자 레이 하이먼이 개발한 힉스의 법칙에 따르면 사람들은 무언가를 결정할 때마다 피로해진다. 따라서 웹 사이트 방문자에게 더 많은 결정을 내리도록 요청할수록 그들이 너무 피곤하여 수행할 수 없게 될 가능성이 커집니다. 8. 핵심 정보를 강조하기 위해 불변성을 사용하라 무언가가 "불변"일 때 매우 유사한 여러 옵션 중에서 고유한 옵션으로 눈에 띕니다. 불변성의 가장 분명한 예는 Box의 이와 같은 가격 책정 페이지의 계획 강조 표시입니다. Box 웹사이트 가격 페이지 Box 가격 페이지의 불변성 그러나 그것이 불변성을 사용할 수 있는 유일한 방법은 아닙니다. 불변성은 주요 정보를 강조 표시하고 페이지의 중요한 부분으로 사람들을 끌어들이기 위해 페이지에 시각적 계층 구조를 설정하는 데 도움이 될 수 있습니다. 예를 들어, Frans Hals Museum이 홈페이지에 시각적 계층 구조를 만들기 위해 불변성을 사용한 방법을 살펴보십시오. 프란스 할스 미술관 홈페이지 Frans Hals 박물관은 시각적 계층 구조를 사용합니다. 이 이미지의 계층 구조는 "환영" 사인, 이미지, "티켓 구매" 사인, "모든 전시회" 사인, 기타 콘텐츠입니다. 불변성을 사용하여 고유한 계층 구조를 만들려면 중요도에 따라 페이지 요소의 순위를 지정하십시오. 그런 다음 방문자의 눈이 원하는 순서대로 각 요소에 갈 때까지 각 요소의 크기, 색상, 배치를 조정합니다. Kinsta는 현장 비용에서 $200+/월을 절약할 수 있습니다. 현재 웹 호스트는 시간과 비용을 낭비할 수 있습니다. Kinsta에서는 사용 가능한 최고의 인프라와 도구에 투자하고 계층에 관계없이 모든 계획에 이 모든 것을 무료 로 포함합니다. 더 알아보기 9. CTA에서: 사람들이 클릭하고 싶어할 명확한 언어 사용 우리는 버튼을 크고 클릭하기 쉽게 만드는 것의 중요성에 대해 언급했지만 버튼을 만들 때 고려해야 할 유일한 것은 크기가 아닙니다. 클릭 가능한 버튼은 설명적이며 동시에 설득력이 있습니다. 방문자는 버튼이 무엇에 연결되는지 궁금해하고 거기에 가야 할 이유를 제공합니다. 이를 수행하는 한 가지 방법은 "여기를 클릭하여 블로그를 읽으십시오", "여기에서 마케팅 비밀을 찾으십시오" 또는 "여기에 2022년 보고서가 있습니다"와 같은 자세한 버튼 텍스트를 사용하는 것입니다. 또 다른 방법은 버튼을 시각적으로 흥미롭거나 독특하게 만드는 것입니다. 다운타임 및 WordPress 문제로 어려움을 겪고 계십니까? Kinsta는 시간을 절약하도록 설계된 호스팅 솔루션입니다! 우리의 기능을 확인하십시오 Rainforest Protector는 두 가지 접근 방식을 모두 취했습니다. Rainforest Protector를 사용하면 다양한 위치를 방문하여 아마존 열대우림을 탐색할 수 있습니다. 각 위치의 버튼에는 이미지와 "마을 방문"과 같은 작업이 포함됩니다. 10. F 패턴 또는 Z 패턴 활용 13년 동안 Nielsen Norman Group(NN Group) 의 연구원들은 시선 추적을 사용하여 500명 이상의 사람들이 콘텐츠에 참여하는 방식을 확인했습니다. 이것은 사람들이 가장 먼저 페이지를 스캔한 다음 왼쪽에서 오른쪽으로 읽는 F 패턴을 개발하게 했습니다. 이와 같이: 사람들이 웹사이트에서 따르는 F자형 패턴 사람들이 웹사이트에서 따르는 F자형 패턴 웹사이트 또는 대체 모델을 중심으로 콘텐츠를 구성하여 웹사이트에서 F 패턴을 활용할 수 있습니다. Facebook은 홈페이지에 Z자 패턴을 사용하는 것으로 유명합니다. 페이지를 방문하면 "Facebook" 로고, 그 다음 "로그인" 버튼, 왼쪽 이미지, 마지막으로 "계정 만들기" 버튼으로 눈이 이동합니다. 페이스북 홈페이지 Z 패턴 페이스북 홈페이지 Z 패턴 11. 좋은 웹사이트는 빠르고 모바일 친화적입니다. 2021년 4분기 기준 전 세계 웹사이트 트래픽의 54.4% 가 모바일 장치에서 발생했습니다. 따라서 웹사이트가 모바일 친화적이지 않은 경우 트래픽을 절반으로 줄일 수 있습니다. 속도는 또한 유기적 웹사이트 트래픽에 영향을 미칩니다. Google의 연구에 따르면 53% 의 사람들이 3초 이상 로드되면 웹사이트를 떠납니다. 웹사이트를 모바일 친화적으로 만들거나 빠르게 만드는 가장 쉬운 방법은 전문 디자이너가 만든 빠른 웹사이트 테마 를 선택하는 것입니다. 또는 웹사이트 디자인에 더 많이 참여하고 싶다면 반응형 웹사이트 를 맞춤 제작할 수 있습니다 . 그것이 1917년 영화의 디자이너들이 한 일입니다. 1917 의 웹사이트는 사람들이 영화에 몰입할 수 있도록 몰입형 경험을 제공합니다. 1차 세계 대전 참호에서 손가락을 사용하여 이동할 수 있으므로 모바일 장치용으로 특별히 설계되었습니다. 917의 웹 사이트는 모바일 장치용으로 설계되었습니다. 917의 웹 사이트는 모바일 장치용으로 설계되었습니다. 주의 깊게 관찰하면 1917의 웹 사이트도 F 패턴을 활용한다는 것을 알 수 있습니다. 12. 텍스트를 한 입 크기의 청크로 나누기 이것을 고려하십시오. "마인드 게임"을 검색하고 유망해 보이는 웹 페이지를 찾습니다. 그러나 그것을 클릭하면 읽기 어려운 큰 텍스트 덩어리에 압도됩니다. 많은 사람들과 마찬가지로 웹사이트를 클릭할 수도 있습니다(컨텐츠가 아무리 유망하더라도!). Missouri University of Science and Technology의 시선 추적 연구에 따르면 웹사이트 방문자는 텍스트를 읽는 데 평균 5.59초 를 소비합니다. 따라서 사람들이 그 시간 동안 당신의 텍스트를 소비할 수 없다면 당신이 그들을 적절하게 참여시킬 것 같지 않습니다. 텍스트를 작은 덩어리로 나누어 이 문제를 해결하십시오. 추가로: 짧은 문장 사용 구어체를 멀리하십시오 사용하는 산업별 단어에 대한 정의 제공 '보라색 산문'(불필요한 은유, 부사 및 형용사)을 피하십시오. 13. 그리드 사용 "그리드 사용"이라고 해서 웹사이트를 Excel 표처럼 보이게 만들어야 한다는 의미는 아닙니다. 대신 방문자가 콘텐츠를 빠르게 찾을 수 있도록 웹사이트를 특정 목적에 맞는 별개의 섹션으로 나누십시오. 이렇게 하기 위해 격자선을 사용할 필요가 없습니다. 대신 Atlason과 같이 색상, 음수 공간 및 음영으로 격자 공간을 구분하십시오. Atlason의 홈페이지는 그리드에서 새롭고 베스트 셀러 제품을 제공합니다. 방문자가 이러한 제품을 찾을 가능성이 높기 때문에 그리드를 통해 몇 초 만에 찾을 수 있습니다. Atlason 웹사이트 그리드 Atlason은 각 제품에 그리드를 사용합니다. 웹사이트에서 그리드를 사용하는 가장 쉬운 방법 중 하나는 그리드를 사용하는 WordPress 테마 를 선택하는 것입니다. 예로는 Gridframe, Masonry Grid 및 Shuttle Grid가 있습니다. 14. 균형을 기억하라 웹 디자인 의 맥락에서 "균형"은 디자인 요소가 서로 관련되어 있는 방식과 요소가 조화를 나타내는지 여부를 나타냅니다. 다음 웹 디자인 원칙 중 일부를 포함하여 웹사이트에서 균형을 만드는 방법에는 여러 가지가 있습니다. 대칭을 통해(양쪽, 방사형 또는 병진 대칭 포함) 보색 또는 대조 색상 사용 비슷한 모양과 크기의 요소 사용 반복 패턴 사용 Woven의 웹사이트에서 작동 중인 균형을 볼 수 있습니다. 이 웹사이트는 균형 잡힌 색상 팔레트, 흑백을 사용하여 텍스트 내의 대비를 만들고 대칭성을 사용하여 방문자의 관심을 콘텐츠에 집중시킵니다. 우븐 홈페이지 Woven의 웹 사이트는 대칭을 사용하여 눈을 아래로 끕니다. 15. 세부 사항에주의를 기울이십시오 게슈탈트 이론에 따르면 사람들은 개별 요소를 보기 전에 전체를 인식합니다. 또는 Kurt Koffka가 말했듯이 "전체는 부분과 독립적으로 존재합니다." 사람들은 일반적으로 심리학에 관한 게슈탈트 이론을 참조하지만 웹 디자인에도 적용됩니다. 디자인이 세련되고 완벽해 보이도록 웹사이트의 작은 세부 사항에 주의를 기울여야 합니다. 무언가를 디자인할 때 제목, 이미지 및 CTA와 같은 중요한 요소에 집중하고 다음과 같은 다른 요소는 잊어버리기 쉽습니다. 바닥글 및 머리글 아이콘 소셜 미디어 버튼 웹사이트를 WordPress로 얼마나 효과적으로 전환 했는지(해당되는 경우) 텍스트 간격 오타 및 문법 오류 브라우저 호환성 이미지 크기 "게시"를 누르기 전에 이러한 요소를 다시 확인하고 웹 사이트가 전문성을 전달하는지 확인하십시오. 사소한 결함을 간과할 수 있지만 방문자는 그렇지 않습니다.