티스토리

jin-na

검색하기

블로그 홈

jin-na

jin-na.tistory.com/m

UX / UI 디자이너의 유의미한 표류기

구독자: 39

방명록 방문하기

반응형

주요 글 목록

Gemini 앱 : iPhone에서 사용하기 11월 14일, 오늘 우리는 iPhone용 Gemini를 출시합니다. 전 세계 App store에서 다운로드할 수 있으며, iPhone에서 바로 Google의 개인 AI 비서에 무료로 쉽게 접근할 수 있습니다. Gemini 접근법iPhone 사용자는 이제 전용 모바일 앱으로 Gemini를 완전히 새로운 방식으로 경험할 수 있습니다. 학습, 창의성 및 생산성을 향상시키는 기능에 쉽게 접근할 수 있는 더욱 간소화된 Gemini를 경험합니다. 1. Gemnini와 자유롭게 대화하기질문을 하거나 주제를 바꾸기 위한 것 그 뿐만 아니라, 대화 방식으로 Gemini를 사용할 수 있습니다. 다가올 인터뷰를 연습하고, 새로운 도시에서 할 일에 대한 조언을 구하고, 창의적인 아이디어를 브레인스토밍하고 개발할 때 .. 공감수 5 댓글수 2 2024. 11. 29.
모든 UI/UX 디자이너가 알아야 할 9가지 개발자 용어 UI/UX 디자이너를 위한 기술 언어 단순화 1. Margin마진은 요소의 경계 밖에 있는 공간이다. 이는 해당 요소와 그 주변의 다른 요소 사이에 거리를 만든다.예 : 캔버스에 버튼이나 이미지와 같은 요소를 배치할 때 요소 간 마진을 일관되게 유지해야한다. 요소 간 마진을 조정하거나 정렬 도구를 사용하여 일관된 간격을 유지할 수 있다. 예를 들어, 네비게이션 바나 배너 섹션을 디자인할 때 요소 주변에 공간을 확보하여 요소가 서로 너무 가깝거나 화면 가장자리에 너무 가까이 표시되지 않도록 해야한다. 2. Padding패딩은 요소의 경계 내부에 있는, 콘텐츠(예: 텍스트나 이미지)와 해당 요소의 가장자리 사이의 공간을 말한다.예: 텍스트 요소, 로고, 아이콘이 포함된 네비게이션 바를 작업하는 .. 공감수 1 댓글수 0 2024. 11. 25.
2024년, 놓칠 수 없는 유용한 Figma 플러그인 9가지 디자이너에게 적합한 도구를 갖추면 워크 플로우가 크게 달라질 수 있다. 이번 분기에는 2024년에 효율적인 디자인 작업에 도움이 될 유용한 플러그인 9개를 소개한다. 각각은 작업을 단순화하거나 일상적인 작업을 처리하는 데 유용한 기능을 제공한다. 이러한 플러그인은 워크 플로우에 쉽게 통합할 수 있으며 생산성을 높이는 데 도움이 될 수 있다. 경험이 풍부한 디자이너이든, 이제 막 시작하는 초보자이든, 새로운 플러그인은 꼭 살펴볼 가치가 있다. 1. Vector에서 3D로https://www.figma.com/community/plugin/1264600219316901594/vector-to-3d 'Vector to 3D'는 내장 광선 추적 렌더러를 사용하여 단 한 번의 클릭으로 2D 텍스트와 벡터 .. 공감수 2 댓글수 1 2024. 11. 18.
디자인 시스템에 대해 아무도 나에게 말해주지 않은 10가지 디자인 시스템에 대한 나의 소개는 블랙홀에 빨려 들어가는 것과 같았습니다. 제가 트럭 운송 소프트웨어 회사에서 프로덕트 디자이너로 일할 때 있었던 일입니다. 우리는 기하급수적으로 성장하고 있었기 때문에 비즈니스 요구 사항을 충족하기 위해 UI 라이브러리에 중요한 개선 사항이 필요했습니다. 무엇을 최적화할지 결정하기 위해 감사를 진행하면서 Figma가 자동 레이아웃 기능을 출시했다는 사실을 알게 되었습니다. 나는 그 새로운 기능을 우리 라이브러리에 적용했지만 작업이 더욱 복잡해졌습니다. 나는 감사에서 멈추지 않았습니다. 나는 결국 전체 디자인 시스템을 만들었습니다. 해당 프로젝트 동안 저는 컴포넌트 구축, 리서치 수행, 문서 작성, 디자인 동료들에게 새로운 디자인 시스템을 소비하고 기여하는 방법에 대한 교.. 공감수 0 댓글수 0 2024. 6. 4.
명명 규칙 : 디자인 시스템 구성 디자인 시스템을 만들 때 모든 것을 독창적이고 다르게 만들고 싶을 것입니다. 색상 스타일이나 파일에 대한 최고의 이름을 생각해내고 싶은 것이 그 예입니다. 결과적으로 현재와 미래의 시스템을 설정하기 위한 디자인 시스템을 확장하려면 일반적으로 더 많은 작업이 필요합니다. 명명 규칙을 도입을 통해 디자이너와 개발자 간의 효과적인 협업을 구축하여, 모든 프로젝트를 더 쉽게 구현하고 이해하는 데 도움을 줄 수 있습니다. 원칙 명명 규칙은 프로젝트의 원칙과 목표를 정의합니다. 디자인 시스템의 명명 규칙에는 다음과 같은 몇 가지 원칙이 있습니다. 1. 명쾌함과 분명함 이름은 명확하고 모호하지 않게 명명하여, 팀 구성원이 그 의미(공허한 두문자어 및 모호한 약어)를 쉽게 이해할 수 있어야 합니다. 2. 일관성과 조직.. 공감수 3 댓글수 2 2024. 3. 17.
아토믹 2.0 - 디자인 시스템을 위한 아토믹 디자인 재검토 아토믹 디자인은 Brad Frost가 새롭게 제시한 디자인과 개발 모두를 위한 훌륭한 방법론이다. 요소의 계층 구조가 사람마다 다르게 해석되는 경우가 많다는 것을 알게 되었기 때문에, 이를 새로운 접근 방식으로 해결하려고 시도했다. 나는 이것을 Atomic 2.0이라고 부른다. Frost의 접근 방식에 대한 우려 #1 Frost는 원자를 더 분해하면 기능을 중지하는 요소로 설명한다. 그는 이러한 이유로 버튼과 양식 레이블을 원자로 분류하지만, 여기서부터 혼란이 시작된다. 전체 형태와 같은 더 복잡한 요소도 제거하기 시작하면, 기능을 중지할 수 있지만 유기체로 분류된다. 이것은 원자인지 아닌지에 대한 해석의 여지를 많이 남긴다. 최근에 모델이 디자인 토큰을 포함하도록 업데이트되었지만, 이는 화학 비유의 개.. 공감수 1 댓글수 0 2022. 4. 16.
4개의 스프린트로 기존 프로덕트에 대한 디자인 시스템 구축 "디자인 시스템은 전체 플랫폼을 연결하는 결합 조직 역할을 한다." - Drew Bridewell, Invision 디자인 시스템 구축 디자인 시스템은 디자이너와 개발자를 위한 근간이며, 프로덕트의 새 화면을 구축하는 것에 필요한 모든 스타일과 컴포넌트를 찾을 수 있는 실시간 핵심 문서이다. 디자인 시스템은 팀의 가이드라인이 되어주는 시각적 컴포넌트와 스타일로 구성된다. 디자인 시스템의 목표는 모든 사람, 특히 고객을 위한 응집력 있는 경험을 만드는 것이다. 디자인 시스템이 작동 중이며 새로운 스타일과 컴포넌트가 추가되거나 이전 항목이 업데이트된다. 한 사람 또는 팀이 새로운 항목을 승인하고 디자인 시스템이 생성되면 변경 사항을 문서화하고, 게시하는 일을 담당하는 것이 정말 중요하다. 문제는 — 우리는 .. 공감수 2 댓글수 0 2022. 4. 8.
8배수보다 4배수 디자인이 유연한 이유 기술의 발달로 많은 그래픽 디자이너가 UX/UI 디자인으로 전환했다. 나는 아트 디렉션을 공부했기 때문에 그래픽 디자인의 베이스라인 그리드에 더 익숙하다. 약 6년 전 UI 디자인 일을 시작했을 때, 특정한 가이드라인을 따르지 않았다. 그래서 주로 다른 앱과 웹 사이트에서 어떤 간격을 사용하는지 살펴보았고, 곧 모든 사람이 다르게 하고 있다는 것을 알게 되었다. 온갖 다양한 수치를 봤다. 12px, 13px, 15px, 20px.. 당시에 그것은 중요해 보이지 않았었다. 몇 년 전, 나는 Spec.fm에서 Bryn Jackson이 쓴 8포인트 그리드와 두 가지 방법론 "소프트 그리드"와 "하드 그리드"에 대한 글을 읽었다. 디테일을 추구하는 나에게 이곳은 지상낙원이었다. 이후 모든 디자인에 8-Point.. 공감수 10 댓글수 0 2022. 3. 31.
디자인 시스템, 컬러 네이밍 정하기 컬러는 모든 디자인 시스템의 기반이 되지만, 숙련된 디자이너에게도 네이밍 지정은 어려울 수 있다. 6년 전, 첫 번째 디자인 시스템을 만들고 QuickThoughts라는 모바일 설문 조사 앱을 지원하기 위한 색상 팔레트를 만들었다. Sketch를 사용했는데, Zeplin이 자동으로 '멋진' 컬러 네이밍을 지정하는 방식이 마음에 들었다. 때문에 모든 색상의 이름을 비슷한 방식으로 바꿨다. 내가 선택한 색상 이름('Laughing Orange', 'Cardboard Tan', 'Shire Green' 등)은 당시에는 합리적으로 보였다. 하지만, 우리 조직이 'iPoll'이라는 유사한 모바일 애플리케이션을 가지고 있는 다른 회사를 인수했을 때 이 결정은 곧 실수로 판명됐다. 우리 조직에 iPoll을 포함/지원.. 공감수 3 댓글수 0 2022. 3. 31.
우버 디자이너가 Figma에서 256개의 새로운 디자인 시스템 구성 요소를 프로그래밍 방식으로 구축한 방법 Uber의 Base 디자인 시스템은 Uber 제품 전반에 걸쳐 광범위하게 사용되는 일련의 지도 마커 컴포넌트를 제공하며, 사용자에게 지도를 제공할 때마다 표시된다. 우리는 최근, 지도 마커에 추가 컨텍스트를 표시해야 할 필요성을 알게 되었다. 이를 달성하기 위해 기존 기본 컴포넌트인 배지를 추가하기로 결정했다. 문제는 지도 마커와 배지에 다양한 변형이 있다는 것이었다. 마커는 크기, 바늘 길이, 아이콘 슬롯 및 레이아웃 동작에 따라 사용자 지정할 수 있으며 배지는 여러 크기, 레이블 및 아이콘 스타일을 가질 수 있었다. 배지를 지원하는 지도 마커의 최종 세트는 이러한 모든 옵션의 조합으로 총 256개의 새로운 컴포넌트를 만들어야 했다. 일반적인 접근 방식은 디자이너가 이러한 새 컴포넌트를 수동으로 생성하.. 공감수 0 댓글수 0 2022. 3. 30.
고정 UI 요소를 디자인할 때 고려해야 할 사항 고정 요소는 무엇인가? 고정 요소는 페이지를 아래로 스크롤 할 때 브라우저 뷰포트 내에서 고정된 위치에 유지되는 모든 것이다. 일반적으로 고정 네비게이션에 사용되며, 상단에 고정되어 페이지를 탐색할 때 항상 표시된다. 화면 우측 하단에 고정되어있는 채팅 도움말을 본 적 있을 수도 있다. 어떤 문제를 일으킬 수 있을까? 어떤 한 요소를 지속적으로 표시하면, 주의가 산만해져서 유저가 찾고 있는 콘텐츠에 집중하기 더 어려워질 수 있다. 고정 요소도 마찬가지다. 화면에 클릭 유도 문구가 있어도, 고정된 채팅 아이콘이 화면 위에 있는 경우라면 그것을 놓칠 수도 있다. 이 문제는 키보드 네비게이션을 고려하거나, 고정 요소에 의해 집중되어야 하는 컨텐츠가 가려질 때 상황을 더욱 악화시킨다. 종종 간과되는 고정 요소의.. 공감수 3 댓글수 1 2022. 3. 11.
Figma의 인터랙티브 컴포넌트 기능 이해하기 Figma는 요즘 많은 신기능 개발에 박차를 가하고 있다. 그 중 내가 주목하는 것은 인터랙티브 컴포넌트다. 이 기능에 의해, 재이용 가능한 인터랙티브 컴포넌트를 빠르게 조립해 클릭 가능한 프로토타입으로 디자인에 생명을 불어넣을 수 있다. 이 기능이 개발되기 전에는 인터랙티브 프로토타입을 만들 수 있었지만, 인터랙티브 기능을 보여주기 위해 여러 프레임을 복제하고 조정하는 데 많은 노력이 필요했다. 업데이트를 할 때 효율적인 프로세스가 아니라고 할 수 있다. 신기능의 차이는컴포넌트 수준에서 Variants 간 인터랙션을 정의할 수 있다는 것이다. 그런 다음 이러한 인터랙션은 컴포넌트에 새겨져, 컴포넌트의 모든 인스턴스에서 사용할 수 있다. 이전에는 전체 프레임을 연결하여 프로토타입을 만들었다. 그 후 F.. 공감수 7 댓글수 1 2022. 3. 9.
올바른 디자인 시스템 만들기 : 컴포넌트 오늘날 디자인 시스템은 모든 디자이너와 개발자로 이루어진 팀의 주요 도구 중 하나다. 아이콘에서 페이지 템플릿에 이르기까지 프로덕트의 모든 응용 가능한 디자인 요소가 어떻게 보이는지를 정의한다. 디자인 시스템은 새로운 레이아웃의 생성, 페이지 개발, 프로덕트 구성 요소에 대한 공통된 이해를 단순화하고 프로덕트의 사용성 향상에 도움을 준다. 디자인 시스템이 제품에 해를 끼칠 수 있는 방법 그러나 디자인 시스템은 어디에나 모두 그대로 사용 가능한 보편적인 도구가 아니다. 디자인된 프로덕트의 전략에 따라 모양과 크기가 다르다. 디자인 시스템을 만들고 유지하는 데 시간과 리소스를 투자하기 전에, 필요한 특정 목적이 무엇인지 생각해보아라. 이 과정은 나중에 많은 두통을 덜어 줄 것이다. 단지 현대적이고 트렌디하다.. 공감수 4 댓글수 1 2020. 11. 10.
디자인 검증: 디자인이 좋은지 어떻게 알 수 있을까? 인트로 모든 프로젝트를 진행하면서, 디자이너들은 셀 수 없이 많은 결정을 내린다. 여기에는 글꼴, 마이크로 카피, 유저 플로우, 프로덕트 구조가 포함된다. 이런 리스트는 끝이 없다. 하지만 이 과정에서의 선택이 최적의 것인지 아니면 최소한 좋은 것인지를 알아내는 것은 꽤나 까다롭다. 이것은 우리에게 이 아티클의 주제를 가져다준다: 당신의 디자인이 뒤흔들렸는지 어떻게 알 수 있을까. 읽기 전에 몇 가지 고지 사항: 이 글에 제시된 좋은 디자인 검증 방법에 대한 리스트는 결코 포괄적이지 않다. 디자인 검증에 관한 책들이 있다. 그리고 당연히 우리는 덧붙일 수 있다. 여기 설계 검증 방법에 대한 좋은 개요가 있다. 여기서 UX 테스트 프로세스 전체를 확인해보아라. 이 아티클에 제시된 당신의 디자인을 테스트하는.. 공감수 1 댓글수 2 2020. 11. 5.
성공적인 디자인 핸드 오프, Design Handoff 프로덕트 창조는 한 부서에서 다른 부서로 팀 내의 아이디어와 형태를 이전하는 긴 연쇄 과정이다. 이 아티클에서는 디자이너와 개발자 간의 상호 작용에 대해 이야기해보겠다. 디자인 핸드 오프 란 무엇인가? 디자인 핸드오프 단계에서는 설계자가 UX와 UI를 통해 창업자의 아이디어, 관리자 및 분석가의 요구 사항 등을 개발자에게 전달할 수 있는 발판을 마련해야 한다. 팀 내 좋은 내부 연결의 도움으로 개발자들은 고객에게 실제 제품을 더 빨리 사용하기 시작할 수 있는 기회를 제공할 것이고, 미래에는 팀 전체가 훨씬 더 빠르게 프로덕트를 개선할 수 있을 것이다. 디자인 핸드 오프가 어려울 때 나쁜 디자인 핸드 오프는 모든 규모의 회사에서 발생한다. 신생 스타트 업은 자신의 혼란 속에서 프로세스를 구축하기가 어렵다는.. 공감수 4 댓글수 0 2020. 11. 4.
반응형 디자인의 결함 제거 지난 5년동안 모바일 트래픽의 점유율이 20% 증가했으며, 오늘날 반응형 디자인은 이미 당연한 것으로 받아 들여지고 있다. 2020년에는 모바일에서 모든 웹 사이트에 액세스 할 수 있으며 잘 작동한다. 대부분의 사용자는 스마트폰이나 태블릿에서 제대로 작동하지 않는다는 사실을 알게되면 사이트를 떠나고, Google은 모바일 장치에 최적화되지 않은 경우 검색 결과에서 사이트 순위를 낮춘다. 따라서 반응형 웹 사이트의 디자인에는 정적 웹 사이트의 개발과는 다른 특별한 접근 방식이 필요하다. 디자이너는 반응형 디자인을 사용함에 있어, 먼저 기기(스마트폰, 태블릿 또는 컴퓨터)에 의해 디자인을 결정한 후 기기의 화면 크기에 따라 보여준다. 한편으로 반응형 디자인의 생성은 사이트의 개발과 유지 관리를 단순화한다. .. 공감수 2 댓글수 2 2020. 10. 30.
2020 Design Tools Survey - UX Tools 디자인 툴이 점차 다양해지고 발전함에 따라, 툴에 대한 선택의 폭이 넓어졌다. 매년 업데이트되고 쏟아져 나오는 툴들 속에서 나라, 조직의 크기, 역할, 연차 등 각기 다른 조건의 디자이너들은 과연 어떤 툴로 어떻게 일할까? 심지어는 같은 조직 안에서도 개개인마다 자신에게 효율적인 툴을 선택해 사용하기도 한다던데 하물며 다른 나라는 어떨까? 나와 같은 궁금증을 가졌던 사람들을 위한 흥미로운 서베이가 있다. 매년 UX Tools에서는 전 세계 디자이너에게 UX Tool 사용에 대한 설문을 진행하고 결과를 발표한다. 요약정리와 시각화가 잘되어있고, 설문의 내용이 굉장히 세분화되어있기 때문에 데이터 비교에 용이하다. 올해도 역시 진행중에 있다. 디자이너라면 한 번쯤 참여해보고 결과 데이터를 본인과 비교 분석해보.. 공감수 0 댓글수 0 2020. 10. 27.
A/B 테스트의 장점과 단점 어떤 면에서는, 나는 A/B 테스트가 디자이너들이 의견 싸움을 줄이고, 가설을 테스트하고, 가장 효과적인 해결책을 사용자에게 신속하게 가져다 줄 수 있는 매우 강력한 도구라고 생각한다. 하지만 다른 면에서는, 여러 상황 속에서의 인간의 판단을 없애고 고객의 필요보다 회사의 KPI를 우선시하며, 현지 최대치를 향해 반복하는 위험도 안고 있다. A/B 테스트의 이점 A/B 테스트의 이점은 상당히 명백하다. 여러분은 몇 가지 간단한 디자인이나 제품의 개선을 원하지만, 어떤 것이 가장 좋은 결과를 가져올지 100% 확신할 수 없다. 팀원 중 한 명은 어떤 방향에 대해 매우 강한 느낌을 받고, 한 명은 다른 방향으로 강하게 느끼고, 나머지 한 명은 어느 쪽이든 확신할 수 없다. 이런 종류의 교착상태에서는 정치가 .. 공감수 3 댓글수 0 2020. 6. 18.
드롭다운(dropdown) 메뉴 디자인 필수 가이드 사용자가 옵션을 선택할 수 있는 UI 컴포넌트는 많다. 체크박스, 라디오 박스, 토글, 스테퍼, 드롭다운 메뉴. 각각 고유한 장단점이 있으며, 사용자로부터 요구하는 입력의 성격에 따라 사용해야 한다. 이 글의 경우 드롭다운 메뉴에 초점을 맞추고 사용 사례, 유형, 상태 및 모범 사례에 대해 설명하겠다. 대부분의 정보는 Nielsen Norman Group과 Baymard Institute의 글을 읽는 데서 유래한다. 드롭다운 메뉴 구조 - Label 선택해야 할 항목을 사용자에게 알림 - Field Icon (선택사항) 필요한 정보의 유형을 표시하여 라벨을 지원 - Search Bar (선택사항) 20개 이상의 옵션으로 구성된 메뉴에 대해 사용자가 원하는 옵션을 쉽게 찾을 수 있도록 돕기 위해 사용 - .. 공감수 6 댓글수 0 2020. 6. 17.
프로토타이핑 UI : 필요한 툴 찾기 디자인은 끊임없이 진화하고 복잡해지고 있다. 사용자 인터페이스 설계는 더 이상 아이콘의 와이어프레임과 디자인에만 국한되지 않는다. 오늘날, 디자이너들은 그래픽 소프트웨어와 프로토타이핑 툴을 포함하여 단순함에서 정교함에 이르기까지 다양한 유용한 도구들을 가지고 작업한다. 웹 애플리케이션을 만들든, 모바일 애플리케이션을 만들든 프로토타이핑 제작에는 준비와 전문 소프트웨어가 필요하다. 그러나 프로토타이핑 툴의 수가 매년 증가함에 따라 어려운 선택을 해야 한다. 어떤 툴을 사용하면 가장 효율적이고 효과적으로 작업할 수 있으며 가장 유용한 프로토타입을 만들 수 있을지 고민해야한다. 이 글에서는 가장 인기 있는 프로토타이핑 툴의 장단점을 살펴보기로 한다. 우리 회사 UX팀의 디자이너들에게 그들이 가장 좋아하는 프로.. 공감수 2 댓글수 0 2020. 6. 16.
2020년, 어떤 UI 디자인 툴을 사용해야할까? 2020년, 오늘날의 시장은 UI 설계 도구로 가득 차 있다. Sketch가 사용자 인터페이스를 정교하고 단순하게 제작할 수 있도록 효율적인 툴을 출시한 이후, 많은 회사들이 디자인 툴 시장 점유율의 일부를 차지하기 위해 노력해왔다. UXtools에서 실시한 '2019년 디자인 툴 설문조사'를 살펴보면, 지난해 Sketch가 선두를 달렸던 것과 비교해서 꽤 많은 툴이 Sketch를 따라잡은 것을 볼 수 있다. 2019년 가장 인기 있는 UI 디자인 도구 설문조사 결과 2018년 가장 인기 있는 UI 디자인 도구 설문조사 결과 내가 관찰한 '툴의 성장, 툴을 사용한 나 자신의 경험, 그리고 이러한 툴들에 대한 다른 디자이너들의 경험'에 따르면, 1~2년 안에 Sketch, Figma, Adobe XD가 주.. 공감수 7 댓글수 0 2020. 6. 12.
UI / UX 디자이너를 위한 짧고 유용한 디자인 Tip Steve Schoger의 Twitter 모음 'Little UI Details'는 이해하기 쉬운 이미지로 UI 디자인의 다양한 요소를 다룬다. 확인해본 결과, 최신 업데이트는 지속적으로 이루어지지 않는다. 하지만 기본적이지만 놓칠 수 있는 디테일에 대해 쉽게 설명해주기 때문에 한 번쯤 훑어볼만하다. 01. 부정적인 링크에 대한 교묘한 액션 유도 부정적인 이차적 액션에 대한 미묘한 연결고리는 종종 큰 굵기의 버튼보다 더 잘 작동한다. (확인과 관련된 액션을 더 확실히 할 것!) 02. 최소한의 라인 사용 테두리가 너무 많으면 디자인이 정신없어 보일 수 있다. 03. 텍스트 정렬 텍스트를 정렬하는 것은 디자인을 정리하고 콘텐츠의 가독성을 높이는 쉬운 방법이다. 04. 텍스트 컬러 조정 순수한 회색 텍스트는.. 공감수 2 댓글수 0 2020. 6. 4.
실제 UI 디자인 - 타이포그래피 앱에 아이콘, 사진 또는 여러 컬러 팔레트가 없을 수 있다. 하지만 디지털 솔루션은 텍스트 콘텐츠 없이는 존재할 수 없다. 텍스트는 솔루션을 이해할 수 있게끔 한다. 어떤 사람들은 디자인의 90%가 타이포그래피라고 말한다. 올바른 타이포그래피를 사용하면 솔루션의 사용자 경험이 크게 향상될 수 있다. 올바른 설정 덕분에 사용자는 콘텐츠를 더 쉽게 소비하고 더 많은 참여를 할 수 있을 것이다. 타이포그래피란? 타이포그래피는 활자를 배열하여 표시하거나 인쇄할 때 언어를 읽을 수 있도록 호소력 있게 만드는 기법과 기술이다. 글꼴 vs. 활자체 우리 모두는 동의어로 글꼴과 서체 용어를 사용한다. 하지만, 그들의 의미는 다르다. 글꼴은 하나의 특정 서체, 크기, 무게로 소개된 텍스트 문자의 시각적 표현이다. 예를 .. 공감수 1 댓글수 0 2020. 4. 23.
라디오 버튼과 체크박스가 공존할 수 없는 이유 라디오 버튼과 체크박스는 오랫동안 사용자 혼란을 일으키는 구성요소였다. 이 요소들은 종종 같은 맥락에서 사용되지만, 완전히 다르게 보인다. 디자이너와 개발자들은 그 차이를 알고 있지만, 그것은 그들이 일을 통해 그것을 배웠기 때문이다. 그 차이를 전혀 배우지 못한 사용자들은 어떨까? 사용자에게 차이점을 가르쳐야 한다는 사실은 이 두 요소가 직관적이지 않다는 것을 보여준다. 그들의 외관만으로는 기능면에서 약간의 차이가 있다는 것을 전달할 수 없다. 이 시각적 단서는ㅡ점과 체크마크ㅡ 옵션 선택 이외의 사용자에게 특별한 의미를 부여하지 않는다. 따라서, 라디오 버튼과 체크박스의 공존은 UX의 일관성 원칙을 위반한다. 디자이너와 개발자들은 항상 그래왔기 때문에 그들의 공존에 의문을 제기해 본 적이 없다. 그러나.. 공감수 0 댓글수 2 2020. 3. 24.
UI 디자인 - 컬러 색상은 사용자가 디지털 프로덕트를 인식하는 방법에 큰 영향을 끼쳤다. 만약 당신이 게슈탈트 원리와 그들이 사용자 인터페이스에 미치는 영향에 대해 알게 되었다면, 이제 색으로 더 많은 생명을 가져다주는 것에 초점을 맞출 수 있다. 이 글은 UI 디자인에서의 색상 사용법에 대한 완전한 가이드가 포함되어 있다. 당신의 다음 UI 톤에 대한 영감을 찾는 데 도움이 되는 툴에 대한 링크도 있다. UI에서 올바른 컬러 사용의 이점 색상은 UI를 더 매력적으로 만들기 위해 사용될 뿐만 아니라 사용자와 비즈니스에 다양한 이점을 준다. ㅡ 색상은 UX를 향상시킨다. 올바른 색상 팔레트로 구성된 콘텐츠는 읽기 더 편할 수 있다. 특정 영역과 오브젝트는 더 많은 의미를 얻으며, 집중하기가 더 쉽다. ㅡ 색은 브랜드의 성격을.. 공감수 0 댓글수 0 2020. 3. 18.
UI 디자인 - 다크모드 실용적인 팁 & 트릭. 기술은 항상 우리와 함께 한다. 우리는 앱과 상호작용하고 밤낮으로 웹사이트를 읽는다. 어떤 경우에는 디지털 솔루션의 흰색 화면이 우리의 눈에 불편할 수도 있다. 그래서 점점 더 많은 디자이너들이 라이트 모드 / 다크 모드두 가지 테마로 그들의 창작물을 만드는 데 관심을 기울이는 것이다. 다크 모드는 사용자들이 자연스럽게 사용할 수 있도록 우리가 따라야 하는 특정한 규칙을 가지고 있다. 이 글은 그 규칙에 대한 모든 것을 담고 있으므로, 긍정적인 경험을 가져다주는 테마를 만들 수 있다. 왜 다크모드인가? 어두운 테마의 주요 장점은 조도가 낮은 환경에서 가독성이 더 좋다는 것이다. 다크 모드는 기기 화면의 밝기를 감소시킨다. 그것은 시각적 인체공학을 개선하고 특정한 빛 조건에서 더 잘.. 공감수 0 댓글수 0 2020. 3. 17.
7가지 CTA 버튼 가이드라인 특히 요즘 같은 시대에 사용자의 주의를 끌기는 결코 쉽지 않다. —온갖 종류의 물건들로 인해 전체적인 주의 범위가 8.25초 정도로 줄어들게 된다. 이것은 또한 대부분의 상위 스타트업들이 주의를 산만하게 하는 요소들의 수를 줄이기 위해 최소한의 사용자 인터페이스 스타일 —으로 전환한 이유이기도 하다. 특정 핵심 요소에만 초점을 맞추면 그 중요성과 효율을 증가시켜 전환율을 높일 수 있다. 이러한 핵심 요소 중 하나는 대부분의 웹 사이트와 제품에 필수적인 "CTA 버튼"이다. 그들은 사용자가 구체적인 조치를 취할 수 있도록 설계되었다; 계정을 만들고, 카트에 추가하고, 제품을 구입하는 것 등. 이러한 버튼은 잘 설계되었을 때 사용자가 제품을 효과적으로 탐색할 수 있을 뿐만 아니라 변환 흐름에도 매우 중요하다.. 공감수 0 댓글수 0 2020. 3. 16.
아이콘 디자인의 7 가지 원칙 고퀄리티의 아이콘 패밀리를 만들려면 신중한 접근, 훈련된 안목, 약간의 반복 그리고 많은 연습이 필요하다. 아래에서 7가지 원칙과 수많은 실제 사례를 통해 퀄리티의 특징을 설명하려 한다. 목표는 좋은 아이콘 디자인의 주요 특성에 맞춰 조정하는 것이다. 첫 번째, 명쾌함 아이콘의 주된 목표는 개념을 빨리 전달하는 것이다. 이 수많은 심볼들 속에서, 어떤 것이 당신에게 분명하게 느껴지는가? 운전자들은 시간이 지남에 따라 이것들을 습득하지만, 아이콘 자체는 대부분 직관적이지 않다. 아이콘들의 의미를 해독하기 위한 매뉴얼이 필요하다. 아이콘에 익숙하지 않은 은유를 사용하면 이해하기 어렵다. 안전벨트 "기억 등" (왼쪽에서 세 번째)은 거의 글자 그대로여서 우리는 빨리 알아볼 수 있다. "전동 파워 조종장치 시스.. 공감수 1 댓글수 0 2020. 3. 13.
솔리드 또는 밑줄 텍스트 필드를 사용하지 않는 이유 텍스트 필드는 몇 년 동안 양식적으로 발전해 왔다. 디자이너들은 함께 점점 더 창의적이 되고 있지만, 때로는 너무 창의적이다. 많은 사람들의 눈길을 끄는 한 가지 특별한 스타일은 밑줄 텍스트 필드다. 참신하고 미니멀한 모습이 그것을 적용하도록 끌어들일 수도 있다. 하지만 그것이 어떻게 사용자 행동에 영향을 미치는지 이해할 때, 다시 생각해보게 될 것이다. 밑줄 텍스트 필드는 사용자가 인식하고 누르기 어렵다. 만약 사용자가 필드를 인식하고 탭 하는 것에 어려움을 겪는다면, 당신이 디자인한 포맷에 작성을 시작하거나 끝낼 수 없을 것이다. 이러한 문제들은 사용자의 좌절이나 작성 포기, 낮은 전환율로 이어진다. 모든 사용자가 밑줄 텍스트 필드에 문제를 느끼는 것은 아니다. 기술에 익숙한 보통의 사용자들은 쉽게 .. 공감수 0 댓글수 0 2020. 3. 12.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.