활용 방법

디자인시스템 활용 방법

디자인시스템 활용 방법

본 디자인시스템을 통해 정보구조에 따른 세아그룹 표준 UI와 구성요소에 대한 사용과 배치에 대한 규칙을 이해하고 XD포맷으로 제공되는 Layout, Component, Icon kit을 활용하여 서비스 및 시스템 개발 시 활용합니다.

WEB SITE와 PDF로 제공되는 가이드에서 컨셉과 사용규칙을 확인하세요

가이드는 PDF와 WEB SITE, 두가지 채널을 통해 제공됩니다.
가이드에 있는 정보구조의 단계에 따른 표준 레이아웃을 확인 하고 레이아웃의 각 영역 배치 규칙과, 구성요소의 사용 규칙을 확인 할 수 있습니다. 가능한 표준을 준수하길 권장 합니다. 프로젝트 개발 시간을 단축할 수 있고 일정 수준의 접근성과 사용성을 제공할 수 있으며 세아의 브랜드 아이덴티티를 유지할 수 있습니다.

Grid, Color, Font, Icon 제작및 적용 규칙을 확인 하세요

서비스 및 시스템 개발 시 가이드 내의 그래픽 디자인 제작 규칙을 확인하고 활용해 주세요.
사용자에게 일관성 있는 사용성과 PC와 Mobile에 최적화된 UI를 제공할 수 있으며, 세아의 브랜드 아이덴티티를 유지할 수 있습니다.

Layout template을 활용 하세요

개발하려는 시스템 및 서비스의 정보구조 단계에 따라 가이드에서 제공하는 표준 Layout template 을 사용하세요.
정보구조 설계와 개발 기간을 단축 시킬 수 있으며 높은 Quality의 그래픽 디자인을 일관성 있게 유지할 수 있습니다. 기획자와 디자이너는 WEB 가이드 에서 template을 다운받아 업무에 바로 사용할 수 있습니다.

Icon과 Component kit을 활용하세요

개발하려는 시스템 및 서비스의 화면구성을 위해 Icon과 Component kit을 사용하세요.
각 Icon과 컴포넌트는 현장업무용 및 모니터링용, 일반 사무용 화면에 맞게 여러가지의 크기로 제공됩니다. 설계와 디자인, 개발기간을 단축 시킬 수 있으며 일정 수준의 사용성과 높은 Quality의 그래픽 디자인을 일관성 있게 유지할 수 있습니다. WEB 가이드 에서 kit을 다운받아 Adobe XD를 활용한 설계 및 그래픽 디자인에 바로 사용할 수 있습니다.

WEB Site의 Style sheet와 CODE를 사용하세요

Web Site에서 제공하는 Style sheet를 다운로드 받아 HTML을 바로 적용 할 수 있으며, Layout, Component 항목에 있는 CODE를 복사해서 HTML에 바로 사용할 수 있습니다.

Check list를 이용해 점검을 해보세요

Check list의 점검항목을 활용하여 Layout, 구성요소, 그래픽의 표준 준수여부를 점검할 수 있습니다.
점검을 통해 일정 수준의 사용성과 접근성을 유지할 수 있습니다.