저번 포스팅에 이어 오늘도 컨텐츠UI디자인 종류와 명칭에 대해 알려드리려고 합니다! 혹시라도 제 설명에 잘못된 내용이 있거나 이해가 어려우시다면 댓글 남겨주시면 감사하겠습니다. 오늘도 좋은 정보 알아가시면 좋겠습니다~ (1편부터 보시지 않으신 분은 아래의 링크로 들어가셔서 1편도 확인하시면 좋을 것 같습니다!)
https://chaeyeon-chaeyeon.tistory.com/14
[디자인스타일명칭] 컨텐츠UI디자인 스타일(기법) 명칭 정리하기_1편
여러분은 실무에서 작업을 하면서 가장 어려운 점이 무엇이신가요? 제가 가장 어려웠던 점은 UI디자인의 스타일이나 형태는 알고 있는데 정확한 명칭을 알지 못해 비슷한 종류의 레퍼런스를 많�
chaeyeon-chaeyeon.tistory.com
컨텐츠 UI 란?
_
" 디자인을 구성하는 UI 구성요소 중 가장 일반적이고 많이 사용하는 UI입니다.
쉽게 말해 모든 디자인은 컨텐츠 UI들로 구성되어 있습니다. "
소개해드릴 컨텐츠UI디자인 스타일(기법) 명칭은 다음과 같습니다.
22. 100% bg image / 100% bg video
12. Illust Graphic
일러스트 그래픽 이미지를 활용하여 만든 디자인으로 사용자가 사물, 형태, 개념 등을 쉽게 알아볼 수 있도록 디자인하는 것입니다. 상징성을 강조하는 것이 중요하며 예시로는 픽토그램 등이 있습니다.
13. Inforgraphic
정보와 디자인을 합성한 단어로 정보와 데이터, 지식 등을 시각화하여 표현한 것입니다. 한 장의 정보형 이미지로 뉴스와 정보 등에 인사이트를 담아내는 것이 특징이라고 합니다.
14. Landing Page
사용자가 어떠한 접근 경로로 원하는 목적 화면에 도달하였을 때 가장 먼저 보여지게 되는 화면입니다. 사용자 마다 서비스를 이용하는 목적이 다르고 그에 따른 다양한 접근 경로가 있기 때문에 이러한 사용자들의 서로 다른 목적을 보다 쉽게 달성할 수 있도록 페이지를 전략화하는 사용자 인터페이스입니다. 인터넷뉴스를 보면 대부분 뉴스 기사를 눌러 처음 보게 되는 화면이 뉴스의 홈 화면보다는 뉴스 기사의 디테일 페이지이기 때문에 뉴스의 메인 홈 화면보다도 기사의 디테일 페이지에 광고를 많이 넣은 전략을 예로 들 수 있습니다.
15. Long Pages
많은 양의 컨텐츠를 한 페이지에 스크롤 휠 처리로만 보여주는 방식의 디자인입니다. 터치 제스처가 이용되는 스마트폰이나 태블릿과 같은 터치식 환경에 적합합니다. 메뉴를 눌러서 화면을 전환하여 컨텐츠를 보는 행위는 사용자의 피로도를 높이게 되기 때문에 메뉴가 아닌 스크롤로만 처리하는 방식은 간결하고 컨텐츠 중심적이라 사용자가 컨텐츠를 쉽게 이해하고 경험하는 데에 도움을 준다고 합니다.
16. Material Design
Flat 디자인의 장점을 살리면서 그림자 효과를 사용하여 입체감을 살리는 디자인 방식입니다. 2014년 구글이 안드로이드 스마트폰에 적용하면서 안드로이드 디자인 가이드라인의 핵심으로 자리 잡은 디자인이라고 하네요!
17. Responsive Design
서비스가 제공되는 화면의 크기를 기기에 따라 자동으로 변화시켜주는 반응형 디자인입니다. 다양한 스크린이 제공되기 시작하면서 많이 사용하기 시작했고 한가지의 디자인 소스로 많은 스크린 크기에 맞게 최적화된 화면을 보여주어 편리합니다.
18. Stack UI
UI 컨텐츠가 카드처럼 디자인되어 뒤로 계속해서 쌓여 있는 듯한 느낌을 주는 사용자 인터페이스입니다. 최근 소개팅앱에서 마음에 드는 사람과 아닌 사람을 구별할 때에 많이 사용하고 있는 디자인입니다. 같은 컨텐츠를 노출할 때 사용하는 비슷한 UI로는 List UI 나 Card UI 등이 있는데 그런 UI 형식들보다 훨씬 사용자 몰입도가 높은 디자인입니다.
19. Timeline
순서대로 정렬해야 하는 UI컨텐츠가 있을 때 유용하게 사용되는 디자인입니다. 선으로 단계를 순서대로 정리하여 간단하게 표현한 디자인입니다. 연표와 같은 느낌으로 사용할 수 있으며 프로젝트나 일정의 시작 시기부터 완료까지의 단계를 선으로 나타내 사용하기에 적합합니다.
20. Visualization
대량의 데이터(빅데이터)를 시각화하여 정보를 다른 측면에서 관찰할 수 있도록 만드는 디자인 방식입니다. 시간적, 공간적, 분포적, 네트워크 흐름 등을 파악할 수 있다고 합니다.
21. Walkthrough
도움말과 같은 개념의 디자인으로 초기에 앱을 진입할 때에 볼 수 있으며 앱의 특징이나 중점적인 기능, 사용법 등을 Dot Indicator가 있는 배너 형태로 구성하여 사용자에게 정보를 전달하는 디자인입니다.
22. 100% bg image / 100% bg video
배경 전체를 큰 이미지로 덮고 그 위에 UI요소들을 넣어서 만든 디자인입니다. 사용자가 보기에도 쉽고 한눈에 표현하고자 하는 내용을 파악할 수 있어 사용자 이해도가 높아 많이 사용합니다.
끝까지 봐주셔서 감사합니다! :-)
[디자인스타일명칭] 모션UI디자인 스타일(기법) 명칭 정리하기 바로가기 >
[디자인스타일명칭] 모션UI디자인 스타일(기법) 명칭 정리하기
오늘도 UI의 종류와 명칭에 대해 정리하여 알려드려보려고 합니다! 오늘은 모션 UI의 종류와 명칭에 대해 말씀드릴게요. 많은 도움 되시길 바랍니다~ 모션 UI 란? _ " 최근 들어 많이 뜨고 있는 UI
chaeyeon-chaeyeon.tistory.com
참고서적
https://book.naver.com/bookdb/book_detail.nhn?bid=13650234
사용자 경험을 창조하는 UX/UI 디자인
<사용자 경험을 창조하는 UX/UI 디자인>은 체계적인 UX 디자인 프로세스를 통해 창의적인 기획과 디자인을 원하는 실무자들을 위해 작성되었습니다. NCS에서 제시하는 UX 디자인 프로세스의 원리를
book.naver.com
'디자인 + α > 공부' 카테고리의 다른 글
| [디자인팁] 웹/앱 디자인을 하면서 아무도 가르쳐 주지 않지만 알아서 지켜야 하는 규칙과 상식_1편 (12) | 2020.11.03 |
|---|---|
| [앱개발방식] 네이티브앱, 하이브리드앱, 모바일웹, 웹앱 차이점 알아보기 (8) | 2020.09.24 |
| [디자인스타일명칭] 메뉴UI디자인 스타일(기법) 명칭 정리하기 (2) | 2020.09.08 |
| [디자인스타일명칭] 모션UI디자인 스타일(기법) 명칭 정리하기 (2) | 2020.08.27 |
| [디자인스타일명칭] 컨텐츠UI디자인 스타일(기법) 명칭 정리하기_1편 (4) | 2020.07.25 |
댓글