반응형 웹 디자인 모범 사례 및 팁

Google이 모바일 친화적인 사이트를 계속 우선시함에 따라 귀하의 비즈니스에 반응형 웹사이트를 보유하는 것이 점점 더 중요해지고 있습니다. 웹사이트가 반응형이면 모든 기기(모바일, 태블릿, 데스크톱 등)에서 멋지게 보입니다.

기존 사이트를 재정비하는 것이 어려워 보일 수 있지만 반응형 웹사이트 디자인은 어려울 필요가 없습니다. 다음은 쉽고 간단하게 훌륭하고 유용한 웹 사이트 제품을 제작하는 데 도움이 되는 몇 가지 유용한 팁과 모범 사례입니다.

스타일 정의

색상 팔레트 만들기

미리 정의된 브랜드 색상 팔레트로 작업하든 고유한 색상 팔레트를 만들든 잘 정의된 시각적 계층 구조를 설정할 수 있도록 대비되는 색상을 충분히 포함해야 합니다. 다양한 중간 색상 음영을 추가하면 디자인 내에서 많은 유연성을 얻을 수 있습니다.

모바일을 먼저 생각하세요

웹 요소가 먼저 작은 모바일 장치에서 어떻게 보이는지 생각해 보고 더 큰 표시 영역 크기에 적용합니다. 예를 들어 버튼이 손가락을 누를 수 있을 만큼 충분히 크고 클릭 가능한 다른 요소에서 충분히 멀리 떨어져 있습니까?

이전이 아닌 초기 레이아웃 이후에 스타일 가이드를 만듭니다.

어떤 사람들은 스타일 가이드를 만들고 충실도가 높은 프로토타입이나 목업을 시작하기 전에 웹 요소 스타일을 정의하는 것을 좋아합니다. 그러나 요소가 페이지에 배치되고 서로 상대적으로 표시되면 페이지의 전체 디자인이 손실될 수 있습니다. 몇 가지 모형을 만들어 시작하고 스타일을 설정한 다음 필요한 경우 나머지 페이지를 구성합니다.

일관성이 지루함을 의미할 필요는 없습니다.

사용성 휴리스틱은 중요하지만 웹에 있는 수십억 개의 다른 웹사이트와 차별화됩니다. 다른 것을 시도하는 것을 두려워하지 말고 더 기억에 남고 웹사이트의 브랜드가 군중에서 눈에 띄도록 하십시오. 귀하의 웹사이트는 창의적이고 매우 유용할 수 있습니다. 훌륭한 UI 디자이너나 디지털 아트 디렉터는 이 두 요소의 균형을 맞출 수 있어야 합니다.

스타일을 지정하고 표준화할 수 있는 몇 가지 요소는 다음과 같습니다.

• 헤드라인 레벨: H1, H2, H3…
• 기본 또는 영웅 이미지
• 기본 탐색
• 보조 탐색
• 본문
• 번호 매기기 및 글머리 기호 목록
• 콜아웃 또는 배지
• 콘텐츠 이미지 처리
• 인용 부호 스타일
• 위젯(로테이터, 소셜 임베딩, 캘린더 등)
• 대형 클릭 유도문안 버튼
• 보조 버튼 또는 텍스트 링크
• 양식 요소
• 각주 및 법적 마우스 유형
• 소셜 공유

유형

블록 복사

문자 간격(자간), 여백 및 줄 간격(행간)을 사용하여 계층 구조를 재정의할 수 있습니다. 간격이 좁을수록 텍스트가 더 무거워지고 밀실 공포증이 나타납니다.

데스크탑 화면의 왼쪽에서 오른쪽으로 이어지는 긴 텍스트 블록은 눈에 매우 어려울 수 있습니다. 가능하면 더 좁은 복사 블록을 사용하십시오. 그러나 너무 많은 간격은 건조하고 흩어진 느낌을 유발할 수 있습니다.

그것을 깨는 것을 두려워하지 마십시오.

콘텐츠가 많은 웹 페이지가 있는 경우 인용문, 설명선, 이미지, 스타일이 지정된 목록, 표 등으로 콘텐츠를 약간 나누십시오. 또한 아코디언, 드롭다운 및 회전 목마를 통합하여 페이지를 흥미롭고 유익하게 유지할 수 있습니다. .

예, 사람들은 아래로 스크롤합니다

웹페이지의 모든 것이 디지털 접힌 부분 위에 나타나야 한다고 생각하는 구식의 함정에 빠지지 마십시오. 가장 중요하거나 매력적인 콘텐츠를 페이지 상단 근처에 두어 사용자를 더 아래로 안내합니다. 창의적이면서도 설명이 포함된 헤드라인, 매력적인 도입 문장 또는 강력한 이미지가 될 수 있습니다.

