Creative Dialogue

11월 28, 2017 /디자인 /

메이크 잇 임팩트풀: 익스피리언스 디자인 CC

웹 사이트와 모바일 앱을 디자인하고 프로토타입을 제작하기 위한 올인원 툴인 어도비 XD(Adobe XD)의 주요 기능을 다룬 간단한 튜토리얼을 보고 따라 해 보십시오. Adobe는 디자이너인 리아 뷸리(Leah Buley)마르셀로 실바(Marcelo Silva)에게 “임팩트 창출”이라는 주제로 어도비 XD를 사용한 간단한 랜딩 페이지 또는 홈 페이지 구축 과정의 시연을 요청했습니다.

리아 뷸리가 인터페이스 디자인 원칙을 설명할 목적으로 사이트 랜딩 페이지의 기본 디자인을 만들었습니다. 이 팁을 살펴보고 “임팩트 창출”이라는 주제로 직접 자신만의 랜딩 페이지를 만들어 보십시오.

마르셀로와 리아가 만든 두 디자인은 영감을 주기 위해 제공되는 것이므로 튜토리얼의 모든 단계를 그대로 따라 하지 않아도 됩니다. 자신만의 디자인에 적절한 팁을 활용하십시오. (더 많은 디자인 영감을 얻으려면 어도비 XD의 비핸스(Behance) 갤러리 참조)

 

리아 뷸리의 XD 디자인

1단계: XD를 실행한 다음, 먼저 디자인 형식을 선택합니다. 리아는 웹 페이지를 디자인하기로 하고, 아트보드 이름을 지정했습니다(기본 이름을 두 번 클릭). 그런 다음 상자를 그리고 반복 그리드를 선택한 다음 상자의 가장자리를 드래그하여 4개 열로 구성된 그리드를 만들었습니다.

리아가 상자를 그리고 반복 그리드를 선택한 다음 녹색 핸들을 드래그하여 여러 열을 만든 모습

동일한 방식으로 텍스트 상자 그리드를 만들 수 있습니다. 리아는 자리 표시자(placeholder) 텍스트를 디자인에 추가하고 반복 그리드 툴을 사용해 텍스트 상자를 복제했습니다.


동영상을 클릭하면 리아가 아트보드 이름을 지정하고, 그리드를 만들고, 레이어 아이콘을 클릭하여 디자인의 레이어를 표시하고 복사본을 추가하는 과정을 볼 수 있습니다.

 

 


