디자인 시스템 - [2] 12가지 세심한 스타일 가이드

스타일 메뉴얼 또는 스타일 가이드는

 

문서, 웹 사이트 페이지, 간판 및 기타 형태의 다른 브랜딩 디자인을 위한 표준 시스템 입니다.

 

스타일 가이드가 존재하는 이유는 브랜드가 사용되는곳 어디에서나 스타일과 형식이 완전히 균일해야하기 때문입니다.

 

로고 사용 방법 및 위치부터 브랜드 색상 및 타이포그래피 규칙에 이르기까지 모든 것을 다룹니다.

 

A style manual, or style guide, is a set of standards for the design of documents, website pages, signage, and any other form of other brand identifier. The reason for their existence is to ensure complete uniformity in style and formatting wherever the brand is used. They cover everything from how and where the logo is used to the brand colours and typography rules.

 

 

 

 

01.Uber

Uber의 온라인 가이드 라인은 포괄적 인 디자인 스타일 가이드를 작성하는 방법에 대한 마스터 클래스입니다.

규칙은 쉽게 탐색하고 예제와 설명을 통해 많은 것을 제공합니다.

일러스트레이션과 색상에 대한 규칙은 특히 흥미 롭습니다.

Uber가 안전 관련 메시징에 파란색을 사용한다는 것을 알고 있습니까?

 

Uber's online guidelines are a masterclass in how to craft a comprehensive design style guide. The rules are easy to navigate through and offer plenty by way of examples and explanations. The rules on illustration and colour are particularly interesting – did you realise that Uber uses blue for safety-related messaging?

 

 

02.IBM

IBM의 스타일 가이드는디자인 사고가 이끄는 문화를 포용하는 명성을 얻은 회사에 대한 기대만큼 철저합니다.

잘 제시된 온라인 안내서는 타이포그래피부터 앱 아이콘 및 브랜딩을 어떻게 사용할 수 있는지에 대한 모든 것을 다룹니다. 이것이 현대적인 디자인 스타일 가이드 입니다.

 

IBM's style guide is just as thorough as you'd expect for a company that's built a reputation for embracing a culture led by design thinking. The well presented online guide covers everything from typography to app icons and how the branding can be used in motion. This is what a modern design style guide looks like. 

 

 

03.Apple Human Interface guidelines

 

애플의 휴먼 인터페이스 규칙은 포괄적이지 않다면 아무것도 아니다.

창작물이 Apple의 장치 및 운영 체제와 완벽하게 통합되기를 원하는 앱 디자이너를 대상으로하는

이 온라인 스타일 가이드는 macOS, iOS, watchOS 또는 tvOS 용으로 디자인 할 때 알아야 할 모든 것을 다룹니다.

 

Apple's human interface rules are nothing if not comprehensive. Aimed at app designers who want their creations to integrate seamlessly with Apple's devices and operating systems, this online style guide covers everything you might possibly need to know – whether you're designing for macOS, iOS, watchOS or even tvOS. 

 

 

04. Urban Outfitters

평균적인 지점은 많은 스쿼터들이 외딴 공장에서 뒤죽박죽 판매를 결정한 것처럼 보일지 모르지만

힙 스터 시장 인 Urban Outfitters는 브랜드 북을 빠르게 살펴볼 때 시각적 인 정체성을 매우 중요하게 생각합니다.

42페이지의 가이드는 Urban Outfitters의 역사와 철학에서 로고 사용, 타이포그래피, 사진 방법론 및 커뮤니케이션에 사용될 음성 톤에 대한 지침에 이르기까지 모든 것을 다룹니다.

 

The average branch might look as though a bunch of squatters decided to hold a jumble sale in a derelict factory, but hipster bazaar Urban Outfitters takes its visual identity very seriously, as a quick flick through its brandbook will reveal. The 42-page guide covers everything from Urban Outfitters' history and philosophy through to logo usage, typography, photography methodology and guidelines on the tone of voice to be used in communications.

 

 

 

05. I Love New York

