오로라 디자인 케이스

Dec 07 2022

아시다시피 여러 디자이너가 서로 다른 시간에 개발 및 복잡한 프로젝트 생성에 참여할 수 있습니다. 다른 사람의 프로젝트를 계속 진행하면서 사용하기 위해 조직화된 요소 및 규칙 시스템을 사용하는 것이 매우 편리합니다.

이것이 바로 우리 프로젝트 중 하나인 Aurora에 필요한 방법입니다. 우리의 임무는 전자 상거래 관리 분야의 플랫폼을 위한 본격적인 인터페이스를 추가로 구축하기 위해 기본 요소의 개념을 만드는 것이 었습니다.

클라이언트는 Design-Kit, 색상, 글꼴, 사용 사례 등을 포함하는 Carbon 시스템을 예로 제공했습니다. 그들의 제품과 유사합니다. 또한 웹 사이트에는 개발에 유용할 수 있는 구성 요소 옵션이 있으므로 Material Design 예제에 중점을 두었습니다.
작업 과정에서 우선 프로젝트의 글꼴, 아이콘 및 주요 색상이 제안되었습니다. 동시에 선택한 글꼴과 아이콘이 서로 어떻게 상호 작용하는지 보여주기 위해 샘플 버튼과 입력을 만들었습니다. 이를 바탕으로 클라이언트는 아이콘의 글꼴, 색상 및 모양을 선택했습니다. 따라서 로고의 색상 중 하나인 분홍색을 기본 색상으로 사용하고 두 번째 색상인 회색을 보조 색상으로 사용합니다.

역할이 표시된 모든 사용된 글꼴 스타일은 Figma 프로젝트의 스타일에 저장되며 목록에서 선택할 수 있습니다.

비슷한 방식으로 색상이 보존됩니다. 그러나 색상 스타일 섹션에서 기본 및 추가 폴더로 나뉩니다. 색상 팔레트를 확장하기 위해 선택한 색상에 흑백을 순차적으로 다른 비율(20%, 40%, 60% 등)로 추가하는 방법을 사용했습니다. 색상 레이아웃이 있는 프레임은 의도된 색상 역할도 나타냅니다.

또한 고객이 제공하는 기성품 세트에서 선택할 수 있는 여러 그림자 옵션이 추가되었습니다.

다음으로 버튼, 입력, 드롭다운 및 언어 선택 버튼의 모양이 선택되었습니다. 모든 버튼은 구성 요소이며 용도에 따라 모양을 프로젝트에서 직접 변경할 수 있습니다. 버튼의 아이콘은 자동 레이아웃 메뉴에서도 변경할 수 있습니다.

샘플 로그인 페이지를 만든 후 언어 선택을 위한 드롭다운 버튼의 모양이 약간 변경되었습니다(더 간결해짐).

입력에는 9가지 옵션이 있으며 아이콘을 사용하거나 사용하지 않고 사용할 수 있습니다. 암호 입력 필드는 다양한 상황에서 사용할 수 있고 고유한 속성을 가지고 있기 때문에 더 많은 옵션이 있습니다. 예를 들어 사용자가 필요한 문자 수를 입력한 경우 비밀번호의 강도와 요소를 녹색으로 표시하는 척도입니다. 인증코드 입력란에 대한 컴포넌트도 따로 만들었습니다.

다음으로 확인란 및 토글에 대한 구성 요소와 텍스트가 있는 동일한 요소에 대한 구성 요소가 생성되었습니다. 또한 크기가 다른 아바타, 그룹이 있는 구성 요소, 툴팁 및 사용 예를 드롭다운 목록과 함께 추가했습니다.

실생활에서 요소와 텍스트가 어떻게 작동하는지 보여주기 위해 클라이언트의 희망 사항을 고려하여 로그인 화면을 만들었습니다. 나중에 어두운 테마가 추가되어 별도의 구성 요소를 만들었습니다.

그리고 어두운 테마에 대한 구성 요소를 설정하기 위해 미리 만들어진 로그인 레이아웃을 사용하고 색상과 투명도의 적절한 조합을 선택했습니다. 일부 요소의 경우 아무 것도 변경할 필요가 없었습니다. 예를 들어 기본 버튼의 경우입니다.

따라서 상당히 짧은 시간 내에 클라이언트는 Figma에서 요소를 편집할 수 있는 간단한 UI 키트를 받습니다. 이는 많은 비용을 들이지 않고도 프로젝트의 주요 문체 초점을 보여줄 수 있는 좋은 방법입니다.