디자인로그/UI.UX (65) 썸네일형 리스트형 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)을 전공했기 때문.. 지금 당장 적용할 수 있는 '10가지 UI Tips' 출처: https://www.uidesign.tips/ui-tips 1. 삭제하기 전에 반드시 확인 사용자가 아무런 확인 과정 없이 삭제하게 두지 마세요. 사용자는 자주 잘못 터치합니다. 만약에 한 번의 터치만으로 정보가 삭제된다면 사용자는 크게 당황할 것이고 결국 여러분의 서비스에 대한 부정적인 생각을 갖게 될지도 모릅니다. 그렇기에 여러분은 UI를 통해(인라인 또는 팝업으로) 삭제 전에 확인 과정을 반드시 넣어줘야 합니다. 물론 '취소'기능이 있긴 하지만, 다양한 변수에 따라 어떻게 될지 모르기 때문에 미리 대비하는 게 좋습니다. 정말 삭제할 것인지 확인이 필요합니다. 2. 삭제하시겠습니까? 삭제하는 상황에서 특히 버튼에 작성되는 문구에 집중하세요. 맥락 없이 '예', '아니요'와 같은 문구는 피하는.. UI 디자인에서 이상적인 그림자를 만드는 방법 현대 UI 디자인에서 그림자는 모든 곳에 자리하고 있다. fill, stroke 그리고 corner radius의 뒤를 잇는 UI 요소의 중요 부분 중 하나이다. 완전한 플랫 디자인(flat design)은 더 이상 트렌드가 아니다. 간단한 튜토리얼을 통해 카드, 버튼 또는 원하는 UI 컨트롤에 멋진 그림자를 만드는 방법에 대해 알아볼 것이다. 1. 그림자의 기본값(default)을 사용하지 마십시오. Sketch, Figma 또는 Adobe XD 어떤 것을 사용해도 상관없다. 디자인 툴의 모든 기본 그림자는 지양하는 것이 좋다. 만약 당신의 컴포넌트가 깔끔하고 현대적으로 보이게 하려면 항상 모양을 수정해야 한다. 2. 그림자를 부드럽게 만들기 이상적인 그림자 대부분은 그라데이션이 고르고 부드럽다. op.. 모바일 UI·UX 디자인시 고려해야 할 가이드라인 5 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 출처: https://brunch.co.kr/@chulh zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 5 출처: https://brunch.co.kr/@chulhochoiucj0/14 41. 한 화면에 뒤로 가기 버튼은 하나여야 합니다. 작은 화면에 동일한 기능을 중복 배치하는 것은 사용자에게 혼란을 줍니다. 하단 텝바(bottom navigation bar.. 모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 출처: https://brunch.co.kr/@chulhochoiucj0/10 26. 라디오 버튼은 소팅 기능에 사용할 수 없습니다. 라디오 버튼은 선택과 관련된 기능에서만 사용되어야 zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 출처: https://brunch.co.kr/@chulhochoiucj0/12 34. 내비게이션 요소와 UI 요소가 콘텐츠보다 더 부각되지 않아야 합니다. 내비게이션 요소와 컨트롤은 사용자가 콘텐츠를 탐색하고 상호작용할 수 있게 해주는 수단일 뿐입니다. 이 두 요.. 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 출처: https://brunch.co.kr/@chulhochoiucj0/9 회원가입 또는 로그인 시 입력한 비밀번호를 가리거나 볼 수 있는 옵션을 제공하세요. 입력한 비밀번호는 기 zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 출처: https://brunch.co.kr/@chulhochoiucj0/10 26. 라디오 버튼은 소팅 기능에 사용할 수 없습니다. 라디오 버튼은 선택과 관련된 기능에서만 사용되어야 합니다. 라디오 버튼을 텝했을 경우 하나의 옵션만 선택 상태가 변경되고 그 외의 .. 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 [디자인로그/UI.UX] - 모바일 UI.UX 디자인시 고려해야 할 가이드라인 1 모바일 UI.UX 디자인시 고려해야 할 가이드라인 1 모바일 UI·UX 디자인시 고려해야 할 가이드라인 1 출처 : https://brunch.co.kr/@chulhochoiucj0/8 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 출처: https://brunch.co.kr/@chulhochoiucj0/9 회원가입 또는 로그인 시 입력한 비밀번호를 가리거나 볼 수 있는 옵션을 제공하세요. 입력한 비밀번호는 기본적으로 (......) 형태로 가려져 있어야 합니다. 모바일에서는 작은 키보.. 모바일 UI.UX 디자인시 고려해야 할 가이드라인 1 모바일 UI·UX 디자인시 고려해야 할 가이드라인 1 출처 : https://brunch.co.kr/@chulhochoiucj0/8 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 맥락의 차이에서 기인합니다. 우선 모바일은 데스크톱에 비해 화면의 크기가 작습니다. 데스크톱은 의자에 앉아서 실내에서 사용합니다. 큰 모니터에서 많은 정보를 탐색하고 업무를 봅니다. 포토샵 같은 몰입형 앱의 다양한 기능을 몇 시간 동안 집중해서 사용할 수 있습니다. 그에 비해 모바일은 야외에서 또는 이동 중에 사용합니다. - 횡단보도를 걷다 보면 스마트폰을 보고 걷는 사용자를 자주 볼 수 있습니다. - 사용자는 작은 화면의 스마트 폰으로 SNS를 사용하고 뉴스를 보.. 8-Point 그리드 시스템 8-Point 그리드 시스템 출처 : https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632#.oh33ss65e Intro to The 8-Point Grid System Learn how it can take your design to the next level medium.com *왜 px단위가 아닌 pt단위인지는 https://brunch.co.kr/@blackindigo-red/18를 참고하세요 :) 픽셀 밀도(Pixel Density)에 대한 설명 픽셀 밀도란 무엇이며, 어떻게 작동하고, 이것이 디자인에 미치는 영향. | (출처 :[Pixel Density, Demystified – Peter Nowell –.. 머티리얼 디자인(Material Design)의 핵심은 무엇인가? 머티리얼 디자인(Material Design)의 핵심은 무엇인가?출처 : 슬로워크 블로그 Being Limited를 운영하고 있는 Paula Borowska가 DesignModo에 쓴 What is the point of material design?의 번역입니다. 되도록 원문의 의도가 나타나도록 했지만 내용에 따라 의역한 부분이 있습니다. 이번 구글 I/O에서 발표된 ‘머티리얼 디자인’이란 간단하게 말해 “구글의 다양한 플랫폼 안에서 사용자 경험을 하나로 묶는다”입니다. 이런 “통합”은 서비스(기술)를 더 쉽고, 간결하고, 직관적으로 만들어 전체적인 사용자 경험을 향상시킬 것입니다. 구글이 발표한 머티리얼 디자인 데모구글의 머티리얼 디자인 아시다시피 구글은 매우 매우 큰 회사이고, 검색엔진부터 브라우저.. [UX] UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄 UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄 1. Splash Screen 프로그램을 로드하는 동안 표시되는 이미지를 말합니다. 평균 2~3초간 지속되는 시간동안 애플리케이션의 로고와 함께 앱에 대해 간략한 소개를 하거나, 로딩 진행률을 애니메이션으로 표시하기도 합니다. Splash Screen에 사용되는 로고나 텍스처를 통해 애플리케이션의 아이덴티티를 표현할 수 있어야 합니다. 2. Coach Marks / Empty Data / Walkthroughs 위의 패턴들은 도움말을 제공할 수 있는 패턴입니다. '이 앱이 얼마나 친절한가?'를 판단할 수 있는 하나의 요소가 될 수 있는데요. 초기 진입 시에만 볼 수 있도록 설계하고 다음 진입 부터는 '설정'같은 메뉴 안에 두어 언제든 도움말을 호출할 .. 이전 1 2 3 4 5 6 다음
