전체 글110 [Figma] 클릭하면 이동하는 피그마 프로토타이핑 만드는 방법 오늘은 PPT보다 쉬운 피그마 강의 3주차 과제로클릭하면 이동하는 피그마 프로토타이핑 만드는 방법에 대해 설명해보겠습니다. 프로토타입이란? 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때어떤 화면으로 어떤 인터랙션 스타일(클릭, 드래그, 스크롤 등)로 이동할 것인지 목업으로 보여주는 것입니다. 우선 연결될 화면들을 준비합니다. 프레임을 선택한 후, 우측에 프로토타입을 눌러줍니다. 프레임의 가장자리에 마우스를 갖다대면 각 변 마다 점이 생깁니다 오른쪽 점을 드래그를 하면 화살표가 생기는데, 이것을 옆에 프레임으로 가져갑니다 여기서 파란색 점을 핫스팟이라고 하고, 인터렉션이 시작되는 위치입니다.화살표가 있는 선은 커넥션 라인이라고 하고, 두개 요소 사이의 연결선으로.. 2024. 5. 2. [UX/UI 사전캠프_9일차] 친환경 UX 디자인 UXUI 아티클 / 책 스터디 “디자인으로 지구를 지킨다고?” 주목 받는 친환경 UX 디자인친환경 UX 디자인이란 ?- 사용자가 환경에 미치는 탄소 발자국을 최소화하기 위해 노력하는 것 - 디지털 제품 서비스에 집중 필요성‘웹사이트 카본’에 의하면 웹페이지 하나를 볼 때마다 평균적으로 이산화탄소 1.76g이 배출되기 때문에 실천 방법1. UI 디자인 개선 탐색에 최적화되고, 간소화된 디자인은 사용자가 빠르게 정보를 찾고, 과업을 수행하여 불필요한 인터넷 및 전력 사용을 줄일 수 있다. - 다크모드 : 디스플레이 기준 최대 63%까지 줄여 배터리 및 화면 전력 소모에 도움을 줄 수 있다. - 폰트 최적화 : 타입 1개를 줄일 때마다 웹사이트 무게를 250kb가지 절약할 수 있다. 온라인 폰트 호스팅 업체 .. 2024. 5. 2. [UX/UI 사전캠프_8일차] 컴포넌트 만들기 (2) 컴포넌트 만들기 (2)출처 : Material Design Guide Components – Material Design 3Components are interactive building blocks for creating a user interface.m3.material.io - Containment 1. Bottom sheets: 화면 하단에 고정된 보조 컨텐츠를 보여줍니다. 컴팩트, 미디움 윈도우 사이즈 1) Standard : 스크림 없음, 메인 UI와 함께 존재하며 두 영역을 동시에 보고 상호 작용할 수 있음 (ex. 음악 앱의 오디오 플레이어) 2) Modal : 스크림 위에 있음, 모달 시트가 앱 컨텐츠 앞으로 나타나면 다른 앱 기능이 비활성화 됨. 2. Side sheets: 주요 내용을.. 2024. 5. 1. [UX/UI 사전캠프_7일차] 컴포넌트 만들기 (1) 컴포넌트 만들기:Material Design Guide를 참고하여 강의에서 배운 컴포넌트를 심도있게 학습해봅시다.https://m3.material.io/components Components – Material Design 3Components are interactive building blocks for creating a user interface.m3.material.io Component란 ?UI를 만들기 위한 인터렉티브 빌딩 블록, 목적에 따라 아래 6가지로 분류됨 - Actions 목표를 달성하는데 도움 - Communication 유용한 정보를 제공 - Containment 정보와 액션 컴포넌트를 포함 - Navigation 이동할 수 있도록 - Selection 선택사항을 지정 - Te.. 2024. 4. 30. [UX/UI 사전캠프_6일차] UI/UX 디자이너의 핵심 역량 내가 생각하는 UI/UX 디자이너의 핵심 역량 1. 요구사항 플랫폼의 UX 설계부터 UI 디자인, 개발 후 디자인 QA까지의 전 과정을 리딩한 경험 프로젝트의 초기 기획부터 참여하여 구축, 운영, 개선, 모니터링까지 경험해보신 분 하나의 서비스 안에서 여러 맥락의 제품을 통합적으로 설계해본 경험이 있는 분 데이터와 리서치를 기반으로 지속적인 서비스 개선 경험을 보유하신 분 데이터를 기반으로 디자인을 개선한 경험이 있으신 분 데이터 수집 및 분석을 통해 사용자 경험 중심으로 서비스를 개선한 경험이 있는 분 데이터 기반으로 문제를 도출하고 개선 방안을 제시하는 분 고객이 필요한 것을 정량적 혹은 정성적 데이터를 기반으로 구체적으로 파악할 수 있는 분 사용자 중심으로 생각하실 수 있는 분 사용자 관점에서 문제.. 2024. 4. 29. [UX/UI 사전캠프_5일차] UX/UI 디자이너 JD분석 UX/UI 디자이너 JD분석1. 내가 일하고 싶은 회사는 어떤 회사인지 생각해봅니다. - 성장 가능성이 높은, 비전이 있는 기업- 업무적으로 배울점이 많은 기업- 점심 식대 제공- 야근이 많지 않은 곳 2. 관심 기업 혹은 업계를 리스트업 합니다. (최소 10개 이상)a. 주요 업무 / 자격 요건 / 우대사항 중심으로 직무 채용공고를 분석해 봅니다. *각 기업의 이름을 누르면 공고 페이지로 연결됩니다.1) [마이리얼트립 / Product Design ]- 주요 업무• 제품의 생애주기에 따라, 1-2년뒤 고객 행동을 예측하여 장기적인 관점으로 제품 설계를 해야할 때가 있는가하면, 전환을 높이기 위해 세부적인 기능을 빠르게 더해주는 경우도 있죠. 상위, 하위 레벨의 사고를 자유자재로 전환하며,.. 2024. 4. 26. [UX/UI 사전캠프_4일차] 2024 UI/UX 디자인 트렌드 UXUI 아티클 / 책 스터디 2024 UI/UX 디자인 트렌드A. 디자이너와 AI 1) AI 서비스의 UX 디자인 디자이너가 AI를 어떻게 활용할 것인지 (기획, 개선) 더 쉽고 효과적으로 다가갈 수 있도록 사용자의 선호도, 외부 변수들을 새로운 관점에서 보도록 2) AI를 이용한 디자인 알고리즘으로 분석한 데이터 활용 : 사용자 패턴 예측, 사용자 선호도 기반의 컨텐츠 제안 등 * 디자이너가 활용할 수 있는 다양한 AI 서비스 - Galileo, Uizard : 화면 기획 - 미드저니 : 디자인 컨셉 - Genius : Figma 작업 AI활용 능력이 디자이너 역량에도 영향을 끼칠 수 있음 B. 대화형 사용자 경험(CUX)과 피지털(Physital) 디자인 CUX(Conversational User .. 2024. 4. 25. [Figma] 피그마 플러그인을 활용한 유저 플로우 만드는 방법 PPT보다 쉬운 피그마 강의를 들으며 1주차 과제로피그마 플러그인을 활용하여 유저 플로우 만드는 방법에 대해 설명해보겠습니다. 우선 피그마 (https://www.figma.com/)를 열고, 로그인을 합니다. 왼쪽 상단에 피그마 로고, Move tool 옆에철망 같이 생긴 이 아이콘을 누르고, 드레그하여 프레임을 만듭니다.크기는 자유롭게 만듭니다. 저는 1000*1080 크기의 프레임을 만들어보았습니다. 다음은 네모 별 마름모로 이루어진 이 아이콘을 누르고상단 메뉴에 있는 components 옆에 plugins을 누릅니다. 검색 창에 Flow Chart 라고 쳐주면 나오는 아래와 같은 플러그인을 선택합니다. 클릭을 하면 아래와 같이 다양한 도형이 뜨게 됩니다. 예시와 같이 각이 둥근 사.. 2024. 4. 25. [UX/UI 사전캠프_3일차] 모두를 위한 디자인이란 UXUI 아티클 / 책 스터디 모두를 위한 디자인이란1. 모두가 행복하고, 가능한 많은 사람들이 서비스를 사용할 수 있도록 만들어야한다. : 많은 사용자, 상황들을 고려할 수록 서비스를 사용할 수 있는 사람이 늘어난다는 것이 중요함 2. 제작자 중심의 설계가 아닌, 사용자 중심의 설계가 우선시 돼야한다. : 제작자로서는 쉽게 이용할 수 있어도, 다른 사용자를 고려했을 때 사용하지 못하는 부분들이 발생할 수 있음 3. 모든 상황과 사용자를 포함하도록 설계한다. : 의사소통이 어려운 상황이 생길 때를 고려하고, 장애를 가진 많은 사람들을 포함하도록 고려한다. 장애(Disability)는 사람과 인터랙션(상호작용) 할 수 없음을 말한다.이 내용이 가장 중요한 것 같다. 단순히 신체적 장애를 가진 사.. 2024. 4. 24. 이전 1 ··· 9 10 11 12 13 다음 728x90 반응형
