스타일 가이드 및 스타일 안내 작업에 대한 디자이너 가이드

a 만들기 브랜드 정체성 쉬운 일이 아닙니다. 힘든 노력이 필요하지만 가장 보람있는 창의적인 작업 중 하나이기도합니다. 종종 웹 프로젝트 인터페이스 디자인으로 브랜딩 믹싱. 두 영역 모두에서해야 할 일이 많기 때문에 혼란 스러울 수 있습니다.. 스타일 가이드 과 스타일 타일 웹 디자이너를위한 훌륭한 자료이며, 비슷하게 들리는 반면, 그들은 성취합니다. 두 가지 다른 일.

이 글에서는이 두 가지를 탐구하고 이러한 창의적 자산에서 얻을 수있는 이점에 대해 설명하고자합니다. 모든 사람이 스타일 가이드 또는 스타일 타일을 만들 필요가 없습니다. 그러나 모든 설계자는 최소한 이들이 무엇인지, 어떻게 작동하는지 이해해야합니다..

웹 스타일 가이드

스타일 가이드에 대한 다양한 의견을 읽었습니다. 어떤 사람들은 이것이 디지털 목업이라고 말하며, 다른 사람들은 코드 기반 스타일 가이드가 가장 유용하다고 말합니다..

어쨌든 스타일 가이드의 목표는 다른 프로젝트와 마찬가지로 웹에서도 동일합니다. 그것은 정의한다. 일관된 패턴, UI 모듈 및 광고 소재 환경 설정 디자인 프로세스에서 사용됩니다. 특정 요소에 대해 매우 구체적이고 완벽한 픽셀 측정을 규정 할 수 있습니다. 또는 시각적 인 예와 함께 지침을 제공 할 수도 있습니다..

스타일 가이드를 할 올바른 방법은 하나도 없습니다. 유일한 잘못된 길은 단순히 리소스를 만드는 것입니다. 다른 사람들이 이해할 수 없다..

목표는 저작물을 만드는 것입니다. 시간의 시험을 견디다.. 그것은해야한다 편집을 위해 열려있다. 새로운 자원이 생성되면. 팀에 합류 한 사람이라면 쉽게 가이드에 들어갈 수 있습니다..

스타일 가이드가 있어야합니다. 프로젝트에 필요한 세부 사항. 일반적으로 재사용 가능한 자산, 타이포 그라피, 버튼, 색상 견본, 텍스처 및 일반 페이지 요소.

우리는 최근에 생활 스타일 안내 도구 당신이 처음부터 생활 스타일 가이드를 만드는 데 도움이 될 수 있습니다. 이 생활 가이드는 프론트 엔드 개발자에게 더 유용하지만 디자이너와 마찬가지로 유용 할 수 있습니다. 이 주제에 대한 자세한 내용은이 스매싱 잡지 게시물을 참조하십시오..

내 가장 좋아하는 리소스는 StyleGuides.io입니다. 그것은 웹 스타일 가이드의 기본 사항, 포함 실제 예제 과 사례 연구.

MailChimp의 패턴 라이브러리는 StyleGuides.io에서 찾을 수있는 최고의 예제 중 하나입니다. 온라인 라이브 스타일 가이드입니다. MailChimp의 그리드, 타이포 그라피 및 페이지 요소를 정의합니다..

웹 회사의 스타일 가이드를 디자인 할 때는 모든 것을 온라인에 두는 것이 일반적이지만, 내부 가이드, 로컬 인트라넷에 보관하거나 사용자 로그인 페이지 뒤에 개인적으로 호스트 할 수 있습니다. 스타일 가이드에 액세스하는 방법은 실제로 중요하지 않습니다. 그들은 모두 특정 색상, 패턴 및 비주얼을 전달하는 동일한 목적을 수행합니다. 웹 프로젝트의 주제와 일치한다..

주제에 대해 자세히 알아 보려면 스타일 가이드에 대한 다음 게시물을 확인하십시오.

• 프런트 엔드 스타일 가이드 (24ways.org)
• 웹 사이트 스타일 가이드 만들기 (creativebloq.com)
• 완벽한 웹 디자인 스타일 가이드 만드는 방법 (dtelepathy.com)

스타일 타일로 분기

