본문 바로가기

반응형

UIUX디자인사례

(15)
CTA(목표 달성 버튼) 디자인을 위한 체크리스트 10 안녕하세요 뷰저블입니다. CTA에 대해 들어보셨나요? CTA는 웹 사이트 내 목표를 달성하기 위해 고객에게 '행동'을 유도하는 버튼이나 배너를 가리킵니다. 영어 Call To Action을 줄여 CTA라고 표기하며 보통 '행동 유도 버튼' 또는 '목표 달성 버튼'이라고 해석되기도 합니다. 회원가입이나 구매하기, 다운로드, 문의하기 등 다양한 사이트 별 목적에 따라 버튼의 형태와 종류가 달라지게 됩니다. 뷰저블과 포그리트 홈페이지 메인의 CTA 버튼 위 이미지는 뷰저블과 포그리트 홈페이지 메인에 위치한 CTA입니다. 뷰저블에는 CTA가 상하단에 공통으로 2가지 들어가 있고 포그리트 홈페이지는 서비스마다 1개씩 CTA가 존재하여 총 3개가 있습니다. 오늘은 이 CTA를 어떻게 효과적으로 디자인할 수 있는지 ..
8px 그리드의 시대가 끝나고, 4px 그리드의 시대가 열릴까? UI에서는 4의 배수를 사용하면 훨씬 더 유연하게 작업할 수 있습니다. 본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반 번역문입니다. 기획과 UX 디자인을 중점적으로 다루는 블로그 매체 ‘부트캠프(Bootcamp)’의 글을 번역했습니다. 작가 드리스 데 셰퍼(Dries De Schepper)는 글로벌 컨설팅 그룹인 딜로이트 디지털(Deloitte Digital)의 UI 디자이너입니다. 본문은 UI 디자인 측면에서의 그리드를 분석한 내용으로 8포인트와 4포인트 사이에 어떤 차이점이 있을지 함께 생각해볼 수 있겠습니다. 기술이 점점 더 발전하면서 그래픽 디자이너들의 상당수가 UX/UI 디자인으로 전문 분야를 바꾸는 경우가 많아졌습니다. 저는 아트 디렉션(Art Direction)을 전공했기 때문..
UI 디자인의 변천사, 그리고 뉴모피즘 1. 스큐어모피즘 아이폰 3G를 사용할 때, 현실과 비슷한 느낌으로 앱들이 디자인 되어 있었어요. 이를 스큐어모피즘이라고 하죠? 쉽게 말해, 현실 세계의 메타포를 그대로 모바일 안으로 옮겨 놓은 디자인이에요. 아이폰의 기본 기능인 ibooks는 집에서 보던 책장을 그대로 옮겨 놓은 듯한 디자인이었죠? 하지만 스큐어모피즘 디자인에는 한계가 있었는데, 그중 가장 대표적인 것이 디자이너들의 피땀눈물이 들어간다는 것과 개발자들의 용량 문제였어요. 아무래도 현실의 메타포를 거의 그대로 디자인하다 보니까 꽤 오랜 시간이 걸렸고, 그 용량도 상당했죠. 제작된 앱들도 무척 무거워서 초창기에 앱을 다운로드 하면 꽤 많은 용량을 차지하곤 했습니다. 그런 단점을 보완하고자 나온 디자인이 플랫디자인입니다. 2. 플랫디자인 이..

반응형
LIST