アップル、グーグル、スターバックスなどの人気企業からの10のデジタルデザインとスタイルガイドのイラスト

AppleのデザイナーがiOSのすべてのマイナーな側面をどのように定義して構築したのか疑問に思ったことがあるなら、あなたは適切な場所にいるかもしれません。

技術革新は絶えず進化しているので、ウェブデザインはより形式化され続けています。 ワールドワイドウェブの設計者と開発者は、ラップトップからセル製品にシームレスに変換できるコードを作成し、サイトナビゲーションを簡単に理解し、他のインターネットサイト機能を革新する必要があります。これらはすべて企業がデジタルデザインガイドで標準化する要素です。

電子デザインガイドは、会社のWeb表示画面に対する期待とベンチマークを確立したため、ブランドの全体像とネット上の記憶力に対して非常に実用的であることが判明しました。 それらは、一流のユーザー試練を提供しなければならないウェブサイトや製品にとって特に重要です。

この記事では、デジタルタイプのガイドの詳細を詳しく説明し、それらを適切に完了した有名企業の印象的なイラストをいくつか紹介します。

このスタイルのファッション情報は、企業のデジタル存在のスタイルとデザインの基準を設定するマニュアルとして扱われます。 その主な目的は、ブランド名のユニバーサルスタイルタイプを作成し、すべてのチャネルとメディア、ブランドを構築する場所、カラーパレット、タイポグラフィ、画像の提案などに一定の規則性を持たせることです。

会社のロゴ、ミッションアサーション、購入者のペルソナ、声のトーンをカプセル化するメーカーのファッションガイドとは異なり、ウェブデザインのデザインとスタイルガイドは、UX/UIのようなデジタルプレゼンテーションを中心としています。

しかし、私自身UXデザイナーとして、私は一般的に興味があります。Apple、Google、Starbucksなどの影響力のあるプロバイダーのデジタルファッションガイドで何を見つけることができますか？

感じてもいなくても、多くのプロバイダーがこの詳細を公に入手できるようにしています。実際には、見つけるのがそれほど簡単ではありません。 だから、私がシングルに出くわすたびに、それをブックマークします。 これが私がとても重要に見つけた最高のもののいくつかです。

ブリリアントデジタルスタイルガイドの例

1. Apple iOS

Appleのデザインとスタイルガイドは、完全に機能するメソッドをデザインする方法を説明しているという理由で特にエキサイティングです。 AppleのOSXの最新バージョンの1つであるMontereyは、その前身であるYosemiteよりもさらに簡素化されたコンシューマーインターフェイスを備えています。 Appleは、この微妙でありながら明白な違いを非常に優れたグラフィック比較で示してから、実行中のシステムのレイアウトのすべての孤立した側面に力を与える理論的根拠について議論します。 それはあなたにデザイナーの心への窓を与えます。

2. Google：マテリアルレイアウト

Googleは、スキューモーフィズムのデザインとスタイル（グラデーション、テクスチャ、マイルドな要素）とフラットスタイル（シンプル、カラフル、幾何学的）のハイブリッドとして存在する、製品構造として識別されるデザインとスタイルのファッションを開拓しました。ネガを避けながら、すべてのデザインとスタイルデザインに関連する側面。

グーグルは数十年前からプロダクトスタイルに取り組んできたので、おそらく今では毎日の基盤でそれと相互作用しているでしょう— Googleカレンダーアプリ、個人ですか？ このデザインとスタイルマニュアルの詳細は、マテリアルデザインとは何か、そしてGoogleがそれをどのように利用しているかを正確に示しています。 そして、私がいつでも出くわした最高のタイプのガイドの1つであると言わざるを得ません。

3.スターバックス

これは、私が見た中で最もミニマルなデザインとスタイルガイドの1つにすぎませんが、実際的な事実がたくさんあります。 それはコードに非常に重点を置いており、ビルダーのために、ビルダーによって構築されたことを説明することができます。 ブランド名にリンクされた要素がないため、Webサイトのデザインマニュアルとコードライブラリの間を行き来します。

4.アトラシアン

