피그마5 #23 역기획 실무프로젝트 Day 11~15 // 화면설계서, 개발자 피드백 오늘은 화면설계서에 대해 배웠다. 프로토타입을 바탕으로 피그마를 활용하여 역기회 프로젝트의 화면설계서까지 작성하였다. 프로토타입이 워낙 오래 걸리고, 계속 수정이 들어가기 때문에 동시에 진행된다. 체계적인 디자인 시스템은 내부적으로는 개발자나 디자이너에게 분명한 목표를 제공하기 위해 필요하다. 외부적으로는 정형화되고 안정된 느낌으로 인해 사용자의 경험을 극대화해 준다. 따라서 디자인 시스템이 정의되어 있지 않다면, 고객 신뢰를 잃을 수 있다. 1. 화면설계서란? : 화면을 어떻게 표현할지를 그려 놓은 와이어 프레임과 함께 기능을 구현하기 위해 작성하는 기능 정의서를 합친 산출물 ▷ 기획자가 기획한 서비스 화면이 어떤 형태로, 어떤 기능을 제공하는지를 상세히 적은 문서 ※ 워터폴 방법론 (화면설계서 vs .. 2023. 8. 22. #10 피그마로 '카카오뱅크' 앱 UI 만들기 2 오늘은 피그마를 익히는 마지막 날이다. 어제 만들었던 카카오뱅크 UI에 몇 페이지를 더 추가해 완성할 것이다. 확실히 이런 뭔가 만드는 류(?)의 실습을 좋아해서 그런지 빠르게 만들 수 있어 뿌듯했다. 오늘 할 부분은 다른 계좌로 송금했을 때 뜨는 화면이다. 어제 만들었던 부분과 프로토타입까지 모두 추가하고 나면 아래의 결과가 나온다. ※ 해당 카테고리는 서울경제진흥원과 에이블런에서 주최하는 에 대한 기록입니다. 2023. 7. 7. #9 피그마로 '카카오뱅크' 앱 UI 만들기 // 프로토타입 설정 방법 피그마의 디자인에 대한 기본적인 기능은 모두 익혔다. 오늘은 프로토타입(Prototype) 기능에 대해 배우고 실제 앱 UI를 따라 만들어보자. ※ 가장 좋은 UI 디자인 레퍼런스 사이트는 WWIT-윗 https://wwit.design/ Lifeplus 한국의 UI/UX 모바일 패턴을 수집합니다. wwit.design 1. 프로토타입(Prototype) 1) 체크 박스 설정 - 빈 체크박스와 채워진 체크박스 두개 만들기 - 각 체크박스를 컴포넌트 설정 -> combine variable -> change to 설정 - 만약 전체동의가 필요하다면 -> 피그마가 연쇄작용은 안됨, 보여주기 위함이니 모두 체크된 페이지를 따 만들면 됨 2) 스크롤 (Scroll) - Prototype -> scroll beh.. 2023. 7. 6. #8 피그마 실습 // 유용한 무료 플러그인 오늘은 피그마툴을 배우는 두번째 시간이다. 플러그인을 찾아보고, 목업을 배우기 위해 앱 페이지를 똑같이 따라해보았다. 어제 알게 되었던 기능들을 응용하게 되는 시간이었다. 1. 플러그인(Plugin) : 커뮤니티를 통해 다양한 추가 기능들을 사용할 수 있음 · 유용한 무료 플러그인 추천 - emogify: 다양한 이모티콘 - Content reel: 예시 사진, 텍스트 등을 더미로 가져올 수 있음 (임의로 채워 넣는 것이 가능) - Unsplash: 다양한 무료 사진 - Remove BG: 누끼 따기, 배경 제거 ※ API키 필요, remove bg 사이트 들어가서 회원가입하고 받아오면 됨, 피그마에서 쓰고 있는 구글 아이디로 로그인해야 받아올 수 있음 2. 실습 - 행간: auto말고 최소 130%~1.. 2023. 7. 5. #7 피그마(Figma) 기초 배우기 // 단축키, 컴포넌트, 기능 피그마를 처음으로 시작한 날이다. XD, 어도비, 포토샵과 마찬가지로 다양한 UI와 프로토타입을 만들 수 있다. 오늘은 피그마가 무엇인지, 기능, 단축키에 대해서 알아보자. https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform. www.figma.com 1. 피그마의 장점 - 무료(개인 사용에 한하여) - 실시간 동시 협업 가능 - 자동 저장 - 플.. 2023. 7. 4. 이전 1 다음
