본문 바로가기

UX UI4

[UX/UI] 웹 UX / UI 디자인 가이드 라인(Guide Line) - 반응형 웹 그리드 (Responsive Web Grid) 3 [UX/UI] 웹 UX / UI 디자인 가이드 라인(Guide Line) 반응형 웹 그리드 (Responsive Web Grid) 3 웹 사이트 레이아웃 그리드 가이드 (Website Layout Grid Guide, Material Design Guide) - 3 머터리얼 디자인 가이드(Material Design Guide) / 8 픽셀 그리드(8 Pixel Grid) 등 레이아웃 그리드(Layout Grid) 레이아웃 구조 (Layout Structure) 머터리얼 디자인 가이드(Material Design Guide) Screen Size Screen Type Columns Body Margin / Gutter 0-599dp Extra-Small (Mobile) 4 Fluid(Scaling) 16.. 2022. 5. 18.
[UX/UI] 웹 UX / UI 디자인 가이드 라인(Guide Line) - 반응형 웹 그리드 (Responsive Web Grid) 2 [UX/UI] 웹 UX / UI 디자인 가이드 라인(Guide Line) 반응형 웹 그리드 (Responsive Web Grid) 2 [UX/UI] 웹 UX / UI 디자인 가이드 라인(Guide Line) - 반응형 웹 그리드 (Responsive Web Grid) 2 8 픽셀 그리드 (8 pixel grid) ※ 출처 : https://uxdesign.cc/responsive-layout-grid-guide-for-designers-c3ba7d161bdf 레이아웃 정의 (Layout Definition) 이미지 / 텍스트 / 컴포넌트 등을 화면에 배치하는 것을 의미한다. 레이아웃(Layout) 의 원칙(principles) · 균형(Balanced) : 그리드(Grid) 사용하여 시각적 요소를 정렬 .. 2022. 5. 16.
[UX/UI] 웹 UX / UI 디자인 가이드 라인(Guide Line) - 반응형 웹 그리드 (Responsive Web Grid) 1 웹 UX / UI 디자인 가이드 라인(Guide Line) 반응형 웹 그리드 (Responsive Web Grid) 머터리얼 디자인 가이드(Material Design Guide) 머터리얼 디자인(Material Design) 이란 ? · 플랫 디자인(Flat Desing)을 기반으로 한 구글의 디자인 지침서. ※ 플랫 디자인(Flat Desing)은 색상과 레이아웃을 통한 2차원 디자인 방식을 의미 반응형 레이아웃 그리드(Responsive layout grid) · 화면 크기와 방향에 맞게 조정되어 레이아웃(Layout)의 일관성을 보장 ※ 열(Column), 여백(Margin), 거터(Gutter)로 구성 ※ 참조 : https://material.io/design/layout/responsive-.. 2022. 5. 11.
[UX/UI] 웹 UX / UI 디자인 가이드 라인(Guide Line) - 색상(Color) 웹 UX / UI 디자인 가이드 라인(Guide Line) 색상(Color) 색상마다 의미하는 바가 다르지만, '언어'와 달리 그 의미는 공통이다. 색조 (색상, Hue) · 색상(Hue)은 색 자체가 가지고 있는 고유 특성 채도(Saturation) · 색상의 선명도 · 다른 색과 색이 섞이지 않을 수록 선명도가 높아짐 - 고채도 · 다른 색과 색이 섞일 수록 선명도가 낮아짐 - 저채도 명도(Brightness) · 색상의 밝음과 어두움의 정도 톤(Tone) · 서로 동일한 명도, 채도를 사용하여 톤을 조절 색상 가이드(Color Guide) 1. 주요 색상 (Pirmary Color) 브랜드(Brand) 대표 색상으로, 가장 많이 그리고 자주 쓰이는 색상 ※ 사용자의 시선이 가장 많이 머무르는 곳에 .. 2022. 5. 11.
반응형