관련된

2020년의 주요 디자인 트렌드

사이징 업 유형

일반적으로 반응형 웹사이트의 경우 14~18픽셀의 글꼴 크기를 유지합니다. 일반적으로 큰 사본 블록에는 단순한 산 또는 세리프 글꼴을 사용하고 적당히 대조되는 서체 색상으로 밝은 배경에 유지하십시오. 주요 헤드라인은 더 클 수 있지만 모바일 크기의 중단점이 발생한 후에는 약간 더 작게 스타일이 지정되어야 할 수도 있습니다.

유형 색상

활자 색상의 비결은 배경과의 대비가 충분하여 쉽게 볼 수 있어야 한다는 것입니다. 그러나 많은 디자이너가 모르는 것은 활자가 대비가 너무 커서 눈에 거슬려서 진동하는 것처럼 보일 수 있다는 것입니다. 볼 때. 더 작은 텍스트 블록에 대해서만 더 어두운 배경에 더 밝은 유형을 사용하십시오.

유형 무게

더 무거운 글꼴 스타일은 더 작은 크기에서 읽기 어려울 수 있으며 더 큰 크기에서는 페이지가 어둡고 무겁게 느껴질 수 있습니다. 얇고 가벼운 글꼴 스타일은 망막 및 망막 유형 화면에서 멋지게 보이지만 많은 표준 해상도 화면에서는 희미하게 보일 수 있습니다.

항해

햄버거!

Navicon은 세 개의 스태킹 라인이 있는 작은 샌드위치나 햄버거처럼 보이는 아이콘입니다. 일반 사용자 인구 통계가 온라인 기술에 익숙하지 않다고 생각되면 항상 Navicon 위나 옆에 "메뉴"라는 단어를 포함하십시오. 현재까지의 사용자 연구에 따르면 메뉴 또는 탐색 이라는 단어를 Navicon 옆이나 위에 포함하면 사용자가 사이트를 탐색하는 경향이 더 커집니다.

긴 스크롤 페이지 하단에 '맨 위로 돌아가기' 버튼 포함

연구에 따르면 많은 모바일 장치 사용자가 모바일 웹 브라우저 내에서 웹 페이지 상단으로 쉽게 이동하는 방법을 모릅니다. 이 문제를 해결하려면 웹페이지 하단에 '맨 위로 돌아가기' 버튼을 제공하세요. 이렇게 하면 바닥글에 미러링되지 않은 경우 사용자가 사이트 탐색에 쉽게 액세스할 수 있습니다.

또 다른 옵션은 고정 탐색을 만드는 것입니다. 이것은 페이지를 얼마나 아래로 스크롤하든 항상 화면 상단에 고정되는 상단 사이트 탐색 모음입니다. 이 경로를 선택하는 경우 고정 탐색 의 높이를 100px 이하로 설정해야 합니다. 그렇지 않으면 더 작은 표시 영역 크기에서 페이지 콘텐츠를 위한 공간이 부족할 수 있습니다.

디자인 용어집:

부르다
페이지의 나머지 부분보다 더 강하게 취급되고 주의를 끌기 위한 짧은 텍스트입니다.

블록 복사
그룹화된 단락 또는 일련의 텍스트 단락.

(디지털) 접기
스크롤 없이 볼 수 있는 웹 페이지 부분을 나타내기 위해 웹 사이트 디자인에서 사용됩니다(" 스크롤 위 "와 함께). 화면 크기가 크게 다르기 때문에 접기 를 정의하는 픽셀 수에 대한 정의가 없습니다.

가는 장식 선
특정 서체에서 글자의 획을 마무리하는 약간의 투영.

산세 리프
sans – serif , sans serif , gothic, san serif 또는 단순히 sans 서체는 획 끝에 " 세리프 "라는 작은 돌출 기능이 없는 글꼴입니다. 이 용어는 "없는"을 의미하는 프랑스어 sans 와 "선"을 의미하는 네덜란드어 schreef에서 " serif "에서 유래했습니다.

유형(서체) 무게
획의 상대적인 두께로 인해 발생하는 활자 글꼴 문자의 상대적인 어두움으로, 밝게, 굵게, 매우 굵게 등으로 표현됩니다.

사용자
무언가, 특히 컴퓨터, 장치 또는 기타 기계를 사용하거나 조작하는 사람.

뷰포트
정보를 보기 위한 디스플레이 화면의 프레임 영역.

여백
페이지 레이아웃, 일러스트레이션 및 조각에서 공백은 종종 음의 공간이라고 합니다. 여백, 여백, 열 사이의 여백, 여백, 활자 선, 그래픽, 그림 또는 그리거나 묘사된 개체와 같이 표시되지 않은 상태로 남아 있는 페이지 부분입니다.