UIUX디자인사례 (15) 썸네일형 리스트형 버튼에 시각적 무게를 두면 행위를 유도할 수 있다 출처 : https://brunch.co.kr/@ebprux/1001 버튼에 시각적 무게를 두면 행위를 유도할 수 있다 UX 디자인 원칙 | 버튼에 시각적인 무게를 두면사용자의 다음 행위를 적극적 유도할 수 있습니다 시각적 무게감은 유저가 정보의 우선순위를 한눈에 알아볼 수 있는 방법 중의 하나입니다. 특히 brunch.co.kr 버튼에 시각적인 무게를 두면 사용자의 다음 행위를 적극적 유도할 수 있습니다 시각적 무게감은 유저가 정보의 우선순위를 한눈에 알아볼 수 있는 방법 중의 하나입니다. 특히 버튼에 시각적 무게감을 두는 것은 사용자의 시선을 끌어모으는 데 유용합니다. 그래서 주요 액션 버튼에 시각적 무게감을 둬야 합니다. 반면에, 주요 액션 버튼이 아닌 부차적인 버튼이라면, 시각적 무게감은 덜 줘야.. 가능한 화면 요소를 덜어내고 덜어내자 출처: https://brunch.co.kr/@ebprux/987 가능한 화면 요소를 덜어내고 덜어내자 UX 디자인 원칙 | 가능한 화면 요소를 덜어내고 덜어내고 덜어내자 전통적인 웹 디자인에서는 화면 영역을 명확히 구별하기 위해 테두리를 두는 등 시각적 구분을 명확히 했습니다. 이는 게슈탈 brunch.co.kr 전통적인 웹 디자인에서는 화면 영역을 명확히 구별하기 위해 테두리를 두는 등 시각적 구분을 명확히 했습니다. 이는 게슈탈트 법칙 중 폐쇄성의 법칙과 연관성이 있습니다. 하지만 디자인 트렌드가 많이 바뀌었습니다. 플랫 디자인과 미니멀리즘이 디자인 트렌드가 된 지 어느 정도 시간이 많이 흘렀습니다. 이에 맞춰 웹에 있는 박스나 구분 선을 제거하는 등 화면 구성 요소를 더 간결하게 보여주고 있습니다.. 좋은 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(체크박스).. 모달윈도우(팝업)를 디자인할 때 생각할 9가지 원칙 더욱 뛰어난 모달윈도우를 디자인할 수 있는 9가지의 간단한 원칙 본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반의 번역문으로, UX를 다루는 블로그 UX플래닛의 글을 번역했습니다. 필자 Nick Babich는 현업 소프트웨어 개발자인 동시에 블로그 ‘UX플래닛’을 운영하며 UX에 대한 인사이트들을 사람들에게 전하고 있습니다. 본문은 우리나라에서 ‘팝업’ 이라 불리는 모달윈도우(Modal indow)를 살피며 그것의 정의와 역할, 그리고 디자인 방법론을 해설합니다. 모달윈도우란 메인 화면의 위에 팝업처럼 떠 있는 창을 말합니다. 영어에서 모달(modal)은 명사인 모드(mode)의 형용사인데, 이 기능을 사용하면 메인 화면이 뒤쪽에 보이기만 하고 사용할 수는 없는 ‘모드’를 만들기 때문입니다... UX 디자인 속 심리학 법칙 2편: 사용자 행동 이해하기 보통 서비스나 앱·웹사이트를 기획하고 디자인할 때, 사용자 경험을 개선할 수 있는 UX를 고민합니다. 그렇다면 사용자 경험을 향상시키는 UX란 정확히 무엇일까요? 우리가 고려해야 할 사용자는 사람입니다. 같은 부탁을 하더라도 심리학을 활용하면 상대방의 부담을 낮출 수 있는 것처럼 UX를 설계할 때도 사용자의 심리를 이해하고 디자인하면 사용자에게 더욱 편안하고 기분 좋은 경험을 제공할 수 있습니다. 사용자가 온라인에서 경험하는 다양한 감정은 결국 리텐션에 영향을 미칩니다. 방문할 때마다 기분이 좋아지는 장소에 자주 가고 싶은 것처럼 좋은 경험을 제공하는 앱이나 웹사이트라면 사용자의 발걸음이 끊이지 않겠죠. 그래서 이번 아티클에서는 UX를 디자인할 때 활용하기 좋은 네 가지 심리학 법칙을 소개합니다. 이 아.. UX 디자인 속 심리학 법칙 1편: 사용자 배려하기 UX는 디자인 영역이라서 정답이 없지 않나요? UX 디자이너로 일하는 저는 종종 이런 질문을 받습니다. 그 질문에 제가 대답할 수 있는 것은 "네, 맞아요."입니다. 사용자 경험이라는 게 말이 쉽지, 사실 눈에 보이지 않는 것을 디자인하는 일이라서 가끔은 막막하기도 합니다. 혹시 그런 경험 없으신가요? 새로운 앱을 깔았는데 나도 모르게 쉽게 사용하고 있다거나, 앱에서 말을 거는 듯한 메시지 때문에 나도 모르게 회원가입을 했던 경험이요. 저는 여기에서 힌트를 얻어 UX 디자인에 심리학 법칙을 적용해 봤습니다. UX를 잘하려면 문화, 사회학, 철학, 인문학, 기술, 시대상 등을 알아야 한다고들 하지만, 인간이라면 누구나 느끼는 감정과 경험 역시 중요한 포인트거든요. 그래서 이번 아티클에서는 UX를 디자인할 .. #4 웹디자인 그리드 시스템의 모든 것?! - 웹디자인 입문 강좌 | 디자인베이스 오늘은 웹디자인 입문 강좌 네 번째 시간입니다. 웹 디자인의 가장 기초가 될 수 있는 그리드 시스템! 한 번 자세히 파헤쳐봅시다. 짧은 시간 안에 많은 내용을 담아서 어려울 수 있지만, 이해가 갈 때까지 반복해서 학습해보세요. 그리드 시스템에 핵심인 컨테이너(전체폭), 거터(단과 단 사이 간격), 컬럼 수, 마진에 대해 배우고 그리드 시스템의 허와 실을 저와 함께 알아봅시다. 초급자분들이 실수하는 부분들도 다루고, 실제 코드로 예제를 통해 이해도를 높여봅시다. 혹시 스케치강좌 4번째 그리드 시스템에 대한 영상을 안 보고 온 분들은 꼭 하단 영상을 먼저 시청하고 와주세요 : ) 스케치 그리드 강좌 : https://www.youtube.com/watch?v=Q_gcA… 그리드 계산해주는 사이트 : http.. 이전 1 2 다음
