본문 바로가기

UIUX디자인

(24)

가변, 고정 영역에 대한 이해 출처:https://brunch.co.kr/@zalhanilll/406 가변, 고정 영역에 대한 이해 UI 디자인 시작하기 | 디스플레이 단위(PX, DP, SP, PT) 이해하기 글을 먼저 보고 오시면 이해에 도움이 됩니다. 처음 UI 디자인을 시작하면 생각보다 알아야 할게 많아서 놀라곤 하는데, 그중 하나는 brunch.co.kr 디스플레이 단위(PX, DP, SP, PT) 이해하기 디스플레이 단위(PX, DP, SP, PT) 알아보기 UI 디자인 시작하기 | PX(Pixel) 웹에서 주로 쓰이는 단위. 화면을 구성하는 가장 기본이 되는 단위이다. 해상도를 나타낼 때 쓰인다. (Picture Element에서 유래됐다고 한다) DP(Density Independent Pixel) 안드 brunch.c..

좋은 UI와 훌륭한 UI의 차이 출처: https://brunch.co.kr/@c62b100079f3466/10 좋은 UI와 훌륭한 UI의 차이 UI 마이크로 인터렉션을 개선하기 위한 실용적인 제안. | 좋은 것에서 더욱 좋은 것으로 바뀌는 UI 인터랙션 몇 가지 예를 살펴보겠습니다. 약간의 수정을 통해 디자인 퀄리티를 높일 수 있습니다 brunch.co.kr 좋은 것에서 더욱 좋은 것으로 바뀌는 UI 인터랙션 몇 가지 예를 살펴보겠습니다. 약간의 수정을 통해 디자인 퀄리티를 높일 수 있습니다. Material Motion, IBM의 Animation Principles 및 The UX in Motion Manifesto의 지침을 따랐습니다. 탭을 활성화할 때, 콘텐츠 영역에 슬라이드 인터랙션 넣기 왼쪽의 콘텐츠가 페이드 인 및 페이드..

개발자와 디자이너가 보는 디테일의 차이 출처: https://brunch.co.kr/@sarayun/50 -여기는 시안이랑 똑같이 해주세요. -어디가 다른데요? 흔한 개발자와 디자이너의 QA (quality assurance) 대화 이 대화의 문제는 서로 다르게 보고 있음에 의해 발생합니다. 눈이 예민한 사람이 보기에는 명백히 차이가 있는데, 둔감한 사람에게는 그 차이가 인지되지 못하기 때문입니다. 비단 디자이너와 개발자 사이의 문제는 아닌 것 같습니다. 디자이너끼리도 눈의 레벨이 다르고, 현재의 나와 과거의 나의 눈도 다릅니다. 자신의 예전 작업물을 다시 봤을 때 미묘하게 틀어져 보이는 것들을 볼 수 있게 되면 예민함을 캐치하는 눈이 발달하고 있다는 증거입니다. 어쨌든 디테일에도 높은 레벨의 것과 낮은 레벨의 것이 있습니다. 분노는 기본적인..

디자인 보는 눈 레벨업, 컬러 조합 공식 출처 : https://brunch.co.kr/@sarayun/53 망하지 않는 컬러 고르는 공식 디자인 기초 공식 | 세 번째 공식인 컬러 공식입니다. 컬러는 네 가지 공식 중에서 개인의 취향이 가장 많이 반영되는 요소입니다. 그럼에도 불구하고 망하지 않는 컬러 공식이 있으니 컬러 사 brunch.co.kr/@sarayun/32 11화 망하지 않는 컬러 고르는 공식 디자인 기초 공식 | 세 번째 공식인 컬러 공식입니다. 컬러는 네 가지 공식 중에서 개인의 취향이 가장 많이 반영되는 요소입니다. 그럼에도 불구하고 망하지 않는 컬러 공식이 있으니 컬러 사 brunch.co.kr 제가 쓴 브런치 칼럼 중에서 가장 많은 반응을 불러온 글이 '망하지 않는 컬러 고르는 공식'이었습니다. 이전 글이 컬러를 고르는 ..

