반응 형 웹 디자인을위한 50 가지 환상적인 도구

작가: Monica Porter
창조 날짜: 17 3 월 2021
업데이트 날짜: 17 할 수있다 2024
Anonim
#4 반응형 웹디자인을 위한 최적화된 그리드 만들기(UI 디자인 입문이라면 꼭 봐야할 영상) - 스케치 강좌
동영상: #4 반응형 웹디자인을 위한 최적화된 그리드 만들기(UI 디자인 입문이라면 꼭 봐야할 영상) - 스케치 강좌

콘텐츠

Ethan Marcotte가 그의 기사 "반응 형 웹 디자인"과 베스트셀러 책에서 소개 / 작성한 것처럼 사이트를 반응 형으로 만들려면 세 가지 요소가 필요합니다.

  1. 유연하고 유동적 인 그리드
  2. 반응 형 이미지
  3. 미디어 쿼리

반응 형 웹 디자인과 관련된 동기, 개념 및 기술을 다루는 다른 훌륭한 기사가 많이 있으므로 책임감있게 반응하는 데 도움이되는 몇 가지 주요 도구에 대해이 기사의 초점을 유지할 것입니다.

시작을위한 도구

사이트 구축을 시작하기 전에 페이지의 요소가 표시되는 다양한 장치의 다양한 브라우저 크기에 맞게 조정되는 방법을 스케치하고 주로 생각할 때 발생하는 연결 끊김을 방지하는 것이 가장 좋습니다. 데스크탑 디자인과 나머지 반응 형 반복은 나중에 고려할 사항입니다 (특히 Stephanie (Sullivan) Rewis의 의견 참조).

01. 반응 형 웹 디자인 스케치 시트

Jeremy P Alford의이 반응 형 스케치 시트 세트는 페이지 섹션이 다른 해상도에서 어떻게 이동하는지 매핑을 시작하기위한 좋은 시작점입니다.


02. 반응 형 디자인 스케치북

모든 스케치를 한곳에 보관하고 싶다면 App Sketchbook 회사에서 제공하는 50 개의 반응 형 스케치 시트로 구성된이 와이어 바인딩 된 책을 고려할 수 있습니다.

03. 반응 형 와이어 프레임

반응 형 웹 사이트를 구축하는 데있어 어려움 중 하나는 와이어 프레임을 사용하여 반응 형 디자인이 작동하는 방식을 보여주는 것입니다. Adobe의 James Mellers는 복잡한 레이아웃의 반응 형 와이어 프레이밍이 작동하는 방법을 보여주기 위해이 실험 도구를 통합했습니다.


04. 다중 장치 레이아웃 패턴

반응 형 디자인을 계획 할 때 다른 사람들이 어떻게 접근했는지 확인하는 것이 유용하므로, 예제 링크와 함께 인기있는 패턴을 나열하는 Luke Wroblewski의 다중 장치 레이아웃 패턴을 시작하는 것이 좋습니다.

05. 스타일 타일

Samanatha Warren의 Style Tiles는 반응 형 시대의 디자인을위한 새로운 기술을 제안합니다. 고정 너비 디자인 모형이 아니라 세부적인 세부 사항없이 일반적인 디자인 접근 방식을 보여주는 견본 또는 무드 보드와 같습니다.

유연하고 유동적 인 그리드를위한 도구

앞서 언급했듯이 반응 형 디자인에 필요한 첫 번째 구성 요소는 유연하고 유동적 인 그리드입니다.다음은 이미 사전 구축되어 있습니다. 다운로드하기 만하면 반응이 빠른 사이트로 빠르게 이동할 수 있습니다.


06. 골든 그리드 시스템

Less Framework를 개발 한 Joni Korpi는 최근 반응 형 디자인을위한이 새로운 버전의 안정적인 그리드 시스템을 출시했습니다. 16 개, 8 개, 4 개 열로 쉽게 조정되는 "폴딩"으로 간주되는 Golden Grid System은 테스트를 위해 페이지에 그리드를 노출하는 작은 브라우저 오버레이도 제공합니다.

07. 폴디 960

Paravel, Inc.의 재능있는 신사들은 반응 형 프로젝트의 기반으로 사용하는 수정 된 960.gs 그리드를 출시했습니다.

08. SimpleGrid

Conor Muirhead의 SimpleGrid는 반응 형 기능이 내장되어 구축되었으므로 반응 형 웹 사이트 프로젝트를 쉽게 시작하고 실행할 수 있습니다.

09. 1140px CSS 그리드

