スタイルガイドとスタイルタイルを操作するためのデザイナーズガイド

を作成する ブランドアイデンティティ 簡単な作業ではありません。それは大変な努力を必要としますがそれはまた最もやりがいのある創造的な仕事の一つです。 Webプロジェクト インターフェイスデザインとブランドのミックス. 両方の分野でやるべきことがたくさんあるので、これは混乱を招く可能性があります。. スタイルガイド そして スタイルタイル Webデザイナーのための優れたリソースであり、彼らは同じように聞こえますが、彼らは達成します 2つの異なるタスク.

この記事では、両方を詳しく調べて、これらのクリエイティブ資産から得られるメリットについて説明します。誰もがスタイルガイドやスタイルタイルを作成する必要があるわけではありません。しかし、すべての設計者は少なくともこれらが何であるか、そしてそれらがどのように働くかを理解するべきです.

Web用のスタイルガイド

私はスタイルガイドについてさまざまな意見を読みました。これらはデジタルモックアップだと言う人もいれば、コードベースのスタイルガイドが最も便利だと言う人もいます.

どちらの方法でも、スタイルガイドの目的は他のプロジェクトと同じです。定義する 一貫したパターン、UIモジュール、そしてクリエイティブな好み 設計プロセスで使用されます。特定の要素について、非常に具体的なピクセルパーフェクト測定値を指定することも、視覚的な例を使用して緩めずにガイドラインを提示することもできます。.

スタイルガイドを実行するための唯一の正しい方法はありません。唯一の間違った方法は、単にリソースを作成することです。 他人には理解できない.

目標は、 時の試練に耐える. そのはず 編集用に開く 新しいリソースが作成された場合また、チームに加わる人が誰でも簡単にガイドに飛び込むことができるようにする必要があります。.

スタイルガイドは プロジェクトの必要に応じて詳細. それは通常含まれています 再利用可能な資産, 活版印刷、ボタン、色見本、テクスチャ、一般的なページ要素など.

最近カバーしました 生活スタイルガイドツール それはあなたがゼロから生活スタイルガイドを作るのを助けることができます。これらの生きているガイドはフロントエンド開発者にとってより多くのものですが、デザイナーにとっても同様に役に立つことができます。あなたはこのSmashing Magazineの記事でこの主題についてもっと読むことができます.

私の絶対的なお気に入りのリソースはStyleGuides.ioです。それはカバーしています Web用のスタイルガイドの基本, 含む 実例 そして ケーススタディ.

MailChimpのパターンライブラリはStyleGuides.ioで見つけることができる最も良い例の1つです。それはそのオンラインライブスタイルガイドです MailChimpのグリッド、文字体裁、およびページ要素を定義します。.

Web会社のスタイルガイドをデザインするときは、すべてをオンラインにするのが一般的ですが、作成することもできます。 内部ガイド, そして、それらをローカルのイントラネットに保管するか、ユーザーログインページの背後で個人的にホストします。あなたがスタイルガイドにアクセスする方法は本当に重要ではありません。それらはすべて、特定の色、パターン、およびビジュアルを伝達するという同じ目的を果たします。 Webプロジェクトのテーマに合わせる.

この問題についてもっと学ぶために、スタイルガイドの他の投稿をチェックしてください。

• フロントエンドスタイルガイド （24ways.org）
• Webサイトスタイルガイドを作成する （creativebloq.com）
• 完璧なWebデザインスタイルガイドの作り方 （dtelepathy.com）

スタイルタイルへの分岐

スタイルタイル まったく別の獣です。これらのタイルは デザインの初期段階で使用されたクリエイティブアセット 特定の美的要素を特定しようとしたとき.

Style TilesのWebサイトはSamantha Warrenによって作成されたもので、おそらく知っておく必要があるすべてのものが揃っています。がある 特定のテンプレートはありません スタイルタイルをデザインするためのものです。しかしサマンサの例では 見出しと段落の種類、リンク、パターン, そして 可能な色の選択 と一緒に ブランドロゴ.

スタイルタイルを扱うときの最終的な目標は、 現在2-3の異なるスタイルのタイル クライアントやクリエイティブディレクターに。これらのタイルは 気分ボードよりも詳細, まだ フルモックアップよりも詳細度が低い.

タイルは、その意味を理解するのに十分なだけ詳細にしてください。 ウェブサイトのアイデンティティとムード. サマンサは励まします 形容詞を使う 各タイルを詳細に説明する.

顧客はできます 別のタイルを通して見る, そして お気に入りの曲を選ぶ. この あなたの時間を節約 クライアントが自分の好きなアセットをすでに見ているので設計時に.

これがStyle TilesのWebサイトからの素晴らしい引用です。

スタイルタイルをインテリアデザイナーのツールキットと比較するのは、かなりよく似た例です。クライアントがほとんどの色とフォントを嫌っていることに気付かせるためだけに、ピクセルパーフェクトモックアップに努力を注ぎたくはありません。.

代わりに、スタイルタイルを使って 共通のテーマまたはビジュアル言語 サイト全体で使用されます。これは含めることができます ブランディング/アイデンティティ しかしまた含まれるかもしれない UI機能, ドロップダウンメニューやCTAボタンなど.

あなたはこれらを使うべきです 成果物資産 プロセスの早い段階で。フルモックアップを完了すると、スタイルタイルを参照する必要はもうありません。それにもかかわらず、初めは、スタイルタイルはクリエイティブなプロセスにとって非常に重要です。 デザイナーの時間を節約する そして クライアントに選ぶべき多くのオプションを与える.

