UX·UI36 Daily UI 014 / Countdown Timer 타이머 14번째 과제: Countdown Timer 타이머 UI 안 그래도 최근에 낼나샵에서 구매한 뽀모도로 타이머를 열심히 사용 중이었는데, 반가운 과제였다. 타이머의 본질은 남은 시간을 보여주는 것이다. 단순 명료할수록 본질에 더 집중할 수 있다. 뽀모도로 타이머의 좋은 점은 숫자가 아닌 눈에 보이는 면적으로 시간을 파악할 수 있다는 것이다. 또한 1분당 면적은 항상 동일하다. 대신 60분을 초과하는 시간은 잴 수 없지만, 애초에 성인 권장 연속집중 시간이 60분이기 때문에 괜찮다. (출처; https://www.newstnt.com/news/articleView.html?idxno=69648#:~:text=%EB%8C%80%EB%87%8C%20%EC%83%9D%EB%A6%AC%ED%95%99%EC%9E%9.. 2024. 2. 1. Daily UI 013 / Direct Message 디엠 13번째 과제: Direct Message 디엠 UI 아이폰 메세지, 카카오톡, 인스타그램 DM, 왓츠앱 메세지, 텔레그램, 슬랙을 레퍼런스 분석하였다. 왓츠앱과 텔레그램은 완전이 애플의 HIG를 그대로 따른 디자인이었다. 거의 아이폰 기본앱같이 느껴진다. 슬랙은 여타 앱과 달랐다. 확실히 사내 조직을 위한 서비스여서 그에 맞는 Form follows function이었다. - 메세지 보낸 시각을 기본적으로 보이게 하였다. 분단위로 메세지를 나누면 적당한 선에서 한번씩 호흡을 끊어주는 기능도 있기 때문이다. (아이폰, 디엠의 경우 대화들을 왼쪽으로 밀어야 시각이 표시된다.) - 예전 대화 기록을 보기 위해 위로 스크롤했을 때, 한번에 Go to the Bottom되는 FAB을 넣었다. - 해당 FAB는 .. 2024. 1. 31. Daily UI 012 / E-commerce Shop 이커머스 쇼핑몰 12번째 과제: E-commerce Shop 이커머스 쇼핑몰 UI 주제는 '신발을 주력으로 스포츠 의류를 판매하는 브랜드'의 '상세 페이지'로 설정하였다. 컨셉은 이미지 중심적이고, 신발을 다각도로 돌려보며 3D로써 파악할 수 있는 상호작용을 넣는 것이다. 이커머스 쇼핑몰은 정보량도 많고, 만들어야하는 페이지도 많다. 처음에는 호기롭게 온라인 의류편집샵을 주제로 잡고 레퍼런스로 29cm, 무신사, w concept를 분석하려고 했는데, 분석만 해도 하루 안에 해낼 수 없는 양이라는 것을 깨달았다. 이는 하루에 한개씩 UI를 쳐내야하는 DailyUI로는 어울리지 않았다. 그래서 스포츠 신발 브랜드로 시장을 구체화했고, 그에 맞게 Nike, Adidas, New Balance 웹사이트를 분석하였다. 이커머스.. 2024. 1. 31. UI 상태 용어 정리 Button / Input Field - Active(Enabled) : 사용자가 상호작용할 수 있는 상태. 버튼이나 링크 등이 클릭 가능할 때 이 상태를 나타낸다. - Inactive(Disabled) : 사용자가 상호작용할 수 없는 상태. 일반적으로 버튼이나 폼 필드가 사용할 수 없거나, 특정 조건을 만족시키지 않았을 때 이 상태가 된다. - Hover : 사용자가 마우스 포인터를 특정 UI 요소 위에 올려놓은 상태. 이 상태는 보통 시각적 피드백(색상 변경, 하이라이트 등)을 통해 나타낸다. - Focused : 키보드 또는 다른 입력 방식으로 특정 요소가 선택된 상태. 주로 폼 필드, 버튼 등에서 사용자가 현재 작업 중인 요소를 나타낸다. 입력중인 상황을 강조한다. - Pressed: 마우스 포인.. 2024. 1. 30. Daily UI 011 / Flash Message 플래쉬 메세지 11번째 과제: Flash Message 플래쉬 메세지 UI Flash Message란? 사용자가 웹사이트나 앱에서 특정 작업을 수행했을 때 잠깐 동안 나타나는 짧은 메시지. 이 메시지는 사용자에게 작업의 성공, 실패, 경고, 정보 등을 알려주는 역할을 한다. 예를 들어, 사용자가 폼을 제출하거나 설정을 변경했을 때, 플래시 메시지는 "저장되었습니다", "업데이트 성공", "잘못된 입력입니다"와 같은 짧은 피드백을 제공한다. 이러한 메시지는 일반적으로 화면의 상단이나 중앙에 잠깐 나타났다가 자동으로 사라지거나, 사용자가 직접 닫을 수 있는 방식으로 디자인된다. 플래시 메시지의 목적은 사용자에게 즉각적이고 명확한 피드백을 제공하여 사용자 경험을 개선하는 것이다. - 사실 Flash Message가 무엇인지.. 2024. 1. 29. Daily UI 010 / Social Sharing 소셜 공유 10번째 과제: Social Sharing 소셜 공유 UI - 네이버 블로그에 공유하기 외에도 url 복사하기 버튼이 따로 있는 점이 좋아서 벤치마킹했다. - url 복사 완료 토스트가 떠야 한다. - 아이콘 그리는 것 재미있다. 그런데 막상 실무에서는 일이 너무 많아서 아이콘 하나하나 그릴 시간이 없어서 에셋 쓴다고 한다 흑흑 - 지금 미리 나만의 에셋 만들어둔다는 생각으로 열심히 그려야지...! 2024. 1. 29. Daily UI 009 / Music Player 음악 재생 9번째 과제: Music Player 음악 재생 UI 여태까지의 디자인 프로세스는 다음과 같았다. 1. 서비스 컨셉, 기능 등을 간단히 구상한다. 2. 이에 맞게 와이어 프레임을 짠다. 3. 레퍼런스를 찾아보면서 수정한다. 그런데 과정 3을 하다 보면 결국 과정 2도 다시 반복하게 된다는 것을 깨달았다. 그래서 아예 처음부터 레퍼런스를 찾고 간단한 분석을 한 뒤, 디자인을 해야겠다고 생각했다. 클론 디자인의 한계를 못 벗어날 수도 있겠지만, 직접 해보고 판단해 보겠다! - 유튜브 뮤직, 사운드클라우드를 클론 디자인하고 작은 변주를 주었다. - 나는 음악 앱에서 가장 중요한 것은 "앨범 아트를 어떻게 보여줄 것인가"라고 생각한다. 인간은 오감을 가지고 대상을 파악하는데, 그중에서도 시각에 의한 지각이 가장.. 2024. 1. 29. Daily UI 008 / 404 Page 404 페이지 8번째 과제: 404 페이지 디자인 404란? HTTP에서 파일을 찾지 못했을 때 나오는 오류 코드다. 서버는 찾았으나 해당 서버 내에서 파일을 찾지 못했을 때 리턴되는 코드값이다. UX적인 관점에서 이탈율을 줄이기 위해서는 404 페이지에 Home 화면으로 가는 버튼 or 다른 흥미로운 콘텐츠 추천 or 검색 기능 or 간단한 게임 / 인터랙션 / 마음을 누그러뜨릴 수 있는 귀여운 이미지 등을 사용하는 것이 좋다. 대부분의 웹사이트 주소 뒤에 /404 를 붙 이면 404 페이지를 볼 수 있다. (예시: https://dribbble.com/404) 주제 IT서비스 웹사이트의 404페이지 내용 404 페이지를 찾을 수 없습니다. 입력한 페이지의 주소가 정확한지 다시 한번 확인해주세요. - IT 느낌을 살.. 2024. 1. 26. Daily UI 007 / Settings 환경설정 7번째 과제: Settings 환경설정 디자인 주제 앱 환경설정 계정 프로필 이미지, 이름 > 일반 언어 > 다크 모드 (스위치) 알림 앱 푸쉬 (스위치) 이메일 (스위치) SMS (스위치) 운영 공지사항 > 고객센터 > 운영정책 > 캐시관리 > 앱 버전 > - 총 10개의 아이콘을 30px*30px 프레임에 직접 그렸다. 어려웠던 점은 운영정책, 캐시관리, 앱 버전 등의 딱 떠오르는 이미지가 없는 아이콘은 그리기가 어려웠다는 것이다. - 연한 스트로크를 이용하여 라이트한 디자인을 하려고 했는데, 그러면 아이콘은 다 빼고 그냥 텍스트만 넣는 게 가장 깔끔했다. 하지만 너무 딱딱하고 직관성이 낮은 것 같았다.(오직 텍스트로만 정보를 접하니까) - 그런데 면으로 된 아이콘에 색까지 있으니 너무 알록달록해서 .. 2024. 1. 25. 저니 맵(Journey Map)과 유저 플로우(User Flow) 차이점 이 글은 Nielsen Norman Group의 아티클을 기반한 디스커션임을 알립니다. https://www.nngroup.com/articles/user-journeys-vs-user-flows/ User Journeys vs. User Flows User journeys and user flows both describe processes users go through in order to accomplish their goals. While both tools are useful for planning and evaluating experience, they differ in scope, purpose, and format. www.nngroup.com 영어 되시는 분들 & 구글 번역 플러그인 깔아.. 2024. 1. 24. 이전 1 2 3 4 다음
