[UI / UX] 정리 1

Parker cho·2022년 6월 19일
0

디자인

목록 보기
1/1

시각적인 감각과 능력을 기르는 비결

  1. UX, UI 디자인의 원칙 및 정리
  2. 잘 만든 디자인 따라해보기 (코딩곽 마찬가지임)

UX / UI 디자인 프로세스

  1. 공감하기
  2. 정의하기
  3. 아이데이션
  4. 프로토타입
  5. 테스트
  6. 출시

UI 디자인 프로세스

  1. 스케치
    • 핸드 스케치
  2. 와이어 프레임
    • 스케치를 통해 나온 아이디어 고도화
  3. UI 디자인
    • 와이터 프레임을 토대로 시각적인 완성도가 높은 디자인 그려주기
  4. 프로토타이핑 (Prototyping)
    • UI 디자인 화면을 서로 연결시켜줘서 구동 되는 것 처럼 보여줌
    • 실제 개발이 된 것은 아니지만, 사용자 테스트 단계에서 사용자의 피드백을 얻거나 내부 커뮤니케이션을 위해 제작
  5. 핸드오프 (Hand-off)
    • UI 디자인이 완료된 후, 실제품 개발을 위해 개발자에게 전달하는 디자인 산출물
    • 실제 개발을 할 수 있도록 세부적인 요소들을 구체적의로 정의함

프로토타입의 종류

Fidelity 가 높을수록 수정하는 데 시간이 오래걸림

  • Lo-Fi(Low Fidelity)
    • 스케치 : 빠른 실행과 반복, 커뮤니케이션에 좋은 방법
  • Mid-Fi(Mid Fidelity)
    • 와이어프레임: 텍스트, 버튼 등 화면에 대한 구성에 대해 정의하고 화면 간의 플로우를 표현.
      최종 버전인 UI 디자인 대비 빠른 수정 및 커뮤니케이션에 좋음
  • Hi-Fi(High Fidelity)
    • UI 디자인: 사용자가 실제로 사용하게 될 높은 퀄리티의 디자인 산출물. 색 폰트 및 폰트 사이즈, 아이콘 등 세부 사항이 적용됨.
profile
true nobility is being superior to your former self

0개의 댓글