디자인로그

UI 디자인 실전_2 목차UI 디자인 프로세스 개요서비스 기획 및 아이디어 발상디자인 시스템의 이해와 구축와이어프레임 작성 및 레이아웃 설계화면 디자인 및 프로토타이핑피드백 및 개선 방안 논의UI와 UX의 관계사용자 인터페이스(UI)와 사용자 경험(UX)의 상호작용을 중시하며, UI는 UX를 보완하고 그 경험을 쉽게 사용할 수 있도록 돕는 역할을 한다.UI 디자인은 서비스를 구조화하고, 내용을 전달하며, 사용자와의 상호작용을 디자인한다.사용자 경험(UX: User Experience)이란 사용자가 기업, 서비스, 기업의 제품과 상호작용하면서 얻는 모든 측면의 경험을 의미한다.정말 훌륭한 사용자 경험을 제공하려면 고객이 직접 필요하다고 말하는 것 이상을 제공해야 하며, 체크리스트에 나열된 기능을 제공하는 ..

DAY 19 | UI 디자인 실전_11. 디자인 시스템의 정의디자인 시스템은 일관성 있는 디자인과 효율적인 작업을 위해 일정한 규칙, 요소, 스타일 등을 체계적으로 정리한 것.제품이나 서비스의 경험을 아우르는 모든 디자인 요소를 포함.2. 디자인 시스템 도입 이유일관성 유지: 여러 디자이너가 작업할 때 스타일이나 인터페이스의 일관성 유지 가능.효율성: 디자인 프로세스를 효율화하여 시간과 비용 절감.품질 개선: 일관된 디자인을 통해 제품의 품질 향상.3. 디자인 시스템의 핵심 요소색상(Color): 브랜드 컬러 및 보조 색상 정의.타이포그래피(Typography): 글꼴, 크기, 줄 간격 등 텍스트 스타일 규정.아이콘(Iconography): 아이콘의 크기, 스타일, 용도 정의.컴포넌트(Component)..

DAY 18 | 피그마 심화_디자인 시스템   디자인 시스템 정의디자인 시스템은 일관성을 유지하며, 코드와 디자인의 규칙을 정의합니다.예시: Google Material Design, Apple Human Interface Guidelines.디자인 시스템의 필요성일관성 유지: 여러 디자이너가 참여해도 일관된 스타일을 유지할 수 있습니다.협업 강화: 개발자 및 기획자와의 소통이 쉬워집니다.유지보수 효율화: 한번의 수정으로 전체 시스템에 반영 가능해집니다.디자인 시스템 vs 스타일 가이드디자인 시스템: 기능적 요소(컴포넌트, 인터랙션) 포함.스타일 가이드: 색상, 폰트 등의 시각적 요소에 집중.컬러 시스템 (Color System)브랜드 컬러, 상태 색상(예: 오류, 성공, 경고 등), 색상 팔레트를 정의..

DAY 17 | 피그마 심화_디자인 스타일디자인 스타일 고도화 개요디자인 스타일이란?색상, 텍스트, 아이콘, 그래픽 등 디자인 요소를 체계적으로 관리하는 기능으로, 디자인 수정 시 일관성을 유지하고 빠르게 업데이트할 수 있게 합니다.디자인 스타일을 고도화하는 이유브랜드 아이덴티티 유지협업 효율성 향상다양한 그래픽 효과를 사용하여 디자인에 깊이감과 디테일 추가스타일 고도화의 주요 요소컬러 스타일(Color Style): 브랜드 컬러 팔레트를 정의하고 적용.텍스트 스타일(Text Style): 제목, 본문, 캡션 등 관련된 타이포그래피 설정.이펙트 스타일(Effect Style): 그림자(Shadow), 블러(Blur), 그라디언트(Gradient) 등의 효과를 설정.* 디자인 스타일은 디자인 시스템의 핵심..

디자인 시스템 : 컴포넌트 활용컴포넌트 활용텍스트 프로퍼티: 버튼의 문구를 변경할 수 있는 방법.아이콘 프로퍼티: 버튼 내 아이콘을 활성화하거나 비활성화하는 방법.가시성(Visibility) 프로퍼티: 특정 요소를 숨기거나 표시할 수 있는 방법.베리언스(Variants)와 프로퍼티(Property)를 활용해 버튼에 다양한 상태를 설정하고, 다양한 디자인을 쉽게 관리할 수 있도록 했습니다.* 프로퍼티는 클래스(Class)나 객체(Object)의 속성을 나타내는 변수나 상수를 의미* 컴포넌트(Component)는 재사용이 가능한 독립된 모듈로, 프로그래밍, 게임, 웹 개발 등 다양한 분야에서 사용됨베리언스 및 프로퍼티 적용 예시구글 머티리얼 디자인에서의 버튼 사례 분석.앱 서비스에서 다크 모드와 라이트 모드..