Milton Glaser의 I Love New York 로고는 놀랍도록 단순하고 상징적인 디자인이므로 50페이지의 브랜드 가이드 라인이

첨부되어 있지 않을 수도 있습니다. 그러나 I Love New York에는 Milton Glaser의 로고보다 더 많은 것이 있습니다.

이는 1977 년에 시작되어 2008 년에 새로 고쳐진 캠페인에서 가장 기억에 남는 부분입니다.

세 심하게 상세한 브랜드 가이드 라인은 뉴욕시뿐만 아니라 뉴욕 주 전체를 나타내는 캠페인의 모든 기반을 다룹니다.

사명 선언문과 브랜드 피라미드, 일관성 및 타이포그래피 지침과 함께 주제별 로고 처리 및 로고 사용 지침을 준수해야합니다.

 

Milton Glaser's I Love New York logo is a wonderfully simple and iconic piece of design, so you might not expect there to be a 50-page set of brand guidelines attached to it. However there's more to I Love New York than Milton Glaser's logo; that's just the most memorable aspect of a campaign launched in 1977 and refreshed in 2008.

The scrupulously detailed brand guidelines cover all the bases for a campaign that represents the whole state of New York and not just New York City. There's a mission statement and brand pyramid, consistency and typography guidelines, plus a whole load of thematic logo treatments and logo usage guidelines to follow.

 

 

06.NASA

NASA (National Aeronautics and Space Administration)의 그래픽 표준 매뉴얼은 NASA가 원래의 문장 기반 로고에서 이제 매우 친숙한 '웜'로고로 변경되었을 때 1974 년 Danne & Blackburn에 의해 작성되었습니다.

이 매뉴얼은 2015 년 킥 스타터 캠페인을 통해 재발급을 위해 소생되었습니다.

Jesse Reed와 Hamish Smyth의 화려한 220페이지 버전의 NASA 문서는 '정적 차폐'패키지와 함께 제공되며 구매할 수 있습니다.

 

The National Aeronautics and Space Administration's Graphics Standards Manual was created by Danne & Blackburn in 1974 when NASA changed from its original crest-based logo to the 'worm' logotype that's now so familiar. The manual was revived in 2015 thanks to a Kickstarter campaign to fund its reissue. Jesse Reed and Hamish Smyth's glorious new 220-page version of the case-bound NASA document comes with 'static shielding' packaging and is available for purchase.

 

 

 

07.British Rail

Creative Bloq 팀의 특정 구성원은 British Rail 기업의 정체성 매뉴얼을 숙지하는 데 몇 시간을 보냈으며 그 이유를 쉽게 알 수 있습니다. 1965년으로 거슬러 올라가는 가이드에 서사적 인 강박 관념이 있으며 일부 그림 문자는 기뻐합니다.

자신의 사본을 소유하고 싶습니까?운이 좋았습니다.성공적인 킥 스타터 캠페인이 끝난 후, 디자이너 Wallace Henning은 지금 주문할 수있는 원본 매뉴얼의 높은 사양을 재현했습니다.

 

The National Aeronautics and Space Administration's Graphics Standards Manual was created by Danne & Blackburn in 1974 when NASA changed from its original crest-based logo to the 'worm' logotype that's now so familiar. The manual was revived in 2015 thanks to a Kickstarter campaign to fund its reissue. Jesse Reed and Hamish Smyth's glorious new 220-page version of the case-bound NASA document comes with 'static shielding' packaging and is available for purchase.

 

 

08. Channel 4

Channel 4의 포괄적 인 스타일 가이드는 브랜드 사용 방식에 대한 혼동의 여지를 남기지 않습니다.이 안내서는 46 페이지로 구성되어 있으며 각 페이지는 깨끗하고 명확하며 페이지 당 하나의 가이드 라인을 나타내며 종종 시각적 참조를위한 그래픽과 함께 제공됩니다.그것이 충분히 세심한 브랜딩 규칙이 아니라면 E4, Film4, More4 등을위한 전용 스타일 가이드가 있습니다.

 

