UIUX디자인입문 (9) 썸네일형 리스트형 가능한 화면 요소를 덜어내고 덜어내자 출처: 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의 지침을 따랐습니다. 탭을 활성화할 때, 콘텐츠 영역에 슬라이드 인터랙션 넣기 왼쪽의 콘텐츠가 페이드 인 및 페이드.. 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 디자인 가이드 : 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를 설계하는 경우 콘텐츠가 많을 때는 이 세 가지 패턴 중 하나를 선택하여 콘텐츠를 로드합니다. 어떤 방법 가장 좋을까요? 사용자는 무엇을 선호할까요? 대부분의 플랫폼은 무엇을 사용하고 있나요? 시작하기 전에 다른 두 가지 관련 가이드를 먼저 확인하는 것도 좋습니다. 하나는 검색 및 탐색 에 대한 것이고 다른 하나는 그리드 및 목록에 대한 것 입니다. 이것들은 세 가지 패턴 유형을 이해하는 데 중요하지 않지만 몇 가지 배경과 컨텍스트를 제공하고.. 모달윈도우(팝업)를 디자인할 때 생각할 9가지 원칙 더욱 뛰어난 모달윈도우를 디자인할 수 있는 9가지의 간단한 원칙 본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반의 번역문으로, UX를 다루는 블로그 UX플래닛의 글을 번역했습니다. 필자 Nick Babich는 현업 소프트웨어 개발자인 동시에 블로그 ‘UX플래닛’을 운영하며 UX에 대한 인사이트들을 사람들에게 전하고 있습니다. 본문은 우리나라에서 ‘팝업’ 이라 불리는 모달윈도우(Modal indow)를 살피며 그것의 정의와 역할, 그리고 디자인 방법론을 해설합니다. 모달윈도우란 메인 화면의 위에 팝업처럼 떠 있는 창을 말합니다. 영어에서 모달(modal)은 명사인 모드(mode)의 형용사인데, 이 기능을 사용하면 메인 화면이 뒤쪽에 보이기만 하고 사용할 수는 없는 ‘모드’를 만들기 때문입니다... 황금비율을 이용해 디자인하기 슬로워크 블로그 황금비율은 자연이 우리에게 선사해 준 가장 아름다운 비율입니다. 조개의 껍질, 꽃잎 등 자연에서 뿐만아니라 모나리자, 피라미드 등 역사적인 건축물이나 예술작품에서도 황금비율을 찾아볼 수 있는데요, 이러한 황금비율을 우리가 하는 디자인에 어떻게 적용할 수 있을까요? 디자인에서 황금비율을 이용할 수 있는 팁을 소개합니다. 두 변의 길이가 황금 비율인 1:1.61을 사각형에 적용한 것이 아래의 황금사각형입니다. A4용지, 신용카드나 신분증(8.5cm, 세로 5.4cm, = 1.574) 등 주위에서 흔히 이 황금사각형을 발견할 수 있는데요, 우리의 눈엔 단순히 직사각형으로 인식되었던 이러한 것들이 인간이 보기에 가장 편안하고 안정적인 형태입니다. (2016.01.14 수정) 황금비율을 가장 간단.. 8-Point 그리드 시스템 8-Point 그리드 시스템 출처 : https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632#.oh33ss65e Intro to The 8-Point Grid System Learn how it can take your design to the next level medium.com *왜 px단위가 아닌 pt단위인지는 https://brunch.co.kr/@blackindigo-red/18를 참고하세요 :) 픽셀 밀도(Pixel Density)에 대한 설명 픽셀 밀도란 무엇이며, 어떻게 작동하고, 이것이 디자인에 미치는 영향. | (출처 :[Pixel Density, Demystified – Peter Nowell –.. 이전 1 다음
