💻 기획ㆍ디자인/생생정보18 반응형 웹디자인 사이즈, 그리드 (Adobe XD 반응형 웹디자인 하는 방법) XD 쓰고 나서는 반응형 웹디자인을 해본 적이 없어서 다시 공부할 겸 쓰는 포스팅. 나중에 급하게 또 인터넷을 뒤지지 않기 위해서 반응형 웹디자인 시작할 때, 필요한 정보와 링크를 모아뒀다. 1. 간단한 정의 1_1. 반응형 웹이란? 다양한 화면의 폭에 따라 유동적으로 레이아웃이 변화하는 웹(리소스가 1개) 1_2. 반응형과 적응형 차이- 반응형웹 : 모든 화면에 하나의 템플릿으로 제작 / 적응형웹 : 지원할 디바이스(화면)에 따라 별도의 템플릿 제작 🔗 반응형웹으로 만들어진 사이트 볼 수 있는 곳 Media Queries mediaqueri.es 2. 반응형웹 프로젝트 디자인할 때, 체크 포인트 ✓ 반응형or적응형 확실하게 확인! 해달라는대로 무조건 그냥 하다간 낭패를 볼 수 있다. (가끔은 정말 놀랍.. 2020. 4. 2. Adobe XD Study_2편:프로토타입 애니메이션(by.어도비코리아 온라인 세미나) 지난 1월 22일 Adobe 온라인 세미나에서 '협업을 통한 디자인 생산성 가속화'라는 제목으로 XD 강의를 했다. 잘 몰랐던 부분이 많아 시간 될 때 복습하기로 했는데, 써먹어야 할 프로젝트가 생겨서 급하게 복습을 하며 까먹지 않기 위해 포스팅한다. 내용이 조금 많아서 소소한 팁과 애니메이션 두 부분으로 나눴다. ※ 본 포스팅의 캡처 이미지는 Adobe 온라인 세미나 영상 화면입니다. 1. 화면 진입 애니메이션 & 무한 루핑 애니메이션 적용하기 Xd 애니메이션 강의 따라서 샘플로 한번 만들어 봤다. 화면의 요소들이 스르륵 나타나고 배경화면의 컬러와 사이즈가 무한 루핑 되며 변하는 효과다. 화면 진입 - 각 요소들이 시간차를 두고 부드럽게 스르륵 나타나는 애니메이션 화면의 제일 오른쪽 'login-3'과.. 2020. 2. 22. Adobe XD Study_1편:소소한 팁(by.어도비코리아 온라인 세미나) 지난 1월 22일 Adobe 온라인 세미나에서 '협업을 통한 디자인 생산성 가속화'라는 제목으로 XD 강의를 했다. 잘 몰랐던 부분이 많아 시간 될 때 복습하기로 했는데, 써먹어야 할 프로젝트가 생겨서 급하게 복습을 하며 까먹지 않기 위해 포스팅한다. 내용이 조금 많아서 소소한 팁과 애니메이션 두 부분으로 나눴다. ※ 본 포스팅의 캡처 이미지는 Adobe 온라인 세미나 영상 화면입니다. 1. 스타일 가이드 (=에셋 정리 문서) 만들기 상황에 따라, 정리하는 스타일이 다 다르겠지만... 강사님은 표지, 컬러, 폰트, 내비게이션, 아이콘 등등 각 요소를 개별 아트보드로 만들어서 정리한다고 한다. 왜냐면 PDF로 내보내기 해서 PDF로 보면 누구나 쉽게 확인할 수 있고 출력도 할 수 있기 때문 = 별도의 스타.. 2020. 2. 21. 이전 1 2 다음 반응형
