반응형 ᴜx30 명명 규칙 : 디자인 시스템 구성 디자인 시스템을 만들 때 모든 것을 독창적이고 다르게 만들고 싶을 것입니다. 색상 스타일이나 파일에 대한 최고의 이름을 생각해내고 싶은 것이 그 예입니다. 결과적으로 현재와 미래의 시스템을 설정하기 위한 디자인 시스템을 확장하려면 일반적으로 더 많은 작업이 필요합니다. 명명 규칙을 도입을 통해 디자이너와 개발자 간의 효과적인 협업을 구축하여, 모든 프로젝트를 더 쉽게 구현하고 이해하는 데 도움을 줄 수 있습니다. 원칙 명명 규칙은 프로젝트의 원칙과 목표를 정의합니다. 디자인 시스템의 명명 규칙에는 다음과 같은 몇 가지 원칙이 있습니다. 1. 명쾌함과 분명함 이름은 명확하고 모호하지 않게 명명하여, 팀 구성원이 그 의미(공허한 두문자어 및 모호한 약어)를 쉽게 이해할 수 있어야 합니다. 2. 일관성과 조직.. 2024. 3. 17. 아토믹 2.0 - 디자인 시스템을 위한 아토믹 디자인 재검토 아토믹 디자인은 Brad Frost가 새롭게 제시한 디자인과 개발 모두를 위한 훌륭한 방법론이다. 요소의 계층 구조가 사람마다 다르게 해석되는 경우가 많다는 것을 알게 되었기 때문에, 이를 새로운 접근 방식으로 해결하려고 시도했다. 나는 이것을 Atomic 2.0이라고 부른다. Frost의 접근 방식에 대한 우려 #1 Frost는 원자를 더 분해하면 기능을 중지하는 요소로 설명한다. 그는 이러한 이유로 버튼과 양식 레이블을 원자로 분류하지만, 여기서부터 혼란이 시작된다. 전체 형태와 같은 더 복잡한 요소도 제거하기 시작하면, 기능을 중지할 수 있지만 유기체로 분류된다. 이것은 원자인지 아닌지에 대한 해석의 여지를 많이 남긴다. 최근에 모델이 디자인 토큰을 포함하도록 업데이트되었지만, 이는 화학 비유의 개.. 2022. 4. 16. 4개의 스프린트로 기존 프로덕트에 대한 디자인 시스템 구축 "디자인 시스템은 전체 플랫폼을 연결하는 결합 조직 역할을 한다." - Drew Bridewell, Invision 디자인 시스템 구축 디자인 시스템은 디자이너와 개발자를 위한 근간이며, 프로덕트의 새 화면을 구축하는 것에 필요한 모든 스타일과 컴포넌트를 찾을 수 있는 실시간 핵심 문서이다. 디자인 시스템은 팀의 가이드라인이 되어주는 시각적 컴포넌트와 스타일로 구성된다. 디자인 시스템의 목표는 모든 사람, 특히 고객을 위한 응집력 있는 경험을 만드는 것이다. 디자인 시스템이 작동 중이며 새로운 스타일과 컴포넌트가 추가되거나 이전 항목이 업데이트된다. 한 사람 또는 팀이 새로운 항목을 승인하고 디자인 시스템이 생성되면 변경 사항을 문서화하고, 게시하는 일을 담당하는 것이 정말 중요하다. 문제는 — 우리는 .. 2022. 4. 8. 8배수보다 4배수 디자인이 유연한 이유 기술의 발달로 많은 그래픽 디자이너가 UX/UI 디자인으로 전환했다. 나는 아트 디렉션을 공부했기 때문에 그래픽 디자인의 베이스라인 그리드에 더 익숙하다. 약 6년 전 UI 디자인 일을 시작했을 때, 특정한 가이드라인을 따르지 않았다. 그래서 주로 다른 앱과 웹 사이트에서 어떤 간격을 사용하는지 살펴보았고, 곧 모든 사람이 다르게 하고 있다는 것을 알게 되었다. 온갖 다양한 수치를 봤다. 12px, 13px, 15px, 20px.. 당시에 그것은 중요해 보이지 않았었다. 몇 년 전, 나는 Spec.fm에서 Bryn Jackson이 쓴 8포인트 그리드와 두 가지 방법론 "소프트 그리드"와 "하드 그리드"에 대한 글을 읽었다. 디테일을 추구하는 나에게 이곳은 지상낙원이었다. 이후 모든 디자인에 8-Point.. 2022. 3. 31. 디자인 시스템, 컬러 네이밍 정하기 컬러는 모든 디자인 시스템의 기반이 되지만, 숙련된 디자이너에게도 네이밍 지정은 어려울 수 있다. 6년 전, 첫 번째 디자인 시스템을 만들고 QuickThoughts라는 모바일 설문 조사 앱을 지원하기 위한 색상 팔레트를 만들었다. Sketch를 사용했는데, Zeplin이 자동으로 '멋진' 컬러 네이밍을 지정하는 방식이 마음에 들었다. 때문에 모든 색상의 이름을 비슷한 방식으로 바꿨다. 내가 선택한 색상 이름('Laughing Orange', 'Cardboard Tan', 'Shire Green' 등)은 당시에는 합리적으로 보였다. 하지만, 우리 조직이 'iPoll'이라는 유사한 모바일 애플리케이션을 가지고 있는 다른 회사를 인수했을 때 이 결정은 곧 실수로 판명됐다. 우리 조직에 iPoll을 포함/지원.. 2022. 3. 31. 우버 디자이너가 Figma에서 256개의 새로운 디자인 시스템 구성 요소를 프로그래밍 방식으로 구축한 방법 Uber의 Base 디자인 시스템은 Uber 제품 전반에 걸쳐 광범위하게 사용되는 일련의 지도 마커 컴포넌트를 제공하며, 사용자에게 지도를 제공할 때마다 표시된다. 우리는 최근, 지도 마커에 추가 컨텍스트를 표시해야 할 필요성을 알게 되었다. 이를 달성하기 위해 기존 기본 컴포넌트인 배지를 추가하기로 결정했다. 문제는 지도 마커와 배지에 다양한 변형이 있다는 것이었다. 마커는 크기, 바늘 길이, 아이콘 슬롯 및 레이아웃 동작에 따라 사용자 지정할 수 있으며 배지는 여러 크기, 레이블 및 아이콘 스타일을 가질 수 있었다. 배지를 지원하는 지도 마커의 최종 세트는 이러한 모든 옵션의 조합으로 총 256개의 새로운 컴포넌트를 만들어야 했다. 일반적인 접근 방식은 디자이너가 이러한 새 컴포넌트를 수동으로 생성하.. 2022. 3. 30. 이전 1 2 3 4 5 다음
