uxui28 Daily UI 028 / Contact Page 컨택트 페이지 28번째 과제: Contact Page 컨택트 페이지 UI 디자인 - 주제는 video edit software 서비스의 customer support page로 잡았다. - 검색 / 자주 찾는 도움말 / 직접 문의 순으로 구분하였다. - 네이버 고객센터 페이지를 거의 클론 디자인했고, 직접 문의 입력창을 추가하였다. - 네이버와 구글같은 SaaS 대기업은 하위 서비스가 매우 많기 때문에, 서비스별 고객센터 섹션이 있었다. - 네이버 고객센터의 자주 찾는 도움말에서 주제뿐만 아니라, 태그로도 분류하는 점이 좋았다. - 유형의 제품을 판매하는 삼성, 애플의 경우 제품군별로 문의를 분류하였다. - 솔직히 말해서 네이버나 구글이 직접적인 문의를 최대한 찾기 어렵게 숨겨놓은 느낌이 들었다. (사실 느낌만이 아니.. 2024. 3. 8. Daily UI 027 / Dropdown 드롭다운 27번째 과제: Dropdown 드롭다운 UI 드롭다운(Dropdown)이란? 드롭다운 UI는 사용자가 웹사이트나 애플리케이션에서 선택지 중 하나를 선택할 수 있게 해주는 인터페이스 요소이다. 이 요소는 공간을 효율적으로 사용하면서 사용자에게 다양한 옵션을 제공하고자 할 때 유용하다. 드롭다운 메뉴는 클릭 또는 탭으로 활성화되며, 사용자가 선택 가능한 항목 목록을 보여준다. - 드롭다운은 거의 모든 웹사이트에 쓰여서, 어느 레퍼런스를 참고할까 하다가 FAANG과 NAVER의 드롭다운 메뉴를 참고하였다. - 최종적으로는 Google의 Material Design의 가이드라인을 따랐다. 2024. 3. 6. Daily UI 026 / Subscribe 구독 26번째 과제: Subscribe 구독 UI 모달(Modal)과 팝업(Popup) 모달은 사용자의 주목을 특정 내용이나 작업에 집중시키기 위해 사용된다. 모달 창은 주로 백그라운드 콘텐츠 위에 중앙에 떠서 나타나며, 사용자가 모달 외부를 클릭하거나 특정 작업을 완료하기 전까지는 모달 이외의 다른 UI 요소와 상호작용할 수 없다. - 백그라운드 콘텐츠를 어둡게 처리하여 사용자의 주의를 모달 내용에 집중시킨다. - 폼 제출, 상세 정보 확인, 경고 메시지 표시 등 중요한 정보 전달이나 사용자 결정을 요구할 때 사용된다. - 사용자가 모달의 명시적인 닫기 옵션(예: 닫기 버튼, 취소 버튼)을 선택하기 전까지 모달을 닫을 수 없다. 팝업은 사용자에게 알림, 광고, 또는 추가 정보를 제공하기 위해 사용된다. 팝업.. 2024. 3. 6. Daily UI 025 / TV App 텔레비전 앱 25번째 과제: TV App 텔레비전 앱 UI - 스마트 TV에서 구동되는 OTT 앱으로 주제를 정했고 Netflix를 클론 디자인하였다. - TV는 리모콘이라는 제한적인 도구로 컨트롤해야한다는 점에서 GNB의 위치가 매우 고민되었다. 사용성을 고려하다보니 왜 YouTube, Netflix에서 좌측에 GNB를 위치시켰는지 알 것 같았다. 사용자가 콘텐츠를 탐색하는 방식에는 행(row) 단위로 정보를 처리하는 경향이 있다. 상단에 GNB를 배치할 경우, 사용자는 새로운 콘텐츠를 탐색하기 위해 여러 행을 거슬러 올라가야 한다. 반면 좌측에 GNB를 배치하면, 사용자는 현재 행 내에서만 탐색하면 되므로 접근성이 향상된다. 또한 스크롤을 내릴수록 지속적으로 새로운 컨텐츠가 제공되고, 각 추천 항목 내의 영화 수.. 2024. 3. 5. Daily UI 024 / Boarding Pass 탑승권 24번째 과제: Boarding Pass 탑승권 UI 10월에 유럽여행하면서 대한항공, Turkish Airlines, easyJet, Eurail, Omio 등의 다양한 항공사/철도사 어플을 이용했다. 그중 인상깊게 기억하고 있는 앱이 있는데, 바로 Austrian Airlines다. 사실 항공사 앱 느낌이 대체로 비슷하다. 파란색 좋아하고(파란 하늘을 연상시키기 때문인듯) 현대적이다. 그런데 Austrian Airlines은 붉은색이 브랜드 컬러고, 유일하게 세리프체를 사용했기 때문에 눈에 띄었다. 레거시있어보였다. (폰트가 매우 마음에 들어서 찾아보았는데, Portada라는 폰트를 베이스로 쓰고 있다. 출처: https://www.type-together.com/austrian-airlines) .. 2024. 2. 28. Daily UI 022 / Search 검색 22번째 과제: Search 검색 UI - 숙소 예약 서비스의 검색 UI를 주제로 잡았다. 그에 따라 Booking.com, Airbnb, Expedia, Agoda, Hotels.com의 uxui를 분석하였다. - 공통된 부분은 장소 선택 - 날짜 선택 - 인원 선택의 3가지 카테고리 순으로 진행된다는 것이다. - 장소 선택에서는 인기 여행지나 최근 검색 내역이 먼저 뜬다. 또한 에어비앤비의 경우 유연한 검색이라고, 즉 전세계 어디든 상관없다는 선택지가 있다. 근데 '유연한 검색'은 직관성이 떨어진다. 클릭해보기 전까지는 무슨 뜻인지 잘 모르겠었다. - 날짜 선택은 캘린더에서 정확한 날짜 클릭 / 유연한 일정(기간만 정해짐) 이렇게 두가지 옵션이 있었다. 전자의 경우 캘린더에서 정확한 날짜를 찍더라도 .. 2024. 2. 26. Daily UI 021 / Home Monitoring Dashboard 홈 모니터링 대쉬보드 21번째 과제: Home Monitoring Dashboard 홈 모니터링 대쉬보드 Apple Design Resources - Designing for visionOS https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos/ https://developer.apple.com/design/resources/#visionos-apps visionOS 앱 디자인 가이드라인과 figma 파일을 받아볼 수 있다. - 매체를 애플 비전 프로로 잡고 디자인해보았다. - 좌측 카테고리는 오버뷰 / 환경 / 에너지 / 쇼핑 / 보안 / 설정으로 나뉜다. 하단 카테고리는 공간으로 나누었다. - 현실 공간에 pass throu.. 2024. 2. 21. Daily UI 020 / Location Tracker 위치 추적기 20번째 과제: Location Tracker 위치 추적기 UI - 내가 주로 사용하는 지도는 카카오맵, 네이버 지도, 구글 맵 정도다. 보통 길찾을 때 / 장소(식당, 카페 등) 서칭할 때 사용한다. - 앱스토어에 검색해보니 위치 추적 및 공유 용도, 등산 특화 등 좀더 구체적인 위치 기반 서비스도 있었다. 이번 과제에서는 '위치 기반 등산 코스 안내 및 추천 앱 서비스'를 주제로 잡았다. - 등산 코스의 추천 및 세부 정보, 코스 안내, 사용자 위치 실시간 공유가 주기능이다. - 등산의 자연친화적인 이미지를 살려, 짙은 초록색을 메인 컬러로 사용하였다. - 텍스트는 필수적인 정보만 간결하게 넣었다. - 등산 진행 척도는 linear progress indicator로 표시하였다. - 지도 배율을 나타.. 2024. 2. 20. Daily UI 019 / Leaderboard 리더보드 19번째 과제: Leaderboard 리더보드 UI Leaderboard란? 리더보드는 특정 기준에 따라 순위를 매긴 목록이다. 이는 경쟁적인 환경에서 개인이나 팀의 성과를 비교하고 순위를 매기기 위해 사용된다. - 공교롭게도 저번 과제 주제랑 겹쳐서 같은 포맷으로 제작해 보았다. - 사이드바에 컬러를 줘서 본문 부분과 좀 더 구분되게 UI를 수정하였다. - 표에서 가로 구분선을 넣어서 좀더 정보가 명확히 구분되게 하였다. - 선택한 지표에 따라 순위가 정렬되는 시스템이고, 선택한 지표에는 메인 컬러 및 백그라운드로 하이라이트를 주었다. - 지표가 약 25개 정도 되기 때문에, 한 번에 다 보여주기는 어렵다. 따라서 좌우 버튼을 넣었다. 인디케이터로 지금 어느 범위의 지표들을 보여주고 있는지 볼 수 있다.. 2024. 2. 19. Daily UI 018 / Analytics Chart 통계 차트 18번째 과제: Analytics Chart 통계 차트 UI - 주제는 내가 좋아하는 롤 프로 경기로 잡았다. - 게임 관련 서비스 특성상 다크 모드로 특유의 분위기를 주었다. - 각 메뉴바에 어울리는 아이콘을 그렸다. - 사이드바 하단에 사용자의 지역 맞춤으로 당일 진행되는 경기를 알려준다. - damage, gold 카테고리의 경우 대부분 20%전후이기 때문에 상대 비율로 그래프를 보여주었다. - 차트 내 요소를 중앙 정렬할지, 좌측 정렬할지 좀 고민되었다. 아직 잘 모르겠어서 레퍼런스들을 눈여겨봐야겠다. 2024. 2. 16. 이전 1 2 3 다음
