rachelykim
50,000+ Views

도움이 될만한 iOS 7 디자인 CHEAT SHEET - 매우 유용함

iOS7에 맞춰서 어떻게 디자인 작업을 해야될지 헤깔리시는 분들을 위한 design cheat sheet! 물론 애플에서 주는 pdf파일도 있지만 쉽게 중요한 부분 몇개만 정리해논 이 사이트 공유 합니다. 앱 아이콘부터 시작해서, 사용되는 아이콘, 타이포그래피, 탑 네비게이션 바 등등 바뀌는 디자인 부분이 많은데요. 이미지로 부분적으로 몇개만 공유 했습니다. 나머지 더 보고 싶으시면 위에 걸어논 링크 타고 가보세요. iOS7은 전 아이폰 모델에서는 support가 안되기 때문에 전 아이폰 모델 관련 Cheat Sheet 은 http://goo.gl/eqMhby 여기 참고하세요! ------------- 외부/특히 블로그로 들고 가실때 출처 밝히세요. 감사합니다 .
Comment
Suggested
Recent
Cards you may also be interested in
[인정받는 디자이너가 되기위한 발걸음 그리드]
안녕하십니까 IT 아웃소싱 플랫폼 프리모아입니다. 디자인분야에서 레이아웃을 잡는 것은 기본적이면서 퀄리티 높은 결과물을 만드는데 중요합니다. 물론 웹디자이너분들도 웹사이트를 디자인하면서 배치나 여백, 정렬 등 신경을 많이 쓰고 있을겁니다. 앱디자이너들도 카테고리나 주요기능을 이용자에게 가독성을 좋게하려고 고민하고 계실 것 같습니다. 디자인에서 중요한 레이아웃을 빛나게 도와주는 도구이자 수단인 '그리드(grid)' 를 알아보겠습니다. § 그리드란? 레이아웃의 요소들을 조화롭게 시각화시키기 위하여 사용하는 수평 , 수직의 안내선입니다. 레이아웃을 잡게 도와주는 요소이지 꼭 그리드에 신경쓰다보면 획일화되고 융통성 없는  레이아웃 디자인으로 나올 수 있으므로 틀에 얾메일 필요는 없습니다.  § 그리드의 장점 첫째. 정보의 조직, 명료, 집중화 둘째. 창조성과 객관성의 증대 셋째. 디자인 요소의 통합과 공간의 체계적 통계 넷째. 제작 과정의 합리화를 통한 시간과 비용의 단축 § 그리드의 구성요소 (1) 칼럼 : 글자나 이미지를 배열하기 위해 나눈 세로형태의 공간 (2) 모듈 : 모듈은 가로, 세로가 일정한 간격으로 분할된 한 면으로, 공간을 나누는 기본 단위이다. (3) 마진 : 그리드 외곽의 빈 공간, 화면에 균형과 긴장을 부여, 내용과 이미지를 제외한 나머지 부분 (4) 플로우 라인 : 공간을 수평으로 분할하는 가상의 기준선 (5) 존 : 몇개의 모듈이 모인 별도의 틀 (6) 마커 : 표제와 페이지번호와 함께 사용되어 반드시 동일한 위치에 반복되어야 합니다. (7) 칼럼 마진 : 칼럼과 칼럼 사이의 공간을 말합니다. § 그리드 종류 1. 블록그리드 그리드의 기본으로써 하나의 블록만을 사용하는 디자인으로 1단그리드라고도 불립니다.  글을 많이 적는 서적이나 논문, 리포트에 주로 쓰이는데 반복될 경우 지루한 느낌을 줄 수 있습니다. 2. 단그리드 두개이상의 단으로 나누어 사용한 그리드로써 단의 수의 따라 2단 3단으로 불리는 그리드 디자인 다양한 형태의 단으로 구성될 수 있어 신문이나 잡지에서 많이 쓰이며 '칼럼그리드'라고도 불립니다. 3. 모듈그리드 모듈그리드는 단그리드보다 복잡한 디자인 형태일때 사용하는 그리드형태입니다. 모듈이라는 사각형의 방을 만들어 그룹화하는데 이 잉역을 바탕으로 레이아웃을 정합니다. 모듈을 제대로 사용하지 않을 경우 시각적 혼란을 주기 떄문에 안정된 느낌으로 디자인해야합니다. 4. 계층그리드 직관적인 배치를 사용하여 어떠한 범주에도 들어가지 않고 규칙적이고 반복적으로 쓰이는  다른 그리드와 달리 디자이너의 공간연출 역량이 중요합니다. 주로 포스터나 북디자인, 웹페이지에서 접근하는 방법입니다. § 그리드디자인 하는데 도움되는 사이트 Grid guide <http://grid.guide/>그리드를 생성하는데 수치를 도움받을 수 있는 좋은 리소스사이트입니다. 전체 폭과 열의 수를 입력하면 자동으로 거터 너비 별로 그리드의 수치를 계산해서 알려줍니다, <http://guideguide.me/>를 들어가면 설정을 통해 포토샵에서 그리드를 쉽게 생성할 수 있도록 제공받을 수 있습니다.  웹디자인을 하기전에 그리드를 세팅해 놓고 레이아웃을 잡는다면 이용자들에게  깔끔하고 가독성있는 웹사이트를 설계하실 수 있을 것 같습니다.  또한 그리드를 잘 이용할 수록 숙련도 높은 디자이너로 성장하실 수 있습니다.  디자이너를 꿈꾸는 분들에게 많은 도움이 되셨으면 좋겠습니다.  감사합니다.
750여개의 폰트와 관련 정보를 한 눈에 확인할 수 있는 IDEO의 ‘FONT MAP’
대체 어떤 폰트를 적용해야할까? IDEO의 답은? 어떤 언어든, 웹이나 모바일상에서 이를 표현하기 위해서는 하나 이상의 ‘폰트’를 정해야 합니다. 서비스와 잘 어울리는지는 물론, 이용하는 사람들에게 잘 맞는지 등 여러 내용을 따져 폰트를 정하게 되는데요! 문제는 우리가 사용할 수 있는 폰트 종류가 생각보다 훨씬 많다는 점입니다. 선택지가 많을수록 우리의 선택은 어려워질뿐더러 폰트의 경우 그 종류를 모두 파악하고 있는 것이 아니기 때문에 정하는 것이 더 어렵게 느껴집니다. 세계적인 디자인 이노베이션 그룹 ‘IDEO’에서 얼마전 이런 문제를 조금은 더 쉽게 해결해줄 수 있는 솔루션을 내놨는데요! 그래서 오늘은 폰트 정보를 더 쉽게 확인하고 결정하는데 도움을 줄 수 있는 ‘IDEO’의 ‘Font Map’을 소개드리려고 합니다. 750여개의 폰트와 관련 정보를 한 눈에 볼 수 있도록 도와주는 ‘Font Map’ ‘Font Map’은 폰트간의 관계, 예를 들면 비슷한 폰트와 같은 정보를 유기적으로 보여주는, AI를 활용한 서비스입니다. ‘A’라는 대표 문자를 지도처럼 화면에 그려넣어 어떤 형태로 이뤄져 있는지를 한 눈에 볼 수 있도록 구성되어 있죠.  위의 이미지가 ‘Font Map’를 통해 한 눈에 볼 수 있는 폰트들의 모습인데요! 상-하로 구성된 리스트가 아니라 이렇게 한 눈에 어떤 폰트들이 있는지를 확인할 수 있어 속이 확 – 트이는 느낌이었습니다. 장소 정보를 리스트로 보다가 지도 위에 펼쳐서 보는 느낌과 같았죠. 원하는 폰트위로 마우스를 가져가면 간략한 정보를 확인해볼 수 있습니다. ‘Font Map’에서 원하는 폰트를 찾았다면, 클릭을 통해 자세한 정보를 확인할 수 있습니다. 폰트를 한 눈에 볼 수 있다는 점도 좋았지만, 특정 폰트를 선택하면 관련 비슷한 폰트 정보를 제공해주고 구글 폰트 검색 결과로 바로 연결된다는 점이 매력적이었습니다. ‘Font Map’의 ‘About’ 정보를 살펴보면, IDEO에서 왜 ‘Font Map‘를 만들었고, 어떻게 사용하면 좋은지에 대한 내용을 확인해볼 수 있는데요! “글꼴 선택은 디자이너가 가장 일반적으로 생각하는 시각적 선택 중 하나이며, 대부분은 오래된 즐겨 찾기로 돌아가거나 범주 내에서 글꼴을 검색합니다. (중략) 디자이너를 포함한 설계자들이 750 개가 넘는 웹 글꼴의 관계를 이해하고 볼 수있게 도와주는 도구를 만들었습니다.” 라고 합니다. 실제로, 제가 ‘Font Map‘을 쓰면서도 상당히 잘 짜여져 있다는 생각이 들었고요. 물론..한글 폰트가 아닌 영문 폰트 중심이라는 점이 국내에(?) 머물고 있는 제겐 아쉬운 점이었지만 종종 영문 폰트 정보를 확인할 일이 있기에 즐겨찾기를 해두고 활용하려고 합니다.  출처 : 지금 써보러 갑니다 블로그