스타일 타일 모두 다른 짐승이다. 이 타일들은 초기 디자인 단계에서 사용 된 창의적인 자산 특정 미학을 정립하려고 할 때.

Style Tiles 웹 사이트는 Samantha Warren이 만들었으며 아마도 여러분이 알아야 할 모든 것이 있습니다. 있다 특정 템플릿 없음 스타일 타일 디자인 하지만 사만다의 사례는 제목과 단락 종류, 링크, 패턴, 과 가능한 색상 선택 함께 브랜드 로고.

스타일 타일로 작업 할 때 궁극적으로 목표는 현재 2-3 가지 다른 스타일의 타일 클라이언트 또는 크리에이티브 디렉터에게 이 타일들은 무드 보드보다 더 자세하다., 아직 풀 모크 업보다 훨씬 덜 상세하다..

타일은 해당 타일을 웹 사이트의 정체성과 분위기. 사만다는 격려한다. 형용사 사용하기 각 타일을 자세히 설명하기.

고객은 다른 타일들을 들여다 보아라., 과 좋아하는 작품을 선택하십시오.. 이 시간을 절약 해줍니다. 클라이언트가 이미 원하는 자산을 보았 기 때문에 설계 할 때 상당한 수정이 발생할 가능성이 적습니다..

다음은 스타일 타일 웹 사이트의 위대한 견적입니다.

스타일러 타일을 인테리어 디자이너의 툴킷과 비교하면 유추 할 수 있습니다. 당신은 고객이 대부분의 색상과 글꼴을 싫어한다는 것을 깨닫게하기 위해서 픽셀 완벽한 모형으로 노력하고 싶지는 않습니다..

대신 스타일 타일을 사용하여 공통 테마 또는 시각적 언어 전체 사이트에서 사용할 수 있습니다. 여기에는 브랜딩 / 신원 또한 포함 할 수도 있습니다 UI 기능, 드롭 다운 메뉴 또는 CTA 버튼.

다음과 같이 사용하십시오. 제공 가능한 자산 초기 단계. 풀 모크 업을 완료하면 더 이상 스타일 타일을 참조 할 필요가 없습니다. 그럼에도 불구하고 스타일 타일은 창의적인 과정에서 중요한 요소가 될 수 있습니다. 디자이너 시간 절약 과 선택할 수있는 다양한 옵션 제공.

네가 원한다면 스타일 타일을 더 깊이 파헤 치다. 관련 게시물을 확인하십시오..

• 스타일 타일 및 작동 방식
• 작풍 도와 : 가득 차있는 디자인 Comps에 대안
• 스타일 타일 만들기 : 디자인 방향을 쉽게 접근 할 수 있습니다.

스타일 가이드와 스타일 가이드

스타일 가이드와 스타일 타일의 차이점은 모호하지만 확실합니다. 에이 스타일 가이드 훨씬 더 상세한 ~로 사용되어야합니다. 지속적인 참조 가이드 창조적 인 팀을 위해. 에이 스타일의 타일 ~로 사용할 수 있습니다. 무드 보드 에 시각적으로 아이디어 플롯 귀하 자신이나 고객을 위해 그들은 종종 아이디어 탐험하기, 프로젝트가 끝나면 많은 목적을 달성하지 못합니다..

스타일 타일은 종종 가장자리 주위에 훨씬 거칠고 사용됩니다. 전적으로 초기 창조 과정에서. 스타일 가이드는 사용하기위한 것입니다. 전체 설계 프로세스에 걸쳐 과 향후 참조를 위해 이후에도 사이트에서 작업 할 수있는 다른 디자이너의 경우.

두 가지 모두 장점과 단점이 있습니다. 스타일 타일은 빠르고 재미있는, 그러나 일시적인 자연에서. 스타일 가이드는 철저한 과 시각적 문서처럼 행동한다., 그러나 그들은 또한 많은 일을해야한다..

그래서 어느 것을 사용해야합니까? 궁극적으로 프로젝트에 달려있다..

소규모 프로젝트 중소 기업 웹 사이트의 경우 스타일 타일을 사용하는 것이 좋습니다. 소기업 사이트에 대한 전체 스타일 가이드를 작성하는 데는 너무 많은 작업과 청구 가능 시간이 필요합니다. 이것은 아마 대부분의 클라이언트를위한 비용의 값이있는이지 않습니다.

