본문 바로가기

디자인로그/UI.UX

(65)

버튼에 시각적 무게를 두면 행위를 유도할 수 있다 출처 : https://brunch.co.kr/@ebprux/1001 버튼에 시각적 무게를 두면 행위를 유도할 수 있다 UX 디자인 원칙 | 버튼에 시각적인 무게를 두면사용자의 다음 행위를 적극적 유도할 수 있습니다 시각적 무게감은 유저가 정보의 우선순위를 한눈에 알아볼 수 있는 방법 중의 하나입니다. 특히 brunch.co.kr 버튼에 시각적인 무게를 두면 사용자의 다음 행위를 적극적 유도할 수 있습니다 시각적 무게감은 유저가 정보의 우선순위를 한눈에 알아볼 수 있는 방법 중의 하나입니다. 특히 버튼에 시각적 무게감을 두는 것은 사용자의 시선을 끌어모으는 데 유용합니다. 그래서 주요 액션 버튼에 시각적 무게감을 둬야 합니다. 반면에, 주요 액션 버튼이 아닌 부차적인 버튼이라면, 시각적 무게감은 덜 줘야..

가능한 화면 요소를 덜어내고 덜어내자 출처: https://brunch.co.kr/@ebprux/987 가능한 화면 요소를 덜어내고 덜어내자 UX 디자인 원칙 | 가능한 화면 요소를 덜어내고 덜어내고 덜어내자 전통적인 웹 디자인에서는 화면 영역을 명확히 구별하기 위해 테두리를 두는 등 시각적 구분을 명확히 했습니다. 이는 게슈탈 brunch.co.kr 전통적인 웹 디자인에서는 화면 영역을 명확히 구별하기 위해 테두리를 두는 등 시각적 구분을 명확히 했습니다. 이는 게슈탈트 법칙 중 폐쇄성의 법칙과 연관성이 있습니다. 하지만 디자인 트렌드가 많이 바뀌었습니다. 플랫 디자인과 미니멀리즘이 디자인 트렌드가 된 지 어느 정도 시간이 많이 흘렀습니다. 이에 맞춰 웹에 있는 박스나 구분 선을 제거하는 등 화면 구성 요소를 더 간결하게 보여주고 있습니다..

디스플레이 단위(PX, DP, SP, PT) 알아보기 출처: https://brunch.co.kr/@zalhanilll/407 디스플레이 단위(PX, DP, SP, PT) 알아보기 UI 디자인 시작하기 | PX(Pixel) 웹에서 주로 쓰이는 단위. 화면을 구성하는 가장 기본이 되는 단위이다. 해상도를 나타낼 때 쓰인다. (Picture Element에서 유래됐다고 한다) DP(Density Independent Pixel) 안드 brunch.co.kr PX(Pixel) 웹에서 주로 쓰이는 단위. 화면을 구성하는 가장 기본이 되는 단위이다. 해상도를 나타낼 때 쓰인다. (Picture Element에서 유래됐다고 한다) DP(Density Independent Pixel) 안드로이드에서 주로 쓰이는 단위. DP는 디스플레이의 좌표라고 생각하면 된다. "픽셀..

가변, 고정 영역에 대한 이해 출처: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..

너도 나도 UX를 한다지만, 하는 일은 다르다구요 게임 회사 넥슨에서 유저 경험을 분석하고 있는 UX리서처의 일, 문화, 그리고 생각에 대한 생생한 이야기를 전해드릴게요! 이런 분이 읽으시면 좋습니다! 고객의 경험을 기반으로 진행되는 UX 업무에 관심이 있는 분 UX직무들이 각각 어떤 일을 하고, 차이가 무엇인지 알고 싶으신 분 UX, User Experience, 사용자 경험이라는 개념은 이제 많은 사람들에게 있어 그렇게 낯선 개념은 아닙니다. 특히 IT업계에 계신 분들에게는 많이 친숙해진 개념이죠. 하지만 개념으로써의 UX가 아닌 하나의 업무로써 UX가 어떤 일을 하는 것인지에 대해서는 아직 낯선 부분이 많이 있습니다. UX라는 개념이 너무 광범위한 개념이기도 하고, UX라는 개념의 범위가 넓은 만큼 UX를 다루는 업무 또한 매우 다양하기 때문이죠...

좋은 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) 대화 이 대화의 문제는 서로 다르게 보고 있음에 의해 발생합니다. 눈이 예민한 사람이 보기에는 명백히 차이가 있는데, 둔감한 사람에게는 그 차이가 인지되지 못하기 때문입니다. 비단 디자이너와 개발자 사이의 문제는 아닌 것 같습니다. 디자이너끼리도 눈의 레벨이 다르고, 현재의 나와 과거의 나의 눈도 다릅니다. 자신의 예전 작업물을 다시 봤을 때 미묘하게 틀어져 보이는 것들을 볼 수 있게 되면 예민함을 캐치하는 눈이 발달하고 있다는 증거입니다. 어쨌든 디테일에도 높은 레벨의 것과 낮은 레벨의 것이 있습니다. 분노는 기본적인..

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 디자인 가이드 : Search & browsing 출처 : https://brunch.co.kr/@august9/287 검색 결과를 위한 사이트와 컨텐츠 사이트를 디자인할 때 사용자가 '어떤 모드'의 행동을 하려고 하는지를 염두에 두어야 합니다. 사용자는 '검색 모드'을 하려고 하나요? 아니면 '탐색 모드' 작업을 하려고하나요? 이는 사용자 여정(Customer Journey Map) 을 가장 잘 지원하도록 플랫폼을 설계하는 방법을 결정하는 데 도움이 됩니다. 페이지 요약 검색 모드(Search)와 브라우징 모드(Browsing)의 차이 탐색/브라우징이란? 검색이란? 각 모드는 UI에 어떤 영향을 줄까요? 탐색 및 검색 모드가 함께 작동하는 경우? 마무리 참고 1. 검색 모드와 브라우징 모드의 차이 사용자가 검색 창에 무언가를 입력할 때에는 아마도 다음..

UI 디자인 가이드 : Select Controls 출처 : https://brunch.co.kr/@august9/280 디지털화면에서 사용하는 선택 컨트롤들은 우리가 실제 생활에서 많이 사용하는 스위치에서 기원합니다. 먼저 "토글"이라는 단어는 활성화될 때마다 두 상태를 번갈아 가며 사용하는 짧은 손잡이가 있는 스위치를 나타내는데, 조명을 "스위치"할 때에 사용되고 있죠. "라디오 버튼"의 경우 일반적으로 다이얼 아래에 스테이션 셋팅을 기계적으로 저장할 수 있는 버튼 세트가 있어 사용자가 스테이션간 전환을 더 빠르게 할 수 있는 일련의 버튼이 있는 자동차 라디오에서 나온 단어입니다. 이 버튼 중 하나를 누르면 다른 버튼을 누를 때까지 계속 눌린 상태를 지속하게 됩니다. 이 컨트롤들은 디지털에서도 비슷한 맥락으로 사용됩니다. Checkboxes(체크박스)..

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

이전 1 2 3 4 ··· 6 다음

LIST

티스토리툴바