경험기록

안녕하세요, 오늘은 피그마 내 프로토타이핑 기능을 이용할 때 작업 효율을 높일 수 있는 팁 하나를 소개해드리고자 합니다. 피그마 프로토타입 기능은 설계한 서비스의 화면의 순서 또는 플로우대로 연결을 시켜 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일 (클릭, 드래그, 스크롤 등) 로 이동할 것인지 목업으로 보여주는 것입니다. 피그마에서도 프로토타입으로 간단한 애니메이션/모션 기능을 넣을 수가 있습니다. 하지만 여러 화면의 플로우를 설계하다보면 Prototype 화면이 매우 지저분해지는 것을 확인 할 수 있습니다. 보통 앱, 웹 서비스들은 여러 페이지들이 서로 연결되어있고, 또 여러 경로를 통해 한 페이지에 진입 할 수 있기 때문에 한가지 기능에 대한 프로토타입이 아니라 전체적인 프로..

UI 디자인 감각을 키우고자 피그마 연습을 게을리하지 말아야겠다. 피그마에서 제공하는 강력한 기능들이 많은데 아직 모르는게 많다.. 튜토리얼만 보고 이해하는것보다 직접 만들어보면서 터득하는게 가장 기억에 오래남는다. 오늘은 미국 다이어트 식단 앱 'Lifesum' 앱 화면 일부를 클론 (디자인 따라 만들기) 연습을 했다. 화면은 mobbin.com 을 참고하였다! https://mobbin.com/apps/lifesum-ios-1f1267a3-fa68-4112-a355-9b2d8bb1fecb/f085cb02-5809-4727-b4d5-7229328a9bcc/screens Lifesum iOS | Mobbin - The world’s largest mobile app design reference libr..

002. 신용카드 결제 화면 두번째 UI 챌린지는 신용카드 결제 (Check Out) 화면이다. 아직 툴 다루는 것도 익숙치 않아 스스로 디자인하는 것이 조금 어려워서 피그마에 익숙해질겸 기존 서비스의 화면을캡처 해서 목업을 똑같이 만들어보는 연습도 좋은 것 같다. 직접 앱을 다운 받아 화면 캡처하는 것도 괜찮지만 mobbin이나 wwit에서 원하는 화면을 쉽게 찾아볼 수 있다. 더보기 (혹시 mobbin.design을 모르시는 분들을 위해) https://mobbin.design 은 해외 유명 서비스들의 어플 전체 화면을 쉽게 찾아볼 수 있는 사이트다. 국내에도 거의 동일한 서비스가 있는 것도 오늘 처음 알았다. https://wwit.design UX/UI 디자이너나 프로덕트 디자이너, PM같은 분들..

Sign Up 화면 디자인하기 Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can image. www.DailyUi.co Daily UI Design Challenge, Inspiration, and Resources Daily UI design challenge. Become a better designer in 100 days. www.dailyui.co 필라테스나 요가 수업 같은 경우 단체 수업이어도 한 타임당 정원이 정해져있어 미리 예약하..