깨작거리기

Daily UI #012 E-commerce Shop E-commerce Shop 와인 주제로 커머스 앱을 디자인했다. 화이트 와인이라는 세부 카테고리 페이지와 제품 상세페이지를 디자인했다. 제품군의 카테고리 구성에 대한 고민을 해 보고, 제품을 쉽게 선별할 수 있는 1차 설정을 정했다. 화이트 와인에 한정해서 페이지를 디자인하다 보니, 레드 와인 제품을 보고 싶을 때는, 전 화면으로 가서 다시 메뉴를 선택해야 하는 번거로움이 있는 흐름이 되었다. 상단 메뉴를 추가해서 탭할 수 있도록 ui를 추가한다면 화면 전환 없이 원하는 와인 종류를 볼 수 있게 될 것이다. 다른 메뉴 전환이 용이하도록 하고, 사용자가 원하는 제품에 단 시간에 도달할 수 있도록 카테고리를 나누는 것이 중요해 보인다. 구체적인 제품을 ..

UIUX/D-100 2023. 8. 30. 21:16

Daily UI #011 Flash Message 오류 메시지와 성공 메시지를 모두 포함하는 Flash 메시지를 디자인합니다. 가입 양식인가요? 다운로드/업로드 메시지? 멤버십 플랜을 홍보하기 위한 것입니까? 오류와 성공 메시지로 판단하고 일러스트로 그 차이를 구분해뒀다. 작업이 잘 완료되었는지 알려주고, 잘못되었다면 왜 잘못되었는지 내용이 전달되야 할 것이다. 루틴을 기록하는 앱으로 고려해서 이미지를 구상했다. 루틴을 성공해서 기뻐하는 일러스트를 완료하지 못했거나 잘못 선택했다면 아직 기회가 있다고 응원하고 있는 메시지로 맞춰서 작업했다.

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

Daily UI #010 Social Share 뉴발란스에서 런칭캘린더를 리뉴얼했다. 공유 UI를 어떻게 할지 고민하다가 콘텐츠에 따라 구성이 달라지지 않을까. 고민을 했다. 뉴발란스에서는 게시판에서 이미지를 부각해 게시물 제목으로 런칭 날짜를 알려주고 있다. 시각적으로 확인이 어려워 캘린더로 날짜를 더 쉽게 인식하기 좋도록 리뉴얼했다. 상세 페이지 안에서 공유를 할 수 있도록 기능을 넣었다. 런칭일에 맞춰 알림을 받을 수 있도록 했다.

UIUX/D-100 2023. 8. 20. 23:57

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