[UI Design #1]UI 디자인 기초_코드잇 #1 UI 디자인 이해하기UI는 유저 인터페이스 (User Interface)의 줄임말- User : 사용자- Interface : 무언가를 하기 위한 도구 #2 디자인 툴 다루기레이어 패널 : 하나의 투명한 필름의 개념, 여러개 쌓을 수 있는 필름 같은 개념룰러(Rulers) : 피그마 내에서 가이드라인을 실행시키는 기능 #3 좋은 UI 디자인좋은 디자인에서는 같아야 하는 것이 있고, 달라야 하는 것이 있다.- 일관성 : 동일하게 지켜나가야 하는 것.- 위계질서 : 대비 or 달라야 하는 것. * 색상, 크기, 밝기 등 대비를 통해 좋은 UI를 만들 수가 있다. (시각적인 무게감 구분) [클론 디자인] 웹사이트 클론 디자인 #1 웹 서비스 선정 ▽ VOD 스트리밍 OTT Service ‘넷플릭스’ Main View 주로 OTT 서비스인 ‘넷플릭스’를 스마트 기기인 모바일앱 버전이 아닌 데스크탑 버을 이용한다. 자주 봐왔던 화면인 만큼 해당 서비스 화면을 따라 만들고 싶은 생각이 들어 이번 클론 디자인으로 택했다. #2 작업물 소개 첫 프로필 화면에서는 다른 정보와 방해되는 요소들이 없이 오로지 프로필 부분에서만 초점을 주었기 때문에 깔끔한 UI가 인상적이다. 메인화면에서는 Black & White 색상을 이용하여 배경과 콘텐츠들을 시각적으로 표현을 했고, 사용자가 알아야할 중요한 정보는 Red 색상을 통해 중요한 포인트들을 심어주었고 전체적으로 깔끔하고 버릴 것 없는 디자인이라는 것을 보여준 UI였다. #3 유저 플로우 해.. [서비스 분석] 이마트몰 앱 서비스 홈 화면 분석 #1 서비스 선정 ▼ 선정 이유 평소 내가 자주 사용하면서 UX가 뛰어나다고 생각했던 앱으로 생각을 해보니 이커머스와 SSG이 생각이 났다. 신세계 BI와 퀄리티 좋은 비쥬얼과 서비스가 한 곳에 모여 SSG이라는 브랜드를 론칭해 많은 도움이 될 것 같아 해당 어플을 선정해 보았다. ▼ 서비스 소개 SSG은 신세계그룹 산하 법인의 온라인 부문을 통합한 쇼핑몰과 이를 운영하는 기업이다. 해당 서비스를 쉽고 간편하게 새벽배송 및 익일배송으로 받아볼 수 있으며 **’공효진&공유’**의 TV광고로 많은 사람들에게 사랑 받고 있는 이커머스 서비스이다. #2 UI/UX 디자인 분석 ▼ 화면 구성 처음 이마트몰 앱을 실행하면 SSG의 아이덴티티가 느껴지는 노란색 색감에 메인 슬라이드 화면에는 인터랙션 영역으로 사용자와.. [Figma #3] 피그마로 디자인 템플릿 만드는 방법 피그마로 쉽게 보다 빨리 템플릿으로 UI디자인을 만들 수가 있다. 피그마 내에서 플러그인을 활용하면 쉽게 아이콘/UI를 불러올 수 있으며, 유료/무료를 통해 언제든지 고퀄리티로 제작이 가능하다. #1 Plug-in 불러오기 피그마 상단 툴바에서 'Resources'를 클릭하면 'Compoents, Plugins, Widgets' 탭에서 불러올 수가 있다. #2 자주 쓰이는 Plug-In ▼ Material Symbols 빠르게 UI디자인을 불러올 수 있는 플러그 ▼ Product Planner 차트, 도표 등 빠르게 플래너를 불러올 수 있는 플러그인 ▼ Charts 차트 디자인을 빠르게 불러올 수 있는 플러그인 ▼ Colof Palettes 최적의 컬러 매칭을 위한 팔레트 플러그 [Figma #2] 클릭하면 이동하는 피그마 프로토 타이핑 #1 프로토타입이란 프로토타입이란 본격적인 상품화에 앞서 성능을 검증 · 개선하기 위해 간단히 핵심 기능만 넣어 제작한 기본 모델. #2 디자이너에게 프로토 타이핑이 필요한 이유 디자이너는 다양한 직군과 협업하게 되는데 프로토 타이핑을 사용한다면 말보다는 명확한 이미지로 제시하기 때문에 효과적으로 전달할 수 있다. 스스로 사용해보는 것이기 때문에 디자이너 본인의 문제점을 발견해서 보완하기 좋다. #3 피그마 프로토타입이란 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일로 이동할 것인지 목업으로 보여주는 것. a) 핫스팟(Hot Spot) - 파란색 기준이 되는 점, 인터랙션이 시작하는 위치. b) 커넥션(Connection)라인 - 핫스팟과.. [Figma #1] 플러그인을 이용한 User Flow Chart 그리는 방법 ▼ 플로우차트란? 유저플로우, 유즈케이스라고도 부르기도 하며 사용자가 어떤 과정으로 제품을 이용하는지 기호와 도형으로 도식화한 것을 의미. 플로우차트는 프로세스나 기획 등 실무의 다양한 분야에서 폭넓게 활용되고 있다. 'Figma'의 플러그인 'Flow Chart'를 이용하면 보다 쉽게 도식화를 만들 수가 있다. 플러그인이 설치되어 있지 않았으면 직접 기입을 해 설치해주면 된다. 각 도형을 직접 클릭하게 되면 보다 쉽게 도형을 만들 수가 있다. 도형뿐만 아니라 '투명한 파랑색 화살표' 를 클릭하게 되면 자동으로 화살표까지 그릴 수 있어 빠르게 제작할 수 있다는 장점이 있다. [UXUI Design] UXUI 용어 정리 #1 UX (User Experience) ▼ 유저 경험을 의미한다. - 사용자 경험 설계는 사용자와 회사의 모든 측면 사이의 상호작용의 질을 개발하고 있는 것을 의미. - UX 디자인은 시각적인 것이 아니라 경험의 전반적인 경험에 초점. ※ '첫 사용 단계에서 도움말, 서비스, 유지 관리하는 단계에 이르기까지 모든 것을 고려하고 모든 요소가 원활하게 함께 작용할 수 있도록 하는 것' - 돈 노먼 - #2 UI (User Interface) ▼ 유저가 제품을 사용하기 위한 상호작용의 모든 것 - 제품의 인터페이스를 통해 사용자를 시작적으로 안내하는 것. - 브랜드의 강점과 시각적 자산을 제품의 인터페이스로 전달하여 디자인이 일관되고 미적인 아름다움. #3 UI/UX 디자이너 ▼ UIUX 디자이너는 시각적.. 이전 1 2 3 다음
