# uxui

52개의 포스트

UX/UI 의 개념과 상관 관계

UX : User Experience, 사용자 경험의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험. 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을

2022년 7월 20일
·
0개의 댓글
·
post-thumbnail

HIG - Image

이미지는 전체 화면에 큰 시각적 영향을 주며, 목업의 퀄리티를 좌우하기도 합니다. 그래서 이미지 콘텐츠를 화면에 표시하는 방법 및 알맞은 배율을 잘 고려해야합니다.이미지의 원리 정사각형 모양의 작은상자(픽셀) 안에 각 색상이 채워지고,픽셀이 여러개 모여 이미지로 보이게

2022년 7월 19일
·
0개의 댓글
·
post-thumbnail

HIG - Icons

아이콘이란?하나의 개념을 사람들이 즉시 이해할 수 있도록 표현한 그래픽 요소입니다.용도앱과 게임에서 선택할 수 있는 항목, 작업과 모드를 이해하는 데 도움이 되도록 합니다.형태개성을 위해 풍부한 시각적 요소(음영, 질감, 강조 등)를 사용한 앱 아이콘과 달리간결한 모양

2022년 7월 19일
·
0개의 댓글
·
post-thumbnail

HIG - Dark Mode

Apple HIG 다크모드 Dark Mode 01 정의 다크모드란, 밝은 화면에 어두운 글자를 대신하여 어두운 화면에 밝은 글자를 나타내는 반전 테마로, 조명이 낮은 환경에서 편안하게 인터페이스와 상호작용 하도록 돕는 전체 시스템에 대한 설정입니다. 02 지침 사

2022년 7월 13일
·
0개의 댓글
·
post-thumbnail

[UX/UI] Figma 사용법

Layer실제 크기 보기 : S + r 순서 바꾸기 1) layer 순서 올리기 : C + ]2) layer 순서 내리기 : C + \[확대(축소) 1) 레이어 선택-> S + 2 2) 레이어 선택-> S + 1

2022년 6월 30일
·
0개의 댓글
·

[UX/UI] 프로토타입

프로토타입은 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능 본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적프로토타입 역시 얼마나 최종 결과물과 흡사하게 만들었는지에 따라서 피델리티 레벨이 나뉜다L

2022년 6월 27일
·
0개의 댓글
·

와이어프레임

와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만든다.와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨로 나뉜다Low Fidelit

2022년 6월 27일
·
0개의 댓글
·

제이콥 닐슨의 10가지 사용성 평가 기준

사용성 평가 기준은 서비스중인 애플리케이션을 평가하기 위한 목적으로도 사용할 수 있지만, 제품 설계 단계에서 더 완성도있는 애플리케이션을 기획하기 위해서도 사용할 수 있다. 시스템 상태의 가시성 (Visibility of system status)합리적인 시간 내에 적

2022년 6월 27일
·
0개의 댓글
·

사용자 흐름(user flow)

사용자 흐름(user flow)은 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻하며, 다이어그램을 그려서 정리다이어그램 작성법 \- 직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … ) \- 다이아몬드 : 사

2022년 6월 27일
·
0개의 댓글
·

피터 모빌(Peter Morville)의 벌집 모형

1) 유용성(Useful) : 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소ex) 계산기라면 계산을 틀리지 않고 맞는 결괏값이 나오는지, 계산기 본연에 목적에 맞는 기능을 하는지가 중요 && 꼭 목적에 맞지 않더라도, 비실용적이라도 추

2022년 6월 27일
·
0개의 댓글
·

GNB/LNB

GNB(Global Navigation Bar)는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴, LNB(Local Navigation Bar)는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 뜻합니다. 위 예시에서는 탭 형식으로 최상단에

2022년 6월 27일
·
0개의 댓글
·

태그

태그는 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할을 합니다. 사용자들은 자신이 작성한 콘텐츠에 태그를 붙임으로써 콘텐츠를 분류할 수 있고, 태그를 사용하여 관련 콘텐츠들만 검색할 수도 있습니다.태그로 사용될 키워드는 사용자가 직접 작성하게 만들 수도 있고,

2022년 6월 27일
·
0개의 댓글
·

탭은 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴입니다. - 가로로 한 줄로 배열된 형태가 가장 흔하지만, 세로로 배열하거나 여러 줄로 배열할 수도 있습니다.탭을 사용하려면 각 섹션의 이름이 너무 길지 않아야 하고, 섹션의 구분이 명확해야 하며, 현재

2022년 6월 27일
·
0개의 댓글
·

토글

토글은 On/Off를 설정할 때 사용하는 스위치 버튼입니다. 색상, 스위치의 위치, 그림자 등의 시각적 효과를 주어 사용자가 토글의 상태를 직관적으로 알 수 있게 만들어야 합니다.보통 On/Off와 같이 두 개의 옵션이 있을 때 사용하지만, 여러 개의 옵션이 있을 때에

2022년 6월 27일
·
0개의 댓글
·

모달

모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 뜻합니다. 닫기 버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이며, 모달을 닫기 전에는 기존 화면과 상호작용할 수 없습니다.또 다른 브라우저 페이지를 여는 팝업창과는 구분되는 개념입니다. 팝업은 브

2022년 6월 27일
·
0개의 댓글
·

UI/UX

UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있습니다

2022년 6월 27일
·
0개의 댓글
·
post-thumbnail

[패스트캠퍼스]K디지털 기초역량훈련 UXUI 강의 3주차-UX/UI 디자인 노하우 : 모바일 UX 디자인 이해하기(2)

앱 아이콘은 어떻게 디자인해야 할까디바이스 별 픽셀밀도와 사용되는 영역에 따라 따로 만들어줘야함앱 아이콘스팟라이트 아이콘설정 아이콘알림 아이콘앱 아이콘적응형 앱 아이콘상태 바 아이콘

2022년 6월 19일
·
0개의 댓글
·
post-thumbnail

[패스트캠퍼스]K디지털 기초역량훈련 UXUI 강의 3주차-UX/UI 디자인 노하우 : 모바일 UX 디자인 이해하기

터치 스크린 UI는 어떤 특징이 있을까⭐️ 트리거 (Trigger) ⭐️ 액션 (Action) ⭐️ 피드백 (Feedback)왜 픽셀 밀도를 알아야 할까같은 브랜드의 같은 기종인데도 조금씩 다른 해상도 (Resolution)과 PPI(Pixel per inch)를

2022년 6월 19일
·
0개의 댓글
·
post-thumbnail

[패스트캠퍼스]K디지털 기초역량훈련 UXUI 강의 3주차-UX/UI 디자인 노하우 : 벤치마킹에 대한 이해

어떻게 경쟁 및 유사 제품을 벤치마킹 할 수 있을까측정의 기준이 되는 대상을 설정하고 그 대상과 비교 분석을 통해 장점을 따라 배우는 행위동일한 태스크를 진행하면서 발생한 사용성 문제를 비쇼 분석동일한 태스크를 완료하는데 걸리는 시간을 측정하여 비교분석전문가가 직접

2022년 6월 18일
·
0개의 댓글
·
post-thumbnail

[패스트캠퍼스]K디지털 기초역량훈련 UXUI 강의 3주차-UX/UI 디자인 노하우 : 휴리스틱 평가

얼마나 자주 발행하는가사용자가 극복 가능한 수준인가평가한 제품에서 어떤 사용성 문제가 가장 많이 발생하는지 한 눈에 보이도록 작성이를 통해 어떤 사용성 문제에 집중해야하는지 우선 순위를 판단 가능

2022년 6월 18일
·
0개의 댓글
·