디자이너를위한 50 가지 유용한 웹 디자인 도구
지난 며칠간, 우리는 귀하가 사이트에서 다운로드하여 사용할 수있는 최고의 WordPress 및 Joomla 반응 테마를 보여 줬습니다. 오늘, 우리는 너에게 줄거야. 도구들. 프레임 워크, 서비스 및 다운로드 가능한 스크립트의 조합으로 인해 우리는 반응 형 웹 개발에 큰 도움이 될 것이라고 생각합니다..
전체 도구 목록을 더 쉽게 탐색 할 수 있도록 다음 섹션으로 분류했습니다.
- 그리드 및 프레임 워크
- 스케치 시트 및 와이어 프레임
- 자바 스크립트 및 jQuery 플러그인
- 테스트 및 미리보기
- 슬라이더
- 기타
그리드 및 프레임 워크
[맨 위로]
기둥 모양의
Columnal은 Pulp + Pixels 프로젝트입니다. cssgrid.net에서 빌려온 코드입니다. 일부 코드 영감은 960g에서 가져 왔습니다. 칼럼은 브라우저 창 크기를 조정할 때 그리드를 유연하게 변경하여 반응 형 웹 디자인에 많은 도움이됩니다..
해골
스켈레톤은 간단하고 강력한 CSS 프레임 워크로, 단순성과 효율성으로 인해 개발자와 디자이너가 주로 좋아합니다. Javascript에는 무거운 짐이 없습니다. 깨끗하고 문서화 된 CSS 만 있으면됩니다..
LessFramework 4
Less Framework는 제작자의 이름으로 다소 틀린 프레임 워크입니다. 반응 형 웹 사이트의 개발을 훨씬 쉽게 만들어주는 인라인 CSS 미디어 쿼리를 기반으로하는 적응 형 CSS 그리드 시스템입니다..
시맨틱 그리드 시스템
시맨틱 그리드 시스템은 응답 성있는 그리드 레이아웃을 설계하는 데 사용됩니다. 최대 효율성을 제공하기 위해 LESS, SCSS 또는 스타일러스와 같은 사전 처리 된 CSS 확장을 사용합니다. 열 너비와 거터 너비를 선택하고 열 수를 선택하고 픽셀과 백분율을 전환 할 수 있습니다..
골든 그리드 시스템
골든 그리드 시스템은 반응 형 웹 디자인의 출발점 역할을하는 유체 그리드 시스템입니다. 웹 사이트에서 240 ~ 2560px의 멋진 페이지를 게재 할 수 있습니다..
320 이상
320 및 Up은 CSS 미디어 쿼리 보일러 플레이트로 반응 형 디자인의 시작 템플릿 역할을합니다. 사용 가능한 다른 상용구보다 완전히 반대되는 접근 방식을 따릅니다..
Inuit.css
Inuit.css는 초보자에게도 사용하기 매우 쉬운 CSS 프레임 워크입니다. 최소한의 접근 방식을 가지고 있으므로 필요한 것만 처리해야하지만 필요하다면 몇 가지 플러그인을 사용하여 확장 할 수도 있습니다.
격자가없는
그리드 레스 (Gridless)는 아름다운 타이포그래피로 반응 형 브라우저와 크로스 브라우저 웹 사이트를 만들기위한 상용구입니다. 이 도구는 프로젝트의 점진적 개발에 중점을두고 있으며 모든 디자인의 출발점 역할을합니다..
1140 CSS Grid
1140 CSS Grid는 멜버른 디자이너 인 Andy Taylor가 디자인 한 멋진 CSS 그리드 시스템으로 대형 모니터의 경우 1140px에 완벽하게 맞고 유체 레이아웃은 아주 작은 작업으로 다른 작은 해상도에도 원활하게 적응합니다.
1KBCSS 그리드
1KB Tyler Tate가 디자인 한 CSS Grid는 간단하고 가벼운 CSS Grid 생성기입니다. 열 수, 열 너비 및 거터 너비를 설정할 수 있으며 웹 사이트 그리드 용으로 다운로드 할 수있는 CSS를 얻을 수 있습니다.
부트 스트랩
트위터의 마크 오토 (Mark Otto)와 제이콥 손튼 (Jacob Thornton)이 제작하고 유지 보수 한 부트 스트랩은 웹 디자인 프로젝트에서 무료로 다운로드하여 사용할 수있는 우수한 사용자 인터페이스 요소, 레이아웃 및 자바 스크립트 도구 모음입니다.
유체 그리드 계산기
이 간단한 도구는 유체 그리드 웹 사이트 디자인의 CSS를 신속하게 파악하는 데 도움이됩니다..
유체 그리드
Fluid Grid는 간단하면서도 유용한 유체 그리드 프레임 워크로서 6, 7, 8, 9, 10, 12 또는 16 열을 기반으로 반응적인 레이아웃을 생성합니다..
뚜렷한
Flurid는 최대 16 개의 열을 가진 간단하고 매우 유용한 크로스 브라우저 CSS 그리드 프레임 워크입니다. 또한 픽셀을 여백으로 숨기지 않습니다..
그리드 세트
Gridset은 원주 형, 비대칭 형, 고정식, 비율, 복합 형, 반응 형 등과 같은 모든 유형의 격자를 만들기위한 도구입니다. Mark Boulton의이 도구는 아직 베타 버전이지만 유망한 것으로 입증되었습니다. 링크를 삽입하는 것만 큼 간단하다는 점을 언급했습니다..
그리드 팩
Gridpak은 온라인 반응 형 그리드 생성기로, 컬럼 수, 패딩 및 거터를 변경할 수 있으며 사용자 정의 중단 점을 추가 할 수 있습니다. CSS는 도구로 생성되어 다운로드 할 준비가되었습니다. 또한 Photoshop에서 디자인 용도로 사용할 수있는 PNG 그리드 템플릿을 제공합니다..
심플 그리드
Michael Kuhn이 개발 한 SimpleGrid는 무한한 그리드 기반 레이아웃을 만들기위한 매우 간단하고 직접적인 CSS 프레임 워크입니다. 기본적으로 SimpleGrid는 4 가지 화면 크기 범위를 준비합니다..
수 서
Oddbird의 Susy는 시맨틱 그리드 시스템과 비슷합니다. 추가 마크 업이나 다른 특수 클래스는 사용하지 않지만 Saas와 확장 클래스의 사용자만을 대상으로합니다..
작은 유체 그리드
Tiny Fluid Grid는 양방향 방식으로 웹 사이트의 그리드 시스템을 결정하는 데 도움이되는 멋진 웹 앱입니다. 웹 사이트 레이아웃의 열 수, 거터 백분율, 최소 너비 및 최대 너비를 설정하고 다운로드 할 수있는 CSS를 가져올 수 있습니다.
가변 그리드 시스템
가변 그리드 시스템은 SprySoft에 의해 설계되고 개발되었으며 960 그리드 시스템을 기반으로합니다. 개발자와 디자이너는 사용자 정의 그리드를 생성 한 다음 해당 그리드를 기반으로 제공된 CSS 파일을 다운로드 할 수 있습니다.
스케치 시트 및 와이어 프레임
[맨 위로]
반응이 빠른 웹 디자인 스케치 시트
이 도구는 다양한 기기에서 웹 사이트 레이아웃의 다양한 요소에 대한 게재 위치를 매핑하는 데 유용합니다. 이 장치의 도움으로 다양한 화면 크기 및 해상도를 위해 웹 사이트의 필요한 요소를 배치 할 위치를 결정할 수 있습니다..
반응 형 와이어 프레임
Responsive Wireframes는 Adobe의 James Mellers가 만든 실험 도구입니다. 다양한 데스크탑 및 모바일 장치의 실제 브라우저에서 반응 형 디자인이 어떻게 보이는지 시각화하는 데 사용할 수있는 HTML 및 CSS (이미지 또는 JS가 사용되지 않음)로만 구성됩니다..
StyleTiles
Style Tiles는 복잡한 스타일과 무관하게 웹 사이트가 어떻게 생겼는지에 대한 아이디어를 개발할 수있는 방법을 제공합니다. 완벽한 응답 설계 워크 플로우와 클라이언트 피드백을 통합 할 수있는 기회를 제공합니다..
자바 스크립트 및 jQuery 플러그인
[맨 위로]
Adapt.Js
Adapt.js는 자바 스크립트 솔루션이며 CSS 미디어 쿼리에 대한 훌륭한 대안입니다. @media 방식을 사용하는 것은 좋은 습관이지만 모든 브라우저에서 작동하지는 않습니다. 960 Grid System을 만든 Nathan Smith는이 문제를 극복하기 위해 매우 가벼운 Javascript 라이브러리 인 Adapt.js를 발표했습니다..
동위 원소
Isotope는 반응 형 디자인을 설계하는 동안 매우 유용하다는 것을 입증하는 놀라운 jQuery 플러그인입니다. 브라우저 창 크기를 조정하거나 화면 크기가 작을 때 페이지의 요소를 다시 정렬하는 데 도움이 될뿐만 아니라 해당 요소를 필터링하는데도 도움이됩니다..
석공 직
Masonry는 동적 인 적응 형 레이아웃을 만드는 데 사용되는 우수한 jQuery 플러그인입니다. 이 플러그인은 반응 형 디자인의 요소를 재정렬하여 그리드의 오픈 스포트에 더 잘 맞출 수 있도록 도와줍니다..
Respond.js
Respond.js는 신속하고 가벼운 (3KB 압축 및 1KB 압축) 스크립트로, IE 브라우저와 같은 CSS3 MediaQuery를 지원하지 않는 웹 브라우저에서 반응 형 웹 디자인을 사용하는 것이 주요 목표입니다..
TinyNav.js
TinyNav.js는 크기가 작은 탐색 목록을 작은 화면의 작은 드롭 다운 메뉴로 변환하는 작고 가벼운 jQuery 플러그인입니다 (362 바이트 만 사용)..
Wookmark jQuery 플러그인
Wookmark는 브라우저 창 크기를 감지하고 페이지의 요소를 열에 자동 정렬하는 jQuery 플러그인입니다. 페이지 하단에서 실시간 미리보기를 볼 수도 있습니다..
테스트 및 미리보기
[맨 위로]
ProtoFluid
ProtoFluid는 다양한 화면 크기와 해상도로 웹 사이트 프로토 타입을 테스트 할 수있는 웹 기반 프로토 타입 도구입니다. URL을 입력하고 기기 (또는 맞춤 측정 기준)를 선택하고 실행을 누릅니다. 웹 기반 도구이기 때문에 FireBug와 같은 다른 확장 기능을 사용할 수도 있습니다.
반응 형.
반응 형 디자인을 테스트하는 데 사용할 수있는 다른 브라우저 에뮬레이터 도구 인 TypeCast가 만들어냅니다. URL을 입력하기 만하면 선택한 장치에 따라 자동으로 크기가 변경됩니다..
Responsivepx.Com
ResponsivePx는 반응 형 웹 사이트 디자인을 테스트하는 멋진 도구입니다. 다른 사람들과 구별되는 주요 특징은 픽셀 단위로 웹 사이트 크기를 조정할 수 있다는 것입니다. 이 멋진 기능을 통해 중단 점을 식별하고 사이트에서 CSS 미디어 쿼리가 작동하는 방식을 테스트 할 수 있습니다..
반응 형 웹 디자인 테스트 도구
다양한 화면 크기로 반응 형 웹 사이트를 한 화면에서 동시에 볼 수있게 해주는 멋진 테스트 도구입니다. 이 도구는 디버깅을 쉽게하는 모든 화면 해상도를 나란히 보여주기 때문에 주로이 도구가 마음에 들었습니다..
ReView.Js
ReView는 순수한 JavaScript로 개발 된 동적 뷰포트 시스템으로 반응 형 웹 디자인을위한 환상적인 시청 환경을 제공합니다..
스크린 파리
QuirkTools의 Screenfly는 데스크톱, 태블릿, 모바일 및 TV와 같은 다양한 장치에서 반응 형 웹 사이트를 볼 수있는 놀라운 도구입니다. 또한 스크롤링을 활성화 또는 비활성화하거나 디스플레이를 회전시킬 수있는 옵션도 있습니다..
Screenqueri.es
Screenqueri.es는 픽셀 완벽한 반응 형 디자인 테스트 도구입니다. 확인할 웹 사이트 주소를 입력하기 만하면이 도구는 장치별로 다양한 화면 크기로 웹 사이트를 표시합니다. 또한 픽셀 단위로 크기를 수동으로 조정하여 중단 점을 식별 할 수도 있습니다.
책임자
Responsinator에서 iPhone 및 iPad, Kindle 및 Android에서 다양한 장치로 사이트를 테스트하십시오. 또한 세로 및 가로 모드로 사이트를 보여줍니다. 이 도구는 페이지에 표시된 장치의 개요 때문에 훨씬 더 좋아요. 전체 프로세스에 더 많은 의미를 부여합니다..
슬라이더
[맨 위로]
블루 베리
Blueberry는 유체 또는 반응이 빠른 레이아웃을 위해 특별히 제작 된 환상적인 오픈 소스 jQuery 이미지 슬라이더입니다..
엘라 스티 슬 라이드
브라우저 창 크기가 조정되거나 작은 화면에있을 때 화면 크기에 자동으로 조정되는 캐 러셀을 원하십니까? Elastislide는 귀하의 필요에 가장 적합한 jQuery 플러그인입니다..
응답 성 CSS3 슬라이더
이것은 모든 화면 크기와 화면 해상도에 쉽게 적응할 수있는 순수한 반응 형 CSS3 슬라이더입니다. 이 슬라이더의 좋은 점은 장치 화면 크기가 충분히 작 으면 화살표가 상자 안에 들어가는 것입니다. 자바 스크립트 필요 없음.
ResponsiveSlides.Js
ResponsiveSlides.Js는 정렬되지 않은 목록을 사용하여 반응 형 슬라이더를 만드는 매우 간단하고 매우 가벼운 jQuery 플러그인입니다. IE6 이상에서 다양한 브라우저에서 작동합니다..
기타
[맨 위로]
적응 형 이미지
적응 형 이미지는 반응 형 웹 디자인을위한 온라인 도구로 방문자의 화면 크기를 감지하고 화면 크기와 해상도를 기반으로 재구성 된 이미지를 생성, 캐시 및 전달합니다..
FitText.Js
FitText.js는 브라우저 창 크기를 조정할 때 텍스트 및 헤드 라인의 크기를 자동으로 조정할 수있는 작은 자바 스크립트 도구입니다. 보드에있는이 도구로 텍스트 크기가 불일치 할까 걱정하지 않아도됩니다..
FitVid.Js
브라우저 창 크기를 조정하거나 장치의 해상도가 낮을 때 포함 된 비디오의 크기를 조정하고 싶습니까? 맞습니다 .JS가 당신을 도울 수 있습니다. 유체 폭 내장 비디오를 얻는 데 사용되는 가볍고 간단하며 사용하기 쉬운 jQuery 플러그인입니다..
망막 이미지
Retina Images는 멋진 자바 스크립트 솔루션으로, 망막 디스플레이에서 볼 때 @ 2X 큰 고해상도 이미지를 자동으로 제공합니다. 당신이해야 할 일은 각각의 모든 단일 이미지의 고해상도 버전을 넣는 것입니다. 나머지는 관리 할 것입니다..
완벽한 응답 성의 사진 격자
Seamless Responsive Photo Grid는 이미지 사이에 간격없이 브라우저에서 가장자리에서 가장자리까지 이미지를 표시합니다. 사진은 바둑판 식으로 배열되어 있으며 페이지의 왼쪽에서 오른쪽으로 세로로 흐릅니다. 브라우저 창의 크기가 조정됨에 따라 열의 수가 조정됩니다..
SlabText
SlabText는 slabText 알고리즘을 기반으로하는 Brian McAllister의 jQuery 플러그인 또는 도구로, 사용 가능한 공간을 채우기 위해 각 행의 크기를 조정하기 전에 헤드 라인을 행으로 분할합니다. 실제 FitText.Js 플러그인과 매우 유사합니다..
Zurb - ResponsiveTables
반응 형 디자인의 큰 데이터 테이블을 다루는 방법에 대해 궁금해 한 적이 있습니까? Zurb, CSS / JS 콤보가 당신에게 답을줍니다; 데이터 테이블을 가져 와서 작은 화면 장치에서 반응 형 레이아웃을 손상시키지 않도록 수정합니다..
카테고리
분류기는 매우 작은 PHP 스크립트로 방문자에게보다 타겟이 분명한 웹 경험을 제공합니다. 태블릿, TV, 모바일 또는 데스크톱 용 기기 별 디자인을 제공하는 데 도움이됩니다..
미디어 쿼리 북마크릿
미디어 쿼리 북마크 릿은 현재 뷰포트의 크기와 방금 미디어 쿼리가 실행 된 크기를 보여줍니다.
반응 형 계산기
반응 형 계산기는 반응 형 웹 사이트를 디자인하는 동안 픽셀을 백분율로 전환하는 데 도움이되는 매우 간단한 온라인 도구입니다..
다음 주
이 시리즈의 두 번째 주에는 실제 웹 디자인 (RWD : Responsive Web Design)에 들어가게 될 자습서가 준비 될 것입니다..
그것을 놓치지 마세요..