2단계:
리아는 일러스트레이터(Illustrator)에서 스타일을 만들었습니다. (XD에서 CC라이브러리를 엽니다 (파일 > CC Libraries 열기[윈도우(Windows) 사용자는 햄버거 메뉴를 통해 이 명령에 엑세스할 수 있음]). CC 라이브러리에서 텍스트 스타일과 색상을 적용했습니다(아트보드에 있는 오브젝트를 선택한 다음 스타일을 선택합니다).

스타일과 색상을 적용한 다음에는 세부적으로 조정했습니다(인터페이스의 오른쪽에 있는 패널에서 텍스트와 모양을 조정할 수 있습니다). 4열로 된 그리드의 가시성을 껐습니다(대부분의 어도비CC 애플리케이션에서와 마찬가지로 개별 레이어의 가시성을 켜고 끌 수 있습니다). 또한 그래픽을 가져와 디자인에 추가했습니다(파일 > 가져오기).


동영상을 클릭하면 리아가 CC 라이브러리에서 스타일을 적용하고 조정하는 과정을 볼 수 있습니다. 리아는 또한 컴퓨터에서 그래픽을 복사해 붙여넣었습니다.

 

 


3단계:
그 다음으로 웹 디자인에서 버튼으로 사용할 단순한 모양을 만들었습니다. 더하기(+) 기호 그래픽을 모양에 추가하고, 그룹으로 지정한 다음(오브젝트 > 그룹) 모양의 조합을 심볼로 변환합니다(오브젝트 > 심볼 제작).

      

단순한 모양을 만들고 모양 위에 더하기(+) 기호 그래픽을 추가했습니다(왼쪽). 그런 다음 이 조합을 심볼로 변환했습니다.

오브젝트를 심볼로 변환하면 심볼이 프로젝트 에셋 패널(보기 > 에셋을 선택하거나 인터페이스 왼쪽 하단에 있는 레이어 아이콘 바로 위에 있는 에셋 아이콘을 클릭)에 추가됩니다. CC 라이브러리에서와 마찬가지로 에셋 패널에서 오브젝트 및 다른 항목을 드래그하여 디자인에 추가할 수 있습니다.

그런 다음 디자인의 배경을 위해 베지어 모양을 그렸고, CC 라이브러리에서 더 많은 스타일을 가져와 적용했습니다.


동영상을 클릭하면 리아가 프로토타입 디자인을 위해 심볼을 만드는 과정을 볼 수 있습니다. 이 때 하나의 심볼 인스턴스를 변경하면 모든 인스턴스가 변경됩니다.

 

 


4단계:
리아는 XD의 프로토타입 기능을 시연하기 위해 사이트에 두 번째 페이지를 추가했습니다. 첫 번째 아트보드를 복사해 많은 요소를 변경했습니다. 그런 다음 랜딩 페이지에 있는 요소 하나를 선택한 다음 두 번째 페이지에 연결했습니다. 이때 표시되는 상황 표시 메뉴에서 전환 스타일을 선택했습니다. (또한 사이트 방문자가 두 번째 페이지에서 클릭하면 랜딩 페이지로 돌아올 수 있도록 반대로도 동일한 작업을 했습니다.)

 

미리 보기 버튼(인터페이스 오른쪽 상단에 있는 화살표 버튼)을 클릭해 프로토타입을 테스트했습니다. 그런 다음 인터페이스의 오른쪽 상단에 있는 온라인 공유 버튼을 클릭해 공유 가능한 링크를 만들었습니다.


동영상을 클릭하면 리아가 두 번째 페이지를 만들고(프로토타입 모드에서) 프로토타입을 테스트한 다음 디자인을 공유할 수 있는 링크를 생성하는 과정을 볼 수 있습니다.

 

 


5단계:
제작한 결과가 마음에 든다면 몇 가지 방법으로 트위터 또는 인스타그램에서 공유할 수 있습니다. 스크린샷을 만들거나 이미지 파일로 내보내는 방식으로 랜딩 페이지의 이미지를 공유할 수 있습니다. 또는 공유 가능한 링크(리아가 4단계에서 만든 링크)를 복사하여 트위터에 게시할 수 있습니다.

마르셸로 실바의 XD 디자인


마르셀로는 모바일용 디자인을 만들었습니다.

1단계: 마르셀로는 모바일용 디자인을 만들기로 하고 디자인의 크기를 휴대전화 크기에 맞게 선택했습니다. 그런 다음 리아와 유사한 프로세스를 수행했습니다.

프로토타입 링크를 다른 사람에게 보낼 때 인터페이스의 오른쪽에 있는 대화창에서 디자인에 대한 주석을 달 수 있습니다.

2단계: 마르셀로는 XD에서 바로 스타일을 만들었습니다. 인터페이스의 오른쪽에 있는 모양 및 텍스트 툴을 사용하여 디자인을 조정했습니다. 에셋 패널을 선택한 상태에서 디자인 안에 있는 텍스트를 클릭한 다음, 해당 에셋 패널에서 더하기(+) 기호를 클릭하여 텍스트 스타일을 기록했습니다. 색상도 이와 동일한 방식으로 기록했습니다.


동영상을 클릭하면 마르셀로가 디자인에 사용된 문자 스타일과 색상을 저장하는 과정을 볼 수 있습니다.

 

 

 


에셋 패널을 사용하면 모든 색상 또는 문자 스타일을 편집할 수 있고, 변경 사항은 문서 전체에 반영됩니다.

 

 

 

 

어도비 XD를 사용할 준비가 되셨습니까?
이제 직접 만들어 보십시오.

원문보기

 

디자인

Join the discussion