웹 디자인을 위한 6가지 중요 가이드.
UX 및 UI 디자인에서 더 나은 웹사이트를 디자인하기 위한 규칙.
웹 디자인에는 모든 새로운 디자이너가 따를 수 있는 디자인의 기초가 되는 고유한 지침 집합이 있습니다. 멋진 웹 디자인을 만들 수 있습니다.
모든 분야에는 그 분야를 처음 접하는 사람이 다른 사람들이 이전에 하고 있는 것과 유사한 작업을 수행하기 위해 따를 수 있는 고유한 지침 세트가 있습니다. 말했듯이 웹 디자인에는 새로운 디자이너가 멋진 웹 디자인을 만들기 위해 따를 수 있는 디자인의 기초가 되는 자체 지침 세트가 있습니다.
#1 Simplicity
미니멀리스트 디자인 접근 방식이 웹 사이트 디자인의 단순함을 항상 의미하지는 않습니다. 디자인, 콘텐츠, 코드에서 불필요한 부분을 제거하기만 하면 간단한 사이트를 만들 수 있습니다.
단순한 웹사이트에서는 불필요한 정보를 찾을 수 없습니다. 이는 두 가지 방법으로 탐색을 지원합니다. 사이트에는 종종 페이지와 부분이 더 적고 사이트 스타일은 일반적으로 덜 혼잡하여 탐색 구성 요소를 더 쉽게 식별할 수 있습니다.
많은 초기 웹 사이트 디자인에는 실제로 필요하지 않은 미적 구성 요소가 많이 포함되어 있습니다. 디자인에서 모든 스타일 요소를 제거할 필요는 없지만 그렇게 하면 사이트가 더 깔끔하고 세련되게 보일 수 있습니다.
이미지 테두리, 그림자, 머리글이나 바닥글의 추가 사진, 특정 페이지의 추가 설명 사진은 모두 삭제되거나 축소될 수 있는 요소입니다.
웹 디자인의 단순성의 예
Apple 회사는 단순한 제품 디자인으로 매우 유명하며 Apple 웹 사이트에서도 볼 수 있습니다. Apple은 사용자가 iPhone 13 Pro와 같이 제품에 집중할 수 있도록 공백과 텍스트를 사용합니다.
요소를 적게 사용하거나 중요한 요소만 사용하는 심플한 디자인의 베스트 프랙티스 중 하나입니다.
#2 Visual Hierarchy
의도적으로 사용자 흐름과 의사 결정에 영향을 미치는 사이트와 단순히 "멋져 보이는" 사이트의 차이점은 성공적인 웹 디자인을 뒷받침하는 가장 중요한 아이디어 중 하나인 시각적 계층 구조입니다. 인간의 눈이 보는 것을 지각하는 순서를 지각적 질서라고 합니다.
가장 기본적인 형태의 시각적 계층 구조는 가장 효과적으로 사용자의 관심을 끌고 관심을 끄는 기능을 설명합니다. 그러나 명확한 계층 구조를 만드는 일률적인 접근 방식은 없으며, 경쟁에서 우위를 유지하려면 경쟁 디자이너가 완전히 다른 접근 방식을 사용하거나 새로운 접근 방식을 개발해야 합니다.
웹 디자인의 시각적 계층 구조의 예
FJaka는 크리에이티브 스튜디오를 위한 웹사이트로, 방문 페이지는 텍스트와 이미지의 명확한 시각적 계층 구조를 보여줍니다. 텍스트는 h1에서 h2까지 배열되며, 이미지는 오른쪽에 정렬됩니다.. 로고는 브랜드 위에 정렬됩니다.
#3 Navigability
방문자가 웹사이트의 홈페이지에 처음 나타났을 때 "나는 올바른 위치에 있습니다"라고 스스로에게 말할 수 있어야 합니다.
간결한 레이아웃, 짧고 매력적인 언어, 잘 선택된 키워드를 사용하십시오. 사이트 또는 회사 이름과 서비스 또는 상품에 대한 설명을 포함하는 기준선을 높이십시오. 사용자가 사이트에 머물도록 설득하려면 헤더에 두세 가지 근거를 활용하고 매력적인 가치 제안을 강조하세요. 이해하기 쉽고 가볍고 간결한 사설을 편집하고 독자가 빠르게 스캔할 수 있도록 제목, 부제 및 글머리 기호로 구성합니다. 타겟 고객의 코드를 사용하여 웹사이트에 더 연결되어 있다고 느끼도록 하세요.
웹 디자인에서 탐색 가능성의 예
Schillings는 사용자에게 일종의 법률 서비스를 제공하는 웹 사이트이며 방문 페이지는 웹 사이트의 헤더에 깔끔한 탐색 옵션을 보여줍니다. 사용자는 웹 사이트의 정확한 페이지로 이동합니다.
Starbucks는 바닥글에서 웹 사이트에 대한 완전한 탐색을 제공합니다.. 청중이 좋아하는 경우 이러한 유형의 탐색 스타일을 사용할 수도 있습니다.
#4 Consistency
웹사이트의 모양은 브랜딩, 글꼴, 색상, 공간 및 레이아웃으로 정의됩니다. 일정해야 합니다. 더 중요한 항목이 덜 중요한 항목보다 크게 표시되는 명확한 시각적 계층 구조를 설정하고 싶을 것입니다. 제품 전체에서 일관된 색 구성표를 유지합니다. 모든 동일한 구성 요소는 패딩과 여백(버튼, 양식 등)이 동일해야 합니다. 웹사이트의 모든 것은 그리드로 구성되어야 하며 그 그리드에서 벗어나는 것이 없어야 합니다.
웹 디자인의 일관성의 예
또한 Starbucks는 전체 웹사이트에서 브랜드 색상을 나타내는 일관된 녹색을 사용하고, Starbucks는 다양한 녹색 음영을 사용하여 아름다운 비주얼, 호버 및 버튼을 만들어 디자인을 일관되게 만듭니다.
#5 Responsivity
반응형 웹 디자인은 간단히 말해서 사용자 경험을 향상시킵니다. 적응형 웹 디자인 개념을 사용하여 웹사이트를 개발할 때 염두에 두어야 할 가장 중요한 사항 중 하나는 모바일 경험입니다. 반응형 사이트 디자인은 사용자 유지율을 높이는 동시에 비용을 절감합니다. 이는 차례로 세션 길이를 늘리고 이탈률을 낮추는 데 도움이 됩니다. 이 두 요소 모두 검색 엔진 결과에 영향을 미칩니다. 반응형 웹사이트는 최신 장치를 수용하기 위해 업데이트해야 하는 웹사이트가 하나뿐이므로 관리하기 쉽습니다.
웹 디자인에서의 반응성의 예
RipePlanet 웹사이트는 웹사이트를 다양한 화면 크기에 반응하게 만들고 모든 화면과 비슷하게 보이게 하는 방법을 보여줍니다. 반응형 디자인을 만들어 모바일/태블릿 사용자에게 더 나은 웹 경험을 제공하여 더 나은 전환, 읽기 등의 결과를 얻을 수 있습니다. .
#6 Accessibility
웹 디자이너는 모든 사용자가 자신의 사이트에 액세스할 수 있도록 WCAG 2.1의 모든 최신 원칙과 모범 사례를 따라야 합니다. 기술적인 언어로 가득 찬 길고 복잡한 텍스트입니다. 앞으로 두 달 동안 전체 기사를 읽는 대신 다음 접근성 개념을 염두에 두고 웹사이트를 구축하세요. 그런 다음 개발자가 코드를 감사하여 접근성에 민감한 디자인이 완전히 호환되는지 확인하십시오.
웹 디자인에서 접근성의 예
Apple은 웹 사이트의 접근성을 확인합니다. 가장 좋은 예 중 하나는 상단에 다른 이미지를 사용하여 다른 제품을 나타내는 것입니다. Apple은 이를 통해 디자인을 텍스트보다 시각적으로 만들고 사용자로서 속도를 향상시킵니다. 훨씬 더 빨리 영상을 인식합니다.
결론
따라서 이것들은 예제가 있는 지침 중 일부입니다. 이전에 웹 디자인의 다양한 측면을 간략하게 설명하는 Designing for Web 기사에서 논의한 적이 있습니다.
6 Key Guidelines for Web Designing.
Rules for Designing Better Website in UX and UI Design.
uxplanet.org
출처 : Medium
'디자인 공부하기 > 해외 아티클' 카테고리의 다른 글
| Medium | 밀레니얼 세대를 위한 기부 앱 디자인 - 1부 (0) | 2022.10.26 |
|---|---|
| Medium | 에자일 선언문은 구식입니다! 우리는 제품 선언문이 필요합니다! (0) | 2022.10.18 |
| Medium | 위험 신호: Salesforce 프로젝트가 UX 재앙으로 향하고 있습니다. (0) | 2022.04.19 |
| Medium | 방금 370개의 UX 애플리케이션을 검토했습니다. (0) | 2022.03.23 |