달밤에 디자인 초심찾기 (31) 썸네일형 리스트형 #5 - 아이콘 편 아이콘 제작에 도움을 줄 수 있는 사이트 추천 아이콘 편 Android #Mateiral Design 아이콘 가이드 material.io/design/iconography/product-icons.html#grid-and-keyline-shapes Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io #Mateiral Design 아이콘 다운 1 material Design에서 기본적으로 제공하는 아이콘 사이트 mate.. #4 - 폰트 편 폰트 선택에 도움을 줄 수 있는 사이트 추천 폰트 편 저작권 없는 무료 폰트 사이트 #구글 폰트 fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com #눈누 상업적 이용 가능한 한글 폰트를 모아놓은 사이트 noonnu.cc/ 상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누 noonnu.cc 폰트 찾기 사이트 #한글 폰트 찾기 사이트 www.koreafont.com/ 한글마을 - 한글폰트 비교/검색 모두가 찾아보는 한글디자인,오래오래 보고 싶은 글씨로 가득담았습니다. www.k.. #9 - 제스쳐 Gesture 행동에 대한 가이드를 정확하게 내리기 위해 제스처에 대한 명칭을 알고 있어야 한다. Navigation Gestures Tap : 터치 scroll : 위아래 스크롤링하는 제스처 pan : 화면에 손가락을 대고, 계속적으로 드래그하는 움직임. 지도 화면에서 많이 관찰됨 drag : 특정 오브젝트에서 손가락을 대고, 정해진 방향으로 움직인 후 손가락을 떼는 행위 swipe : 손가락을 터치한 상태에서 일정한 직선거리를 움직이는 행위 pinch : 두 개의 손가락으로 확대 / 축소 / 회전하는 행위 Action Gestures Tap : 터치 Long Press : 꾹 누름 swipe :손가락을 터치한 상태에서 일정한 직선거리를 움직이는 행위 Transform Gestures Doule Tap.. #3 - 컬러 편 컬러 선택에 도움을 줄 수 있거나, 관련 정보를 얻을 수 있는 사이트를 정리했다. 컬러 선택에 도움을 주는 사이트 #그라데이션 샘플 제공 사이트 uigradients.com/#Amethyst uiGradients - Beautiful colored gradients uiGradients is a handpicked collection of beautiful color gradients for designers and developers. uigradients.com #어도비에서 제공하는 컬러 피커 사이트 color.adobe.com/ko/create/color-wheel https://color.adobe.com/ko/create/color-wheel color.adobe.com #사진에서 컬러를 추출하.. #2 - 유튜브 채널 편 디자인을 하면서 보게 된 사이트 추천 유튜브 채널 편 실무 UX/UI 디자이너의 유튜브 채널 아래 두 채널은 시청자 포트폴리오를 컨펌해주는 컨텐츠를 진행하고 있다. 포트폴리오 컨펌 컨텐츠는 실무자로서 디자인을 배우는 느낌보다는, 기초적이지만 습관적으로 하는 잘못을 고치기에 좋은 것 같다. 타산지석 삼아 사소한 것을 고치다 보면 좋은 결과물이 나오지 않을까 싶어 챙겨보고 있다. 그리고 학생 시절이 떠올라서 뭔가 재밌기도 하다. #마디아 디자이너 www.youtube.com/channel/UCxRnfrmJAkRLarzeBJETB5g Madia Designer 안녕하세요 디자이너 마디아입니다. 현재 실무에서 UIUX 디자이너로 활동하고 있으며 전문적인 스킬들을 알려드릴게요 www.youtube.com #롤스토.. #1 - 인사이트 편 디자인 실무를 하는 사람이라면 다 알겠지만, 내가 까먹지 않으려고 기록하는 디자인 사이트 추천 인사이트 편. 모르면 안 되는 디자인 사이트 3 대장 #비핸스 www.behance.net/ Search projects | Photos, videos, logos, illustrations and branding on Behance www.behance.net #핀터레스트 www.pinterest.co.kr/ Pinterest 요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요. www.pinterest.co.kr #드리블 dribbble.com/ Dribbble - Discover the World’s Top Designers & Creative Professi.. #8 -디자인 시작 - 해상도 / 그리드 / 컬럼 디자인 시작에서 설명하지 못한 화면 셋팅에 대한 설명을 진행한다. 해상도 설정 해상도는 아래와 같이 여러 기준에 따라 환경을 달리한다. 모바일 작업 벡터 작업 사용 프로그램 : 스케치, 피그마와 같은 벡터 기반 프로그램 작업 방법 : 최소 사이즈인 360 x 640기준 작업 해상도 대응 : 최소 사이즈에서 각각에 맞는 배수로 늘려 사용 비트맵 작업 사용 프로그램 : 포토샵과 같은 비트맵 기반 프로그램 작업 방법 : 최대 사이즈 또는 중간사이즈인 2 배수/4배 수로 작업 해상도 대응 : 중간 사이즈에서 축소/확대하거나, 최대 사이즈에서 축소하여 사용. 그래픽 리소스 때문에 2 수 기준(720x1280)으로 작업하는 경우가 많음 공통 작업 방식에 따라 기준 해상도를 정하여 퍼블리셔 또는 프론트엔드와 공유 작.. #7 - 디자인 시작 - 아이콘 디자인 시작에서 설명하지 못한 아이콘에 대한 설명을 진행한다. 런처 아이콘 Product Icon / App Icon / Launcher Icon등 칭하는 단어가 많다. 궁극적으로 앱을 실행시키는 아이콘을 말한다. OS별 규격이 다르기 때문에 하단 내용에 따라 가이드를 따라야 한다. Android Material Design에서 런처 아이콘(Product Icon)에 대해 가이드를 제공한다. 안드로이드의 경우 Crop을 염두해놓고 잘리지 않도록 고려해야 하며, 런처 아이콘을 시뮬레이션할 수 있는 사이트에서 테스트가 가능하다. #Material Design에서 권장하는 런처 아이콘 가이드라인 material.io/design/iconography/product-icons.html#design-princip.. 이전 1 2 3 4 다음