그러나 대형 프로젝트 NY Times를 재 설계하는 것과 같이 스타일 타일과 스타일 가이드 모두에서 도움이 될 것입니다..

언어와 기분 찾기 새로운 프로젝트는 항상 가치있는 프로세스입니다. 이것이 스타일 타일을 만드는 이유입니다. 거의 모든 시나리오에 완벽하다..

당신은 또한 얻을 수 있습니다. 이러한 자산을 만들지 않고. 일부 디자이너는 이동합니다. 와이어 프레임에서 바로 에 상세한 모형. 그리고 일부 고객은 사용되지 않기 때문에 스타일 가이드를 원하지 않습니다..

프로젝트별로 작업하고 각 프로젝트에 가장 적합한 것을 결정하십시오..

실제 예제

이것을 덮어서 마무리하겠습니다. 예제들 스타일 가이드와 스타일 타일 모두. Dribbble을 탐색하면서 이러한 디자인을 발견했으며 자신의 스타일 가이드 또는 스타일 타일에서 원하는 품질을 보여 주었다고 생각합니다..

스타일 가이드

이 놀라운 에어 비앤비 스타일 가이드는 Derek Bradley가 제작했습니다. 매우 간단하지만 주요 패턴, 색상 및 페이지 요소 디자인에서 발견되는.

디자이너 Naoshad Alam이 만든 더 큰 디지털 스타일 가이드가 있습니다. 이 예는 훨씬 조직화되어있다. 와 색상, 활자체, 양식, 인터페이스 요소 및 기타 UI 기능에 대한 섹션.

더 자세한 스타일 가이드는 이러한 모든 디자인 요소를 웹에 배치하고 코드 스 니펫 포함 각각에 대해.

디자이너 Cupi Wong이 AfterShip을 위해이 안내서를 만들었습니다. 타이포그래피, 버튼, 색상 선택 및 일반적인 페이지 요소는 신중하게 제작되며 섹션으로 구성.

이것은 또한 웹으로 포팅 될 수 있으며, 온라인 참조 문서로서 훨씬 더 크게 구축 될 수 있습니다..

UI 디자이너 인 Greg Dlubacz는 웹 프로젝트를위한 UI 스타일 가이드를 공유했습니다. 이 일은 심각하게 거대합니다. 전체 화면 미리보기는 21,000 픽셀에 이릅니다.!

내가 본 중 최고의 디지털 스타일 가이드 중 하나입니다. 팀 구성원이 참조 할 수 있도록 온라인 설명서 페이지로 이식 할 수도 있습니다..

스타일 타일

UI / UX 디자이너 Abdus Salam은 유기농 식품점 웹 사이트 용 스타일 타일을 만들었습니다. 그것은 매우 기초적입니다. 평면 디자인 요소, 일부 사소한 UI 기능, 및 색상 팔레트.

디자이너 Adrian Cantelmi는 실제로 자신의 divest 스타일 타일에 대해 상세히 설명했습니다. 그것은 색깔과 인쇄술을 가지고 있습니다. 벡터 일러스트.

이 벡터는 브랜드, 분위기 및 전반적인 색 구성표 정의 웹 사이트.

월드컵 고문단 재 설계는 매우 기본적인 기능을 갖춘 자체 스타일 타일을 가지고 있습니다. 몇몇 아이콘, 몇 가지 색상 선택, 몇 개의 버튼 디자인. 간단 게임의 이름이다..

사이트의 모습을 느낄 수 있다면 한 눈에 그럼 당신이 바로하고있어..

다음은 여행 프로젝트에 사용되는 거부 된 스타일 타일의 재미있는 예입니다. 디자이너 Brennan Gleason은 타일의 작은 샘플만을 제공하지만 여전히 웹 사이트의 분위기를 느껴보세요..

최종 단어

웹에서 검색하면 더 많은 예제, 팁 및 리소스를 찾을 수 있습니다. 건물 스타일 가이드 및 스타일 타일. 하지만이 기사가 두 가지 모두에 대한 입문서가되어이 디자인 자산을 이해하고 작성하는 데 유창 해지기를 바랍니다..