반응 형 웹 디자인 [닫기]

Question

나는 독학 디자이너이며 요즘 IDF에서 배우고 있습니다. 반응 형 디자인에 대해 몇 가지 의심이 있습니다.

1. 디자이너로서 개발자에게 제공 할 화면을 디자인하는 동안 화면을 어떤 크기로 디자인해야합니까? 모바일, 노트북 (윈도우, 맥), 태블릿 등 모든 장치와 가능한 모든 해상도를 고려하고 있습니다.

2. 화면을 만드는 데 열 사용을 이해하는 데 유용한 리소스 또는 링크입니다.

3. 다양한 크기의 글꼴을 정의하는 방법은 무엇입니까? 모바일 화면에 머티리얼 디자인 가이드를 사용하고 있는데 웹은 어떻게하나요? 예를 들어 1366 * 768 화면의 단락에 16px를 사용하는 경우 1440, 1920, 3072 (MacBook Pro 16 ")의 글꼴 크기는 얼마나됩니까? 다양한 화면 크기에 대해 개발자에게 글꼴 크기를 알려주는 데 완전히 혼란 스럽습니다. .

반응 형 디자인을 이해하는 데 도움이되는 다른 중요한 사항이 있습니까?

Answer 1

1. 그것은 개발자와 그들이 사용하는 중단 점에 따라 다릅니다. 부트 스트랩으로 작업하는 경우 중단 점은 다음과 같습니다. // 초소형 장치 (세로 휴대폰, 576px 미만) // 부트 스트랩의 기본값이므로 미디어 쿼리 없음

// 소형 기기 (가로 전화, 576px 이상) @media (최소 너비 : 576px) {...}

// 중형 기기 (태블릿, 768px 이상) @media (최소 너비 : 768px) {...}

// 대형 기기 (데스크톱, 992px 이상) @media (최소 너비 : 992px) {...}

// 초대형 장치 (대형 데스크톱, 1200px 이상) @media (최소 너비 : 1200px) {...}

1. https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/

2. 개인적으로 타이포그래피를 디자인하는 동안 모듈 식 스케일을 사용합니다. https://www.modularscale.com/?18&px&1.5일반적으로 데스크톱 버전의 경우 좋은 본문 텍스트는 16-20px 크기입니다. 크기는 웹 사이트의 콘텐츠에 따라 다릅니다. 즉. 신문과 같은 글이 많은 경우 더 큰 크기를 고려할 것입니다. 대시 보드 / 데이터 기반 플랫폼이라면 더 작은 타이포그래피를 고려할 것입니다.