깨작거리기

Daily UI#009 Music Player 플레이 화면과 리스트 화면을 디자인했다. 앨범 커버와 이전 음악, 이후 음악을 시각적인 UI로 표현하고자 했다. 앨범 간의 크기와 더불어 층계에 대한 표현이 더 진행됐으면 아쉬움이 남는다. 리스트를 보기 위해서는 플레이 화면을 아래로 스와이프 하여 내리면 아래로 플레이 ui가 스몰버전으로 변화하도록 디자인했다. 색감, 앨범커버 디자인은 아쉬움이 남으니 다시 해봐야겠다.

UIUX/D-100 2023. 8. 17. 00:37

Daily UI #008 404 Page Design 한 번쯤 마주했을 404페이지를 디자인했다. 404 부분은 이미지로 작업했다. SNS에서 한국인이 보면 못 참는 짤에서 보고 착안했다. 차도에 있는 노란색선이 일자로 4와 4를 연결했어야 맞는데 맨홀뚜껑을 잘못 넣어 노란색선이 틀어진 모습이다. 이 페이지 자체가 저렇게 잘못되었다는 것을 보여주기 위해 선택한 이미지 컨셉이다. 그리고 404 페이지를 직면하고 당황했을 사용자를 위해 검색과 홈페이지 메인으로 갈 수 있는 버튼을 제공했다. 어떤 경로로 오게 되었는지 알 수는 없으나 사용자 입장에서는 제일 난감한 페이지일 것이다. 원래 찾으려고 했던 콘텐츠로 돌아갈 수 있도록 제시해줘야 한다. 홈페이지를 이용하고 있는 흐름이 깨지지 않도록 하기 위한 조치로 ..

UIUX/D-100 2023. 8. 15. 22:03

Daily UI #007 Settings 설정 페이지에서 신경쓸 부분는 기능별로 대분류, 소분류를 잘 구별할 수 있도록 디자인 하는 것이다. 그 구분은 그룹핑으로 해결해 볼 수 있겠다. 폰트의 굵기와 크기로 차이를 두고, 대분류의 제목과 소분류된 기능명에 시각적 계층 차이를 두고 디자인 해서 구별지어준다. 테이블 선과 텍스트 간의 여백도 넉넉하게 둬서 여유를 두고 구분을 분명하게 한다. 설정작업에 벤치마킹한 앱은 H.point, 쏘카, NRC, KT멤버십, 카카오 셀잇, 스타일쉐어, 티스토리 정도다. 이중에도 아쉬운 점이 있다면 폰트 크기였다. 설정은 사용자가 한번 설정하고 오랫동안 다시 변경하지 않는 공간이다. 그리고 신규 / 기존 사용자 누구든 필요할 때 한 번 들어오는 곳이기에 구분이 명확하고, 설..

UIUX/D-100 2023. 8. 12. 00:00

Daily UI #006 User Profile 소셜 프로필 화면을 디자인했다. 개인 브랜화가 중요해지면서 운영하고 있는 사이트가 많아졌다. 개인블로그, 유튜브, 쇼핑몰까지도 가능해진 세상에서 인스타그램에서는 하이퍼링크 하나만 허용하고 있어 홍보하기가 어렵다. 이런 어려움을 해결하기 위해 linktree는 하이퍼링크만 담은 랜딩페이지를 제공하고 있다. 인스타그램에서 linktree 링크를 연결한 사용자가 많아졌다. 이런 상황을 종합하여 하나로 뭉쳐서 프로필에 담아봤다. 인스타그램에서 스토리를 고정할 수 있는 영역에 홍보할 수 있는 영역으로 변경했다.

UIUX/D-100 2023. 8. 11. 16:32

Daily UI #005 App Icon 작업하다 보니 2가지로 하게 됐다. 하나는 등산 앱, 하나는 식물 앱으로 비슷한 컨셉으로 잡게 됐다. 브랜드의 대표 이니셜로 작업이 많이 되고 있어 그것과는 다르게 하는 방법은 시각적인 부분을 강조해야 한다고 생각했다. 앱 아이콘의 특징은 대표 이니셜과 대표 컬러 활용이다. 영어 알파벳 26개뿐이라 겹치기도 한다. 차별화를 위해서는 우측에 있는 것처럼 앱 특징을 그래픽으로 심볼화 하는 것이다. 그라데이션 활용으로 입체감을 실어 작업했다. Ios App icon guidelines @2x(pixels) @3x(pixels) iPhone only Usage 120 x 120 180 x 180 iPhone의 홈 화면 167 x 167 - iPhone Pro의 홈 화면 ..

UIUX/D-100 2023. 8. 10. 00:18

Daily UI #004 Calculation 계산기를 사용할 때, 아쉬웠던 부분은 기록이 남지 않아 같은 계산을 반복하는 것이다. 그래서 상단에 히스토리 아이콘을 사용하여 직전 계산을 볼 수 있도록 배치했다. 작업하며 신경 썼으면 하는 부분은 저시력자를 위한 명암대비다. 지금 작업한 컬러는 명암비가 약해서 더 연구가 필요해 보인다. 밞은 느낌을 위해 명도가 높은 색으로 선정됐지만 명암비를 위해서는 파란 계열보다 채도가 높은 계열의 컬러가 더 어울려 보인다.

UIUX/D-100 2023. 8. 8. 23:56

Daily UI #003 Landing page 랜딩페이지로 주제가 주어졌는데 한참을 고민했다. 어떤 주제의 랜딩페이지를 작업할 것인가.... 고민하다가 지금 읽고 있는 책인 출판사 홈페이지의 랜딩페이지를 작업해 보기로 했다. 추천사까지 내용을 담았지만, 책의 축약된 내용과 책의 대표 문장을 발췌하여 소개하는 부분이 필요해 보인다. 작가의 또 다른 책을 소개해도 좋을 것 같다. 최근 활동 내역도 담아도 좋을 것 같다. 들어갈 내용은 아직 많은데 짧은 시간 안에 작업하려니.. 아쉬움이 남는다. 특히 지금은 추천사 콘텐츠에서 arrow ui가 제일 눈에 거슬린다. 앞으로는 홈페이지의 UI 컴포넌트 디자인 컨셉을 미리 선정해서 작업하는 데 도움 될 것 같다. 미리 수집하고, Daily UI에서 주제를 주면 콘..

UIUX/D-100 2023. 8. 8. 00:34

Daily UI #002 Credit Card Checkout 요즘 잘 이용하고 있는 결제앱은 네이버페이와 페이북이다. 페이북에서 신용카드와 체크카드가 등록되어 있다. 이용하면서 편의를 느꼈던 부분은 쇼핑몰 결제창에서 신용카드를 선택하고 페이북 앱으로 전환돼서 다시 체크와 신용카드를 선택할 수 있다는 점이었다. 캐러셀 ui로 내가 등록한 카드와 페이북에서 쌓은 포인트 중 하나를 선택할 수 있고, 실물 카드 디자인이 작게 이미지로 표시되어 있어 인지하기 편했다. 반면 네이버 페이에서는 라디오 버튼으로 결제 수단을 선택할 수 있도록 디자인되어 있는데 계좌 간편 결제, 카드 간편 결제, Npay 머니 충전결제 텍스트가 세로로 나열되어 있는데 서로 간의 구분이 뚜렷하지 않아 처음에는 파악하기 쉽지 않았다. 시각..

UIUX/D-100 2023. 8. 6. 23:45