디자인로그/UI.UX (65) 썸네일형 리스트형 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)의 형용사인데, 이 기능을 사용하면 메인 화면이 뒤쪽에 보이기만 하고 사용할 수는 없는 ‘모드’를 만들기 때문입니다... UX 디자인 속 심리학 법칙 2편: 사용자 행동 이해하기 보통 서비스나 앱·웹사이트를 기획하고 디자인할 때, 사용자 경험을 개선할 수 있는 UX를 고민합니다. 그렇다면 사용자 경험을 향상시키는 UX란 정확히 무엇일까요? 우리가 고려해야 할 사용자는 사람입니다. 같은 부탁을 하더라도 심리학을 활용하면 상대방의 부담을 낮출 수 있는 것처럼 UX를 설계할 때도 사용자의 심리를 이해하고 디자인하면 사용자에게 더욱 편안하고 기분 좋은 경험을 제공할 수 있습니다. 사용자가 온라인에서 경험하는 다양한 감정은 결국 리텐션에 영향을 미칩니다. 방문할 때마다 기분이 좋아지는 장소에 자주 가고 싶은 것처럼 좋은 경험을 제공하는 앱이나 웹사이트라면 사용자의 발걸음이 끊이지 않겠죠. 그래서 이번 아티클에서는 UX를 디자인할 때 활용하기 좋은 네 가지 심리학 법칙을 소개합니다. 이 아.. UX 디자인 속 심리학 법칙 1편: 사용자 배려하기 UX는 디자인 영역이라서 정답이 없지 않나요? UX 디자이너로 일하는 저는 종종 이런 질문을 받습니다. 그 질문에 제가 대답할 수 있는 것은 "네, 맞아요."입니다. 사용자 경험이라는 게 말이 쉽지, 사실 눈에 보이지 않는 것을 디자인하는 일이라서 가끔은 막막하기도 합니다. 혹시 그런 경험 없으신가요? 새로운 앱을 깔았는데 나도 모르게 쉽게 사용하고 있다거나, 앱에서 말을 거는 듯한 메시지 때문에 나도 모르게 회원가입을 했던 경험이요. 저는 여기에서 힌트를 얻어 UX 디자인에 심리학 법칙을 적용해 봤습니다. UX를 잘하려면 문화, 사회학, 철학, 인문학, 기술, 시대상 등을 알아야 한다고들 하지만, 인간이라면 누구나 느끼는 감정과 경험 역시 중요한 포인트거든요. 그래서 이번 아티클에서는 UX를 디자인할 .. #1 게임 UI 제작에 프로토타이핑 툴 활용해보기 출처: https://brunch.co.kr/@niboos/3 #1 게임 UI 제작에 프로토타이핑 툴 활용해보기 게임 UI 개발 프로세스에 대하여.. | 최근에 많은 프로토타이핑 툴이 나왔고, 이를 실무에 활용하는 UI 디자이너들이 많아지고 있습니다. 하지만 게임 업계에선 UX실이 따로 있는 곳을 제외하면 이 brunch.co.kr 최근에 많은 프로토타이핑 툴이 나왔고, 이를 실무에 활용하는 UI 디자이너들이 많아지고 있습니다. 하지만 게임 업계에선 UX실이 따로 있는 곳을 제외하면 이에 대한 관심이 낮은 편입니다. 제가 생각하는 대표적인 이유는 아래와 같습니다. - 현재 프로토타이핑 툴은 모바일 앱 ui제작 위주로 나와있음 - 개발 프로세스와 협업 방식의 차이 - 개발 스펙에 비해 타이트한 일정 때문에.. #2 게임 UI 제작에 프로토타이핑 툴 활용해보기 출처: https://brunch.co.kr/@niboos/4 #2 게임 UI 제작에 프로토타이핑 툴 활용해보기 왜? 어떻게? | #1 게임 UI 개발 프로세스에 대해 : https://brunch.co.kr/@niboos/3 앞 글에서 간단히 언급하였듯이 협업 커뮤니케이션 과정 속에서 UI 프로토타이핑에 대한 니즈를 많이 느꼈습니다. 옳고 그 brunch.co.kr 앞 글에서 간단히 언급하였듯이 협업 커뮤니케이션 과정 속에서 UI 프로토타이핑에 대한 니즈를 많이 느꼈습니다. 옳고 그름을 떠나 의견만 들어보면 다 일리가 있고 맞는 말이었기 때문입니다. 단지, 초점과 방향이 다를 뿐이었습니다. 때문에 토론은 종종 결론 없이 빙글빙글 돌 때가 많았습니다. 또 효율적인 답을 찾았을 때 보단 한쪽에서 양보를 함.. ProtoPie 시작하기, 정말 쉬울까 ProtoPie가 헤일리님의 채널에 소개되었습니다. 현재 UX 디자이너로 활동 중인 헤일리님은 브런치 채널에서 UX 디자인에 대한 다양한 이론과 경험을 공유하고 있습니다. 헤일리님은 기존에 ProtoPie를 한 번도 접해본 적 없는 이용자로서 ProtoPie 첫 사용 후기를 작성해 주셨는데요. 아래는 헤일리님의 글을 발췌하여 정리한 것입니다. ProtoPie를 시작하기에 앞서 UX/UI 디자이너라면 한 번쯤 들어봤을 ProtoPie는 가장 빠르고 손쉽게 코딩 없이 프로토타입을 만들어주는 툴입니다. 특별하게도 ProtoPie는 어도비 XD, 피그마, 스케치 등 대부분의 툴과 달리 한국인이 만든 툴이죠. 해외에서 쉬운 프로토타입으로 입소문이 나고 있으며 많은 모바일 기반 디자인 회사에서 사용하고 있습니다. .. 황금비율을 이용해 디자인하기 슬로워크 블로그 황금비율은 자연이 우리에게 선사해 준 가장 아름다운 비율입니다. 조개의 껍질, 꽃잎 등 자연에서 뿐만아니라 모나리자, 피라미드 등 역사적인 건축물이나 예술작품에서도 황금비율을 찾아볼 수 있는데요, 이러한 황금비율을 우리가 하는 디자인에 어떻게 적용할 수 있을까요? 디자인에서 황금비율을 이용할 수 있는 팁을 소개합니다. 두 변의 길이가 황금 비율인 1:1.61을 사각형에 적용한 것이 아래의 황금사각형입니다. A4용지, 신용카드나 신분증(8.5cm, 세로 5.4cm, = 1.574) 등 주위에서 흔히 이 황금사각형을 발견할 수 있는데요, 우리의 눈엔 단순히 직사각형으로 인식되었던 이러한 것들이 인간이 보기에 가장 편안하고 안정적인 형태입니다. (2016.01.14 수정) 황금비율을 가장 간단.. 다크모드의 UI 컬러 출처: https://brunch.co.kr/@slowmslife/32 다크모드는 사용자를 위해 있어야해요 다크모드를 지원해야 하는 이유는 사용자에게 좋은 경험을 제공하기 위해서예요. 다크모드 OS UI 사용 유저가 앱에 진입했을 때 라이트 모드 화면을 보게 되면 당황스러울 거예요. 이렇게 사용자가 느낄 수 있는 이질감을 없애기 위해 다크모드를 제공해야 해 합니다. 라이트모드 화면은 방출되는 빛의 양이 많아 시각적 피로를 유발해요. 그리고 라이트모드 화면을 출력할 때, 눈 건강에 좋지 않은 블루라이트가 더욱 나와요. 그래서 사용자 눈의 편안함을 위해 다크모드를 지원해야 합니다. 다크모드는 색상으로 높이차를 나타내요. 위로 갈수록 점점 밝아진답니다 배경은 가장 밑에 있는 base BG와 그 위의 eleva.. #4 웹디자인 그리드 시스템의 모든 것?! - 웹디자인 입문 강좌 | 디자인베이스 오늘은 웹디자인 입문 강좌 네 번째 시간입니다. 웹 디자인의 가장 기초가 될 수 있는 그리드 시스템! 한 번 자세히 파헤쳐봅시다. 짧은 시간 안에 많은 내용을 담아서 어려울 수 있지만, 이해가 갈 때까지 반복해서 학습해보세요. 그리드 시스템에 핵심인 컨테이너(전체폭), 거터(단과 단 사이 간격), 컬럼 수, 마진에 대해 배우고 그리드 시스템의 허와 실을 저와 함께 알아봅시다. 초급자분들이 실수하는 부분들도 다루고, 실제 코드로 예제를 통해 이해도를 높여봅시다. 혹시 스케치강좌 4번째 그리드 시스템에 대한 영상을 안 보고 온 분들은 꼭 하단 영상을 먼저 시청하고 와주세요 : ) 스케치 그리드 강좌 : https://www.youtube.com/watch?v=Q_gcA… 그리드 계산해주는 사이트 : http.. 이전 1 2 3 4 5 6 다음
