Styleguide 도구 상자 – 템플릿, UI 키트, 도구 및 생성기

스타일 가이드는 조직의 모든 사람이 같은 페이지에 있는지 확인하는 데 필수적인 도구입니다. 결국 일관된 스타일을 유지하는 것은 브랜드 인지도, 가독성에 필수적이며 더 전문적으로 보입니다.

이 Styleguide 리소스의 가장 큰 장점은 의심할 여지 없이 원하는 방식으로 작업할 수 있는 리소스가 있다는 것입니다. 좋아하는 이미지 편집기로 스타일을 수동으로 목업할 수 있도록 하거나 브라우저를 통해 자동으로 생성할 수 있도록 여기 모든 사람을 위한 무언가가 있습니다.

다음은 일관성 추구에 도움이 되는 몇 가지 리소스입니다!

빠른 점프: 스타일 가이드 UI 템플릿, 스타일 가이드 웹 템플릿, 스타일 가이드 생성 도구, 생활 스타일 가이드 도구 및 스타일 가이드 생성기.

스타일 가이드 UI 템플릿

스타일 가이드 미리보기 템플릿 (스케치) by Tony Jones

Sketch 앱을 사용하는 경우 이 무료 스타일 가이드 미리보기 템플릿 을 사용하면 멋지고 깔끔한 스타일 가이드를 개발할 수 있습니다.

Tony Thomas의 UI 스타일 가이드 템플릿(PSD)

UI 스타일 가이드 템플릿 은 색상 견본, 타이포그래피, 아이콘, 형태 및 UI 요소를 특징으로 하는 Photoshop(PSD) 템플릿입니다.

Samantha Warren의 스타일 타일(PSD)

스타일 타일 은 최종 모양이 설정되기 전에 디자인 프로세스의 시작 부분 에서 토론을 위한 더 많은 촉매제로 사용된다는 점에서 흥미롭습니다. 고객이 디자인에 전념하기 전에 가능성을 보여줄 수 있는 좋은 방법입니다.

Mark Ludemann의 반응형 디지털 스타일 가이드(스케치)

때때로 우리는 스타일 가이드를 만능 일반 팔레트로만 생각하는 경향이 있습니다. 반응형 디지털 스타일 가이드 는 한 단계 더 나아가 모바일 장치의 스타일을 정의합니다.

Rafal Tomal의 웹 스타일 가이드(PSD)

Web Style Guide 는 바쁜 디자이너가 프로젝트의 일관성을 유지할 수 있도록 간단한 "치트 시트"를 제공하는 것을 목표로 합니다.

James George의 기본 5페이지 스타일 가이드 템플릿(AI)

기본 5페이지 스타일 가이드 템플릿 은 Adobe Illustrator에서 사용할 수 있는 멋진 템플릿 그룹입니다.

브랜드 가이드라인 템플릿 (AI)

브랜드 가이드라인 템플릿 은 색상, 글꼴 및 하지 말아야 할 예에 대한 명확한 지침과 함께 고객에게 전달할 수 있는 리소스입니다.

ZippyPixels의 Brandbooks 무료 브랜드 지침 템플릿 (AI 및 InDesign)

Brandbooks 무료 브랜드 지침 템플릿 은 브랜딩 스타일 및 문서가 포함된 8페이지 소책자를 인쇄하는 데 사용할 수 있는 인상적인 파일 모음입니다.

스타일 가이드 웹 템플릿

Brad Frost의 스타일 가이드 가이드

Style Guide Guide는 멋진 스타일 가이드를 만들기 위한 상용구입니다.

CSS의 스타일 가이드 템플릿 by CodyHouse

CSS의 스타일 가이드 템플릿은 유연성과 쉬운 업데이트를 염두에 두고 만들어졌습니다.

Brett Jankord의 스타일 가이드 상용구

스타일 가이드 Boilerplate 는 웹 프로젝트에 대한 표준 글꼴, 색상, 기본 스타일 및 패턴을 표시하는 대화식 방법을 제공합니다.

Kemie Guaida의 Bootstrap 스타일 가이드 상용구

Bootstrap Style Guide Boilerplate 는 인기 있는 프레임워크를 사용하여 Styleguide를 생성하는 효율적인 수단을 허용합니다.

스타일 가이드 생성 도구

스타일도코

Node.js를 사용하여 StyleDocco 는 CSS를 읽고 시각적 스타일 가이드를 생성합니다.

스타일다운

