web-dev-qa-db-ja.com

2〜4人のチームにスタイルガイドを実装する方法

私は今、リーンUXを読んでいます。

スタイルガイドについてです。

それを実装したいのですが、最初はできるだけフットプリントを小さくします。

私はソフトウェア開発者です。私は通常、HTML/CSSの経験がないグラフィックデザイナーと協力しています。彼は通常、psdまたはaiでデザインを作成します。

非技術系グラフィックデザイナーと私が共同作業に使用するのが簡単なスタイルガイドを作成するにはどうすればよいですか？

生きたドキュメントのようなスタイルガイドが欲しい。できれば、簡単にコピーして貼り付けることができる要素のHTML/CSSコードも含める必要があります。

私は

  • サーバーを見つけてウィキをインストールしますか？
  • googleドキュメントを使用しますか？
  • 他のものを使いますか？

私はこれを読みます Xスタイルガイドテクニック ですが、2〜4人の小さなチームに何かを求めています。

guidelinesdocumentationdeliverablesstyle-guide
8
Kim Stacks

スタイルガイドを作成するための3つの異なるツールの経験があります。

Confluence最初に実装したスタイルガイドは、Confluenceを使用して作成されました。それは、最も一般的なUI設計問題のパターンとベストプラクティスを含む設計パターンライブラリでした。各パターンには、サンプル画像、それがどのように機能するか、なぜそれを使用する必要があるのか​​、および関連する設計ファイルが含まれていました。それは主に設計者によって使用されました、それらを実装する方法のコードサンプルがなかったので、開発者はそれを有用であるとは思いませんでした。

Pea.rsをテーマにしたWordPressブログある時点で、オープンソースである pea.rs を評価しましたWordPress WordPressブログをパターンライブラリツールにするテーマ。開発者がコードで使用できるパターンの例にCSSとHTMLを使用しているため、開発者はそれをある程度気に入っていました。しかし、 t Bootstrapの例ではjQueryではなく、Twitterの使用をサポートしています。設計のためのファイルのアップロードなど、必要な主要な機能が不足していたため、デザイナーはそれを好みませんでした。

Patternryこれで、ホストされたスタイルガイドツールである Patternry を使用しています。特に私たちが気に入っているのは、パターンの例でTwitter Bootstrapを使用する機能、パターンテンプレートをカスタマイズする機能、マークアップとスタイルのライブエディターで、デザインを簡単にモックアップできるようにすることです。ブラウザです。製品がまだ未成熟であり、一部の機能が期待どおりに動作せず、バージョン管理がなく、外部のバージョン管理に統合されていないのが嫌いです。システム。

3
Binarydude

さまざまな形式（html、wiki、pdf、doc）でいくつかのスタイルガイドを作成した経験に基づいて、最も柔軟性のある単純な静的HTMLページを見つけました。彼らが主要な受益者であるので、それは通常ウェブスタイルガイドの作成を推進している開発者です。したがって、最初に作成および保守の負担があなたにかかる可能性が高いので、静的なHTMLページである最も単純な方法から始める必要があります。

将来、他の利害関係者から賛同を得るので、開発者以外の寄稿者のためにすべてのコンテンツをWikiまたはConfluenceに転送することは難しくありません。

スターバックスのスタイルガイドは、豪華なwiki /コラボレーションソフトウェアが本当に必要ないことを証明しています。 http://www.starbucks.com/static/reference/styleguide/

2
Jung Lee

すべての訪問者が一貫したブランドエクスペリエンスを確保するために標準を維持するためにコンテンツに取り組んでいる編集者がいない場合、目的のブランドを使用して強力であり続ける必要があります。必ず作成し、常に維持してください：

  • 編集基準、およびAPやシカゴマニュアルスタイルのような、書かれたコンテンツが従う一般的な商業スタイルガイドを選択する

  • 写真の基準（ブランドはどのような写真スタイルを使用するのですか？IEルポルタージュ、常に輪郭が描かれているため背景が白くなっているオブジェクト/人、または...？

  • さまざまなやり取りのブランドスタイルを示すUXデザインライブラリ

  • 優先フォント（ページタイトルとサブタイトル、一般的なテキスト、写真のキャプションで使用、チャートとグラフで使用）

    • カラーパレット：さまざまなインスタンスや状況で使用する1次色、2次および3次の可能性がある色（ホバー/クリック/棒グラフのカラーパレットの使用、タイトルスタイルと色）

電子メールの標準や、プレゼンテーション、イベントの装飾、紙、パッケージング、Swagスタイル、実行標準など、Web以外、印刷、その他の標準も必ず含めてください。

特に、複数の人/チームが1つまたは複数の集中型コンテンツ管理システムを使用している場合は、ソーシャルメディア標準、アクセシビリティ標準、命名規則を含める必要がある、または必要とする可能性のある技術標準について。

標準の一部が更新されたら、必ず更新してください！

0
SafetyFirst

私は個人的にwiki（私たちはConfluenceを使用しています）を使用するのが好きです。 「スタイルガイド」ではなく「デザインガイド」という名前を使用することをお勧めします。これは、より広義であり、ガイドにはウィジェットライブラリの使用に必要なほとんどすべてのものが含まれているためです。

  • すべてのUIコンポーネントがリストされたWikiページがあり、それぞれが独自のページで詳細に説明されており、誰でも編集またはコメントできます
  • このページには、概要、定義された測定値との相互作用、定義された相互作用、コンポーネントを使用する際の推奨事項、関連コンポーネント、コンポーネントを使用するための開発手順（ウィジェットライブラリのAPI）、および参照用に記述されたより詳細な実装があります。
  • これに加えて、DIRチケットにはJIRAを使用しているため、このページにリンクしているすべてのチケットをリストしています。開発チケットはデザインを説明していません。デザインガイドまたは個々のデザインを説明するページを参照しています（デザインガイドは常に最新の状態に保たれているため、使い捨てが可能です）。
  • UIに新しいコンポーネントが必要なときはいつでも、設計ガイドの作成を徐々に始めました

これがあなたが始めるのに役立つことを願っています。私たちはこれを1つのUX desinger/PM（me）、2つのフロントエンド開発者、およびgfxデザイナーがいるチームで使用します。設計ガイドは、会社のブランディングやその他の部分も、フロントエンド開発と新しいUIで何が起こっているかを追跡するのに役立ちます

0
Skuirrel