全テンプレート

ワイヤーフレーム デザインシステム

Deanne Watt

0 views
0 uses
0 likes

報告

アプリデザインシステムの基盤となるボードとは?

アプリデザインシステムの中核となる基礎を定義するための柔軟な作業ボードで、概要、デザイン原則、ブランドの基礎、カラー、タイポグラフィ、スペーシングとレイアウト、ボタンやフォーム要素、アイコンと画像を含みます。このテンプレートは、プロダクトデザインと開発全体で使用できる共有のビジュアルおよびインタラクション標準を作成するのを支援します。

どのような問題を解決するのですか?

デザインの決定は、画面ごとに共有基準なしに行われます。

視覚およびインタラクションパターンが時間とともに一貫性を欠いていきます。

チームは、ブランド、UIルール、およびコンポーネントの基本原則を調整する場所が不足しています。

デザインと開発間の引き継ぎは、共通の参照がないと困難になります。

利用方法

目的、範囲、所有者、および対象プラットフォームを含む概要を定義します。(10分)

製品全体の決定を導くデザイン原則を記録します。(10分)

ブランドの基盤を、個性、トーン、ビジュアルキャラクターなどを記録します。(10分)

ブランド、ニュートラル、背景、テキスト、ステータスカラーの役割を持ったカラーシステムを構築します。(15分)

見出し、本文、ラベル、キャプション、ボタンのためのタイポグラフィースタイルを定義します。(15分)

余白、パディング、グリッド、レスポンシブ構造のための間隔とレイアウトルールを設定します。(15分)

階層、フィールドタイプ、状態、使用ガイダンスを持ったボタンとフォーム要素を記録します。(20分)

スタイル、サイズ設定、使用ルール、視覚的一貫性のガイドラインとともに、アイコンとイメージの定義を行います(15分)。

よくある落とし穴

すべてを一度に定義しようとすることや、適用が難しいほど曖昧なルールを作ること、初期段階で例外を増やしすぎること、そして実用的な使用ガイダンスがないまま、システムをスタイルガイドとして扱ってしまうことです。

ミスを避ける方法

基本的な要素から始め、各スタイルやコンポーネントに明確な役割を持たせ、ガイダンスを実用的なものとし、実際の製品画面に照らして各セクションをレビューすることで、システムが役立つ状態を維持できます。

Miroの機能を活用する

各パートを整理するためのフレーム、アイデアやルールのための付箋、スタイルトークンやUI例のための図形、タイプスケールやカラーロールのための表、ステータスや優先度のためのタグ、チームのフィードバック用コメント、関連要素をリンクするためのコネクタ、作業セッションのペースを調整するためのタイマーがあります。

FAQ

Q: このテンプレートから得られるメリットは?

A: プロダクトデザイナー、開発者、創業者、プロダクト マネージャー、デザインリード、そして共有されたアプリデザインシステムを構築または改善するチーム。

Q: バーチャルおよび対面セッションで機能しますか?

A: はい。チームはMiro内で直接デザインシステムを構築することも、部屋でボードを投影してライブで基盤を定義することもできます。

Q: 私は何を持ち帰りますか?

A: 概要、原則、ブランド、色、タイポグラフィー、レイアウト、主要な入力とアクション、視覚資産ガイドラインをカバーする明確なデザインシステムの基盤セットで、チームが共有のリファレンスとして使用できます。

Deanne Watt

Product Strategy @ MiNDPOPGroup.com

My approach to product is to get to the heart of what drives a company. I am passionate about the entire end-to-end process and making it more efficient, collaborative as well as aligning teams and improving communication. We have built about 200 Miro boards so far that cover ideation, strategy, design, engineering, and even marketing promotion.


カテゴリー

類似テンプレート