Styledown 을 사용하면 CSS 파일에서 마크다운을 사용하여 스타일 가이드를 만들 수 있습니다.

제작사

Fabricator 는 프로젝트 문서를 쉽게 작성하고 대화형 Styleguide를 만들 수 있는 Node.js 도구입니다.

거대 스타일가이드

Styleguide 를 프로젝트와 함께 사용하여 자동으로 업데이트된 라이브 스타일 저장소를 생성할 수 있습니다.

패턴 연구실

Atomic Design은 Pattern Lab 이 구성 요소 기반 스타일 가이드 시스템을 설명하는 데 사용하는 용어입니다. 즉, 디자인의 작은 세부 사항을 다룹니다.

생활 스타일 가이드 도구

SC5 스타일 가이드 생성기

SC5 스타일 가이드 생성기 를 사용하면 웹 브라우저에서 직접 스타일 가이드를 만들고 편집할 수 있습니다.

KSS – Knyle 스타일 시트

KSS 는 Ruby 또는 gem을 사용하는 다른 프레임워크를 사용하여 Living Styleguide를 생성합니다.

문서 CSS

DocumentCSS 를 사용하면 사이트와 함께 변경되는 라이브 스타일 가이드를 만들 수 있습니다.

리빙스타일 가이드 젬

LivingStyleGuide Gem 은 Ruby, Middleman 또는 Padrino를 사용하여 Sass 및 Markdown으로 Styleguide를 생성합니다.

스타일 가이드 생성기

나를 스타일링

Styleguide를 만드는 정말 빠른 방법을 찾고 계십니까? URL을 Stylify Me 에 입력하기만 하면 몇 초 안에 URL을 갖게 됩니다!

Frontify 스타일 가이드

Frontify Style Guide 는 온라인 서비스를 사용하여 Styleguide를 만들고 조정할 수 있도록 함으로써 기본을 뛰어넘습니다.

스타일 가이드 미리보기 템플릿 (스케치) by Tony Jones

Sketch 앱을 사용하는 경우 이 무료 스타일 가이드 미리보기 템플릿 을 사용하면 멋지고 깔끔한 스타일 가이드를 개발할 수 있습니다.

Tony Thomas의 UI 스타일 가이드 템플릿(PSD)

UI 스타일 가이드 템플릿 은 색상 견본, 타이포그래피, 아이콘, 형태 및 UI 요소를 특징으로 하는 Photoshop(PSD) 템플릿입니다.

Samantha Warren의 스타일 타일(PSD)

스타일 타일 은 최종 모양이 설정되기 전에 디자인 프로세스의 시작 부분 에서 토론을 위한 더 많은 촉매제로 사용된다는 점에서 흥미롭습니다. 고객이 디자인에 전념하기 전에 가능성을 보여줄 수 있는 좋은 방법입니다.

Mark Ludemann의 반응형 디지털 스타일 가이드(스케치)

때때로 우리는 스타일 가이드를 만능 일반 팔레트로만 생각하는 경향이 있습니다. 반응형 디지털 스타일 가이드 는 한 단계 더 나아가 모바일 장치의 스타일을 정의합니다.

Rafal Tomal의 웹 스타일 가이드(PSD)

Web Style Guide 는 바쁜 디자이너가 프로젝트의 일관성을 유지할 수 있도록 간단한 "치트 시트"를 제공하는 것을 목표로 합니다.

James George의 기본 5페이지 스타일 가이드 템플릿(AI)

기본 5페이지 스타일 가이드 템플릿 은 Adobe Illustrator에서 사용할 수 있는 멋진 템플릿 그룹입니다.

브랜드 가이드라인 템플릿 (AI)

브랜드 가이드라인 템플릿 은 색상, 글꼴 및 하지 말아야 할 예에 대한 명확한 지침과 함께 고객에게 전달할 수 있는 리소스입니다.

ZippyPixels의 Brandbooks 무료 브랜드 지침 템플릿 (AI 및 InDesign)

Brandbooks 무료 브랜드 지침 템플릿 은 브랜딩 스타일 및 문서가 포함된 8페이지 소책자를 인쇄하는 데 사용할 수 있는 인상적인 파일 모음입니다.

결론

프로젝트를 위한 스타일 가이드를 만들어 클라이언트와 자신을 위한 추가 단계를 수행하십시오. 댓글에서 어떻게 사용하고 있는지 알려주세요!

스타일 가이드 영감을 찾고 있다면 이 게시물을 확인해야 합니다. 영감을 주는 UI 스타일 가이드의 예.