효과적인 디자인 프레임워크를 구축하는 방법(무료 스케치 UI 프레임워크 포함)

디자인 세계에 오랫동안 있었다면 디자인 프레임워크, UI 프레임워크, UI 키트 또는 패턴 라이브러리라는 용어를 들어봤을 것입니다. 그것들은 모두 동일한 것을 참조합니다. 즉, 제품 전체에서 사용되며 해당 디자인 언어를 제공하는 디자인 표준, 템플릿, UI 패턴 및 구성 요소의 시스템입니다.

이전에 디자인 프레임워크를 만든 적이 없다면 시작하는 것이 부담스럽고 ​​시간이 많이 걸리는 것처럼 보일 수 있지만 디자인 작업의 속도가 빨라지고 전반적으로 효율성이 높아집니다.

디자인 프레임워크가 해결하는 주요 문제, 프레임워크가 필요한 이유, 구축할 때 생성해야 하는 구성 요소에 대해 간략히 설명하겠습니다. 기사 후반부에서 무료로 다운로드할 수 있는 Sketch UI 프레임워크를 찾아 자신만의 디자인 프레임워크를 만들 수 있습니다.

디자인 프레임워크란 무엇입니까?

모든 사용자 인터페이스 디자인은 빈 아트보드로 시작하며 모든 디자이너는 빈 캔버스를 완전히 작동하는 제품으로 변환하는 데 사용하는 프로세스를 가지고 있습니다. 이 프로세스에는 생성된 모든 작은 디자인 구성 요소와 디자이너가 색상에서 버튼 및 그 사이의 모든 것에 이르기까지 응집력 있는 전체를 구축하기 위해 거쳐야 하는 단계가 포함됩니다.

종종 이 작업은 반복적이며 상호 연관된 패턴 및 구성 요소의 시스템을 생성하여 통합하고 더 효율적으로 만들 수 있습니다. 즉, 디자인 프레임워크 .

디자인 프레임워크는 다음과 같은 여러 문제를 해결합니다.

• 제품 디자인의 불일치를 제거합니다.
• 디자인 팀과 제품 팀 간의 협업, 효율성 및 의사 소통을 향상시킵니다.
• 디자인 프로세스의 후반부에 디자인 업데이트를 하면 덜 답답합니다.

첫 번째 문제: 제품의 불일치

일관성은 좋은 디자인을 훌륭한 디자인으로 바꿉니다. 일관성은 사용자가 디지털 제품을 사용할 수 있는 UX, 일반 사용성 및 효율성을 향상시킵니다. 작은 웹 사이트, 앱 또는 대규모 SaaS 제품이든 디자인의 불일치는 제품의 모양, 느낌, 신뢰성 및 사용자 경험을 손상시킵니다.

팀이나 디자이너가 작업을 너무 빨리 수행하거나 즉석에서 변경하면 불일치가 자주 발생합니다. 때때로 디자이너는 고객이나 이해 관계자에게 변경 사항이 어떻게 생겼는지 신속하게 보여줌으로써 다른 것을 요구하는 응답을 합니다. 갑자기 디자인 팀은 4가지 다른 녹색 음영을 발견했고 어느 것이 기본 버튼 색상인지 확신할 수 없습니다.

디자인 프레임워크는 일관된 표준을 설정하여 이 문제를 해결합니다.

두 번째 문제: 협업과 커뮤니케이션의 격차

개발 프로세스 중에 여러 팀 구성원이 프로세스의 서로 다른 지점에서 설계 작업에 참여하는 경우 팀을 안내할 표준 세트가 없으면 혼란스러울 수 있습니다.

디자인 프레임워크는 커뮤니케이션 프로세스를 간소화하고 명확한 기준과 방향을 제시함으로써 협업과 효율성을 높입니다. 더 이상 어떤 색상이나 글꼴이 사용하기에 적합한지 알아내기 위해 앞뒤로 시간을 허비할 필요가 없습니다.

세 번째 문제: 후기 설계 변경

디자이너는 이미 120개의 아트보드가 개발된 디자인 파일에서 단일 색상 변경을 몇 번이나 수행해야 합니까? 200개 구성요소의 일부인 아이콘을 몇 번이나 변경해야 합니까?

변경은 설계 프로세스 전반에 걸쳐 불가피하며 제품이 개선되는 방식이지만 설계자가 원하는 것보다 늦게 발생하는 경우가 많습니다. 디자인 프레임워크는 객체 지향 구성 요소 시스템을 기반으로 하기 때문에 이러한 후반 변경을 훨씬 덜 고통스럽게 만듭니다. 한 번만 변경하면 전체 디자인에 영향을 미칩니다.

