모바일UI/UX 디자인 기본 및 실습 -1

UI/UX 디자인을 배우기 시작했다. 국비지원수업으로 약 2~3개월정도 진행되는 수업이다.

배운 내용을 리뷰하는 마음으로 수강기간동안 쭉 포스팅 될 예정이다.

오늘 수업은 기본 개념이라 조금 지루한 면이 있었다. 후반부에는 실습으로 넘어가서 훨-씬 재미있었다.

모바일 개념에서 확인할 점은 아이폰개발은 뒤로가기 버튼이 필수라는 것과  아이콘에는 On/Off 버전이 있다는 것. 이정도만 짚어도 될 것 같다.

실습은 일러로 아이콘 라인을 따는 작업을 했다. (해당포스트: [UI] 모바일UI/UX 디자인의 기본과 약간의 실습 -2 )

<모바일 UI / UX 용어>

0. 네비게이션 영역

1. 모바일 종류

1) 모바일 앱

- 네이티브 앱(인터넷 연결 없이 사용 가능)

- 하이브리드 앱(ex. 멜론. 앱이지만 인터넷 연결이 되어야 사용 가능)

2) 모바일 웹

- HTML 사용

2. 티커바

- 아래 좌우 선택하는 바

- 앱에 따라 있는 것이 있고 없는 것이 있음

3. 운영체제 관련

1) 뒤로가기 버튼

- 안드로이드에만 기본으로 있음

- IOS는 뒤로가기 버튼을 꼭 만들어줘야함

4. 디자인 트렌드

플랫디자인 vs 스큐어모피즘

현재는 플랫디자인=미니멀리즘 디자인(ios7이후 변하면서 트렌드가 이어지고 있음)

스큐어모피즘은 실존하는 메타포로부터 형태를 따 만듦

1) 스큐어모피즘 Skeuomorphism

그리스어로 Skeuos는 Vessel(용기) or Tool(도구), morphe는 Shape(형태)을 의미 '어떤 도구의 형태,형식'이라는 뜻.

'원래 도구의 형태를 그대로 따라가는 양식'

참고: http://story.pxd.co.kr/591 [pxd UX Lab.]

5. 아이콘

1) 라인/ 풀 아이콘

2) On/ Off 아이콘

3) 라인

- 3~5픽셀이 일반적

- 얇고 가벼운 라인: 2~3픽셀

- 두꺼운 라인: 5~7픽셀

- 웹용. RGB로 작업해야함

참고할만한 사이트

https://design.tutsplus.com/tutorials/create-a-flat-style-vegetable-poster-in-affinity-designer--cms-24440

https://creativeshory.com/infographic-drawbacks-benefits-flat-design-skeuomorphism/

http://rollstory.tistory.com/entry/BEST30%ED%94%8C%EB%9E%AB-%EC%9B%B9-%EB%94%94%EC%9E%90%EC%9D%B8Flat-Web-Design-%EC%B6%94%EC%B2%9C30

이어지는 포스트: [UI] 모바일UI/UX 디자인의 기본과 약간의 실습 -2