또 다른 훌륭한 반응 형 그리드 시스템은 멜버른 디자이너 Andy Taylor의 1140px CSS Grid로, 넓은 데스크톱 해상도에서 모바일로 이동합니다.

10. 칼럼 CSS 그리드 시스템

Pulp + Pixels (크리에이티브 디렉터 Nick Gorsline)가 만든 Columnal 그리드 시스템은 1140px 그리드 시스템을 기반으로하지만 스케치 시트와 와이어 프레임 템플릿이있는 디자인 키트, CSS 디버깅 스타일과 같은 몇 가지 추가 기능이 있습니다.

11. 시맨틱 그리드 시스템

Sass 및 LESS와 같은 사전 처리 된 CSS 확장이 점점 더 대중화되고 있으며 Tyler Tate의 Semantic 그리드 시스템은 불필요한 클래스 나 요소를 사용하지 않는다고 주장하는이 그리드 시스템에서 최대 효과를 내기 위해이를 사용합니다. coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/에서 자세히 알아보세요.

12. 수지

시맨틱 그리드 시스템과 마찬가지로 Oddbird의 SUSY는 추가 마크 업이나 특수 클래스를 사용하지 않는 그리드 시스템을 만들었지 만 SUSY는 Sass (및 확장 기능인 Compass) 사용자만을 대상으로합니다.

13. Gridpak

Erskine Design의 Gridpak은 최신 응답 그리드 생성기 중 하나입니다. 여러 중단 점에서 열과 거터를 설정 한 다음 CSS, JavaScript 및 PNG 파일을 출력하여 전체 팀이 동일한 시작점에서 작업 할 수 있습니다.

14. 그리드 셋

내가이 글을 쓰는 시점에서 아직 출시되지 않았기 때문에 Gridset에는 여전히 약간의 미스터리가 남아 있습니다. 그러나 Mark Boulton Design의 도구는 주문형 비 규정 적 그리드 시스템과 온라인으로 그리드를 저장하고 관리하는 방법을 약속합니다.

15. RWD를위한 더 나은 포토샵 그리드

Elliot Jay Stocks는 기존의 960px 사실상 그리드 표준을 포기하고 대신 1000px 기준에서 작업하여 모든 백분율 계산 작업을 더 쉽게 할 것을 제안합니다. 동의하면 작업을 시작할 수있는 PSD를 만들었습니다.

16. 유체 그리드

디자인이 고도로 전문화되어 자신 만의 맞춤 그리드를 만들어야하는 경우 .net Awards의 뛰어난 신인 후보자 인 Harry Roberts의 유동 그리드 계산기를 사용하면됩니다.

17. 반응 형 계산기

백분율 계산기에 대한 또 다른 픽셀이지만 Stu Robson의이 계산기는 모든 CSS 규칙을 생성하여 다른 것보다 한 단계 더 나아갑니다. 즉, 스타일 시트에 복사하여 붙여 넣을 수 있습니다.

반응 형 이미지 (및 텍스트) 도구

반응 형 웹 디자인의 또 다른 중요한 구성 요소는 유동적 이미지입니다. 유동적 인 이미지를 얻는 기술은 간단하지만 다양한 장치의 성능과 페이지로드를 최적화하는 것은 반응 형 웹 디자인에서 가장 큰 과제 중 하나 인 것 같습니다. 다음은 문제에 접근하기위한 몇 가지 리소스입니다.

18. 반응 형 이미지

Filament Group은 화면 해상도에 따라 적절한 크기의 이미지를 보내는 방법을 고안했습니다. 반응적이고 책임감있게 확장되는 모바일 우선 이미지를 사용한이 실험에서는 참조 할 크기가 다른 두 개의 이미지가 필요합니다.

19. 적응 형 이미지

Matt Wilcox는 반응 형 이미지 도구에서 영감을 얻어 적응 형 이미지를 만들었습니다. 적응 형 이미지는 PHP와 약간의 JavaScript를 사용하여 추가 마크 업없이 사용자의 장치에 적절한 이미지를 제공합니다.

20. Sencha.io Src (이전 Tinysrc)

Sencha는 요청하는 장치 크기에 맞게 호스팅 된 이미지의 최적화 된 버전을 전송하는 클라우드 서비스를 제공합니다. 사용 방법을 알아 보려면 docs.sencha.com/io/src/를 참조하십시오.

21. FitText

Paravel, Inc의 또 다른 보석은 디자인과 장치에 반응하는 헤드 라인 웹 유형을 만드는 jQuery 플러그인 인 FitText.js입니다. 자세한 내용은 trentwalton.com/2011/05/10/fit-to-scale/을 참조하십시오.

22. slabText