디자인 프레임워크를 만드는 방법

이제 디자인 프레임워크가 무엇이며 해결하는 문제를 알았으므로 이를 만드는 방법에 대해 이야기해 보겠습니다(그리고 기사 뒷부분에서 제공되는 Sketch UI 키트 다운로드에 포함된 내용).

이 기사에 사용된 디자인 프레임워크는 Sketch에서 "기호"로 알려진 특정 구성 요소 계층을 사용하여 배치된 단일 Sketch 파일입니다. 이러한 기호를 사용하면 클릭 한 번으로 파일 전체의 변경 사항을 쉽게 구현할 수 있습니다. "마스터" 구성 요소의 한 가지 변경 사항인 "심볼"은 다른 모든 경우에 즉시 반영됩니다.

디자인 프레임워크 계층

잘 작동하는 디자인 프레임워크를 만들려면 먼저 견고한 시각적 계층 구조를 설정해야 합니다. 색상 및 타이포그래피와 같은 가장 보편적인 구성 요소를 먼저 디자인합니다. 그런 다음 버튼 및 입력 구성 요소와 같은 더 작은 것으로 작업합니다. 집을 짓는 것과 같다고 생각하십시오. 먼저 기초를 만들고 프로젝트가 진행됨에 따라 다른 부분을 추가하십시오.

색깔

색상은 UI 디자인 프레임워크 계층에서 가장 중요한 요소입니다. 디자인의 모든 단일 구성 요소는 색상을 사용합니다. 색상은 사람들의 강한 반응과 감정을 이끌어내고 제품의 전체적인 모양, 느낌 및 톤을 결정합니다.

좋은 방법은 색상을 그룹으로 나누는 것입니다.

1. 기본 색상 은 기본 브랜드 색상으로 일반적으로 프로젝트의 일반적인 색상 구성표를 만들고 버튼과 같은 중요한 구성 요소에 사용됩니다.
2. 보조 색상 은 기본 색상표를 보완합니다. 종종 기본 색상의 다른 음영, 채도 또는 색조입니다. 회색조 는 일반적으로 타이포그래피 또는 배경에 사용됩니다. 5~8단계의 회색이면 충분합니다.
3. 시스템 피드백 색상 은 디자이너가 종종 잊어버리는 중요한 그룹입니다. 이러한 색상은 경고, 경고 및 알림을 포함한 시스템 메시지를 표시합니다.

그리드: 디자인 공간

색상이 선택되면 다음 단계는 그리드를 설정하는 것입니다. 그리드는 페이지의 다른 모든 구성 요소를 올바른 위치와 순서로 유지합니다. 전체적인 디자인 공간입니다.

그리드에는 수직 및 수평 의 두 가지 유형이 있습니다.

수직 그리드는 가장 일반적으로 사용되는 그리드로 모든 것을 수평으로 정렬합니다. Bootstrap 또는 이전 960px 그리드와 같은 널리 사용되는 그리드 시스템이 많이 있습니다.

수평 그리드는 그렇게 일반적이지 않습니다. 타이포그래피에는 가로 그리드가 사용됩니다. 단락의 세로 리듬을 생성하며 신문에서 흔히 볼 수 있습니다.

수정자: 스타일 규칙

색상 및 그리드 외에도 디자인 프레임워크 계층에서 상위에 있는 구성 요소가 하나 더 있습니다. 바로 수정자입니다. 이들은 자율적 구성요소로 사용할 수 없으며 다른 구성요소를 수정하거나 스타일을 지정하는 데 사용됩니다.

이 그룹은 프로젝트에 스타일을 가져오고 모양 이나 그림자 와 같은 미학을 담당하는 구성 요소를 포함합니다. 프로젝트의 후반 단계에서 개별적으로 변경하는 것은 번거로울 수 있습니다.

수정자를 모든 후속 빌딩 블록에 대한 매개변수로 취급합니다. 직사각형, 둥근 직사각형 및 원의 세 가지 모양으로 스케치 기호를 만듭니다. 이러한 모양을 사용하여 버튼, 입력 구성 요소, 양식 필드 등 및 배경 요소를 포함한 UI의 모든 단일 구성 요소를 만듭니다.

이 기술을 통해 디자이너는 UI 구성 요소의 모양보다 UX에 더 집중할 수 있습니다. 또한 기본 모양으로 쉽게 돌아가 스타일(예: 모서리 반경)을 변경하면 연결된 모든 것이 자동으로 업데이트됩니다.