Certain members of the Creative Bloq team have spent hours poring over the British Rail corporate identity manual and it's easy to see why. Epic levels of obsessive behaviour abound in the guide, which dates back to 1965, and some of the pictograms are a delight. Want to own your own copy? You're in luck; after a successful Kickstarter campaign, designer Wallace Henning has created a high-specification recreation of the original manual that you can order now; find out more here.

 

09.Skype

Skype 스타일 가이드는 여러 가지 이유로 훌륭합니다. 멋진 일러스트레이션이 그 중 하나입니다.통신 네트워크는 업계 전문 용어 페이지로 가이드를 채우지 않았으며 이해하기 쉬운 설명과 그래픽을 사용하여 요점을 파악했습니다.

 

Channel 4's comprehensive style guide leaves no room for confusion on how its brand is used. The guide is 46 pages long, each of which is clean and clear, stating a single guideline per page, often accompanied by a graphic for visual reference. If that's not enough meticulous branding rules for you, there are also dedicated style guides for E4, Film4, More4 and more. 

 

 

10.Barbican

 

바비 칸 극장의 정체성은 "로고가 아닙니다. 바비 칸 브랜드를 즉각적으로 인식 할 수 있도록 독특한 모양과 느낌을 만들어 내기 위해 여러 핵심 요소로 구성된 디자인 방식"입니다. 이 가이드가 중요한 이유입니다. 대담하고 다채로운 PDF는 최고의 예술 회사에서 기대하는대로 잘 정리되어 있습니다. Barbican은 아이덴티티를 사용하여 작업하는 디자이너들에게 어느 정도의 유연성을 제공하며 이를 달성하는 방법을 정확하게 안내합니다. 어느 쪽이 좋습니까.

 

The Barbican theatre's identity "is not just a logo. It is a design scheme composed of a number of core elements that come together to create a distinctive look and feel that makes the Barbican brand instantly recognisable". Which is why this guide is so important. The bold and colourful PDF is as well put together as you'd expect from a leading arts company. The Barbican allows a degree of creative flexibility for designers tasked with using its identity, and takes you through exactly how to achieve that. Which is nice.

 

 

 

 

11. Firefox

Mozilla는 Firefox에 대한 이전 스타일 가이드를 버리고 웹 디자이너가 Firefox 사용자를위한 아름다운 제품을 만들 수 있도록 완전히 새로운 디자인 언어 인 Photon을 도입했습니다. 유용한 지침과 원칙뿐만 아니라 온라인 Photon Design System 가이드에는 재사용 가능한 UI 구성 요소, 템플릿 및 모든 플랫폼에서 일관되고 인식 가능한 제품을 구축하기위한 기타 리소스가 포함되어 있습니다.

 

Mozilla has ditched its old style guide for Firefox and introduced a whole new design language, Photon, to help web designers create beautiful products for Firefox users. As well as useful guidelines and principles, the online Photon Design System guide includes reusable UI components, templates, and other resources for building consistent and recognisable products across all platforms.

 

 

12. Macmillan

암 자선 단체 Macmillan의 아이덴티티 디자인 안내서는 간판에서 인포 그래픽에 이르기까지 모든 것을 다루고 브랜드의 친숙한 녹색 색상을 사용하는 방법과 자선 단체의 마케팅 자료에서 찾을 수있는 이미지 실루엣으로 가장 잘 사용되는 사진에 대한 팁을 제공합니다. 이 목록에있는 많은 스타일 가이드와 달리 Macmillan은 많은 규칙에 대한 설명을 제공하여 규칙 뒤에있는 생각을 설명하고 독자의 마음에 고정시키는 데 도움을 줍니다. 

 

Cancer charity Macmillan's identity design guide covers for everything from signage to infographics, as well as tips on how to use the brand's familiar green colours and which photos are best used as the image silhouettes you'll find in the charity's marketing material. Unlike many of the style guides on this list, Macmillan offers explanations for many of its rules, to explain the thinking behind them and help fix them in readers' minds.