Product 디자인(19)
-
디자이너와 Flutter 협업하기, 피그마에서 띄어쓰기된 Material Design 아이콘
Flutter를 사용하는 개발자와 협업할 일이 생겼다. 빠른시간내에 완성해야 하는 플젝이라 주요 아이콘 외에 시스템 아이콘은 머티리얼 아이콘을 사용하기로 결정해서 피그마 플러그인을 열심히 찾아보았다. 분명 머티리얼 아이콘 플러그인이 있을거야~~ Material Design Icons | Figma Community Figma Community plugin - Instant easy access to the entire Material Design Icons library: 35,000+ icons in PNG and SVG at your fingertips. Search icons by name or scroll through the entire list. Filter by category, change..
2022.06.08 -
새로운 Material Design 3의 웹 접근성 기준으로 색상대비(가독성) 찾는 방법
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. m3.material.io 구글에서 만든 디자인 시스템인 Matrial Design(이하 머티리얼 디자인) 세번째 버전이 나왔다. 2와 다르게 3에서는 개인화 및 접근성이 향상되었다. 새로운 버전을 살펴보면 가장 먼저 Figma(이하 피그마) 템플릿 파일을 제공하는데 이걸 보면 스케치의 시대는 저버리고 피그마가 이제 본격 UI 메인툴로 자리잡게 된 것 같다.. 그 중에 접근성 향상을 위한..
2022.05.17 -
데이터 테이블을 앱에서 어떻게 디자인해야하지? Material design Data tables
웹 -> 앱으로 넘어갈 때 데이터 테이블의 디자인을 고민한 적이 있다. UI디자이너라면 앱 디자인 작업시 한번 쯤 겪는 고민이지 않을까 싶다.이번에 NFT플랫폼 외주를 진행하면서 모바일 화면에 들어가지 못하는 데이터를 한 눈에 보기 쉽게 간결하게 보여 줄 수 있을까 하여 데이터 테이블을 대체 할 수 있는 다양한 UI를 찾아보았다. 부동산/금융/암호화폐 등 다양한 금융관련 플랫폼에서는 데이터 테이블을 자주쓰는데 어떻게 하면 최대한 간결하고 직관적이게 보일 수 있는지 다양한 방법을 생각하고 디자인하는것 같다. 나는 UI 작업시 주로 구글의 material design을 차용하여 작업을 하기 때문에 오늘은 내가 주로 실무에서 사용하는 유형을 소개하려한다. https://material.io/ Material ..
2022.03.01 -
2023 런처 아이콘(앱 아이콘)에 대한 최소한의 가이드 - iOS와 안드로이드
*2023년 8월 1일 업데이트 : iOS 사이즈가 추가되었습니다! *2022년 12월 19일 업데이트 모바일 서비스를 런칭하기 위해서는 애플 앱스토어와 안드로이드 마켓에 업로드하는 작업을 해야합니다. iOS와 안드로이드는 각각 요구하는 규격이 다릅니다. 안드로이드는 [dpi] 사이즈를 iOS는 [1@,2@,3@]사이즈를 요구하는데요. 스토어에 업로드하기 위해서는 디자이너가 어떠한 사이즈로 작업해서 넘겨줘야하는지 살펴보려 합니다. 먼저 모바일 배경화면에 깔리는 아이콘입니다. 저는 개발자와 원활한 소통을 위해 런처아이콘이라고 지칭을 하였습니다. 상황에 따라 다양하게 부르는것 같습니다. 앱 아이콘, 모바일 아이콘, 런처아이콘 등등.. 먼저 안드로이드 픽셀에 대한 설명과 iOS 앱 아이콘 지침입니다. iOS같..
2021.07.24 -
2023 앱 디자인 사이즈의 기준은? 안드로이드와 ios 그리고 노치디자인
*2023년 8월 1일 업데이트 *2023년 7월 12일 업데이트 *2022년 6월 8일 업데이트 작업 하기 전 개발자와 기준 사이즈를 정하고 작업에 들어가는데, 앱디자인의 경우엔 ios기준으로 한번에 할건지, 아니면 안드로이드를 따로 작업할건지 그리고 width값은 몇부터 어떤 사이즈를 기준으로 작업하는지 먼저 정하고 작업에 들어간다. 앱디자인 시작 할 때 가장 기본적인 조건이자 필수적인 작업 피그마에 있는 iPhone 13 mini 상위 모델들과 비례가 맞기 때문에 최소 사이즈 기준인 375x812 사이즈로 작업하면 될 듯 하다. (확인해보니 {아이폰11 414x896px}, {아이폰12 390x844} 비례가 맞다) *상단 Satus bar는 375기준 44px 특히 상단 Status bar, 하단..
2021.07.01 -
디자이너가 만드는 화면 기획서 : 원활한 의사소통을 위한 작업
*2023년 8월 11일 업데이트 키패드 있는 화면에 처음 나오는 화면.. 아뇨 그거 말구.. 다음페이지! 네네 그 화면에서.. !@#$%^&*( 디자이너로 일하다 보면 종종 화면설계부터 들어가는 일이 있는데, 기획자가 각잡고 만드는 정말 제대로 된 정석의 화면설계서가 아니기 때문에 간단하게 진행한다. 화면설계의 목적은 전체적인 정보 구조 파악(메뉴트리) 협업 관계자와의 소통(넘버링) 빠른 피드백 적용 나는 주 업무가 디자인이기 때문에.. 디자인에 집중하기 위해 스타일 입히기 전의 화면에 대한 피드백을 빠르게 적용 하기위해 와이어프레임을 만들어 정리해서 보여주는것이 나의 가장 큰 목적이었다. 그리고 가장 중요한 넘버링 작업으로 화면에 대한 의사소통시 번호로 지칭하여 빠른 의사소통을 가능케 했고 버튼을 누..
2021.06.30