FitText 및 SlabType 알고리즘에서 영감을 얻은 Brian McAllister의 slabText는 정의 된 너비를 유지하면서 반응 적으로 크기가 조정되는 굵은 텍스트 블록을 만드는 jQuery 플러그인입니다.

미디어 쿼리 도구

이제 다양한 기기, 유동 격자 및 유동 이미지에 따라 레이아웃이 어떻게 변경되는지 파악 했으므로 페이지 요소를 반응 형 상태로 전환하려면 미디어 쿼리가 필요합니다.

23. Respond.js

반응 형 디자인의 한 가지 문제는 미디어 쿼리를 읽을 수없는 브라우저가 뒤쳐진다는 것입니다. 이는 타겟 고객에게 문제가되지 않을 수 있지만 이전 브라우저의 사용자를 수용하는 것은 여전히 ​​좋은 방법입니다. Scott Jehl의 Respond.js는 min-width 및 max-width 속성 만 지원합니다.

자세한 내용은 filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/를 참조하십시오.

24. CSS3-Mediaqueries.js

Wouter van der Graaf의 CSS3-Mediaqueries.js를 사용하면 이전 버전의 IE 및 기타 브라우저에서 모든 종류의 미디어 쿼리를 효과적으로 테스트하고 적용 할 수 있습니다.

25. Adapt.js

원래 960.gs 그리드 시스템의 작성자 인 Nathan Smith는 브라우저 크기를 감지하고 필요한 스타일 시트 만 제공하는 스크립트 인 Adapt.js를 작성했습니다. 미디어 쿼리와 같지만 미디어 쿼리없이 이전 브라우저에서도 작동합니다.

26. 분류기

이것은 반대 각도에서 접근하는 장치 감지입니다. Brett Jankord의 Categorizr 스크립트는 데스크톱 또는 태블릿으로 달리 감지되지 않는 한 장치가 모바일이라고 가정하여 동정적인 방식으로 브라우저에 리소스를 제공 할 수 있습니다.

반응 형 디자인 (및 모바일) 상용구

효율적인 반응 형 워크 플로의 정신에 따라 상용구는 디자인을 브라우저로 더 빨리 이동하는 프로세스를 용이하게합니다. 이러한 상용구의 대부분은 위에서 언급 한 최고의 도구를 하나의 깔끔한 패키지로 결합합니다. 즉, 스크립트로 강화 된 유연한 그리드는 동시에 모바일 우선, 콘텐츠 아웃 철학을 구현합니다.

27. 320 이상

