Adobe XD로 핸드오프 가능한 디자인 구성하기

대학생을 대상으로 한 UI/UX 강의에서 진행했던 내용 중 일부를 간단히 기록했다. 강의는 'Adobe XD 활용'이라는 큰 틀만 있었고, 세부적인 내용은 직접 설정할 수 있어서

호랑이 담패피우던 시절에는 포토샵으로 화면 디자인을 했고, 끊임없는 디자인 수정을 하나하나 장인 정신으로 적용했지모든 화면은 비슷하게 생겼고, 몇몇은 아주 똑같이 생겼지만 아예 독립적인 화면이었어예를 들어, 시나리오를 따라 전체 화면을 수십개를 만들었다고 하자.모든 화

XD로 디자인을 진행하기 전 임의의 프로젝트를 정해서 어떤 요소가 들어갈 지 기획할거야여기서는 예시로 영어학습 앱을 간단하게 몇 페이지만 재구성하려고 해간단하게 포함될 내용을 문장으로 적어봤어여러 학습 코스 및 진행상황을 한 눈에 볼 수 있는 메인 페이지빈 칸을 채우는

UI Kits 바로 화면을 디자인해 나가기 전에 앞서 와이어프레임을 만드는 단계를 먼저 밟을거야 보통 이 단계를 통해 시나리오나 레이아웃 등을 확인하고 수정해 나갈 수 있어 그리고 이번에는 빠른 제작을 도와줄 UI Kit를 사용할거야 저 'Wireframes' 메뉴