그 디자인은 틀렸다. WCAG2 명도 대비 출처 : https://brunch.co.kr/@heavenlych/2 그 디자인은 틀렸다. WCAG2 명도 대비 3:1, 4.5:1 이 익숙한 명암대비가 사실은 틀렸다면? | 4.5:1, 3:1과 같은 명암비를 들어본 적 있나요? 혹은 이를 나의 디자인에 반영해 본 적이 있나요? 프로덕트 디자이너/UIUX디자이너라면 한 번쯤은 brunch.co.kr 3:1, 4.5:1 이 익숙한 명암대비가 사실은 틀렸다면? by 이프노즈 Feb 04. 2022 4.5:1, 3:1과 같은 명암비를 들어본 적 있나요? 혹은 이를 나의 디자인에 반영해 본 적이 있나요? 프로덕트 디자이너/UIUX디자이너라면 한 번쯤은 으레 화면을 그린 다음 플러그인을 통해 명암대비 확인을 해 보았을 것입니다. 구글의 Material 디자인 ..

Card UI 디자인 가이드 출처: https://brunch.co.kr/@august9/244 Card UI란? Card UI는 Single Case에 대한 콘텐츠와 작업을 포함하는 UI 구성 요소를 말합니다. Card에는 다양한 요소가 포함될 수 있겠지만 그것들이 담은 내용은 모두 한가지(동일한) 토픽이어야함을 전제합니다. Card UI의 목적은 긴 텍스트를 피하고 검색 가능한 콘텐츠를 더 많이 렌더링하기 위함입니다. 사용자는 디자인 관점에서는 카드의 개념에 익숙하지 않을 수 있지만 실제 카드를 모티브로했기때문에 사용법을 바로 인지할 수 있습니다. 그럼 왜 인기가 있을까요? Card는 콘텐츠를 단순화하는 것처럼 보이기 때문에 특히 인기가 있습니다. 특히 모듈방식으로 사용되어서 서로 다른 내용을 담은 Card 아이템이라도 함께 구..

UI 디자인 가이드 : 로딩 상태 표시 버튼 출처: https://brunch.co.kr/@august9/279 버튼의 로딩 상태 표시하기 When You Need to Show a Button’s Loading State 우리가 사용하는 버튼에는 활성화(enabled) 및 비활성화(disabled) 상태 외에 로드(loading) 상태도 존재할 수 있습니다. 보통은 작업이 몇 초 이내에 완료되기 때문에 일반적인 네트워크 상황에서 버튼 로딩 상태가 사용자에게 표시되지 않는 경우가 많지만 네트워크에 문제가 있거나 기타의 이유로 평소보다 더 많은 시간이 걸리는 경우 사용자에게 상태에 대한 어포던스를 제공하지 않는다면 에러 발생 확률이 높아집니다. Action Errors(사용자 액션 오류) 사용자는 작업이 완료되는 데 예상보다 오랜 시간이 걸리는 경우..

UI 디자인 가이드 : Pagination 출처 : https://brunch.co.kr/@august9/278 페이지네이션, 무한 스크롤, 더 보기 버튼에 관하여 UI cheat sheet: pagination, infinite scroll and the load more button 콘텐츠가 포함된 UI를 설계하는 경우 콘텐츠가 많을 때는 이 세 가지 패턴 중 하나를 선택하여 콘텐츠를 로드합니다. 어떤 방법 가장 좋을까요? 사용자는 무엇을 선호할까요? 대부분의 플랫폼은 무엇을 사용하고 있나요? 시작하기 전에 다른 두 가지 관련 가이드를 먼저 확인하는 것도 좋습니다. 하나는 검색 및 탐색 에 대한 것이고 다른 하나는 그리드 및 목록에 대한 것 입니다. 이것들은 세 가지 패턴 유형을 이해하는 데 중요하지 않지만 몇 가지 배경과 컨텍스트를 제공하고..

