UI UX 디자인UI UX 디자인
🎨

UI UX 디자인

 
UX | User Experience ( feat. 사용자 경험 )
사용자가 어떤 시스템, 제품, 서비스를 직/간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다. 단순히 기능이나 절차상의 만족뿐 아니라 전반적인 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고 상호 교감을 통해 서 알 수 있는 가치있는 경험이다.
 
 
UX→Flow🚗 (표정과성격🌝 )
UI→Component⚙ (눈코입과외모🐽 )
 
 
notion imagenotion image
 
notion imagenotion image
 
notion imagenotion image
 
 
notion imagenotion image
 
notion imagenotion image
 
 
 
notion imagenotion image
 

Apple | Human Interface Guidelines ( HIG )

https://developer.apple.com/design/human-interface-guidelines/ 1985년부터 출간된 “Apple Human Interface Guidelines: The Apple Desktop Interface”을 근간으로 작성. Apple이 만든 플랫폼(macOS, iOS, watchOS, tvOS)에서 일관성을 갖추기 위한 디자인 가이드라인
References
iOS 휴먼 인터페이스 가이드라인 요약 - https://blog.shako.net/ios-human-interface-guidelines-summary/
iOS HIG 스터디 자료 ‒ YodaCodd - https://medium.com/@codesquad_yoda/ios-hig-스터디-자료-590e039eece2
사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사 - https://story.pxd.co.kr/400
[부스트코스] iOS 프로그래밍 / edwith - https://www.edwith.org/boostcourse-ios/lecture/17991/

Google’s Material Design Guidelines

Material Design
https://material.io Android의 디자인이 iOS에 비해 세련되지 못하다는 비판을 해결하기 위해 2014년, 구글이 발표한 디자인 가이드라인. 모바일 뿐만 아니라 다른 기기에서 통일성 있는 사용자 경험을 제공하고자 개발. 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감원근감을 주는 방향을 지향.
 
ex. Android의 Floating Action Button
 
notion imagenotion image
 
 
또 이게 올라갈 화면의 비율을 다 고려해서 작업해야함.
notion imagenotion image
옵티머스 뷰 2 라는 폰? 비율이 특이함.
그래서 이것을
클라개발자라면 디자인을 어느정도 알아야함.
디자이너가 만든 디자인 대로 개발을 해야하며,
그 개발을 할 때는 서버 개발자가 만든 코드대로 개발을 해야함.
 
 

프로토타이핑 툴

 
notion imagenotion image
notion imagenotion image

디자이너와 개발자 사이의 소통을 위해 만들어진 게 바로 제플린, XD, 스케치

notion imagenotion image
  • 왜냐면 디자이너가 디자인한대로 개발을 하는 게 생각보다 어려움.
  • 그래서 디자이너가 직접 HTML, CSS를 배워서 퍼블리셔를 겸하는 행태가 있었던 것임.
notion imagenotion image
그 디자인을 누르면, 그걸 코딩하기 위해서 괜찮은 소스코드를 추천해주기도 하고,
길이 같은 거를 바로바로 알려주기도 한다.
 
notion imagenotion image
 
 

Figma

notion imagenotion image
 
notion imagenotion image