타이포그래피: 콘텐츠

타이포그래피는 마지막으로 중요한 디자인 프레임워크 구성 요소입니다. 두 그룹으로 나눌 수 있습니다. 머리글 및 단락과 같은 정적 페이지 복사; 버튼, 탐색 또는 입력 필드와 같은 대화형 구성 요소 복사.

모든 제목(H1, H2, H3 등)과 단락의 스타일과 크기를 디자인합니다. 정적 페이지 사본에는 일반적으로 스타일(색상 또는 무게) 변형이 많지 않습니다. 정적 페이지 복사 스타일과 관련된 유일한 변형은 배경이 밝은지 어두운지 여부입니다. 따라서 정적 페이지 복사가 둘 다에서 작동하도록 하려면 두 가지 색상 세트를 만드는 것이 가장 좋습니다.

버튼이나 시스템 피드백 메시지와 같은 대화형 구성 요소에 나타나는 문구는 여러 변형이 있을 수 있습니다. 예를 들어, 시스템 피드백 메시지는 메시지 유형(경고, 오류, 성공 등)에 따라 4가지 다른 배경색으로 표시될 수 있습니다. 버튼 레이블도 다른 배경에 있을 수 있습니다.

이 그룹을 디자인 프레임워크에 포함시키면 타이포그래피에 대해 전체적으로 생각할 때 도움이 됩니다. 먼저 일반 버튼 레이블 텍스트를 만들고 두 번째로 변형을 만듭니다. 이렇게 하면 너무 많은 글꼴 크기로 끝나는 것을 방지하는 데 도움이 됩니다. 프레임워크에서 새 UI 구성 요소를 만들 때 항상 맞는 기존 타이포그래피 스타일이 있는지 확인하십시오.

아이콘

디자인 시스템에는 정보 아이콘과 사용자 인터페이스 아이콘의 두 가지 아이콘 그룹이 있습니다. 첫 번째 그룹은 일반적으로 일러스트레이션 시스템의 일부이며 UI 상호 작용 구성 요소(예: 버튼)에 사용되지 않습니다. 두 번째 그룹인 UI 아이콘은 버튼, 레이블 또는 테이블과 같은 보다 복잡한 구성 요소에 의미를 추가하면서 공간을 매우 적게 차지합니다. UI의 아이콘은 "편집", "복사", "다운로드" 및 "제거"와 같은 기능 트리거로 사용할 수도 있습니다.

화살표, "추가"(+) 또는 "닫기"(x)와 같이 UI 상호 작용에 사용되는 간단한 아이콘으로 시작합니다. 다른 크기(12px, 16px, 24px 32px)로 디자인하는 것이 좋습니다.

구성품

버튼

버튼은 의심할 여지 없이 UI 디자인에서 가장 중요한 구성 요소 중 하나이며, 수년에 걸쳐 디자인 트렌드가 왔다갔다하면서 많은 변화를 겪었습니다.

버튼을 디자인할 때 개별 "상태"를 디자인해야 합니다. 일반적으로 버튼에는 여러 상태가 있으며 현재 상태(유휴, 호버, 눌림, 비활성화, 활성 등)를 나타내기 위해 사용자에게 시각적 피드백을 제공합니다.

이를 수행하는 두 가지 방법이 있습니다. 첫 번째는 각 상태(일반, 활성, 호버 및 눌림)에 대해 별도로 버튼 모양을 디자인하는 것입니다. 이 솔루션은 시간이 많이 소요될 수 있지만 결과적으로 많은 유연성을 제공합니다. (이 방법은 아래에 포함된 무료 Sketch UI 프레임워크에서 사용되었습니다.)

두 번째 방법은 초기 상태를 기반으로 모든 상태를 디자인하는 것입니다. 예를 들어, 각 상태의 색상, 채도 또는 밝기를 변경하는 하나 의 스케치 기호를 만듭니다.

이렇게 하려면 기호를 스케치 혼합 모드(색조, 채도 또는 오버레이) 중 하나를 사용하여 버튼 오버레이로 배치합니다. 채도를 변경하려면 일반 버튼 위에 색조 혼합 모드 가 있는 검은색 직사각형을 사용하십시오. 오버레이 불투명도를 나중에 변경하면 버튼이 다소 포화 상태가 됩니다.

입력 구성 요소

