multiking

학습목표해상도와 밀도의 개념을 이해하고, UI 디자인 시 고려해야 할 사항을 알아본다. 해상도란? [resolution]- DPI(dot per inch)해상도는 화면이 얼마나 많은 픽셀로 이루어져 있는지를 나타내는 지표이다. DPI(Dots Per Inch) 또는 PPI(Pixels Per Inch)로 표기되며, 인치당 몇 개의 도트(픽셀)가 포함되어 있는지로 표현한다.DPI (Dots Per Inch): 인쇄물의 해상도를 측정할 때 사용되는 단위로, 인치당 도트의 개수를 뜻한다. DPI가 높을수록 더 정밀한 인쇄가 가능하다.PPI (Pixels Per Inch): 화면 해상도를 측정할 때 사용하는 단위로, 모니터나 스마트폰 화면의 인치당 픽셀 수를 의미한다. 높은 PPI는 더 선명하고 고해상도의 이미..

학습목표UI디자인에 필요한 스타일가이드 요소 중 z축과 그림자에 관하여 학습한다.Z축과 그림자는 UI 요소의 깊이와 계층 구조를 시각적으로 표현하는 방법을 이해한다.Z축과 그림자는 UI 요소의 깊이와 계층 구조를 시각적으로 표현하는 중요한 방법 iOS의 디자인 변화:iOS는 iOS 7부터 플랫 디자인을 사용했지만, 최근에는 머티리얼 디자인 요소를 도입하였다. 이는 사용자 인터페이스에 좀 더 현실적인 깊이감을 주기 위해 디자인 철학에 변화를 준 것이다.Z축과 깊이감:Z축의 개념: 화면의 X축(수평)과 Y축(수직)에 더해, Z축(깊이)을 추가함으로써 UI 요소들이 서로 다른 레이어에 위치해 있는 것처럼 보이게 한다. Z축은 화면에서 요소가 떠 있는 높이를 나타내며, 이를 통해 사용자는 어떤 요소가 앞쪽에 있..

학습목표:- figma UI3의 새로운 인터페이스를 학습 해 본다.무엇이 바뀌었나요?New Design:크기 조절이 가능하고 접을 수 있는 패널을 통해 인터페이스를 보다 효과적으로 제어할 수 있습니다.캔버스에서의 작업에 더 많은 강조점을 부여합니다.배치, 그룹화 및 다양한 상황에 적응하는 방식을 개선하여 기능을 보다 직관적으로 만듭니다.Figma Design, FigJam, Dev Mode 및 Figma Slides 간 전환을 더 쉽게 만들어 다른 제품과의 일관성을 추가합니다.캔버스 왼쪽에 있는 탐색 패널을 재구성하여 파일에 대한 모든 정보를 보관하고 사용하기 쉽게 만들었습니다.UI 최소화캔버스에 조금 더 많은 공간이 필요한 경우 이제 탐색 패널에서 UI를 최소화할 수 있습니다. 클릭 UI를 최소화하여 ..

학습목표- UI구조에대하여알아보자- 모바일운영체제에따른UI 컴포넌트을알아보자.- 모바일환경에따른UI 디자인특징을알아보자. UI 구조웹사이트구조 : 가로형과세로형가로구조형: header, contents, footer area세로구조형: left:header, right_top:contents, right_bottom:footer 모바일사이트구조Top : navigationBottom: tab_bar – 핵심메뉴, 기능 등 표시 모바일UI 디자인패턴모바일애플리케이션이나 시스템을 설계하는 과정에서 자주발생하는 공통적인 문제의 해결책이며, 이때 사용 할 수 있는 최상의 가이드 또는 템플릿이다.앱의 구조와명칭, 주의사항과 역할에 대해 운영체제별로 잘 파악하고 있어야한다. UI Component란?사용자를 위한..

학습목표•UI/UX디자인 프로세스의 필요성과 디자인의 시각적 기준과 근거가 되는 스타일 가이드를 알아보고 무드 보드를 제작 해 보자.* 무드보드 제작 방법을 대하여 알아보자.디자인 프로세스의 필요성논리적인 디자인 흐름을 만들려면 디자인 프로세스가 필요하다.목표를 설정했다면 그 목표를 시각적으로 잘 전달할 수 있는 색상, 이미지, 폰트 등 을 설정하는 과정이 필요디자인 프로세스는 리서치 결과를 바탕으로 먼저 디자인의 목표와 정의를 세운 후에 디자인하 고 개발해 배포하는 프로세스를 거치는 것이 좋다.1.디자인의 목표와 정의 수립•골든 서클을 이용해 목표를 설정하는 과정①WHY : 이 프로젝트를 통해 궁극적으로 전하려는 바가 무엇인지 목표를 설정한다.②HOW : 그 가치를 어떻게 전달할 것인지 판단한다.③WH..

