19 가지 정말 유용한 반응 형 웹 디자인 튜토리얼

반응 형 웹 디자인은 더 이상 선택 사항이 아닙니다. 요즘에는 사이트가 반응 형이어야합니다. 고맙게도 RWD는 설계를 만들고 테스트하고 최상의 결과물을 만들 수 있도록 도와주는 훌륭한 도구가 너무 많기 때문에 구현하기가 그 어느 때보 다 쉬워졌습니다. 사용자 경험 .

다음은 웹 사이트가 모든 기기에서 잘 작동하고 멋지게 보이도록 안내 할 최고의 리소스를 모아 놓은 것입니다. 좀 더 유용한 리소스를 원하십니까? 최고의 가이드 웹 사이트 빌더웹 호스팅 서비스가 여기에 있습니다. 그리고 파일을 안전하게 저장하는 데 관심이 있다면 다음과 같은 뛰어난 기능이 필요합니다. 클라우드 스토리지 옵션.



01. 반응 적으로 생각하는 방법

반응 형 웹 디자인 튜토리얼 : 반응 형으로 생각을 시작하는 방법



손에 그리는 것
반응하는 마음의 상태에 들어가십시오(이미지 출처 : FreeCodeCamp)

FreeCodeCamp에 대한이 게시물 , Kevin Powell은 반응 형 웹 디자인이 더 이상 트렌드가 아니라는 점을 강조합니다. 사이트가 구축 될 것으로 예상되는 방식이며, 이는 처음부터 반응 적으로 생각하는 것을 의미합니다. 여기에서 그는 완전히 반응하는 3 페이지 웹 사이트를 구축하면서 반응 형 마음의 틀에 들어가는 방법을 보여줍니다.

02. 9 가지 반응 형 타이포그래피 팁

반응 형 웹 디자인 튜토리얼 : 반응 형 타이포그래피 팁 9 가지



전문가로부터 반응 형 유형 팁 받기(이미지 출처 : Adam Banks)

당연히 반응 형 웹 디자인에는 반응 형 타이포그래피가 필요합니다. 그러나 그것이 의미하는 바는 무엇이며 어떻게 구현합니까? 우리는 7 명의 주요 웹 디자이너에게 물었습니다. 모든 뷰포트에서 우아하고 읽기 쉬운 텍스트를 만드는 방법에 대한 팁입니다.

03. 반응 형 웹 타이포그래피의 규칙

반응 형 웹 타이포그래피의 규칙

다음 팁에 따라 반응 형 웹 타이포그래피를 올바르게 만드세요.

반응 형 웹 타이포그래피는 어렵습니다. 디자인과 기술 노하우가 모두 필요합니다. 그러나 그것이 까다로울 수 있지만, 타이포그래피는 웹 디자인의 초석이기 때문에 오해하는 것은 선택 사항이 아닙니다. 따르다 이러한 디자인 원칙과 실용적인 솔루션 그것을 바로 잡으십시오.



04. em 기반 사이징으로 반응 형 사이트 디자인

em 기반 크기 조정으로 반응 형 사이트 디자인

글꼴 크기가 변경 되어도 디자인이 깨지지 않도록 페이지를 만드세요.

글꼴 크기 조정에 em 단위를 사용하면 글꼴 크기가 변경 될 때 자동으로 응답하는 페이지의 구성 요소를 디자인 할 수 있습니다. 그런 다음 반응 형 글꼴 크기에 대한 영리한 트릭을 사용하여 브라우저의 뷰포트 너비에 따라 동적으로 조정되는 전체 페이지를 생성 할 수 있습니다. 이 튜토리얼을 따르십시오 ems의 '상대적'동작을 활용하여 확장 가능하고 반응이 빠른 디자인을 만드는 방법을 배우십시오.

05. 우선 순위 가이드 : 와이어 프레임에 대한 콘텐츠 우선 대안

우선 순위 가이드 : 와이어 프레임에 대한 콘텐츠 우선 대안

