UI27 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. Daily UI 005 / App Icon 앱 아이콘 5번째 과제: App Icon 앱 아이콘 디자인 Apple Human Interface Guidelines - App icons https://developer.apple.com/design/human-interface-guidelines/app-icons 이 문서에서 앱 아이콘 가이드라인을 읽을 수 있다. Apple Design Resources https://developer.apple.com/design/resources/ Apple은 무려 피그마 파일까지 공유해주는 최고의 기업이다. 앱 아이콘 사이즈부터 그리드까지 뜯어볼 수 있다. 주제: 타이포를 이용한 앱 아이콘 디자인 특히 알파벳 한글자 (ex. Netflix, Runday, 하나머니, 엘포인트, Mc'Donalds, Naver, Google.. 2024. 1. 23. Daily UI 004 / Calculation 계산 4번째 과제: Calculation 계산 UI User Story 공대를 다니는 박해마. 도서관 다 와서 보니 TI nspire cx cas를 안 가져왔다 !?! 일단은 과제를 해야하니 급하게 폰으로 구동가능한 공학용계산기를 찾아보는데... (네 사실 접니다.) 주제 공학용 계산기 아이폰 어플 - 일반 / 공학용으로 나누었다. 디폴트는 일반. 황금비율(1:1.6)로 나누었다. - AC(All Clear), ans(last calculation result), 이전 계산 결과 보는 방법에 대해서는 간단한 지침을 줘도 좋을 것 같다. 해당 버튼 빼고 화면 dim 시키고 무슨 기능인지 간단하게 알려주는 방식으로. - 공학용은 기본적으로 들어가야하는 기능이 많아서,,, iPhone 14 Pro 기준으로 버튼 h.. 2024. 1. 23. Daily UI 003 / Landing Page 랜딩 페이지 3번째 과제: Landing Page 랜딩 페이지 UI 랜딩 페이지란? 홈페이지 방문, 키워드 검색 혹은 배너 광고 등으로 유입된 인터넷 이용자가 최초로 보는 페이지를 말한다. 랜딩 페이지는 불필요하거나 혼란을 주는 내용을 최대한 피하고, 방문자가 방문 목적을 쉽고 빠르게 달성할 수 있도록 안내하는 것이 중요한데, 제작자 또는 디자이너가 랜딩 페이지를 어떤 형태 또는 방식으로 디자인하느냐에 따라 방문자의 적극적인 참여 또는 행동을 유발할 수 있다. [네이버 지식백과] 랜딩 페이지 [Landing Page] (PR용어사전) 폰트 클라우드 SaaS로 주제를 잡았다. (ex. 구름다리) 고려해야할 사항 Headline call-to-action buttons typography clarity - 구름다리를 벤.. 2024. 1. 23. Daily UI 002 / Credit Card Checkout 신용카드 결제 2번째 과제: Credit Card Checkout 신용카드 결제 UI 결제순서 1. 장바구니 2. 결제 3. 확인 Type 신용 카드 카드 넘버 유효기간 MM/YYCVC 일시불 / 할부결제 버튼 구매목록 합계 - 카드 기반 간편 결제 시스템으로 결정했다. - [+ 다른 카드 등록] 버튼을 어디에 둘까 고민했는데, 이 버튼은 항상 보일 필요가 없기 때문이다. 그래서 우측 디자인으로 가는 게 더 적절해보인다. - PC웹페이지 팝업으로 만들었는데, 생각해보니 팝업보다는 개별 페이지로 존재하는 게 더 적절할 것 같다. 이유: 팝업은 쉽게 닫을 수 있고, 정보량을 상대적으로 조금밖에 못넣는다. - 결제 가격을 일부러 안넣었는데... 넣었어야했다! 2024. 1. 23. Daily UI 001 / Sign Up 회원가입 1번째 과제: Sign Up 회원가입 세부 주제 및 항목 등을 설정해보았다. 주제 마라톤 대회 registration sign up 컨셉 energetic, 일러스트레이션 -> 시간 없어서 못함 필요한 정보 날짜, 장소에 대한 알림 핸드폰번호 이메일 이름 생일 medical discomfort 성별 경험 유무 참가비? - Google Material Guide를 보면서 간격과 박스 사이즈 등을 정하였다. - Progress Indicator는 여러 가지가 있지만, linear하게 표현하였다. '마라톤'의 종점까지 달려가야한다는 모티브 - 확인 버튼의 y축 위치는 다르게 설정되었다. 키보드 입력창이 뜰 경우 / 뜨지 않을 경우로 나누어 버튼 클릭이 쉬운 방향으로. - 보호자의 개인정보 입력 시, 보호자 것.. 2024. 1. 23. 이전 1 2 3 다음