학습목표- 모바일 디자인 트렌드 변화와 그 특징을 알아본다. 모바일 디자인 트렌드의 변화 iOS가 점차 머티리얼 디자인을 받아들이는 추세플랫 + 머티리어 디자인은 각각 장단점이 있으므로 유동적으로 사용하는 것이 바람직 스큐어모픽 디자인(Skeuomorphic Design)현실의 객체를 디지털로 구현한 사실적이고 3차원적인 디자인-> 익숙한 소재를 모방해 사용자의 친숙함과 편안함아날로그감성을 디지털로 재현 (종이질감, 카메란 렌즈효과)iOS7이후 사라짐초창기 애플에서는 스큐어모픽 디자인을 활용해 스마트폰에 현실감을 적용(질감, 색감, 빛, 엠보싱 등)-> 사용자는 터치스크린 환경에 빠르고 친숙하게 적응다양한 기기에서 일관된 느낌을 주기 어려움-> 콘텐츠에 집중하는데 효과적이지 않음그래픽 요소의 과다 사용으..

학습목표:와이어프레임과 프로토타이핑 개념과 제작 시 유의할 점을 학습한다.와이어프레임의 개념과 유의할 점와이어프레임(Wireframe): 기획자나 디자이너의 아이디어를 러프하게 구성한 화면 디자인.   ✓ 각 화면 단위의 UI를 설계하는 것✓ 화면의 설계와 화면 간의 관계 및 이동까지 모두 포함.✓ 구조(페이지 요소의 구성 방식), 콘텐츠(페이지에 표시될 내용) 및 기능(인터페이스의 작동 방식)을 설명하는 데 사용  와이어프레임 작업 시 유의할 점은 다음과 같다:기능적 요소의 위치와 역할을 명확하게 설정해야 한다.디자인의 일관성을 유지하여 사용자 경험을 향상시켜야 한다.사용자 흐름(User Flow)에 맞게 화면 전환을 고려해야 한다.다양한 디바이스에서의 활용성을 염두에 두어야 한다.와이어프레임 툴  핸..

학습목표정보구조 설계 단계를 이해하고 단계별 주의사항을 학습한다.1 정보 구조와 정보 구조 설계 IA(Information Architecture)는 서비스의 목차 역할정보 구조Information Architecture, IA는 사용자가 원하는 정보를 불편 없이 사용할 수 있도록 만든 뼈대라고 할 수 있다. 앱에서는 화면 내의 내비게이션 체계나 레이블링 등을 도식화한 것을 의미 한다.정보 구조를 설계하는 이유 - 프로젝트의 범위, 예산, 인력, 일정 등의 산출 근거- 디자이너와 개발자의 공유 문서- 개발 페이지 목록의 역할이 강해지고 있는 추세이 이미지는 정보 구조 설계의 중요성을 설명하기 위한 예시로 사용되며, 강아지의 신체를 나누어 계층적 구조로 표현하여 복잡한 정보나 시스템을 어떻게 분류하고 조직..

학습목표 디자인 리서치 결과 분석 이후 UX 디자인 설계 프로세스를 학습한다.디자인 리서치 결과 분석 이후 단계디자인 리서치를 통해 사용자 이슈와 니즈를 분석하고 아이디어를 도출한 후 실제 UX 디자인을 시작하려면 작성해야 할 문서가 매우 많다. 리서치와 모델링을 마치는 단계에서는 클라이언트의 요구나 조직의 목표에 따라 이슈를 정하고우리는 사용자 시나리오를 작성하게 되고 이를 바탕으로 보고서를 작성해 이에 따라 프로세스를 진행한다.이러한 산출단계에서는직접적으로 영향을 미치는 것은 사용자 시나리오, 사용자 시나리오에 기반해 IA, 이용흐름, 인터랙션 설계가 이루어 지면, 이러한 설계내용에 기반으로 와이어프레임과 디자인과 각각의 프로토타이핑으로 이루어 집니다.정보 구조를 설계할 때는 (분해와 재조합)사용자가..