와이어 프레임이 아닌 우선 순위 가이드를 사용해야하는 이유 알아보기

와이어 프레임은 웹 사이트, 앱 및 기타 디지털 인터페이스를 디자인하는 데 가장 널리 사용되는 도구 일 수 있지만, 특히 반응 형 디자인과 관련하여 단점이없는 것은 아닙니다. 여기 Heleen van Nues와 Lennart Overkamp가 선호하는 와이어 프레임 대안을 소개합니다. 우선 순위 가이드 , 레이아웃 사양없이 위에서 아래로 계층별로 정렬 된 모바일 화면의 콘텐츠 및 요소를 포함합니다.

06. 반응 형 웹 디자인을위한 전문가 가이드

프로

이 가이드를 사용하여 모든 장치를위한 더 나은 사이트 구축

작성자 저스틴 에이버리 , Responsive Design Weekly 뉴스 레터 큐레이터, 넷 매거진의이 가이드 웹 전문가를 기본 단계부터 고급 반응 형 웹 디자인 기술까지 안내합니다.

07. 반응 형 및 장치에 구애받지 않는 양식을 디자인하는 방법

다양한 장치에 적응하는 반응 형

어떤 장치에서든 양식이 작동하는지 확인

양식은 모든 디지털 제품 디자인에서 가장 중요한 요소 중 하나이며, 가입 절차가 필요하든 멀티 뷰 스테퍼가 필요하든 데스크톱뿐만 아니라 모바일 장치에서도 효과적으로 작동하도록 디자인해야합니다. 방법은 다음과 같습니다. , Flexbox 사용 방법에 대한 유용한 팁을 제공합니다.

08. CSS 그리드로 반응 형 레이아웃 만들기

CSS 그리드 웹 사이트를 만드는 디자이너

모든 뷰포트에 적합한 멋진 포트폴리오 사이트 구축

CSS 그리드 레이아웃은 매일 브라우저 지원에서 증가하고 있으며 Flexbox 나 플로트를 대체하는 것은 아니지만 이들과 함께 사용하면 새롭고 흥미로운 반응 형 레이아웃을 만드는 데 좋은 방법입니다. 이 단계별 가이드를 따르십시오. Grid를 사용하여 반응 형 포트폴리오 사이트를 구축하는 것입니다.

09. 웹 디자이너를위한 Flexbox 가이드

기본 축이 수평임을 나타내는 화살표가있는 1 2 3 4 5로 표시된 Flexbox 열

Flexbox 시작하기

Flexbox를 사용하기 시작하셨습니까? 이 튜토리얼에서 Wes Bos는 종합 가이드 이 강력한 도구를 이해하는 데 필요한 모든 것을 확실히 이해할 수있는 핵심 개념에 대해 설명합니다.

10. Codrops Flexbox 참조

Codrops 스크린 샷에 따르면

Sara Soueidan의 완전한 가이드

Flexbox에 대한 완전한 가이드 세부 사항을 꼼꼼히 살펴 보지 않고도 쉽게 따라 할 수있는 방식으로 개념을 설명하는 능력으로 유명한 작가 Sara Soueidan이 작성했습니다. Codrops 가이드는 정기적으로 업데이트되므로 필요할 때 돌아갈 수있는 훌륭한 리소스입니다.

11. 스택 : 스케치 용 Flexbox

중간 기사 스크린 샷에 따르면

Sketch 내에서 Flexbox 기능 얻기

자동 레이아웃 플러그인의 일부인 스택은 CSS를 사용하지 않고 Sketch 내에서 Flexbox 기술을 사용할 수있는 방법을 제공합니다. 이 기사 쉽게 반응하는 디자인을 위해이 강력한 기술을 사용하는 방법을 설명합니다.

12. 기술 RWD의 집중 과정

기술 반응 형 웹 디자인 스크린 샷의 집중 과정

반응 형 웹 디자인의 기본 사항 파악

