디자이너가 된다/디자이너부트캠프

[디자이너부트캠프]21일차 UI디자인 실전(3)

Gimmaa 2025. 2. 24. 13:57
728x90

[디자이너부트캠프]21일차 UI디자인 실전(3)

 

 

 

"디자인은 어떻게 보이느냐가 아니라, 어떻게 작동하느냐에 관한 문제입니다."

-스티브 잡스

 

 

 


강의노트


 

 

1)  UI 디자인의 정의 및 중요성

https://itlab.co.kr/v7/?c=322/practice&uid=24878
https://bahns.net/2642834

 

 

 

1.  UI디자인이 제품 성공에 미치는 영향

 

: 사용자 만족도 향상 > UI디자인으로 사용자가 제품을 쉽고 편리하게 사용할 수 있도록 함

: 재방문률 증가 > 고객 만족도가 높아지면 재방문률이 증가

: 긍정적인 구전효과 > 고객 만족도가 높아지면 긍정적인 구전효과가 유도됨

: 제품 성장 > 어떤 디자인이 제품의 성장에 더 도움이 될지를 고민하고 구현하면 제품의 성장에 기여할 수 있음

https://miro.com/ko/wireframe/

 

2. UI 디자인 프로세스 

기획 >> 디자인시스템 구축 >> 와이어프레임 작성 >> 화면 디자인 >> 프로토타이핑 >> 테스트 및 피드백

https://tonicwaterpool.wordpress.com/2020/03/25/ia-%EC%99%80-flowchart-%ED%99%94%EB%A9%B4%ED%9D%90%EB%A6%84%EB%8F%84/

 

 

 

2) 서비스 기획 및 아이디어 발상

1. 서비스 기획의 중요성

: 명확한 목표 설정과 타겟 사용자 정의, 사용자 니즈 파악 및 문제 정의

https://brunch.co.kr/@sylviasolution/45

 

2. 아이디어 발상 기법

: 브레인스토밍, 마인드 맵 등 창의적 사고 기법

: 경쟁사 분석을 통한 인사이트 도출

 

 

 

3) 디자인시스템의 이해와 구축

: 일관된 디자인을 위한 가이드라인과 컴포넌트의 집합

: 디자인시스템의 구성요소 > 색상, 타이포 그래피, 아이콘, 컴포넌트 등

http://old.remain.co.kr/shop/item.php?it_id=1615182288 

 

 

 

4) 와이어프레임 작성 및 레이아웃 설계

1. 와이어프레임의 역할

: 화면 구조와 요소 배치의 초안

: 기능 및 콘텐츠의 우선순위 결정

https://blog.adobe.com/ko/publish/2018/03/06/everything-you-need-to-know-about-wireframes-and-prototypes

 

2. 레이아웃 설계 원칙

: 그리드 시스템 활용

: 시각적 계층 구조 설정

: 일관성 있는 간격과 정렬

출처 : 아임웹

 

 

 

 

5) 화면 디자인 및 프로토타이핑

1. 화면 디자인

: 디자인시스템을 활용한 시각적 요소 적용

: 색상, 타이포그래피, 아이콘 등의 적용

강의자료

 

2. 프로토타이핑

: 인터렉션과 애니메이션 추가

: 사용자 흐름 시뮬레이션

: 사용자 테스트를 위한 준비

 <업데이트 전 / 이미지 출처 : Figma Config 2023>

 

 

 

6) 피드백 및 개선 방안 논의

1. 피드백 수집방법

: 사용자 테스킄를 통한 직접적인 피드백

: 팀 내 리뷰 및 크리틱 세션

 

2. 개선방안 도출

: 피드백 분석을 통한 문제점 파악

: 우선순위에 따른 개선 계획 수립

https://www.adobe.com/kr/creativecloud/design/hub/guides/simple-tips-to-improve-user-testing.html

 

728x90