Atlassianがモデル化する商品スイートは巨大です。したがって、当然のことながら、巨大なファッションガイドがあります。 基本的なもの（カラーパレットやタイポグラフィなど）からコンポーネント（テーブルやツールチップなど）、本格的なパターンライブラリまで、このガイドブックには、このサイズの製品から期待できるほぼすべてのものが含まれています。

おそらく非常に優れているのは、完全なタイプのマニュアルを推進する理論的根拠が、住居のWebページにある3つの一見単純な条件にまとめられていることです。

5.Mozilla

この電子設計チュートリアルは、主にブランディングとコミュニケーションに関係しています。 しかし、最近、Mozillaが「プライバシーとオープンワールドワイドウェブ」の戦術を手に入れたことで、Mozillaがこれをどのように設計に複製しているかを見るのは驚くべきことです。

Mozillaのホームページは、視覚障害や障害を持つ男性と女性がUX / UIにアクセスできるようにする方法を概説する素晴らしいキャリアも行っています。これは、ノウハウがはるかに革新的になるため、包括的で重要なことの1つです。

6.バッファ

バッファのタイプガイドラインは小さく簡潔であり、おそらくグリッドからモーダルを経由してすべて単一の位置にあります。 それがすべての理想的なポイントを伝えるならば、あなたの電子ファッションチュートリアルが派手である必要はないということは嬉しい思い出です。 どこかで始めることを探している企業は、Bufferの単純な設計ガイドラインの要素からのメモを検討し、そこから持っているものを構築することができます。

7.Yelp

インターネットサイトのデザインとスタイルのガイドブックの信頼できるインスタンスを探しているなら、Yelpはそれを含めて入手しました。 完全なだけでなく、アトミックデザインの手順を料理本として説明し、ウェブサイトのコンポーネントを料理に寄与する物質として分割します。

この詳細には、タイポグラフィ、レイアウト、種類、コンテナー、ナビゲーション、およびすべてのピースのコードスニペットがすべて含まれています。 彼らは、ほぼすべての要素が何であるか、それが実際にどこで利用されるべきか、そしてそれがどのように実行されるべきかを説明する素晴らしい仕事をします。

8.GOV。イギリス諸島

英国の政府ソリューションのWebサイトは、一般に、高品質のUXの主要なインスタンスとして知られています。 なんで？ シンプルで使いやすいスタイルとデザインが特徴で、大量の情報や事実に対応できるためです。

確かにクレンジングされた強力なレイアウトを構成できるものに興味がある場合（ヒント：通常、単色の使用、タイポグラフィ、間隔から始まります）、GOV.UKのタイプマニュアルは、を垣間見る価値があります。 インターネットサイトのように、それは非常にシンプルですが、非常に啓発的です。

9. DeviantArt

新しいDeviantArtスタイルの情報は、それが単なる情報ではなく、知識であるという理由だけで排他的です。 それは物語を語り、大胆な全幅のビジュアルを活用して、DeviantArtブランドの感情的な専門知識に人を浸します。 そうは言っても、これは厳密にはブランディングモデルのガイドブックなので、カラーやタイポグラフィなどの製品のみがコーティングされています。

10. Disqus

色、アイコン、タイポグラフィ、ロゴ…Disqusは、この情報で短くて甘いものを保持します。 しかし、それはすべて非常に快適で整理された方法で提供することができます。 このガイドブックは、すべての基本に当てはまるので、あなたが持っているスタイルのガイドラインを作成するときに「始める場所」の素晴らしい例として使用できます。

あなた自身のマニュアルを作るために影響を受けた経験？

今、それはあなたのスイッチになることができます。 企業で電子タイプのチュートリアルを活用することで、ブランドのデザイン言語を内部のデザイナー、組織、マーケティングコンパニオン、さらにはクライアントに伝えることができます。

標準の基本要素（シェード、タイポグラフィ、ロゴ、画像）から始め、いくつかの使用に関する推奨事項（「すべきであり、すべきではない」）を組み込み、必要に応じていくつかのネットパーツ（モジュール、テンプレート、コードスニペット）を組み込みます。他のプロバイダーの例を使用して、最良のものから学びましょう。あなたの労働力は、すぐに規則的なパターンを生み出します。