Treehouse 블로그에 글을 쓴 Jerry Cao는 많은 유용한 정보를 비교적 짧고 읽기 쉬운 기사로 압축했습니다.

13. Susy 및 Breakpoint로 유연한 레이아웃 만들기

각 비율에 맞는 반응 형 웹 사이트 레이아웃을 보여주는 장치 화면

반응 형 수학을 처리하기위한 Sass 확장

프레임 워크를 사용하여 반응 형 사이트를 구축하지 않으려면 이러한 Sass 확장 각각 고유 한 장점이있는 좋은 대안입니다. 그들은 당신이 디자인에 집중할 수 있도록 반응 형 수학을 처리 할 것입니다.

14. Adobe XD에서 반응 형 가이드를 만드는 방법

Adobe XD로 제작되는 반응 형 가이드

Adobe Experience Design (XD)은 UX 및 프로토 타이핑 도구입니다.

시도해보고 싶다면 Adobe Experience Design (XD) , 여기에 좋은 튜토리얼 시작합니다. 프로세스의 모든 클릭을 안내하는 비디오 데모가 포함되어 있습니다.

15. BBC 스포츠의 CSS

BBC Sport 웹 사이트 스크린 샷

대규모 반응 형 사이트를위한 경량 CSS

이것은 튜토리얼 자체는 아니지만 여기에서 많은 것을 배울 수 있습니다. 이 게시물에서 두 부분으로 구성된 시리즈 중 첫 번째 인 프런트 엔드 개발자 Shaun Bent가 BBC Sport에서 CSS를 수행하는 방법에 대해 자세히 설명합니다. 그들은이 방대한 사이트의 CSS 기반을 9kb 이하로 유지할 수 있었으며, 그것이 어떻게 이루어 졌는지 보는 것은 매혹적입니다.

기사를 시작하는 CSS 트릭 스크린 샷

Chris Coyier의 끈적한 바닥 글 방법

고정 바닥 글 ... 충분히 간단해야합니다. 불행히도. 바닥 글을 모든 장치의 올바른 위치에 배치하는 것보다 까다로울 수 있습니다. 다행히 Chris Coyier는 다섯 가지 트릭 그것은 당신이 그것을 사용하여 실현하는 데 도움이 될 것입니다 calc () , Flexbox, 음수 여백 및 그리드.

17. 입력에 적응

다양한 화면 크기에서 편안하고 아늑하며 컴팩트 한 텍스트 디자인을 보여주는 표

반응 형 사이트가 모든 종류의 장치에서 입력을받을 수 있는지 확인

반응 형 디자인은 페이지가 모든 기기에서 제대로 표시되도록하는 것이 아니라 제대로 작동하도록 만들어야합니다. 즉, 데스크톱에는 터치 스크린이 있고 휴대 전화에는 키보드가있는 세상에서 입력을 잘 받아 들여야합니다. 이 기사 Cloud Four의 Jason Grigsby가 몇 가지 건전한 조언을 제공합니다.

18. 모범 사례는 모바일 웹 성능을 저하시키고 있습니다.

기사 읽기 스크린 샷

성능 고려 사항은 모바일에서도 작동해야합니다.

고려하지 않고 적용하면 데스크톱 시대에 고안된 특정 모범 사례는 모바일 웹 성능에 해로운 영향을 미칠 수 있습니다. 이 기사 사이트가 모바일에서 잘 작동하도록 만드는 방법에 대해 더 깊이 생각하게 만들 것입니다.

19. 컨테이너 쿼리로 반응 형 웹 앱을 만드는 방법

웹 앱 모형 크기 조정을 보여주는 다양한 차원의 화면

컨테이너 쿼리를 사용하여 미디어를 확장하는 방법 알아보기

다양한 차원과 해상도에서 구성 요소, 상태 및 상호 작용을 통해 아름답고 복잡한 웹 앱을 변환하는 방법을 알아보십시오. 컨테이너 쿼리 사용 .

관련 기사: