한번에끝내는UX/UI디자인초격차패키지Online
-
UI 클론디자인 iOS 앱, 카드 만들기 (계속), Sketch 앱 사용법 기초 - 패스트캠퍼스 챌린지 15일차UX／UI design 2021. 11. 15. 22:19
3일 연속으로 오늘도 계속 이어서 앱스토어 페이지 클론 디자인 작업을 실습하고 있다. 페이지에서 타이틀 부분 아래에 총 3개의 카드를 강사님의 가이드를 따라서 완성했다. 위 이미지가 내가 Sketch 앱을 통해서 완성한 3장의 카드 모습이다. 오늘 배운 내용 : 텍스트 수정창에서 옵션 키 + 엔터를 치면 줄바꿈 가능 줄바꿈이나 제목추가 등으로 간격이 달라지는 경우에 해당하는 심볼 variation 작업 아트보드와 라운드사각형 프레임의 구분을 위해 아트보드에 배경색을 채우고 export 되지 않게 하기 UI디자인 작업을 할 때는 상하좌우 그리고 엘리먼트간의 간격(padding)을 픽셀 단위로 계속 정렬하며 작업해야 함 줄자 기능 - 툴바에 줄자 추가하기, 가이드선 긋기, 가이드선 제거하기 아트보드 위치를 ..
-
UI 클론디자인 iOS 앱, 카드 만들기, Sketch 앱 사용법 기초 - 패스트캠퍼스 챌린지 14일차UX／UI design 2021. 11. 14. 23:45
카드 만들기 (1) Merge duplicate symbols in Sketch: https://sketchapphub.com/resource/merge-duplicate-symbols/ Merge Duplicate Symbols | The Sketch App Hub Merge symbols with the same name Say you have three different cards with three different buttons in them. Each button is a symbol, and somehow those three symbol buttons have the same name. Let’s merge them! Choose the one you want to keep and pres..
-
UI 클론디자인 iOS 앱, 타이틀 바 만들기, Sketch 앱 사용법 기초 - 패스트캠퍼스 챌린지 13일차UX／UI design 2021. 11. 13. 22:08
타이틀 바 만들기 클론 디자인 실습으로 한글 버전이 아닌 영문 버전 앱스토어를 하는 이유는 iOS에서는 영문은 San Francisco, 한글은 산돌고딕(Apple SD Neo Gothic) 폰트를 사용하는데 한글에 숫자, 영문, 특수문자에 들어가면 실제 앱에서는 자동으로 그 부분만 San Francisco 체로 바뀌어 구현되기 때문이다. 그래서 디자인과 실제가 달라지는 현상이 발생하므로, 영문으로 클론 디자인 실습을 진행한다. 오늘은 Sketch 앱을 통해서 클론 디자인을 처음으로 작업했고 위 이미지가 첫 결과물이다. 앱스토어 페이지 화면 중에서 타이틀 바만 만들었는데 1시간 넘는 시간이 훌쩍 지났다. 따라서 만드는 동안 계속 강의 화면을 일시정지하고 만들고 나서 다시 재생하기를 반복하다보니 강의 시간..
-
iOS UI클론디자인을 위한 Sketch 설치, iOS 리소스와 폰트 설치 - 패스트캠퍼스 챌린지 12일차UX／UI design 2021. 11. 12. 23:01
세션 6. UI 클론디자인 iOS 앱 레이아웃과 컴포넌트 분석하기 Sketch 가입 및 앱 설치 (30일 trial 무료) https://www.sketch.com/ Sketch www.sketch.com iOS 리소스와 폰트 설치하기 *애플은 영문은 San Francisco, 한글은 산돌고딕을 사용함. 애플 영문 폰트 다운로드 : https://developer.apple.com/fonts/ Fonts - Apple Developer Get the details, frameworks, and tools you need to use San Francisco, the system UI font for Apple platforms, in your apps. developer.apple.com 애플 디자인 리..
-
앱 아이콘 디자인, iOS 앱 디자인에 대한 이해 - 패스트캠퍼스 챌린지 11일차UX／UI design 2021. 11. 11. 23:02
앱 아이콘은 어떻게 디자인해야 하나요 생각보다 까다로운 앱 아이콘 디자인 - 디바이스 별 픽셀 밀도와 사용되는 영역에 따라 따로 만들어줘야함 *이미지 용량 줄이는 SW : https://imageoptim.com/howto.html ImageOptim — how to use imageoptim.com iOS 앱 디자인에 대한 이해 Apple 사이트에서 제공하는 Human Interface Guidelines 페이지는 계속 업데이트됨. 영문이고 자주 보지 않으면 낯설어져서 안 보게 되므로 종종 계속 봐서 친숙해져야 함. https://developer.apple.com/design/human-interface-guidelines/ Human Interface Guidelines - Design - Appl..
-
모바일UX, 터치스크린 제스처 조작 종류, 픽셀 밀도에 대한 이해 - 패스트캠퍼스 챌린지 10일차UX／UI design 2021. 11. 10. 23:55
세션 5. 모바일UX 터치스크린 UI는 어떤 특징이 있나요 터치스크린 제스처 조작 종류 터치 UI에서 사용자에게 제공해야 할 3가지 : Trigger(트리거), Action(액션), Feedback (피드백) 왜 픽셀 밀도를 알아야 할까요? * 픽셀 밀도 : 물리적으로 1인치(2.54cm X 2.54cm) 안에 들어가는 픽셀(화소)의 수 * 일반적인 모니터 기준의 웹 디자인에서는 72 PPI를 사용 * 2010년에 애플이 레티나 디스플레이를 공개. * 레티나 디스플레이(Retina Display) : 망막(Retina)으로는 픽셀을 구분할 수 없다는 의미로 애플에서 만든 용어 * 현재 판매중인 모든 애플의 디바이스는 레티나 디스플레이를 지원 * 아이폰은 PT 단위로 디자인 후 3가지 픽셀 밀도에 대한 그..
-
휴리스틱 평가를 통한 사용성 문제 분석과 벤치마킹 - 패스트캠퍼스 챌린지 9일차UX／UI design 2021. 11. 9. 21:39
어떻게 휴리스틱 평가를 해야할까요 휴리스틱 평가를 위한 심각성 척도 얼마나 자주 발생하는지? 사용자가 극복 가능한 수준인지? 심각 (Critical) - 제품 사용 중 사용자의 데이터가 손실되거나 제품의 사용성을 심각하게 저하시키는 상태 높음 (High) - 제품 사용 중 사용자의 태스크를 지속적으로 방해하는 문제가 발생하여 사용성과 사용자 경험에 영향을 주는 상태 중간 (Medium) - 제품 사용 중 사용자의 태스크를 일시적으로 방해하는 문제가 발생하여 사용자에게 혼란이나 짜증을 유발시키는 상태 낮음 (Low) 제품 사용 중 사용자가 사용을 주저하게 하거나 미적으로 문제가 있어 보이는 상태 휴리스틱 평가지 온라인 템플릿 https://airtable.com/shrl6QFXnjy5zKSgk/tblfmO..
-
레이블 만들기, Jakob Nielsen의 10가지 휴리스틱 평가 원칙 (사용성 평가) - 패스트캠퍼스 챌린지 8일차UX／UI design 2021. 11. 8. 23:11
어떻게 레이블을 만들어가야 할까요 카드 소팅 (Card Sorting) * 사용자들을 대상으로 카드에 쓰여진 레이블(Label)을 제시하고 직접 그룹화하게 하는 방법 * 이를 통해 제품을 사용하는 사용자들의 해당 지식이 어떻게 구조화되어 있는지 발견 가능 * 정보 구조를 만들 때, 메뉴의 구조와 메뉴명 등을 만들 때 활용 카드 소팅 수행 단계 1. 주제 선정 - 제품에서 표현될 50개 전후의 레이블을 각각의 카드에 기록 2. 그룹화 - 사용자들이 유사하고 생각하는 카드들끼리 그룹화하도록 함 3. 그룹에 이름을 붙임 - 그룹화가 끝나면 빈 카드를 주고 각 그룹에 대한 이름을 작성하도록 함 4. 설명 듣기 - 사용자들이 그룹화하고 이름을 붙인 이유를 들음 5. 15-20여 명의 사용자에게 수행 - 다수 사용..