Mock-ups, Prototyping and Wireframing Tools - 목업, 프로토타이핑, 와이어프레임 툴
- InterfaceSketch
- 종이와 필기구를 이용하는 스케치를 선호한다면 다양한 모바일 장치의 화면에 맞게 설계된 간단한(무료) PDF 템플릿 꾸러미를 제공하는 InterfaceSketch를 이용해보자. PDF 파일을 인쇄하고 최고의 디자인 도구인 종이와 필기구를 사용 초기 디자인 스케치할 수 있다.
- StyleTiles
StyleTiles은 인테리어 디자인에서 개념을 빌려 Mock-up과 Wireframe을 쉽게 사용할 수 있게 만들어진 툴이다.- Responsive Wireframes
전통적인 Wireframe은 정적인 모양만을 표현했지만 James Miller가 제안한 업무 해결을 위한 반응형 Wireframe을 사용해 보세요- Wirefy
Wirefy는 간단하고 쉽게 수정이 가능하며 자신만의 Wireframe을 만들 있다.
Generating Responsive HTML and CSS - 반응형 HTML과 CSS생성
- Pure CSS
휴대기기용으로 설계된 작은 CSS모듈 집합- Responsive Web CSS
다른 접근방식으로 만들어진 Responsive Web CSS.- Macaw (Window Only)
웹사이트 제작 툴 형태의 윈도우 애플리케이션, 유료 앱으로 트라이얼 버전을 제공한다.
Fonts, Images, and Videos - 폰트, 이미지, 동영상
- FlowType
텍스트는 반응형 디자인에서 가장 무시되는 부분중 하나이지만 관심을 가져야 하는 부분중 하나이기도 합니다. FlowType는 45~75문자 사이에 최적의 폰트 크기와 폭을 깔끔하게 만들어주는 jQuery 플러그 인입니다.- Adaptive Images
낮은 대역폭이나 작은 디바이스, 화면에서 마크업 코드를 변경하지 않고 최적의 이미지를 제공해 주는 툴- FitVids.js
동영상의 가로, 세로 비율을 유지한채로 화면크기에 맞도록 동영상 크기를 조정하는 경량의 jQuery 플러그인
Responsive Design Testing Tools
- DesignModo’s Responsive Test
모바일 디바이스 사이즈별로 화면을 테스트할 수 있도록 레이아웃을 제공한다.- Brad Frost’s Ish
창 너비를 설정하거나 드래그로 창 크기를 변경할 수 있는 기능을 제공한다.
그 외 반응형 디자인 테스트 도구로 각기 다른 화면을 테스트 할 수 있는 Responsive Test by Matt Kersley와 Responsinator가 있다.
반응형
'lang > html' 카테고리의 다른 글
| iPhone WebPage에서 webkitExitFullscreen() 이벤트 (0) | 2015.12.11 |
|---|---|
| <ol> Order Lists (0) | 2015.12.07 |
| scrollReveal.js (0) | 2014.11.29 |
| HTML 이메일 템플릿 만들기 (0) | 2014.11.11 |
| 웹페이지를 풍성하게 해주는 10가지 HTML5 Tags (0) | 2014.09.30 |