사전캠프(23.11.20~12.15) (20) 썸네일형 리스트형 [수,목,금]▸ 선정한 앱 서비스 클론디자인 1. 앱 서비스 선정 2. 작업물 소개 (https://www.figma.com/file/9FJxtwwZwp6H3dc1htQsTm/1206-%EC%86%A1%EB%AF%BC%EC%A7%84-%EC%95%B1%ED%81%B4%EB%A1%A0%EB%94%94%EC%9E%90%EC%9D%B8?type=design&node-id=0%3A1&mode=design&t=hA2ckGLBdeDfQ0Yf-1) 앱 클론 디자인은 카테고리에 따라 화면이 여러가지라서 작업하는데 오랜 시간이 걸렸다. 처음 해보는 앱 클론 작업이라서 많은 시행착오가 있었다. 버튼을 눌렀을때 기존 버튼 몇개가 사라지는 베리언트를 만드는데 어려움을 겪었다. 단순히 버튼을 컴포넌트화 시켜서 액션을 넣어야 하는지, 아니면 아예 버튼 클릭시에 버튼이 삭제.. [화]▸ 앱 서비스 선정 (ex. 토스, 29cm) 및 회원가입 프로세스 분석 및 개선 아이디어 정리 1. 앱 서비스 선정 가장 최근까지도 많이 사용했던 골프로그 앱 "TheGrint"이다. TheGrint는 사용자들끼리 스코어를 공유하고 경쟁할 수 있는 기능을 제공하며, 점수 기록과 통계, 핸디캡 계산 등 다양한 기능을 제공한다. 또한, 코스 정보와 날씨 정보를 확인 할 수 있어서 라운딩을 더욱 편리하게 즐길 수 있다. 2. UI/UX 디자인 분석 (1) 회원가입 제공 시점 앱 실행 이후, 바로 'Join for free'과 'Login' 버튼을 선택할 수 있는 창이 뜬다. - 회원가입 버튼에는 색을 넣어서 강조하고 엄지손가락이 쉽게 닿을 수 있는 위치에 놓음. (2) 회원가입 프로세스 : 유저 플로우 (https://www.figma.com/file/o6Qp3gciLcFw6j2e6qPqtJ/1205-.. [월]▸ UI/UX 디자인 용어 정리 UXUI 용어 정리 GNB : 웹사이트 최상위 메뉴를 GNB라고 부름. 모든 페이지에서 공통적으로 보이는 메뉴바. 대부분 상단에 위치 LNB : GNB 메뉴를 클릭 혹은 마우스 올린 상태(hover) 일 때 보이는 메뉴로 서브 페이지, 특정 메뉴로 이동 가능 SNB : 상단 메뉴를 제외한 왼쪽에 붙은 메뉴바 SNB 혹은 LNB(Left Navigation Bar)라고 부름 FNB : Footer : 최하단 메뉴로 FNB 라고 부름. 로고, 주소, 전체 메뉴 영역 외에도 SNS 채널, 패밀리 사이트 등을 배치 Tab Menu : 병렬형 콘텐츠를 보여줄 경우 상당에 Tab 탭으로 표현하며, 탭으로 다른 카테고리를 클릭하여 화면을 전환할 수 있음. FAB : 플로팅 버튼은 페이지 내에서 관련성이 높거나 자주 .. [월]▸ UI/UX 디자인 아티클 스터디 12.04(월요일) 1️⃣ 오늘의 아티클(주제) - UI UI 용어를 정리해야 하는 이유(https://brunch.co.kr/@tigrisdesign/2) 아티클 정보 요약(핵심) 팀 내, 타 부서와의 원활한 소통을 위해서 UI 용어 정리 인사이트(개념 1~3개) 용어들을 각자 쓰고 싶은대로 쓰거나, 의미를 잘못 이해하고 또 정확히 파악하기 어려운 경우가 종종 발생한다. 때문에 용어 정리를 정확히 짚고 넘어가면 좋다. 원활한 소통을과 수정을 최소화 하기 위해 서로 알맞은 용어를 사용하자. 2️⃣ 오늘의 아티클(주제) - UI UI 디자인 가이드 : 디자이너의 즐겨찾기(https://brunch.co.kr/@august9/345) 아티클 정보 요약(핵심) 디자이너를 위한 25가지 리소스 공유- 디자이너가.. [수,목,금]▸ 선정한 웹 서비스 클론디자인 홈 화면 분석 웹 서비스 선정 작업물 소개 작업은 아직 익숙하지 않아서 많은 시간을 할애하였다. 우선 진행하면서 큼직하게 수정해야할 부분을 생각해보고, 다시 리터칭 작업에 들어가야 겠다. 🙉❗ 홈화면 전체를 쪼개어 작업 → 메인 홈에 들어가 있는 컴포넌트 위주로 굵직하게 작업 배너 부분 컴포넌트, 플러스광고(알바,도우미), 하단 글리드 작업(아티클로 리딩해야 할 부분) 마무리하기. 🙉❗ 최대한 컴포넌트 위주의 작업물을 하도록 노력. 페이지 자체가 옛날 버전이라서 단순한 컴포넌트의 반복. 웹페이지 관리 컴포넌트 관리를 어떤식으로 전문적으로 하는지 자세하게 찾아볼 것. 11월29일(수) - 웹 페이지 전체 구성, 컴포넌트 작업 11월30일(목) - 유저 플로우 작업, 컴포넌트 작업 12월01일(금) - 디자.. [화]▸ 웹 서비스 선정 (ex. 서핏) 및 홈 화면 UI 디자인 분석 및 개선 아이디어 정리 자주 사용하는 웹/앱 서비스 홈 화면 분석 1. 웹 서비스 선정 나는 현재 프랑스에 거주하고 있다. 프랑스에 거주하면서 한국인들과 함께 정보를 공유하고 도움을 받을 수 있는 사이트 몇 가지가 있다. 그 중에 나름 수요도 좋고, 피드백도 빠른 프랑스존닷컴 (https://www.francezone.com/) 사이트의 웹 디자인 분석을 해보려고 한다. 프랑스 혹은 프랑스어권에 사는 재외국민/교민들을 위한 포털 사이트이다. 메인 화면에는 프랑스에 사는 한국인들을 타깃으로 한 다양한 광고를 볼 수 있다. 2. UI/UX 디자인 분석 화면 구성 클릭 시 동작 페이지의 해드 부분에서는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴GNB (Global Navigation Bar) 위에 마우스 오버하면 하위에 숨.. [월]▸ UI/UX 디자인 용어 정리▸ UI/UX 디자인 아티클 스터디 UXUI 용어 정리 UX(User Experience) : 유저 경험을 의미한다. UI(User Interface) :유저가 제품을 사용하기 위한 상호작용의 모든 것 클론(clone) : 기존에 이미 있는 앱/웹 페이지를 동일하게 따라해 보는 작업 유저 플로우 : 제품 또는 서비스를 사용자가 취하는 전체 경로 표시 다이어그램 화면설계서 : 화면 구현하기 전 필요한 기능, 정책 등 화면 내 서비스의 모든 요소에 대해 정의하여 서비스 화면의 이해를 돕기 위한 문서 프로토타입 : 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터렉션 스타일로 이동할 것인지 목업으로 보여주는 것 인터렉션 디테일창 : 핫스팟에서 데스테이션 요소를 클릭하면 뜨는 창 트리거(Trig.. [금]▸ 이번 주 학습내용 관련 WIL WIL (Weekly I learned)지난 일주일을 돌아봄으로써 나의 현재 상태를 파악 이번 일주일 시작은 내일 배움 캠프의 첫 시작 주였다. 일어나는 상황들 대부분이 처음 경험해 보는 것이었다. 새로운 도전에 대한 기대도 되고, 내가 잘 따라갈 수 있을까 사소한 걱정도 되는 기분이었다. 내배캠 UXUI 1기 참여자들은 모두 온라인 ‘젭(ZEP)’ 메타버스 공간 아바타로 대면하게 되었다. 모두 저마다의 아바타로 상주하면서 웹캠으로 얼굴과 음성을 공유할 수 있는 구조이다. 사용법 또한 비교적 간단하다. 맵을 통해 이동하여 각자의 주어진 공간에서 모여 그룹 활동을 하는 것이다. 그곳에서 팀원 분들과 소통하며 앞으로의 팀 계획과 각자 이루고자 하는 비전에 대해 소통하고, 학습에 관련하여 어려움을 이야기하며 .. 이전 1 2 3 다음
