Adobe XD 튜토리얼 - 경험 디자인 및 프로토타이핑

대형 Adobe XD 강의에 오신 것을 환영합니다. 이번 소개에서 나는 당신의 트레이너로 소개하겠습니다.

사용자 경험 (UX)과 사용자 인터페이스 (UI)의 차이점은 무엇인가요? 레벨 디자인의 종류는 무엇이 있으며 Adobe XD는 주로 어떤 용도로 사용되나요? 여기에 대한 대답이 있습니다!

처음으로 Adobe XD를 열었고, 이미 선택할 수있는 많은 옵션이 제공되고 있습니다. 이 비디오에서는 Adobe XD를 위한 작은 웜업, 프로그램의 개요 및 XD의 스플래시 스크린 및 해당 기능에 대한 소개가 있습니다.

아트보드(작업영역)는 Adobe XD에서 다양한 해상도와 기기에 쉽게 생성할 수 있습니다. 이 튜토리얼에서는 고려해야 할 특징들에 대해 알아볼 수 있습니다.

다른 그리드 설정들이 요소와 객체들을 서로 깔끔하게 정렬할 수 있게 도와줍니다. 이를 위해 우리는 직사각형 그리드와 열 분할을 위한 열 지원을 사용할 수 있습니다.

Google, Apple und Microsoft은 빠른 시작을 위해 실용적인 UI 키트를 제공합니다. 이 완성된 아트보드는 후에 다양한 플랫폼을 위한 프로토타입을 디자인하는 데 매우 도움이 됩니다.

거의 모든 디자인에서 색상은 매우 중요한 역할을 합니다. 이 비디오에서는 Adobe XD에서 어떻게 색상을 다루는지, 어떻게 가져오는지 및 완성된 색조를 수집하는 실용적인 자료들에 대해 배웁니다.

Adobe XD에 이미지, 파일, 텍스트 문서 등과 같은 에셋을 가져오는 데 사용할 수 있는 여러 방법이 있습니다. 이 비디오에서는 몇 가지 방법을 소개하고 있습니다. 그러나 Adobe의 Creative Cloud의 일환인 XD에서는 라이브러리를 사용하여 편리하게 작업할 수 있습니다.

글꼴과 타이포그라피 주제는 Adobe XD를 횡단하는 우리 여행의 중요한 구성 요소입니다. 이 비디오에서는 글꼴을 올바르고 효율적으로 다루는 방법을 배울 수 있습니다.

폼은 Adobe XD로 매우 간편하게 가져올 수도 있고, 경로 도구를 사용하여 직접 만들 수도 있습니다. 객체를 두 번 이상 사용하려면 자산 목록에 심볼로 추가하는 것이 좋습니다.

디자인은 외부에서 영감과 입력과 많이 관련이 있습니다. 여기에는 아날로그 환경과 디지털 환경이 포함됩니다. 여기에는 내가 자주 방문하는 몇 가지 포털을 소개하겠습니다.

작은 멋진 실무 프로젝트로 시작해 보죠. 이 튜토리얼과 이어지는 두 개의 비디오에서 우리는 Onepager를 만들 것입니다.

리플 레이아웃은 Adobe XD의 가장 중요한 기능 중 하나입니다. 한 번 생성된 객체 그룹을 자유롭게 확대 및 채우도록 돕습니다.

원페이지 디자인의 마지막 부분에서는 푸터와 참고 자료를 위한 영역에 신경을 쓰게 됩니다. 여기서는 유용한 SVG 파일을 활용하며 더 많은 디자인 기술을 배우게 됩니다.

이 강의에서는 각각의 아트보드가 상호 작용적으로 연결될 수 있는 방법에 대해 다룹니다. 전환(Transition) 선택의 가능성 및 프로토타입에서 수행할 수 있는 기타 수정 사항에 대해 설명하겠습니다.

모든 웹 사이트는 네비게이션을 위한 앵커 포인트가 필요합니다. 이 비디오에서는 헤더 영역에 주 네비게이션 및 상호 연결의 구성에만 초점을 맞춥니다.

이 훈련은 이전 챕터를 기반으로하며 데스크톱 메뉴를 스마트폰에 맞게 적용하는 방법을 보여줍니다. 햄버거 아이콘과 메뉴 항목은 흥미로운 애니메이션으로 개선됩니다.

가능한 최상의 시각화를 위한 가장 강력한 도구 중 하나는 Adobe XD의 자동 애니메이션 기능입니다. 이 예시에서는 자동 애니메이션 기능의 개념을 어떻게 어떤 시나리오에도 적응시킬 수 있는지 설명하겠습니다.

다음 비디오에서는 온라인 상점을 위한 프로토타입을 만드는 방법을 배웁니다. 여기서 단순한 아트보드로 시각적으로 매력적인 하이파이 프로토타입을 만드는 방법을 배웁니다. 4부 중 1부입니다.

두 번째 부분에서는 세부 설명의 표시, 이미지 슬라이더 추가, 그리고 아트보드를 서로 연결합니다.

인터랙티브 프로토타이핑을 위한 오버레이 기능은 정보를 직접 숨기거나 보여줄 수 있는 흥미로운 기회를 제공합니다.

좋은 사용성 디자인은 사용자에게 시스템 상태에 대한 피드백을 언제나 제공합니다. 이 피드백은 프로젝트 완료시에 멋진 애니메이션으로 구현할 예정입니다.

Adobe XD 프로토타입 프로세스에서 음성 명령을 통한 상호작용도 지원합니다. 우리가 직접 정의할 수 있는 시스템 액션이 음성 명령에 의해 실행됩니다. 이 작동 방법은 이 튜토리얼에서 보여드리겠습니다.

다른 부서 및 관련자들과의 협력 시 오디오 코멘터리는 프로젝트 상태를 명확히 전달하는 데 유용한 기능입니다.

가상 환경에서 프로토타입을 테스트하는 것은 한 가지 문제입니다 - 실제 기기에서 실시간으로 표시하는 것은 전혀 다른 문제입니다. 이를 Adobe XD를 사용하여 USB 또는 Creative Cloud 연결을 통해 간편하게 해결할 수 있습니다. 이를 위해 우리는 앱 스토어의 Adobe XD 앱을 사용합니다.

협업하는 동안 프로젝트 진행 상황에 대해 다른 부서와 의견을 나누는 것은 필수적입니다. 프로토타입은 발표 기능을 통해 공개되어 리뷰어, 개발자 및 발주인이 프로젝트의 시각적 표현을 얻을 수 있습니다. 이 시점에서 전문 부서 간의 수정주기가 시작되어 프로젝트를 성숙 단계로 이끌게 됩니다.

Adobe XD는 매 업데이트 때마다 계속 발전 중인 아주 젊은 프로그램입니다: 이 비디오에서는 버전 18에서 버전 19로 이동함에 따라 어떤 새로운 기능이 도입되었는지, 이 기능들을 어떻게 사용하는지, 어느 상황에서 도움이 되는지에 대해 설명합니다. 이에 포함된 것은: 심볼 대신 컴포넌트, 반응형 리사이즈, 가이드 라인, 다각형 도구, 텍스트 포맷팅을 위한 추가 기능 등이 있습니다. 즐겁게 이용하세요!