디자인 시작에서 설명하지 못한 아이콘에 대한 설명을 진행한다.
런처 아이콘
Product Icon / App Icon / Launcher Icon등 칭하는 단어가 많다. 궁극적으로 앱을 실행시키는 아이콘을 말한다. OS별 규격이 다르기 때문에 하단 내용에 따라 가이드를 따라야 한다.
Android
Material Design에서 런처 아이콘(Product Icon)에 대해 가이드를 제공한다. 안드로이드의 경우 Crop을 염두해놓고 잘리지 않도록 고려해야 하며, 런처 아이콘을 시뮬레이션할 수 있는 사이트에서 테스트가 가능하다.
#Material Design에서 권장하는 런처 아이콘 가이드라인
material.io/design/iconography/product-icons.html#design-principles
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
#안드로이드 에셋 스튜디오
아래 링크에서 런처 아이콘 생성기를 클릭하면 런처 아이콘 제작 시뮬레이션을 할 수 있으며, 그 외 아이콘에 대한 여러 시뮬레이션을 진행할 수 있다.
romannurik.github.io/AndroidAssetStudio/index.html
Android Asset Studio
Launcher icon generator Generate launcher and store listing icons for your app.
romannurik.github.io
IOS
IOS의 icon은 규격이 정해져 있기 때문에 하단 링크의 규격에 따라 아이콘을 제작한다.
#IOS App Icon Guide
developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
App Icon - Icons and Images - iOS - Human Interface Guidelines - Apple Developer
App Icon Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen. Your icon is the first opportunity to communicate, at a glance, your app’s purpose. It also appears throughout the system,
developer.apple.com
시스템 아이콘
앱 내부에서 사용하는 아이콘을 말한다. Material Design에서 제공하는 표준 규격에 따라 아이콘을 제작하는 것을 권장한다.
권장 아이콘 사이즈
디자인 할 때 제작 권장 사이즈 24x24다. 이때 아이콘들이 시각적으로 동일한 크기감을 가져야하기 때문에 여백이 발생할 수 있다. 터치 영역은 손가락의 크기 때문에 최소 48x48을 권장한다.
- 아이콘 제작 사이즈 : 24 x24
- 아이콘들이 시각적으로 동일한 크기감을 가져야 하기 때문에 이를 고려하여 아이콘을 제작한다.
- 1번 이유로 각 아이콘들은 크기가 서로 다를 수 있다. 따라서 24x24 사이즈에 여백을 포항시켜 사이즈를 통일한다.
- 권장 최소 터치 영역 : 48x48
- 성인 남성 기준 엄지 터치 영역은 72x72px이다.
- 성인 남성 기준 검지 터치 영역은 52x52px이다.
#Material Design에서 권장하는 시스템 아이콘 가이드라인
material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
System Icon 다운로드
#material icon에서 기본적으로 제공해주는 아이콘 세트
material.io/resources/icons/?style=baseline
Material Icons
Get Material Icons
material.io
#Google Fonts에서 기본적으로 제공해주는 아이콘 세트
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
#IOS 리소스 다운
IOS 같은 경우 아래 링크에서 kit를 다운받아 아이콘을 확인할 수 있다.
developer.apple.com/design/resources/
Apple Design Resources
Design apps quickly by using Sketch and Photoshop templates, plug-ins, and preconfigured UI elements.
developer.apple.com
그 밖에 폰트 관련 사이트가 궁금하다면
아래 링크에서 확인해보자.
#디자인 사이트 추천 - 아이콘 편
rosakim90.tistory.com/entry/5-%EC%95%84%EC%9D%B4%EC%BD%98-%ED%8E%B8?category=955595
#5 - 아이콘 편
아이콘 제작에 도움을 줄 수 있는 사이트 추천 아이콘 편 Android #Mateiral Design 아이콘 가이드 material.io/design/iconography/product-icons.html#grid-and-keyline-shapes Material Design Build beautifu..
rosakim90.tistory.com
'달밤에 디자인 초심찾기 > 디자인 프로세스' 카테고리의 다른 글
| #9 - 제스쳐 (0) | 2021.03.17 |
|---|---|
| #8 -디자인 시작 - 해상도 / 그리드 / 컬럼 (0) | 2021.03.15 |
| #6 - 디자인 정의 - 폰트 (0) | 2020.12.03 |
| #5 - 디자인 정의 - 컬러 (0) | 2020.12.03 |
| #4 - 디자인 시작 (0) | 2020.12.03 |
