UIUX디자인가이드 (12) 썸네일형 리스트형 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.. CTA(목표 달성 버튼) 디자인을 위한 체크리스트 10 안녕하세요 뷰저블입니다. CTA에 대해 들어보셨나요? CTA는 웹 사이트 내 목표를 달성하기 위해 고객에게 '행동'을 유도하는 버튼이나 배너를 가리킵니다. 영어 Call To Action을 줄여 CTA라고 표기하며 보통 '행동 유도 버튼' 또는 '목표 달성 버튼'이라고 해석되기도 합니다. 회원가입이나 구매하기, 다운로드, 문의하기 등 다양한 사이트 별 목적에 따라 버튼의 형태와 종류가 달라지게 됩니다. 뷰저블과 포그리트 홈페이지 메인의 CTA 버튼 위 이미지는 뷰저블과 포그리트 홈페이지 메인에 위치한 CTA입니다. 뷰저블에는 CTA가 상하단에 공통으로 2가지 들어가 있고 포그리트 홈페이지는 서비스마다 1개씩 CTA가 존재하여 총 3개가 있습니다. 오늘은 이 CTA를 어떻게 효과적으로 디자인할 수 있는지 .. 8px 그리드의 시대가 끝나고, 4px 그리드의 시대가 열릴까? UI에서는 4의 배수를 사용하면 훨씬 더 유연하게 작업할 수 있습니다. 본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반 번역문입니다. 기획과 UX 디자인을 중점적으로 다루는 블로그 매체 ‘부트캠프(Bootcamp)’의 글을 번역했습니다. 작가 드리스 데 셰퍼(Dries De Schepper)는 글로벌 컨설팅 그룹인 딜로이트 디지털(Deloitte Digital)의 UI 디자이너입니다. 본문은 UI 디자인 측면에서의 그리드를 분석한 내용으로 8포인트와 4포인트 사이에 어떤 차이점이 있을지 함께 생각해볼 수 있겠습니다. 기술이 점점 더 발전하면서 그래픽 디자이너들의 상당수가 UX/UI 디자인으로 전문 분야를 바꾸는 경우가 많아졌습니다. 저는 아트 디렉션(Art Direction)을 전공했기 때문.. UI 디자인의 변천사, 그리고 뉴모피즘 1. 스큐어모피즘 아이폰 3G를 사용할 때, 현실과 비슷한 느낌으로 앱들이 디자인 되어 있었어요. 이를 스큐어모피즘이라고 하죠? 쉽게 말해, 현실 세계의 메타포를 그대로 모바일 안으로 옮겨 놓은 디자인이에요. 아이폰의 기본 기능인 ibooks는 집에서 보던 책장을 그대로 옮겨 놓은 듯한 디자인이었죠? 하지만 스큐어모피즘 디자인에는 한계가 있었는데, 그중 가장 대표적인 것이 디자이너들의 피땀눈물이 들어간다는 것과 개발자들의 용량 문제였어요. 아무래도 현실의 메타포를 거의 그대로 디자인하다 보니까 꽤 오랜 시간이 걸렸고, 그 용량도 상당했죠. 제작된 앱들도 무척 무거워서 초창기에 앱을 다운로드 하면 꽤 많은 용량을 차지하곤 했습니다. 그런 단점을 보완하고자 나온 디자인이 플랫디자인입니다. 2. 플랫디자인 이.. 모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 출처: https://brunch.co.kr/@chulhochoiucj0/10 26. 라디오 버튼은 소팅 기능에 사용할 수 없습니다. 라디오 버튼은 선택과 관련된 기능에서만 사용되어야 zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 출처: https://brunch.co.kr/@chulhochoiucj0/12 34. 내비게이션 요소와 UI 요소가 콘텐츠보다 더 부각되지 않아야 합니다. 내비게이션 요소와 컨트롤은 사용자가 콘텐츠를 탐색하고 상호작용할 수 있게 해주는 수단일 뿐입니다. 이 두 요.. 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 출처: https://brunch.co.kr/@chulhochoiucj0/9 회원가입 또는 로그인 시 입력한 비밀번호를 가리거나 볼 수 있는 옵션을 제공하세요. 입력한 비밀번호는 기 zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 출처: https://brunch.co.kr/@chulhochoiucj0/10 26. 라디오 버튼은 소팅 기능에 사용할 수 없습니다. 라디오 버튼은 선택과 관련된 기능에서만 사용되어야 합니다. 라디오 버튼을 텝했을 경우 하나의 옵션만 선택 상태가 변경되고 그 외의 .. 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 [디자인로그/UI.UX] - 모바일 UI.UX 디자인시 고려해야 할 가이드라인 1 모바일 UI.UX 디자인시 고려해야 할 가이드라인 1 모바일 UI·UX 디자인시 고려해야 할 가이드라인 1 출처 : https://brunch.co.kr/@chulhochoiucj0/8 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 출처: https://brunch.co.kr/@chulhochoiucj0/9 회원가입 또는 로그인 시 입력한 비밀번호를 가리거나 볼 수 있는 옵션을 제공하세요. 입력한 비밀번호는 기본적으로 (......) 형태로 가려져 있어야 합니다. 모바일에서는 작은 키보.. 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 다음