입력을 통해 사용자는 애플리케이션과 통신하고 데이터를 업로드할 수 있습니다. 버튼과 함께 입력 필드와 같은 구성 요소를 사용하면 간단한 웹 응용 프로그램을 만들 수 있습니다. 버튼과 마찬가지로 다른 상태의 입력 구성 요소를 만드는 것이 가장 좋습니다. 디자인 프레임워크에 따라 다르지만 최소한 비어 있음, 채워짐 및 오류 상태를 만드는 것이 좋습니다.

복잡한 구성 요소

이 단계에서 디자인 프레임워크는 기능하는 제품을 만드는 데 필요한 모든 것을 갖추고 있기 때문에 완전한 것으로 간주될 수 있습니다. 그러나 카드, 테이블, 날짜 선택 도구, 차트 및 양식과 같은 UI 프레임워크에 대해 더 복잡한 UI 구성 요소를 만드는 데 더 많은 시간을 할애하는 것이 종종 가치가 있습니다.

섹션

이 단계에서 응용 프로그램이나 웹 사이트의 가장 일반적인 섹션을 만들어 디자인 프레임워크를 추가로 개발할 수 있습니다. 탐색, 헤더, "회사 소개" 섹션 및 갤러리와 같은 것을 디자인함으로써 디자이너는 프로젝트의 후반 단계에서 시간을 절약할 수 있습니다. 제품의 다른 섹션에 대한 여러 변형을 생성하면 라인을 따라 다른 프로젝트에 더 쉽게 조정할 수 있습니다.

디자인 프레임워크 모범 사례

디자인 프레임워크를 지속적으로 테스트

테스트는 모든 설계 또는 개발 프로세스에 포함되어야 합니다. 작은 디자인 조각을 만들고 "스트레스 테스트"하여 오류 및 누락된 구성 요소를 방지합니다. 예를 들어 처음에 생성된 컴포넌트를 변경하면 최근에 추가된 컴포넌트도 변경되는지 확인합니다.

간단한 UI 구성 요소 만들기

가능한 한 많은 디자인 사용 사례를 미리 생각하면서 구성 요소를 단순하게 유지하면 미래에는 어떤 스타일도 다룰 수 있습니다. 모든 프로젝트에 쉽게 조정할 수 있을 만큼 유연하게 유지하면서 단순한 모양으로 UI 구성 요소를 만드는 것이 가장 좋습니다.

단일 스타일에 집중하지 마십시오

디자인 프레임워크는 보편적이어야 하므로 특정 스타일에 집중하기 보다는 스타일을 만드는 데 사용할 수 있는 구성 요소에 집중해야 합니다.

나만의 디자인 프레임워크 만들기

다음 프로젝트에서는 초기에 시간을 들여 신중하게 디자인 프레임워크를 구성하세요. 전반적인 디자인 프로세스를 개선하고 효율성을 높이며 제품의 디자인 일관성을 향상시켜 사용성을 향상시킨다는 것을 알게 될 것입니다. 120개의 Sketch 아트보드에서 이러한 아이디어가 단 몇 초 만에 실현되면 시간을 절약하고 디자인 아이디어를 보다 효과적으로 전달하며 고객과 이해 관계자를 기쁘게 할 수 있습니다.

나만의 디자인 프레임워크를 시작할 준비가 되셨습니까?

여기에서 스케치 파일을 다운로드하십시오. 사용 방법에 대한 지침이 포함되어 있습니다.

영감을 주는 디자인 시스템 및 UI 프레임워크

디자인 프레임워크에 대해 더 많이 이해하는 가장 좋은 방법 중 하나는 기존의 대기업에서 이를 사용하는 방법을 조사하는 것입니다. 이러한 유형의 회사를 팔로우하고 그들의 접근 방식에 대해 알아보십시오.

Google의 Material Design – 현재 세계에서 가장 인기 있는 디자인 프레임워크 중 하나입니다. Google이 전체 디자인 프로세스를 계층화하고 구성요소의 유용한 계층 구조를 구성하는 방법을 알아보세요.

IBM의 디자인 언어 – IBM은 모든 세부 사항에 대한 심도 있는 설명을 포함하여 전체 디자인 프로세스를 공유합니다. 또한 간단한 아이콘에서 UI 애니메이션 라이브러리에 이르기까지 디자인 언어에서 많은 리소스를 공유합니다.

Atlassian – 또 다른 훌륭한 학습 자료입니다. 그들의 제품 스타일 가이드는 공부하기에 좋은 디자인 시스템입니다. 그들은 웹 GUI 팩, 수많은 구성 요소와 개념이 포함된 스케치 파일을 공유합니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법