UI 디자인 가이드 : Infinite Scroll 출처 : https://brunch.co.kr/@august9/291 무한 스크롤은 페이징 방법 중에서도 매우 인기 있는 디자인 유형입니다. 특히 모바일에서처럼요. 무한 스크롤를 활용해서 사용자 경험, 잠재 고객 창출등에 영향을 줄 수 있습니다. 무한 스크롤링이란 브라우저 스크롤 막대가 페이지 하단에 도달하는 것을 방지하는 것 을 말합니다. 사용자가 페이지를 더 아래로 스크롤할 때마다 콘텐츠가 확장되어 새로운 콘텐츠가 추가됩니다. 무한 스크롤은 연속적(무한하게)으로 스크롤하는 형태일 수도 있고, 사용자가 계속 스크롤을 선택/선택 해제할 수 있는 "더 보기" 옵션으로 단축할 수도 있습니다. *아래에서 무한 스크롤(Infinite Scroll)과 더 보기(Load More) 버튼에 대해 한차례 다룬 바 있습..

UI 디자인 가이드 : List vs Grids 출처 : https://brunch.co.kr/@august9/288 목록 타입 : 리스트와 그리드 list vs grids 검색 결과 혹은 아이템 목록의 형태를 가진 UI 구성, 가장 대표적인 두가지 타입의 뷰 모드를 알아봅니다. 리스트 모드와 갤러리뷰, 카드뷰라고도 불리는 그리드 모드입니다. 서비스의 어디에서나 사용할 수 있겠지만 주로 검색 결과, 아이템 카탈로그 및 뉴스 피드를 중점적으로 살펴보겠습니다. 이 선택을 통해 사용자가 우리의 콘텐츠와 상호 작용하는 방식과 사용자가 수행할 작업이 결정됩니다. 페이지 요약 1. 소개 1.1 그리드 뷰와 리스트 뷰의 차이 1.2사용자는 어떤 모드에 있고 가장 중요하게 여기는 건 무엇인가요? 1.3 이미지 사용 1.4 인지 부하 2. 그리드 뷰(Grid view..

UI 디자인 가이드 : 쉬운 컬러 팔레트 만들기 8단계 쉬운 컬러 팔레트 만들기 8단계 서비스를 만들면서 메인 컬러만 정해 놓은 상태에서 컬러 팔레트를 만들기 위해 고민해본 적이 있으신가요? 쉽고 간단하게 컬러 팔레트를 만들 수 있는 예시를 보여드릴게요. 게다가 제법 수리적인 방법이랍니다. :) Create a Color Scheme Around Any Color in 8 Easy Steps Step1. 색상 모델은 HSL로 설정합니다. 일반적으로 컬러 피커는 #DB17DF와 같은 16진수 값으로 설정되어있습니다. 쉬운 진행을 위해 이 모드를 HSL로 변경합니다. HSL은 Hue, Saturation, Lightness를 의미합니다. 컬러피커 셋팅하기 Step 2. 메인 컬러를 선택합니다. 우선 #DB17DF로 예를 들어 설정할게요. 메인 컬러 선택 Step..

모달윈도우(팝업)를 디자인할 때 생각할 9가지 원칙 더욱 뛰어난 모달윈도우를 디자인할 수 있는 9가지의 간단한 원칙 본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반의 번역문으로, UX를 다루는 블로그 UX플래닛의 글을 번역했습니다. 필자 Nick Babich는 현업 소프트웨어 개발자인 동시에 블로그 ‘UX플래닛’을 운영하며 UX에 대한 인사이트들을 사람들에게 전하고 있습니다. 본문은 우리나라에서 ‘팝업’ 이라 불리는 모달윈도우(Modal indow)를 살피며 그것의 정의와 역할, 그리고 디자인 방법론을 해설합니다. 모달윈도우란 메인 화면의 위에 팝업처럼 떠 있는 창을 말합니다. 영어에서 모달(modal)은 명사인 모드(mode)의 형용사인데, 이 기능을 사용하면 메인 화면이 뒤쪽에 보이기만 하고 사용할 수는 없는 ‘모드’를 만들기 때문입니다...

이전 1 2 다음

LIST

티스토리툴바