あなたがしたい場合は スタイルタイルをもっと掘り下げる これらの関連記事をチェックしてください.

• スタイルタイルとその仕組み
• スタイルタイル：フルデザインコンプの代替品
• スタイルタイルを作成する：設計方向への簡単なアプローチ

スタイルガイドとスタイルタイル

スタイルガイドとスタイルタイルの違いはあいまいですが明確です。 A スタイルガイド もっと 詳細な として使用する必要があります 継続的なリファレンスガイド クリエイティブチームのために。 A スタイルタイル として使用することができます ムードボード に アイデアを視覚的にプロットする あなた自身やクライアントのために。それらは頻繁に慣れています アイデアを探る, そしてプロジェクトが終了すると、彼らはあまり目的を果たしません。.

スタイルタイルは、縁の周りではずっと粗いことが多く、使われています 初期の創造的プロセスの中だけで. スタイルガイドは使われることを意図しています 設計プロセス全体を通して そして 今後の参考のためにその後も そのサイトで作業する可能性のある他のデザイナーのために.

どちらにも利点と欠点があります。スタイルタイルは 早くて楽しい, しかし はかない 本来は。スタイルガイドは 徹底的に そして ビジュアルドキュメントのように振る舞う, しかし彼らも 多くの作業が必要.

それで、あなたはどれを使うべきですか？それは最終的に プロジェクトに依存.

小さいプロジェクト スモールビジネスのWebサイトなどでは、スタイルタイルを使用すると効果的です。中小企業のサイトのための全体のスタイルガイドを構築することははるかに多くの仕事と請求可能な時間を必要とするでしょう。これはたいていのクライアントにとってコストに見合う価値がないでしょう.

しかし 大規模プロジェクト ニューヨークタイムズを再デザインするようなスタイルのタイルとスタイルガイドの両方の恩恵を受けるだろう.

言語と気分を見つける 新しいプロジェクトのために常に貴重なプロセスです。これがスタイルタイルを作るものです ほとんどすべてのシナリオに最適.

また得ることができます どちらの資産も作成せずに. 何人かのデザイナーは行きます ワイヤーフレームから に 詳細なモックアップ. そして、慣れないからスタイルガイドが欲しくないクライアントもいる。.

プロジェクトごとに作業し、それぞれに最適なものを決定します。.

実例

カバーすることでこれをまとめましょう 例 スタイルガイドとスタイルタイルの両方。 Dribbbleを閲覧しているときにこれらのデザインを見つけました。それらはあなたがあなた自身のスタイルガイドやスタイルタイルで欲しい品質を例示していると思います.

スタイルガイド

この素晴らしいAirbnbスタイルガイドはDerek Bradleyによって作成されました。それは非常に単純ですが、それははっきりと説明しています 主なパターン、色、ページ要素 デザインに含まれる.

これはデザイナーNaoshad Alamによって作成されたはるかに大きいデジタルスタイルガイドです。この例は もっと組織的 と 色、活版印刷、フォーム、インターフェース要素、その他のUI機能のセクション.

より詳細なスタイルガイドでは、これらすべてのデザイン要素をWeb上に配置します。 コードスニペットを含める それぞれについて.

デザイナーCupi WongがこのガイドをAfterShipに作成しました。文字体裁、ボタン、色の選択、および一般的なページ要素は慎重に作成されています。 セクションにまとめて.

これはWebに移植することもでき、オンラインの参考資料としてはるかに大きく構築することもできます。.

UIデザイナーのGreg Dlubaczが、Webプロジェクト用の独自のUIスタイルガイドを共有しました。これは非常に大きなことです。フルスクリーンプレビューの高さは21,000ピクセルです!

私が今まで見た中で最高のデジタルスタイルガイドの1つです。これは、チームメンバーが参照するためのオンラインドキュメントページにも移植できます。.

スタイルタイル

UI / UXデザイナーのAbdus Salamは、このスタイルのタイルを有機食品店のWebサイト用に作成しました。とても基本的な フラットなデザイン要素、いくつかのマイナーなUI機能, そして カラーパレット.

デザイナーのエイドリアン・カンテルミは、彼のダイベストメントスタイルのタイルを使って、本当に詳細に仕上げました。それは色とタイポグラフィを持っていますがまた含まれています ベクトルイラスト.

これらのベクトルはに役立ちます ブランド、ムード、そして全体的な配色を定義する ウェブサイトの.

ワールドカップアドバイザーの再設計は、非常に基本的な機能を備えた独自のスタイルのタイルを手に入れた。いくつかのアイコン、いくつかの色の選択、およびいくつかのボタンのデザイン. 単純さ ゲームの名前です.

あなたがサイトがどのように見えるかについての感触を得ることができるならば 一目で それで、あなたはそれを正しくやっています.

これは、旅行プロジェクトで使用される却下されたスタイルのタイルの楽しい例です。デザイナーのBrennan Gleasonが提供するタイルのサンプルはごくわずかです。 ウェブサイトの雰囲気を感じる.

最後の言葉

ウェブを検索すると、次のような例、ヒント、およびリソースがたくさん見つかります。 建物スタイルガイドとスタイルタイル. しかし、この記事が両方の入門書となり、これらの設計資産の理解と作成に精通していただけることを願います。.