모작 (3) 썸네일형 리스트형 [UI/UX] 오늘의집 모작해보기 오늘의 모작: 오늘의집 [ 레이아웃 그리드 ] Count: 4 Type: Stretch Width: Auto Margin: 18 (양 옆으로 18px씩 여백) Gutter:20 (Gutter은 column사이 간격을 말함) 위처럼 레이아웃 그리드를 설정하면 아래 사진(왼쪽)과 같이 그리드가 적용된다. [ 오늘의집 모작을 통해 알게 된 점 ] - 검색창: Round 10 - 배너 광고: Round 10, 높이는 116 정도 - 영역 구분: 선이나 박스? 영역?으로 구분함. 근데 구분선을 보면 맨 위 구분선은 1px로 옅은 회색 가운데 구분 영역 16px로 아주 옅은 회색 내비게이션 바로 위에 구분선은 0.4px로 진한 회색이다. 진한 정도로 따지자면 맨 아래 내비게이션 구분선> 맨 위 구분선> 가운데 구분.. [ Daily UI ] 002. Credit Card Checkout 디자인 Daily UI의 두 번째 미션은 바로, 신용카드 결제 화면 디자인이다. 어제(챌린지 첫날) 메인 레퍼런스 없이 무턱대고 도전했더니 어색한 결과물이 나왔었다. 아직 난 UX UI 초보이기도 하고, 아는 것보다 배울 게 훨씬 더 많으니 일단 레퍼런스를 먼저 잡고 들어가기로 했다. 오늘의 메인 레퍼런스: 카카오 T (말이 메인 레퍼런스지 그냥 모작이다..!) 위 사진은 포인트, 쿠폰 기능만 빼고 모작한 결과물이다. 카카오 T는 최종적으로 사용자가 눌러야 할 '적용하기' 버튼에 행동 유도성이 높다. 카카오 T의 '적용하기' 버튼은 누가 봐도 저게 핵심 버튼이겠구나를 알 수 있다. 또한 '취소'버튼은 고스트 버튼(얇은 선으로 테두리가 있고, 투명하거나 비어있는 버튼)을 사용하여 눈에 띄지 않게 제작했다. 실제로.. UX UI 공부 1일차 [ 그리드 시스템, 모작, 단축키 ] 디자인 계의 올라운더가 되고 싶었던 나,, 일러스트도 그리고 영상도 만들고 UX UI도 공부하자고 생각했지만, UX UI 공부는 결국 한 번도 안 했다. 그런데 이번에 동아리 선배 소개로 토이 프로젝트에 참가하게 되었다. 사실 일러스트를 그리는 줄 알고 들어갔으나 UX UI 디자이너의 역할을 맡게 되었다(?). 잘할 수 있을까 걱정되긴 하지만, 이번 기회에 UX UI를 공부해야겠다는 의지가 마구 샘솟았다. 아직 UX UI에 대해 1도 모르지만 오늘부터 열심히 공부해보려 한다. 일단 많이들 사용하는 피그마(Figma)로 시작해야겠다! [ 그리드 시스템 ] UI에서 그리드 시스템은 정말 정말 중요하다. 그리드 시스템을 먼저 잘 정리해놓아야 가이드라인 잡기도 편하고 퍼블리셔와의 소통도 원활해진다고 한다. 그리.. 이전 1 다음
