«   2018/11   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  
Archives
Today
62
Total
1,178,410
안정적인 DNS서비스 DNSEver
관리 메뉴

Blue Breeze

반응형 디자인, 개발 툴 본문

FrontEnd/HTML

반응형 디자인, 개발 툴

푸른바람 C/H 2014.12.01 08:30


Mock-ups, Prototyping and Wireframing Tools - 목업, 프로토타이핑, 와이어프레임 툴

InterfaceSketch
InterfaceSketch
종이와 필기구를 이용하는 스케치를 선호한다면 다양한 모바일 장치의 화면에 맞게 설계된 간단한(무료) PDF 템플릿 꾸러미를 제공하는 InterfaceSketch를 이용해보자. PDF 파일을 인쇄하고 최고의 디자인 도구인 종이와 필기구를 사용 초기 디자인 스케치할 수 있다.
StyleTiles
Style Tiles
StyleTiles은 인테리어 디자인에서 개념을 빌려 Mock-up과 Wireframe을 쉽게 사용할 수 있게 만들어진 툴이다.
Responsive Wireframes
Responsive Wireframes
전통적인 Wireframe은 정적인 모양만을 표현했지만 James Miller가 제안한 업무 해결을 위한 반응형 Wireframe을 사용해 보세요
Wirefy
Wirefy
Wirefy는 간단하고 쉽게 수정이 가능하며 자신만의 Wireframe을 만들 있다.


Generating Responsive HTML and CSS - 반응형 HTML과 CSS생성

Pure CSS
pure CSS
휴대기기용으로 설계된 작은 CSS모듈 집합
Responsive Web CSS
Responsive Web CSS
다른 접근방식으로 만들어진 Responsive Web CSS.
Macaw (Window Only)

웹사이트 제작 툴 형태의 윈도우 애플리케이션, 유료 앱으로 트라이얼 버전을 제공한다.

Fonts, Images, and Videos - 폰트, 이미지, 동영상

FlowType
FlowType
텍스트는 반응형 디자인에서 가장 무시되는 부분중 하나이지만 관심을 가져야 하는 부분중 하나이기도 합니다. FlowType는 45~75문자 사이에 최적의 폰트 크기와 폭을 깔끔하게 만들어주는 jQuery 플러그 인입니다.
Adaptive Images
Adaptive Images
낮은 대역폭이나 작은 디바이스, 화면에서 마크업 코드를 변경하지 않고 최적의 이미지를 제공해 주는 툴
FitVids.js
FITVIDS.JS
동영상의 가로, 세로 비율을 유지한채로 화면크기에 맞도록 동영상 크기를 조정하는 경량의 jQuery 플러그인


Responsive Design Testing Tools

DesignModo’s Responsive Test
DesignModo’s Responsive Test
모바일 디바이스 사이즈별로 화면을 테스트할 수 있도록 레이아웃을 제공한다.
Brad Frost’s Ish
Brad Frost’s Ish
창 너비를 설정하거나 드래그로 창 크기를 변경할 수 있는 기능을 제공한다.


그 외 반응형 디자인 테스트 도구로 각기 다른 화면을 테스트 할 수 있는
Responsive Test by Matt KersleyResponsinator가 있다.


'FrontEnd > HTML' 카테고리의 다른 글

iPhone WebPage에서 webkitExitFullscreen() 이벤트  (0) 2015.12.11
<ol> Order Lists  (0) 2015.12.07
반응형 디자인, 개발 툴  (0) 2014.12.01
scrollReveal.js  (0) 2014.11.29
HTML 이메일 템플릿 만들기  (0) 2014.11.11
웹페이지를 풍성하게 해주는 10가지 HTML5 Tags  (0) 2014.09.30
0 Comments
댓글쓰기 폼