UX • UI Design
iOS 디자인 가이드: 해상도, 레이아웃, 서체, 및 컴포넌트
iOS 디자인 가이드: 해상도, 레이아웃, 서체, 및 컴포넌트
2024.07.02iOS 애플에서 개발한 모바일 운영체제로, iPhone, iPad, iPod touch 및 Apple TV 등에서 작동. iOS 버전 각 버전마다 UX/UI 개선, 성능 향상, 새로운 기능 추가 등 다양한 업데이트. iOS 특징 디자인 일관성네비게이션애니메이션 및 전환 (iOS디자이너들이 매우 중요하게 생각하는 부분이 애니메이션과 트렌지션🖤 > 아이폰: 모든 제스처와 행동들이 굉장히 디테일✨)데이터 보호 및 개인정보 취급 (애플은 사용자의 개인정보 보호를 굉장히 중요하게 생각함. 디자이너 입장에서도 개인정보 취급에 대한 이해도를 가진 상태에서 인터페이스를 디자인하기~)접근성 (접근성을 매우 중요!하게 생각함. 디자이너는 시각적, 청각적, 혹은 운동 관련 장애를 가진 사용자들도 쉽게 접근할 수 있게 기능..
FIGMA CONFIG 2024: AI 기능과 그 한계
FIGMA CONFIG 2024: AI 기능과 그 한계
2024.07.01FIGMA CONFIG 2024: AI 기능과 그 한계 언젠가 꼭 직접 San Francisco에 직접 방문해서 참가하는 장면을 상상하며..✨ 전철 안에서 시간을 활용하고자 피그마 컨피그를 감상했다. 신검을 받으러 가는길에 말이다..😭 FIGMA CONFIG 2024: AI Features and Their LimitationsImagining myself attending the event in San Francisco someday...✨ I watched the Figma Config on my way to get a health check-up, trying to make the most of my time on the subway.😭 우와대박미쳤어...🥹 정말.. 온몸에 소름이 끼칠정도..
안드로이드 앱 디자인: 컴포넌트, 서체, 에셋 관리
안드로이드 앱 디자인: 컴포넌트, 서체, 에셋 관리
2024.06.27Android 레이아웃Materials Design Guideline- 플랫폼, 환경 및 화면 크기 전반에 걸쳐 일관성을 유지하기 위해 균일한 요소와 간격을 사용함. Android에서는 크게 3가지 영역으로 구분됨.App barsBodyNavigation*스마트폰 화면(스크린 사이즈 600dp 미만)인 경우*측정 방식 : 4dp 및 8dp 측정 기준 - 시각적인 균형을 이루기 위해 4dp, 8dp를 기준으로 크기와 간격을 정한다. 구성 요소의 크기는 8dp 단위로 조정되어 각 화면에서 시각적으로 일관되게 제작가능✨. 아이콘 같이 작은 요소는 4dp 단위에 맞출 수 있지만- 텍스트는 4dp 기준선 그리드에 떨어질 수 있다는 것ㅎㅎ >>> 글줄에따라 폭이 달라질 수 있기때문! 좌정렬인 경우, 좌측- 우정렬..
안드로이드 Android 디자인 : dpi / mdpi / dp / sp
안드로이드 Android 디자인 : dpi / mdpi / dp / sp
2024.06.26Android란?: 구글에서 만든 소프트웨어Ex. 삼성 갤럭시, A시리즈 노트 시리즈, 폴더 등 구글 Pixel 시리즈: 오픈 소스 운영체제로 구글이 개발한 모바일 운영체제다.: 안드로이드 운영체제는 스마트폰, 태블릿 등의 다양한 디바이스에서 실행될 수가 있고- 많은 애플리케이션을 포함하여 풍부한 기능을 제공함. Android 특징서체 : Roboto단위 : dp, sp최소 탭 크기 : 48 x 48 dp>> 필수는 아니지만 안 지킬 경우에 손이 두꺼운 사람에게는 제대로 터치가 되지 않아서 불편을 줄 수 가 있다.내장 네비게이션 : O> 예전의 아이폰과 다르게 뒤로 가기나 홈 이러한 물리적 버튼이 디바이스에 있었는데- 최근들어 스크린이 커지고 스크린 내부에 OS 자체 뒤로가기 라든지 UI 네비게이션을 제..
내비게이션 : Navigation Bar / Segmented Controls / Tab bars / States
내비게이션 : Navigation Bar / Segmented Controls / Tab bars / States
2024.06.25내비게이션: 사용자가 목적에 이르기까지 페이지 간에 자연스럽게 이동할 수 있도록 안내하는 시스템 플로우차트: 흐름도라고도 하는데, 앱 서비스의 복잡도에 따라 올바른 내비게이션 시스템 구축.: 설계가 제대로 되지 않으면, 문제가 발생한다. 사용자가 이전 페이지로 갈 수 없는 문제 등. 내비게이션 요소: 사용자의 이동을 위해 제공하는 컴포넌트Navigation BarSegmented ControlsTab bars*컴포넌트 명칭은 iOS 기준. 컴포넌트 - Navigation Bar> 해당 페이지에 대한 페이지 이름> 해당 페이지 내에서만 제공하는 부가 기능을 아이콘 메뉴로 제공> 상세 페이지로 이동한 경우 뒤로가기 버튼 필수 실제로는 커스텀 컴포넌트를 활용해서 직접 뒤로가기 아이콘부터 스타일들을 안드로이드와..
썸존과 터치 포인트 + 제스처 (탭 / 롱 프레스 / 핀치 / 플링 etc)
썸존과 터치 포인트 + 제스처 (탭 / 롱 프레스 / 핀치 / 플링 etc)
2024.06.24썸존과 터치 포인트터치 타깃 or 핑커터치포인트- 손 끝으로 클릭하기 위해 유효한 터치 영역을 제공해야 한다.- 누군 손가락이 얇고, 누군 뭉툭하기에 표준을 제시(: 안드로이드 : 48 x 48 dpiOS : 44 x 44 pt *최소 터치 영역의 사이즈를 48dp로 적용 사용 환경 이해- 스마트폰 사용환경과 사용자의 습관에 따라 다름 지하철, 버스에서 한 손(왼손, 오른손)으로 사용침대에 누워서 거치해서 사용길을 걸어가며 한 손에 가방(짐)을 들고 사용책상에 앉아 양 손으로 사용흡연을 하거나 커피를 마시며 왼손으로 사용- 2013년도 Steven Hoober가 진행한 조사 결과한 손 사용 : 49%감싸기 : 36%양 손 사용 : 15%: 15%를 제외하고는 한손으로 조작하는 경우가 많다. 이럴때 어느..
UI 디자인 : 레이아웃 / 컬러 / 아이콘 / 서체 / 그래픽 / UGC
UI 디자인 : 레이아웃 / 컬러 / 아이콘 / 서체 / 그래픽 / UGC
2024.06.23UI 디자인: UI 디자이너가 알아야 할 공통 개념 - 레이아웃: 화면 크기, 텍스트, 이미지, 여백 등의 요소를 고려하여 앱 내 정보를 시각적으로 배치.- 컬러: 색상과 관련된 디자인 원칙.- 아이콘: 시각적 상징을 통해 정보를 전달하는 그래픽 요소.- 타이포그래피: 글꼴과 글자의 배치와 스타일.- 그래픽: 이미지와 시각적 요소.- 썸존, 터치타깃: 사용자의 손가락 크기와 터치 범위를 고려한 디자인.- 제스처: 사용자의 손동작을 이용한 인터페이스 조작.- 네비게이션: 사용자가 앱 내에서 이동하는 경로와 방식.- 상태: 앱의 다양한 상태 (로딩, 에러 등)에 대한 시각적 표시. Layout- 화면 크기, 텍스트, 이미지, 여백 등을 고려하여 정보를 배치.- Grid System: 요소를 질서 있게 배치..
앱이 만들어지는 과정
앱이 만들어지는 과정
2024.06.22앱이 만들어지는 과정 : 기획-디자인-개발-QA-배포 1단계 — 기획- 목적: 시장의 문제를 발견하고 해결책을 계획.- 고민: 무엇을, 왜, 어떻게 만들지. 2단계 — 디자인- 경험 설계: 사용자 경험을 어떻게 설계할지.- 원칙: 원칙, 경험 설계, 차별화. 3단계 — 개발- 플랫폼 선정: 어떤 플랫폼에 개발할지 결정.- 진행: 개발 진행, 데이터 로깅. 4단계 — QA (품질 보증)- 검증: 놓친 부분이 없는지 확인.- 절차: QA Plan, 기능 테스트, 결과 공유.5단계 — 배포- 마무리: 앱 배포 준비.- 스토어 설정: 플레이스토어, 앱 스토어 내 런처 아이콘, 미리보기 및 설명 작성.- 홍보: 다양한 채널에 마케팅 콘텐츠 제작 및 발행.- 운영 준비: 고객 경험 관리, 오류 대비, 피드백 처..
UX/UI 디자인 툴 / 앱 vs 웹 / Android와 iOS 의 차이점
UX/UI 디자인 툴 / 앱 vs 웹 / Android와 iOS 의 차이점
2024.06.21UX/UI 디자인 툴과 사용법 UX/UI 디자인 툴 1. 피그마 (Figma) 전세계 1위 🖤 피그마는 전 세계적으로 가장 많이 사용되는 디자인 툴로, 협업과 프로토타이핑에 강점을 지님.2. 스케치 (Sketch)주로 대기업에서 사용되며, 피그마와 함께 사용되는 경우가 많다.3. 어도비 XD (Adobe XD)삼성 지정 툴 : 삼성에서 기본 사용 툴로 지정된 어도비 XD는 통합된 디자인과 프로토타이핑 기능을 제공!*회사마다 사용하는 툴이 다르므로 다양한 툴을 익혀두면 좋다(: 그래픽 디자인 툴 포토샵 (Photoshop) : 그래픽 디자인의 기본 툴. (우리 함께한지 벌써 12년째..★)일러스트레이터 (Illustrator): 확장 가능한 벡터 그래픽을 만드는 데 필수적. (너두★) 고품질 프로토타이..
UX • UI 디자인 중요성 / 성공한 간단 앱 사례
UX • UI 디자인 중요성 / 성공한 간단 앱 사례
2024.06.20✦ UX • UI 디자인이란? UI (User Interface)정의: 사용자 인터페이스는 애플리케이션의 시각적 요소와 사용자와의 상호작용을 포함한다.목적: 사용자가 직관적이고 효과적으로 애플리케이션을 사용할 수 있도록 돕는다.✦ What is UX • UI?UI (User Interface)• Definition: User Interface encompasses the visual elements of an application and the interaction between the user and the interface.• Purpose: It aims to help users navigate and interact with the application intuitively and effecti..