컴포넌트의 개념과 필요성  컴포넌트란?UI 디자인에서 반복적으로 사용되는 요소를 재사용 가능하도록 만든 디자인 단위버튼, 카드, 네비게이션 바 등 여러 화면에서 동일한 UI를 유지할 때 사용컴포넌트를 활용하는 이유디자인 일관성 유지: 여러 화면에서 동일한 요소 재사용 가능작업 효율성 증가: 한 번 수정하면 모든 인스턴스에 자동 반영개발자 협업 용이: 개발자가 동일한 디자인 시스템을 참조할 수 있음 컴포넌트의 기본 구조메인 컴포넌트(Main Component): 원본 디자인인스턴스(Instance): 메인 컴포넌트를 복제하여 사용하는 개별 요소 메인 컴포넌트를 만들고, 복사 붙여넣기를 하면 인스턴스를 만들 수 있다.  Figma에서 컴포넌트 만들기 및 활용버튼 디자인을 예로 들어 컴포넌트 생성 및 다양한 ..

1. Figma란?Figma는 클라우드 기반 디자인 및 프로토타이핑 도구로, 협업 기능이 뛰어나며 웹 브라우저에서 실행할 수 있어 별도의 설치가 필요 없다. 특히, 팀원들과 실시간으로 작업할 수 있는 점이 큰 장점이다.Figma의 주요 특징실시간 협업: 여러 사용자가 동시에 편집 가능디자인 + 프로토타이핑: 사용자 흐름까지 한 곳에서 작업 가능버전 관리: 이전 디자인으로 쉽게 되돌릴 수 있음플러그인 & 커뮤니티 템플릿: 디자인 속도를 높일 수 있는 다양한 리소스 제공 2. UI 구성 요소 학습UI 구성 요소란?UI는 사용자가 인터페이스를 탐색하고 상호작용하는 요소를 의미하며, UI 디자인의 기본 단위에는 버튼, 입력창, 카드, 네비게이션 바 등이 포함된다.UI 구성 요소의 중요성UX의 시각적인 핵심 역할..

[디자인부트캠프] DAY 11 | UIUX 개념 입문_1 UI/UX 용어는 함께 쓰이기도 하지만, 각 단어의 의미에 차이점이 있다. 오늘 강의에서는 UI(사용자 인터페이스)와 UX(사용자 경험)의 개념을 이해하고, 이들이 어떻게 사용자의 만족도를 높이는지에 대해 살펴보았다. UI/UX 개념 정리: 사용자 경험과 인터페이스의 차이1. UI(User Interface)란?UI는 사용자가 제품과 상호작용할 때 마주하는 시각적, 물리적 인터페이스를 의미합니다. 쉽게 말해, 사용자가 직접 보고, 클릭하고, 조작하는 모든 디자인 요소가 UI에 해당합니다.UI의 주요 요소컬러(Color): 브랜드의 아이덴티티를 강조하고 사용자의 감성을 자극타이포그래피(Typography): 가독성을 높이고 정보 전달력을 강화아이콘(..

오늘은 UI/UX 디자인에서 필수적인 툴인 Figma에 대해 학습했다.Figma는 협업과 프로토타이핑이 강력한 클라우드 기반 디자인 툴로,여러 명이 동시에 작업할 수 있어 UI/UX 디자이너들에게 널리 사용된다. 작업 방식도 어도비 계열의 툴들과 비슷하여 초보자도 빠르게 적응할 수 있을것이다. Figma란?클라우드 기반 디자인 및 프로토타이핑 툴협업 기능이 뛰어나 팀원들과 실시간 작업 가능웹 브라우저에서 실행 가능하여 별도 설치가 필요 없음(단, 데스크톱 버전을 설치하면 더 효율적으로 활용 가능)Figma의 주요 특징실시간 협업여러 사람이 동시에 편집 가능하여 디자인 작업의 효율성을 높인다.디자인 + 프로토타이핑 통합디자인과 사용자 흐름을 한 곳에서 작업할 수 있다.버전 관리 기능이전 디자인으로 쉽게 되..

[디자인부트캠프] DAY 09 | AI 시대의 디자인  어느덧 강의 9일이 지나고, 오늘도 어제와 이어서 ai 디자인을 주제로 다뤄보았습니다.최근 디자인 작업을 하다 보면 간단한 작업부터 복잡한 편집까지 다양한 툴을 찾게 됩니다. 오늘은 그중에서도 쉽고 직관적인 디자인 툴인 어도비 익스프레스(Adobe Express)에 대해 소개하려고 합니다. 어도비 익스프레스는 다양한 탬플릿을 이용해 빠르게 만들수 있는 플랫폼입니다. 제가 원하는 이미지를 그대로 담기에 아직 어려움이 있어서 자주 사용하지 않았었는데 이번에 다시 한번 시도를 해보았어요.    어도비 익스프레스(Adobe Express) 활용법: 디자인이 쉬워지는 순간  어도비 익스프레스란?어도비 익스프레스는 포토샵, 일러스트레이터 등 복잡한 디자인 프로..