Andy Clarke의 320 and Up은 LESS 및 Bootstrap (# 30 참조)과 같은 다른 많은 최신 웹 디자인 도구와 통합되는 모바일 우선 상용구입니다. 사이트를 빠르게 시작하고 실행할 수있는 가볍고 민첩한 방법입니다. 또한 Andy와의 인터뷰에서 새 버전에 대해 자세히 설명합니다.

28. 그리드리스

Gridless는 타이포그래피와 내장 된 브라우저 간 호환성에 중점을 둔 반응 형 디자인의 기반으로 사용할 수있는 HTML5 및 CSS3 상용구입니다.

29. 스켈레톤

시작점이 가장 작은 해상도로 시작되는 이전의 두 상용구와 달리 Dave Gamache가 만든 Skeleton 개발 키트는 960.gs 그리드 시스템을 기반으로하며 모바일로 축소됩니다. Skeleton은 또한 개발자가 스타일을 구축 할 수있는 훌륭한 스타일 프레임 워크를 자랑합니다.

30. 부트 스트랩

Twitter에 의해 구축되고 현재 오픈 소스 인 Bootstrap은 사이트를 온라인으로 빠르게 연결하기위한 프레임 워크 및 일련의 구성 요소이며 버전 2부터는 모든 핵심 부분이 반응 적으로 작동합니다.

플러그인, 심 및 폴리 필

최신 브라우저와 소프트웨어는 반응 형으로 구성되는 경향이 있지만 때로는 일관된 경험을 제공하기 위해 추가 도구를 사용해야합니다.

31. 반응 형 플러그인

Marios Lublinski는 현재 WP 테마를 반응 형 테마로 바꿀 것을 약속하는 WordPress 플러그인을 작성했습니다. 이것이 어떻게 작동하는지 나는 아직이 글을 쓰는 시점으로 공개되지 않았기 때문에 아직 알지 못하지만, 그것이 그 약속에 부합한다면 그것은 매우 유용 할 것입니다.

32. 전복

콘텐츠 오버플로 처리는 데스크톱 브라우저에서 잘 작동하지만 이전 모바일 브라우저에서는 일관성없이 처리합니다. 부지런한 Filament Group의 Overthrow polyfill은 모든 장치에서 일관된 우아한 성능 저하를 추가하여 모든 모바일 사용자가 최상의 경험을 얻을 수 있도록합니다.

33. MediaTable

Marco Pegoraro의 jQuery 플러그인 인 MediaTable은 Respond.js와 함께 작동하여 작은 화면 장치에 큰 데이터 테이블을 표시하고 반응 형 열을 만들고 적절한 위치에 표시 / 숨기기 토글을 추가하는 문제를 해결하는 데 도움을줍니다.

"테스트, 테스트 : 1-2-3 ..."

반응 형 워크 플로의 또 다른 측면은 대상 장치와 해상도를 파악한 다음 테스트하는 것입니다.

34. resizeMyBrowser

프런트 엔드 개발자 인 Chen Luo가 만든 resizeMyBrowser에는 브라우저 창에 반응 형으로 디자인 된 페이지를 테스트하거나 요구 사항에 맞는 것을 찾을 수없는 경우 새 사전 설정을 만들기위한 몇 가지 사전 설정 크기가 있습니다.

35. responsivepx

Remy Sharp에서 만든 resizeMyBrowser와 마찬가지로 responsivepx는 너비와 높이를 테스트 할 수있는 창에 페이지를로드하여 미디어 쿼리가 얼마나 잘 실행되고 있으며 디자인에서 중단 점이 어디에 있는지 확인할 수 있습니다.

36. 반응 형 디자인 테스트

디자이너이자 개발자 인 Matt Kersley의 매우 유용한 도구 : 반응 형 디자인 테스트에서 반응 형 사이트의 URL을 입력하기 만하면 다양한 브라우저 크기에서 어떻게 렌더링되는지 확인할 수 있습니다.

37. 응답자

URL을 입력하면 Responsinator가 무자비한 로봇 효율성으로 여러 일반적인 장치 크기로 표시되는 방식을 보여줍니다. Tama Pugsley와 Andy Hovey가이 문제를 담당합니다.

38. Responsive.is

또 다른 인 페이지 장치 에뮬레이터 인 Responsive.is를 사용하면 URL을 입력 한 다음 다양한 사전 설정 사이에서 빠르게 크기를 조정할 수 있습니다. 곧 출시 될 Typecast 앱의 팀이 만든 것입니다.

39. Screenqueri.es

브라우저 차원 도구가 하나 더 있지만 Mandar Shirke의 Screenqueri.es는 광범위한 모바일 및 태블릿 사전 설정과 미세 측정을 훨씬 쉽게 만들어주는 눈금자와 눈금자를 통해 차별화됩니다.

40. 압 투스

여러 정의 된 크기로 사이트를 테스트하기위한 또 다른 앱이지만 Aptus는 Mac 네이티브입니다. Mac App Store를 통해 사용할 수 있으며 기본 기능은 쉬운 스크린 샷 및 오프라인 지원과 같은 추가 기능을 제공합니다.

41. 반응 형 디자인 북마크릿

Victor Coulon은 매우 간단하지만 효과적인 북마크를 만들었습니다. 웹 페이지에서 활성화하면 4 개의 공통 화면 크기 사이를 전환 할 수있는 도구 모음이 추가되어 사이트가 다른 크기에서 어떻게 렌더링되는지 확인할 수 있습니다.

42. 반응 형 디자인 테스트 북마크릿

Benjamin Keen의이 북마크릿을 사용하면 원하는만큼 장치 크기를 정의 할 수있어 더 많은 사용자 정의가 가능합니다. 활성화되면 쉽게 비교할 수 있도록 선택한 모든 크기로 사이트를 나란히 표시합니다.

43. 스크린 플라이

QuirkTools의 Screenfly를 사용하면 데스크톱, 태블릿, 모바일 및 TV에서 다양한 해상도로 사이트를 테스트 할 수 있습니다. 데스크톱 테스트는 현재 Safari로 제한되어 있으며 태블릿과 모바일에는 장치와 브라우저에 대한 더 많은 옵션이 있습니다. 텔레비전은 오페라로 제한됩니다.

44. 미디어 쿼리 표시기

Johan Brook은 브라우저에서 미디어 쿼리가 트리거 된시기를 테스트하는 순수한 CSS 방법을 제공합니다. 미디어 쿼리 표시기는 디자인 중단 점을 테스트하고 재생하기위한 또 다른 좋은 도구입니다.

45. 심

RWD 운동의 포스터 소년 인 Boston Globe의 재 설계에 사용 된 도구 중 하나 인 Shim은 동일한 Wi-Fi 네트워크의 여러 기기에서 웹 페이지를 실행하는 Node.js 앱으로 교차 기기 테스트를 훨씬 쉽게 만듭니다. .

46. ​​드라이브 인

Shim을 실행할 Node.js 서버가없는 경우 Scott Jehl은 기본적으로 동일한 방식으로 작동하지만 PHP, Apache 및 .htaccess 파일을 사용하는 Drive-In이라는 간단한 버전을 만들었습니다.

47. 어도비 섀도우

Adobe는이 원격 디버깅 도구를 사용하여 웹 기술을 계속해서 적용하고 있습니다. Mac 또는 Windows에 Shadow 및 Chrome 확장 프로그램을 설치하고 Android 또는 iPhone에 Shadow 클라이언트를 설치하면 다양한 장치간에 웹 페이지를 공유 할 수 있습니다.

48. 오페라 모바일 에뮬레이터 + 원격 디버그

모바일 페이지를 디버그하는 더 쉬운 방법은 Opera와 Opera Mobile Emulator를 설치하고 원격 디버그 옵션으로 두 개를 연결하는 것입니다. 간단하고 설정이 빠르며 WebKit 이상에서 테스트 할 수있는 추가 이점이 있습니다.

더 많은 영감

다른 사람들이 디자인을 반응 형으로 만드는 방법에 대한 아이디어를 얻고 싶으십니까?

49. MediaQueri.es

아직 보지 못했다면 Mediaqueri.es 사이트에는 반응 형으로 넘어가는 사이트 수가 계속 증가하고 있습니다.

50. @RWD

Ethan Marcotte는 RWD 세계의 최신 뉴스, 도구 및 쇼케이스를 제공하는 Twitter 계정을 운영합니다.

Denise Jacobs는 연사, 저자, 웹 디자인 트레이너 및 창의력 전도사 인 것을 좋아하고 Peter Gasston은 The Book of CSS3의 저자이자 Broken Links에서 블로그를 운영하는 베테랑 웹 개발자입니다.

마음에 드 셨나요? 읽어보세요!

  • 모바일 웹 사이트 구축을위한 전문가 팁
  • 최고의 CSS 및 JavaScript 기술
  • 앱 구축 방법
  • 디자이너를위한 최고의 무료 웹 글꼴
  • 증강 현실의 다음 단계 알아보기
  • 무료 텍스처 다운로드 : 고해상도 및 지금 바로 사용 가능
이전 기사

이런 운동화는 본 적이 없습니다
다음 기사

8 가지 무료 부활절 글꼴
흥미로운 오늘
Adobe Acrobat 다운로드 : Adobe Acrobat 무료 평가판 받기
더 많은 것을 읽으십시오

Adobe Acrobat 다운로드 : Adobe Acrobat 무료 평가판 받기

할 수있다 2024
Adobe Acrobat을 다운로드하는 방법을 알고 싶으십니까? 우리는 놀라지 않습니다. 이 PDF 생성, 편집 및 관리 도구를 사용하면 데스크탑, 웹 및 모바일 장치에서 파일 작업을 할 때 많은 시간과 노력을 절약 할 수 있습니다.예, 운영 체제 및 Micro oft Word와 같은 소프트웨어에서 기본 PDF 도구를 찾을 수 있습니다. 그러나 그들은 매우...
오프셋 2013 : HVASS & HANNIBAL 인터뷰
더 많은 것을 읽으십시오

오프셋 2013 : HVASS & HANNIBAL 인터뷰

할 수있다 2024
컴퓨터 예술 : 다른 사람이 말하는 것을 볼 기회가 있었습니까? HVA & HANNIBAL : 지금까지 세 번의 강연을 보았습니다. 모두 Nata ha Jen, Faile 및 Oliviero To cani라는 매우 달랐습니다. 그들은 모두 완전히 다른 방향으로 진행되었습니다.CA : 공황을 수용하고이를 활용하는 방법에 대해 말씀하셨습니다 ... H ...
두 디자인 스튜디오를 통합 할 때의 과제
더 많은 것을 읽으십시오

두 디자인 스튜디오를 통합 할 때의 과제

할 수있다 2024
크로아티아 광고 그룹 Bruketa & Žinić OM이 비엔나에 새로운 기지를두고 국제 사무소를 추가하고자 할 때 오스트리아의 디지털 대행사 인 Netural과 팀을 이루어 절차에 새로운 풍미를 더했습니다. 우리는 크리에이티브 디렉터 Tanja Škorić와 Netural 창립자이자 새 사무실의 CEO 인 Albert Ortig를 만나 자세한 내용...