반응형 AdobeXD3 05. 영화 감상 앱 UI 디자인 따라하기 (마지막 회) 영상 스트리밍 앱 UX 분석 영화 엔터테인먼트 콘텐츠 UI는 보통 어두운 톤이며 이미지가 전체를 차지하는 인터페이스를 갖고 있습니다. 이는 의도적으로 배경을 어둡게 후퇴시켜 화면을 부각하는 전략입니다. 또한 확대된 이미지나 템플릿 요소가 나열된 형태를 지닙니다. 대표적인 OTT(over the top) 영화 스트리밍 서비스인 넷플릭스는 영상과 이미지가 강조된 UI의 좋은 사례입니다. 화면에서 영화 이미지 포스트를 구성하여 선택 시 영화 또는 드라마 콘텐츠를 자세히 볼 수 있게 하고, 보통 영화는 가로 모드를 많이 사용하므로 자동으로 화면 전환을 유도하는 어포던스를 만들어줍니다. UI 디자인 실습 이미지 소스와 텍스트는 [movie_source.xd]와 [movie_text.txt] 파일을 이용하고, 완성.. 2022. 6. 2. 02. 디자인에 움직이는 애니메이션 적용하기 디자인에 움직이는 애니메이션 적용하기 디자인 작업이 완료되면 Adobe XD에서 강력한 기능인 프로토타입을 제작할 수 있습니다. 인터랙션을 지정한 모션 및 실제 제어할 수 있는 화면 전환 요소를 다룹니다. [프로토타입] 탭의 화면은 다음과 같습니다. ① 디바이스 미리보기: Adobe XD 모바일 미리보기 앱을 다운로드하고 이를 모바일 화면에서 공유할 수 있습니다. ② 데스크탑 미리보기: 프로토타입에서 만들었던 인터랙션 디자인을 재생할 수 있습니다. ③ 화면 인터페이스를 확대/축소할 수 있습니다. ④ 트리거: [탭], [드래그], [키 및 게임 패드], [음성] 등 프로토타입 인터랙션을 개시하는 요소를 선택합니다. ⑤ 유형: [전환], [자동 애니메이트], [오버레이], [다음으로 스크롤], [이전 아트보.. 2022. 5. 29. 00. <기초 탄탄 UX/UI 디자인을 위한 Adobe XD> 연재 예고 웹 & 앱 디자인 기초부터 UI 디자인, 프로토타입 제작까지! 새로운 디바이스가 나타나고 디자인 트렌드가 바뀌는 시장에서 새로운 콘텐츠를 만들기 위해 늘 새롭게 작업해야 하는 고충을 저는 누구보다 잘 알고 있습니다. 이러한 변화에도 불구하고 쉽게 변하지 않는 부분이 있습니다. 보통 우리는 “기본기가 탄탄하다”라는 말을 하는데요. UX/UI 디자인 역시 탄탄한 기초 이론을 바탕으로 실습한다면 어떤 어려움이라도 극복할 수 있습니다. 물론 디자인 트렌드나 브랜드 변화를 열린 마음으로 탐색하고 디자인 감각을 키우는 노력까지 한다면 더할 나위 없겠지요. IT 분야에서는 새로운 스마트폰의 출시뿐 아니라 다양한 웨어러블 디바이스가 나타나고, 이제는 메타버스라는 새로운 가상 공간이 대두되고 있습니다. 그러나 사용자를 .. 2022. 5. 26. 이전 1 다음 반응형
