본문 바로가기

FrontEnd/UI UX

[UI/UX] UI/UX Design이란?

728x90
반응형

1. UX(User Experience) : 사용자 경험

 

   ▷ 사용자가 어떤 제품이나 서비스와 상호작용하는 과정에서 얻는 총체적인 경험입니다.

   ▷ 사용자 경험 디자인 : 익숙함을 전제로 디자인 하는 것

   ▷ 예시) 과거의 네이트온과 유사한 카카오톡

 

   ▷ 사용성이 좋다 : UX가 좋음

   ▷ 사용성이 나쁘다 : UX에 문제가 있음

 

 

◎ UX 디자인 원리(3가지)

 

(1) 일관성의 원리

   ▷ 상단 네비게이션바,신세계 백화점 홈페이지, 이마트, 스타벅스 로고의 위치, SSG 닷컴

 

(2) 행동유도성의 원리

   ▷ 사람이 자연스럽게 행동할 수 있게 하는 시각적인 요소

 

(3) 정보설계(정보위계)

   ▷ 페이지 구성을 위한 카테고리 정리

 

◎ 원리를 알아야하는 이유?

   ▷ 디자인에 도움이 됩니다.

   ▷ 논리력을 키울 수 있습니다.

 

 

 

2. UI(User Interface) : 사용자 인터페이스

 

   ▷ 사용자가 직접 맞닿게 되는, 즉 사용자가 마주하게 되는 제품의 시각적 영역

   ▷ UI 디자인 : 시각적 구성요소 (color, Icon, layout......)

   ▷ 햄버거 메뉴

   ▷ 디자인 전략 : UX/UI 디자인 방법론적 접근

   ▷ 기술 전략 : Adobe XD 프로그램의 이해

   ▷ XD는 16년도에 시작되었음

 

 

 UI 디자인 원리 : 시각적 디자인을 보는 감각을 기를 수 있음.

 

(1) 유사성의 원리 : 서로 다른 위치에 있어도 색이 같은 것끼리 유사하다고 보는 경향이 있습니다.

   → 예시) 방향, 길이, 너비, 크기, 형태, 곡률, 색상, 색조, 위치, 그룹 등이 있습니다.

(2) 근접성의 원리 : 근접한 물체들이 그룹을 형성하는 경향이 있습니다.

   → 따라서 배치할 때 비슷한 것들끼리 근접하게 모아놓음으로써 안정감과 통일감을 주는 것이 좋습니다.

(3) 일관성 : 일관성을 통해 통일감과 안정감을 줄 수 있어야 합니다. 이로 인해 사용자에게 친근감을 줍니다.

 

 

XD에서 파일 저장하면 클라우드에 저장됩니다.

따라서, 바탕화면에 저장하려면 로컬 문서로 저장해야합니다.(파이썬)

 

 

UI/UX에 대해서 기본적인 의미를 배워봤는데 역시 개념만 익혀서는 이해가 잘 되지 않는 것 같아요!

 

다음 시간에는 사용 방법에 대해서 알아볼게요!

 

많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~

 

728x90
반응형

'FrontEnd > UI UX' 카테고리의 다른 글

[UI/UX] Adobe XD를 이용한 실습 및 단축키 사용법  (0) 2022.12.31
[UI/UX] 기본 프로세스는?  (0) 2022.12.30