Design (12) 썸네일형 리스트형 주니어 디자이너에서 시니어 디자이너로 넘어가는 단계에서, 추천할 만한 책 안녕하세요, 명동섞어찌개입니다. 오늘은 제가 디자인 업무를 하면서 도움을 받았던 책 몇 권을 추천하려고 합니다. 일반적인 시각디자인 전공자들에게는 해당사항이 없는 얘기인데요. 디자인 비전공자가 회사의 니즈에 의해 디자인을 시작하게 된 경우에는 참 막막한 경우가 많습니다. 저의 경우 처음에는 멋모르고 디자인을 시작했습니다. 어~ 디자인이라고는 현수막 같은 것밖에 안해봤는데 앱을 디자인해보라구요? 일단 포토샵, 일러스트레이터 능숙하게 다룰 줄 알았고. 핀터레스트(https://www.pinterest.co.kr/)나 드리블(https://dribbble.com/), 디비컷(https://www.dbcut.com/) 구글링 하다보면 멋진 디자인 레퍼런스 많이 있으니까, 벤치마킹해서 적당히 괜찮은 걸로 찾아서 .. Adobe XD 로 10분만에 모바일 화면 디자인하기 안녕하세요. 명동섞어찌개입니다. 오늘은 Adobe XD 로 모바일 UI 디자인하기 튜토리얼을 가지고 와봤습니다. 모바일 UI 디자인으로 Sketch 를 많이 쓰지만, 유료이고, Mac 에서만 된다는 단점이 있는데요. Adobe 의 XD 는 OS 관계없이 무료로 사용할 수 있고, 업그레이드가 많이 되서 쓸만한 툴인 것 같아 소개합니다. 실제로 최근 플랫폼사업팀의 클라우드 플랫폼 디자인 업무는 웹, 모바일 모두 Adobe XD 를 사용했습니다. Zeplin 등 웬만한 플러그인 연동도 가능하니, 안 써보시 분들은 한번 사용해보세요~ 그럼 시작합니다! [앱 디자인] 디자인 가이드 작업에 유용한 툴 + 소개 *이 문서는 지속적으로 업데이트 될 예정입니다 Assistor PS http://wit-web.azurewebsites.net/ko/assistor/product 제품소개영상 GUI 디자인 일을 잠깐 배운 친구에게 추천받은 툴인데 아주 유용하지만 약간 느려서 나중에는 그냥 이걸 안쓰고 파워포인트로 디자인가이드 작업을 하게 되었다는;; (치수 기입을;;;) 그러나 작정하고 쓰면 아주 유용한 툴입니다. 사용법도 간단한데, 설치하고 나서 포토샵과 함께 켜두고 포토샵에서 수치를 알아야 하는 레이어 선택 + Assistor PS 의 버튼 선택하면 알아서 간격, 크기 등을 재서 포토샵 레이어 위에 기입해줍니다. 그걸 복사해서 디자인 가이드 문서에 붙여넣기 하면 끝! ...인데, 레이어를 처음부터 매우 정확하고 정교.. [앱 디자인] 디자인 가이드 만들기 - 안드로이드 *아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^ * 안드로이드 앱 디자인 가이드 작업의 특징 안드로이드의 해상도입니다 이미지 출처: http://bit.ly/2hifr90 보시다시피 어마어마하게 많습니다 ^^ 이 모든 해상도를 일일이 지원할 수가 없어요~ 그래서 몇 가지 대표적인 해상도를 지원하는 방향으로 가이드를 잡고 이미지 작업을 합니다. 아이프렌즈펫의 경우에는 저해상도, 중간 해상도, 고해상도 3개를 지원해서 720 x 1280 1080 x 1920 1440 x 2560 이 세 가지로 이미지를 오렸구요, 가이드는 720 x 1280 기준으로 작업했습니다. *좌표 .. [앱 디자인] 디자인 가이드 만들기 - 아이폰 *아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^ *아이폰 앱 가이드 작업의 특징 디자인 가이드 작업은 기준 해상도 하나를 정해서 그 수치값으로, 이미지 작업은 고객/개발자와 협의한 모든 해상도를 지원하는 방향으로 작업하면 됩니다. 아이폰 해상도를 먼저 보면 이미지 출처: http://protosketch.io/exporting-assets-for-ios-ipads-and-iphones/ 위에 point 가 실제 폰에서의 크기라면 render at 사이즈는 디자이너가 포토샵에서 작업해야 할 픽셀 단위 사이즈라고 보시면 됩니다. 아이프렌즈펫은 일단 기준 해상도를 iPhon.. [앱 디자인] 벤치마킹에 유용한 사이트 *이 문서는 지속적으로 업데이트 될 예정입니다. 앱 디자인을 처음으로 시작하면서 많은 자료를 웹에서 찾았는데요, 이미 많이들 아시겠지만 유용한 사이트를 공유하려고 합니다. Behance [UI, BI, App, Web] https://www.behance.net/ 디자이너들 사이에 가장 유명한 포트폴리오 사이트이지요? ㅎㅎ 지인의 지인이 심플한 아이콘 디자인을 이곳에 올렸다가 애플 본사에서 연락이 와서 채용되었다는 깜짝 놀랄 소식도 들은 적 있습니다. ㅎㅎ 그만큼 디자이너들이 자신의 포트폴리오를 어필할 수 있는 공간이고 퀄리티 높은 작업물들이 아주 많구요. Adobe ID로 로그인해서 마음에 드는 포트폴리오를 저장할 수 있습니다. Dribble [인터랙션, 모션, 컬러] https://dribbble.c.. [앱 디자인] 앱 출시 준비하기 *이 문서는 지속적으로 업데이트 될 예정입니다 앱을 디자인하고 개발이 끝났다면 앱을 출시하기 위해 추가로 준비해야 할 것들이 있는데요, 이번에 처음으로 앱을 디자인하면서 겪은 시행착오를 나누고 유용한 사이트를 공유하려고 합니다 ^ㅁ^ 앱 아이콘 아이프렌즈펫 앱 아이콘 안드로이드 / 아이폰 모두 필요로 하는 아이콘의 사이즈 수가 천차만별로 다양하고, 계속 추가되고 있는데요. 아래 사이트를 이용하시면 아이콘 사이즈를 자동적으로 맞춰줍니다. http://icon.angrymarmot.org/ Walkthroughs 아이프렌즈펫 Walkthroughs Walkthroughs 는 앱스토어에 앱을 소개하는 화면입니다. *개수 2~4장 *내용: 간단한 텍스트와 아이콘과 함께 앱의 핵심적인 기능을 잘 설명한 화면이면 .. 포토샵 - 클리핑 마스크 만들기 포토샵 실행 후 원하는 이미지를 볼러 옵니다. [file] – [open] 이전 1 2 다음
