본문 바로가기
UI Theory

[W3_D1] Design History + Empathy

by uiuxer 2023. 2. 20.

1. Design History

- 물건의 제작 : 인간의 행동 양식에 따라서 발전과 개선을 해옴

- 도구의 사용 : 1차적 목적을 위해 (농업과 전쟁 등 생계를 위한 목적)

- 장식적인 면에 치중 : 기술의 발전으로 공예품 제작 (부과 권력 과시)

 

** Mass Production : 대량생산 

- 산업혁명 (18-19C)

- 대량생산 시스템

- 산업혁명 전,후

   산업혁명 전_ 동력원을 자연에서 얻어서 사용 (물.바람.가축 등) : 외곽지역

   산업혁명 후_ 증기기관을 이용한 새로운 동력원 등장(자유로운 이동이 가능) : 공장과 노동자들이 도시로 진입(더 많은 노동인력), 생산속도 향상

디자이너 역할의 변화

- 수요 < 공급 (사용자가 추구하는 가치기준이 높아짐으로써 그에 따른 스타일에 소비하기 시작)

- 컨셉정의 및 개발

- 디자인와 소비자 통찰을 겸하여 사용자, 고객, 소비자에게 실용적으로 가치있는 경험을 제공

 

 

** Industrial Revolution : 산업혁명

산업혁명 이전_ 대량생산이 불가능한 시기, 장인들이 물건을 만드는 즉시적인 행동패턴

산업혁명 이후_ 동일하게 규격화하여 제품을 대량생산하기에 프로세스를 가진 계획적이고 체계적인 행동패턴

 

** Role of Designers

- 디자이너의 역할변화 

  오늘날에는 수요보다 공급이 많은 시대 (좋은 기술, 최점단 장비)

  고객과 소비자, 사용자 행동패턴이 많이 향상됨. (제품의 성능을 뛰어넘어 스타일,가치기준에 따라 소비함)

- 컨셉정의 및 개발

- 품질관리 & 협업 & 완결

- 최종양산

 

** Design Concept

디자인 개념의 변화 

사용자에게 쓸모있는 가치의 경험을 제공하기 위해

사람을 이해하고 사회문화측면, 기술, 트렌드를 적절히 활용하여 

비즈니스 전략을 수립하는 디자이너의 작업방식과 감수성이 필요함

 

 

**UIUX Design

2006 ~

배경 : CRT 모니터 (뚱뚱한 모니터) + 윈도우 체제 

         카메라폰 (무거웠음) 테블릿PC는 없었음

         작업툴 (포토샵,일러스트,드림위버,플래시)

         디자인 스타일은 옛스러운 엠보싱느낌. 그라데이션, 텍스트는 많이 작음 (본문11-12)

         밀도가 높은 디자인 (정보 투머치)

 

Now 

배경: 얇아진 모니터, iMAC iSO 체제

         모바일 기기 최상급카메라 기본+인터넷 가능

         개발된 작업툴 (쉽고 빠르고 가볍게 가능)

         전문성이 많이 올라감

         여백이 많고, 플랫한 디자인으로 트렌디가 바뀜

 

디자인 발전과 툴

" 사용자의 경험을 반영하여 보다 나은 웹, 모바일 사이트를 제작하는 작업을 하는 사람, UIUX Designer"

2. Design Empathy

- UX Designer 

- UI Designer

- Publisher 

- Marketers

- Motion Designer etc

디자인의 기준은 너무나 다양하다. 

협업을 하기위해서 기준을 세워야한다.  (많은 사람들이 공감할 수 있는 타당성이 있는 기준점을 세워야된다)

 

** Case Study

ex)

- Apple 규칙

 

 

- Metro, Modern UI

단순하고 직관, 깔끔 절제된 레이아웃 디자인, 심플함. 큼직한 글자, 시원한 형태

모바일환경에서 유용한 디자인

 

- Skeuomorphism, 스큐어모피즘

모방하다 제한하다 

기술적인 측면에서는 효과적이지 않음 (디자인이 많이 들어감)

생소한 기계를 사용하는 유저에게 직관적으로 보이게 하기위해.

 

- Flat Design, 플랫디자인

구글 Material Design , 애플디자인

 

**Human Interface Guidelines

https://developer.apple.com/design

- 애플 디자인 가이드

 

** Material Design Guidelines

https://material.io/design

- 안드로이드 (Google) :  간결하고 심플한 가이드

 

** Fluent Design 

- Microsoft : 2D 디자인과 약간 다른 느낌. 가상현실 공간개념


What is Prototyping?

- 제품을 실제로 만들기 전에 제품과 유사하게 만들어 제품의 오류나 결함을 찾아내는 과자ㅓㅇ

- 엔지니어와 소통을 위해

- 비즈니스 이해관계를 설득하기 위해 

- 디자인 팀 내부에서 결정할 때 도움을 주기 위해 (시안)

 

** Prototyping tools

Figma  Sketch  XD

- 바로 구현가능하지만 세밀한 인터렉션까지는 만들 수 없다 

 

Protopie 

- 직관적이고 정교하게 가능

- 복잡한 코드 없이 제작 가능

 

Framer   Ae

- 코딩을 해야되는 번거로움이 있어 바로 구현하기 어려움

- 정교한 작업을 할 수 있는 장점

 

그래서 Protopie 수업을 오늘부터 시작해보려 한다!


오늘부터 정말 제대로 된 팀프로젝트가 시작된다

저번주에 우리 팀이 함께 만들었던 설문조사가 주말동안 진행되었다 

오늘 확인해보니, 생각보다 많은 분들이 설문해주셨다 너무 감사했다 

이 설문 결과를 가지고 앞으로 조사보고서를 써야되는데 잘할 수 있겠지?

지금까지 많은 과제들 그래도 꾸준하게 해왔으니 계속 유지해보자

 

오늘부터 프로토타입을 위한 수업을 듣게되었다

코딩공부 잠깐 했던 부분이, 이렇게 쉽게 코드를 치지 않고 인터렉션이 된다니 너무 신기했고 

코딩처럼 입력하는 값이 바로바로 나와서 속 시원했다 

약간 처음 접하는 프로그램이여서 익숙하지 않지만, 이것저것 다뤄보면서 빨리 익혀 멋진 인터렉션 결과물을 만들어보고싶다

기대가 된다 프로토파이.

오늘 저녁부터 팀플시작인데 잘해보자 

반응형

'UI Theory' 카테고리의 다른 글

[W3_D4] 2.Interface Design  (0) 2023.02.23
[W3_D2] Design Process & Define  (0) 2023.02.21