UI 디자인 1-3강 for My pliAlarm ⏰

새벽하늘·2021년 4월 20일
0

플리알람

목록 보기
1/6

강의

패스트캠퍼스 이영주 강사님

목차

01. Human Interface Guideline 훑어보기 ✔️
02. Figma랑 친해지기 ✔️
03. 디자인 시작하기 ✔️

04. 로그인 페이지 디자인
05. 콘텐츠 리스트 디자인
06. 앱 아이콘 디자인
07. 스플래시 디자인
08. 간단한 프로토타입 만들기


01. Human Interface Guideline 훑어보기
🍎 애플에서 제공하는 가이드라인

📱 iOS Design Themes

" 다른 플랫폼과 차별화하는 세 가지 주요 테마 "

  • Clarity (명확함)
    텍스트는 모든 크기에서 읽을 수 있음
  • Deference (차별성)
    콘텐츠가 그 무엇보다 중요함을 강조 ( 투명성, 흐릿함 등을 이용 )
  • Depth (깊이)
    3D 터치 지원과 관련

" 앱을 만들 때 염두에 두어야 할 것들 "

  • 미적무결성
  • 일관성
  • 직접 조작
  • 피드백
  • 은유법
    실제 쓰는 그대로 앱으로 가져올 것
    ex) 이북 앱 같은 경우 책 넘기는 효과까지
  • 사용자의 제어

📱 Interface Essentials
| Bars. | Views. | Controls. |
: 후에 더 자세히 다룸

📱 App Architecture
Launching - Onboarding - Loading - Modality - Requesting Permission - Settings


02. Figma와 친해지기

사용 툴: Figma
선택 이유:
1. 브라우저 기반
2. 윈도우/맥 둘다 사용 가능
3. 디자인 히스터리, 버전 관리 용이
4. 디자인계의 구글 문서툴, 채팅이 가능한 수준

디자인 시스템 or UI Library 컴포넌트
: 한번 디자인 하면 계속 재사용이 가능

: 실무에선, 매우 많은 UI 요소들을 만들어놓고 (UI 라이브러리) 꺼내면서 사용
메인 컴포넌트 - 자식 컴포넌트

오토 레이아웃
플러그인
(직접 사용해보고 추후 포스팅 추가)


03. 디자인 시작하기

[ 폰트 개념 ]
세리프, 산세리프
명조, 고딕
부리, 민부리

[ 추천 사이트 ]
pinterest, behance, dribbble, mobbin, product hunt

무드보드
: 스스로가 가장 중요하다 생각 되는 부분

앱의 메인 컬러 정하기
채도 높은 색은 사용이 어려움
: -> 뽑은 색에서 채도를 낮추기
: --> 자기 주장이 강하지 않은 색으로

많은 색을 사용하지 않음
보통: 메인 1 + 보조(무채색 기반) 3
컬러 스킴 사이트

profile
만들고 싶은 거 다 만들 수 있는 그날까지

0개의 댓글