반응형 ᴜx/ᴀʀᴛɪᴄʟᴇ25 고정 UI 요소를 디자인할 때 고려해야 할 사항 고정 요소는 무엇인가? 고정 요소는 페이지를 아래로 스크롤 할 때 브라우저 뷰포트 내에서 고정된 위치에 유지되는 모든 것이다. 일반적으로 고정 네비게이션에 사용되며, 상단에 고정되어 페이지를 탐색할 때 항상 표시된다. 화면 우측 하단에 고정되어있는 채팅 도움말을 본 적 있을 수도 있다. 어떤 문제를 일으킬 수 있을까? 어떤 한 요소를 지속적으로 표시하면, 주의가 산만해져서 유저가 찾고 있는 콘텐츠에 집중하기 더 어려워질 수 있다. 고정 요소도 마찬가지다. 화면에 클릭 유도 문구가 있어도, 고정된 채팅 아이콘이 화면 위에 있는 경우라면 그것을 놓칠 수도 있다. 이 문제는 키보드 네비게이션을 고려하거나, 고정 요소에 의해 집중되어야 하는 컨텐츠가 가려질 때 상황을 더욱 악화시킨다. 종종 간과되는 고정 요소의.. 2022. 3. 11. Figma의 인터랙티브 컴포넌트 기능 이해하기 Figma는 요즘 많은 신기능 개발에 박차를 가하고 있다. 그 중 내가 주목하는 것은 인터랙티브 컴포넌트다. 이 기능에 의해, 재이용 가능한 인터랙티브 컴포넌트를 빠르게 조립해 클릭 가능한 프로토타입으로 디자인에 생명을 불어넣을 수 있다. 이 기능이 개발되기 전에는 인터랙티브 프로토타입을 만들 수 있었지만, 인터랙티브 기능을 보여주기 위해 여러 프레임을 복제하고 조정하는 데 많은 노력이 필요했다. 업데이트를 할 때 효율적인 프로세스가 아니라고 할 수 있다. 신기능의 차이는컴포넌트 수준에서 Variants 간 인터랙션을 정의할 수 있다는 것이다. 그런 다음 이러한 인터랙션은 컴포넌트에 새겨져, 컴포넌트의 모든 인스턴스에서 사용할 수 있다. 이전에는 전체 프레임을 연결하여 프로토타입을 만들었다. 그 후 F.. 2022. 3. 9. 올바른 디자인 시스템 만들기 : 컴포넌트 오늘날 디자인 시스템은 모든 디자이너와 개발자로 이루어진 팀의 주요 도구 중 하나다. 아이콘에서 페이지 템플릿에 이르기까지 프로덕트의 모든 응용 가능한 디자인 요소가 어떻게 보이는지를 정의한다. 디자인 시스템은 새로운 레이아웃의 생성, 페이지 개발, 프로덕트 구성 요소에 대한 공통된 이해를 단순화하고 프로덕트의 사용성 향상에 도움을 준다. 디자인 시스템이 제품에 해를 끼칠 수 있는 방법 그러나 디자인 시스템은 어디에나 모두 그대로 사용 가능한 보편적인 도구가 아니다. 디자인된 프로덕트의 전략에 따라 모양과 크기가 다르다. 디자인 시스템을 만들고 유지하는 데 시간과 리소스를 투자하기 전에, 필요한 특정 목적이 무엇인지 생각해보아라. 이 과정은 나중에 많은 두통을 덜어 줄 것이다. 단지 현대적이고 트렌디하다.. 2020. 11. 10. 디자인 검증: 디자인이 좋은지 어떻게 알 수 있을까? 인트로 모든 프로젝트를 진행하면서, 디자이너들은 셀 수 없이 많은 결정을 내린다. 여기에는 글꼴, 마이크로 카피, 유저 플로우, 프로덕트 구조가 포함된다. 이런 리스트는 끝이 없다. 하지만 이 과정에서의 선택이 최적의 것인지 아니면 최소한 좋은 것인지를 알아내는 것은 꽤나 까다롭다. 이것은 우리에게 이 아티클의 주제를 가져다준다: 당신의 디자인이 뒤흔들렸는지 어떻게 알 수 있을까. 읽기 전에 몇 가지 고지 사항: 이 글에 제시된 좋은 디자인 검증 방법에 대한 리스트는 결코 포괄적이지 않다. 디자인 검증에 관한 책들이 있다. 그리고 당연히 우리는 덧붙일 수 있다. 여기 설계 검증 방법에 대한 좋은 개요가 있다. 여기서 UX 테스트 프로세스 전체를 확인해보아라. 이 아티클에 제시된 당신의 디자인을 테스트하는.. 2020. 11. 5. 성공적인 디자인 핸드 오프, Design Handoff 프로덕트 창조는 한 부서에서 다른 부서로 팀 내의 아이디어와 형태를 이전하는 긴 연쇄 과정이다. 이 아티클에서는 디자이너와 개발자 간의 상호 작용에 대해 이야기해보겠다. 디자인 핸드 오프 란 무엇인가? 디자인 핸드오프 단계에서는 설계자가 UX와 UI를 통해 창업자의 아이디어, 관리자 및 분석가의 요구 사항 등을 개발자에게 전달할 수 있는 발판을 마련해야 한다. 팀 내 좋은 내부 연결의 도움으로 개발자들은 고객에게 실제 제품을 더 빨리 사용하기 시작할 수 있는 기회를 제공할 것이고, 미래에는 팀 전체가 훨씬 더 빠르게 프로덕트를 개선할 수 있을 것이다. 디자인 핸드 오프가 어려울 때 나쁜 디자인 핸드 오프는 모든 규모의 회사에서 발생한다. 신생 스타트 업은 자신의 혼란 속에서 프로세스를 구축하기가 어렵다는.. 2020. 11. 4. 반응형 디자인의 결함 제거 지난 5년동안 모바일 트래픽의 점유율이 20% 증가했으며, 오늘날 반응형 디자인은 이미 당연한 것으로 받아 들여지고 있다. 2020년에는 모바일에서 모든 웹 사이트에 액세스 할 수 있으며 잘 작동한다. 대부분의 사용자는 스마트폰이나 태블릿에서 제대로 작동하지 않는다는 사실을 알게되면 사이트를 떠나고, Google은 모바일 장치에 최적화되지 않은 경우 검색 결과에서 사이트 순위를 낮춘다. 따라서 반응형 웹 사이트의 디자인에는 정적 웹 사이트의 개발과는 다른 특별한 접근 방식이 필요하다. 디자이너는 반응형 디자인을 사용함에 있어, 먼저 기기(스마트폰, 태블릿 또는 컴퓨터)에 의해 디자인을 결정한 후 기기의 화면 크기에 따라 보여준다. 한편으로 반응형 디자인의 생성은 사이트의 개발과 유지 관리를 단순화한다. .. 2020. 10. 30. 이전 1 2 3 4 5 다음
