Figmaのデザインシステム UI2 を分析してみる - DESIGN JOURNAL - 株式会社モンスターラボ
今回はコミュニティの中でFigma開発チームが公開しているデザインシステム「UI2」を分析してみました。さすがFigmaの開発チームが作っているFigmaデータだけあってとてもよく作られており、観察すればするほど面白い発見があります。 ファイルのページ構成 まず最初にファイルのページ構成を確認しておきましょう。構成はとてもシンプルでわずか3ページ。1ページ目の「Main」にガイドラインとコンポーネント集などほぼ全ての情報が集約されています。あとは2ページ目の「Templates & Extras」にコンポーネントを組み合わせた画面全体の構成例があり、3ページ目の「Cover」にFigmaファイルのカバー写真という形です。
Figmaのガイドラインを作りました｜Shinya
デザイナーとしての仕事とはちょっと違いますが、1人目のデザイナーとして2人目以降のデザイナーの為に、Figmaの運用ルールを考え、ガイドラインを作りました。 なぜガイドラインを作ったのか 1人デザイナーとしてやってきたので、Figmaも自分自身のルールで運用していました。 しかしいずれ2人目のデザイナーが入るので、自分だけ分かるルールでFigmaを運用し続けていくことは、不可能でした。 その為、今後Figmaを決まったルールで運用していく為に、ガイドラインを作ることとしました。 課題を整理する2人目のデザイナーの為だけだと、現在直面している課題を解決する事にはならないので、まず現状Figmaのガイドラインがない事によって、発生している課題を洗い出しました。 作るガイドラインは、この課題を解決する事を軸として考え、設計していきました。 直面している課題 ・デザイナーとエンジニアで見ているデザ
Atomic DesignからみたBootstrap｜Yoko Nishida
はじめまして。UIデザイナーの@nikoko45です。 最近Webサービスのデザインガイドラインを作っていて、特にコンポーネントをどうまとめたら良いのか模索中です。ユーザーには一貫したUIや世界観を提供でき、開発者にはもっと効率的に作業スピードをあげられる方法はないか考えてみました。 デザインガイドラインで目指したいこと 一貫性のあるデザインを維持するために、デザインファイルのテンプレート作成、コミュニケーションやレビューのコストを少しでも減らすことがゴールなのかなと思っています。（参考：一貫したデザインのためにデザインシステムを運用する方法） 色々記事を読み漁った結果、どうやらデザインガイドラインとしてコンポーネントを整理するにはAtomic Designが役立ちそうということで調べてみました。 Atomic DesignAtomic Designとは インターフェースに含まれる要素を、
Sketchでデザインしながらガイドラインを作ろう｜Chizuru Kamisono
はじめまして。UIデザイナーのカミソルです。 わたしはOHAKO.incの受託事業の部署でサービスの体験設計からUIデザインをしています。 今回はSketchのSymbol機能を使って、デザインしながら効率よくガイドラインを作る方法について書きたいと思います！ ※この記事はSketch Advent Calendar 2017 19日目の記事です。 なぜデザインしながらガイドライン化したいのかガイドラインを作る目的は2つあります。 1. エンジニアとの連携のため "カラーの種類"、"テキストスタイルの種類"、"画像として書き出すもの"、"コンポーネント"の4つがはっきり伝わるSketchデータにしたい。 2. デザイン運用のため デザインを運用をするとき、誰でも追加や変更がしやすいようにしたい。「デザインしながら」とつけた理由は、デザインしていたら自然にガイドラインが出来ていた。という
Starbucks Creative Expression
Our new expression.It all starts here. Use this guide as a high-level overview of how the Starbucks brand comes to life. As we evolve to meet beautifully diverse customers all over the world, our brand has evolved too. Here we introduce a fresh new design system that maintains the core elements of our brand while keeping our customers’ experience central to creative expression. To achieve this, we
伝説のマニュアル「NASA Graphics Standard Manual」が復刻！ | Swings
ニューヨークのデザインスタジオ「Danne & Blackburn」によってつくられ、1976年に発行されたNASAのグラフィックの使用規格書「NASA Graphics Standard Manual」の復刻版が発売されました。 約20年間だけ使用された「ワーム」 NASAから新しいブランドイメージをつくるロゴデザインの依頼を受け、Danne & Blackburnの創業者であるDanneさんとBlackburnさんが手掛けた「ワーム」と呼ばれるNASAのロゴマーク。 どこかで見たことがある方も多いのではないでしょうか。 太いレタリングと、ロケットの先端部をイメージさせるような特徴的な「A」を用いて、洗練された未来的なデザインでした。 通称“ミートボール”といわれるそれまでのロゴマークに変わり、1974年からワームが使用されましたが、1992年には所員の士気をあげる施策の一環でまたミート
"らしさ"を統一するための文言ガイドライン｜Misaki Suzuki
この記事はGoodpatch UI Design Advent Calendar 2018の10日目の記事です。 「デザインガイドライン」と聞くと、どのようなアウトプットイメージを持つでしょうか。 実際に検索するだけでも、VIの使用ルール、トンマナ、UIコンポーネントの設計思想など、多くの事例を見ることができます。これらのデザインガイドラインが作られる主目的は、ブランドやアウトプットの統一性を図るためですが、「文言」もその役割を担う要素の一つです。 ここでは、ソフトウェアにおける文言のガイドラインについて、その目的や具体的なまとめ方を記したいと思います。 ブランドらしさを表現する文言複数人のUIデザイナーがいる、比較的規模の大きなソフトウェア開発に携わる中で、アウトプットのトーンがばらつくことは何度か課題として挙げられていました。文言も例外ではありません。どのような言葉を発し、どのような言
Wantedly ブランドアセットページの公開にあたり、社内向けデザイン資料も公開 | Wantedly Design
ブランドアセットのページが新しくなりました。先日、Wantedly コーポレートサイト、wantedlyinc.com 内に、Wantedlyのロゴやマークをダウンロードできるページが追加されました。ページ内フッター「ブランドアセット」からアクセスできます "シゴトでココロオドルひとをふやす" Wantedlyはシゴトでココロオドルひとをふやすために、働くすべての人が共感を通じて「であい/Discover」「つながり/Connect」「つながりを深める/Engage」ためのビジネスSNSを提供しています。 ダウンロードできる素材は、以前のロゴ素材に比べ、スクリーン用と印刷用それぞれでの色の調整、素材にアイソレーションエリア- ロゴ周囲に取るべき余白を含めるなど、こまかく調整を加えていますので、ぜひこの機会に再ダウンロードをお願いします。 また、Wantedlyブランドの使用に関するガイドラ
一貫したデザインのためにデザインシステムを運用する方法
BenはUXPinのコンテンツ戦略担当者です。 Webウェブデザイナーとバックエンド開発者の両方として働いています。 人は馴染みがあるものを信頼します。そのことを知っている多くのデザイナーは、作品をできるだけシンプルにするよう努めています。また、シンプルなデザインは実用的でもあります。たとえば、一度ナビゲーションバーをデザインすれば、すべてのページで使うことができます。 しかし、デザインコンセプトはどんどん変化します。新しいアイデアを持つデザイナーが古いプロジェクトを引き継いだり、新しいコーディング手法が昨年の最先端に取って代わったりすることもあるでしょう。その結果、一貫性のないビジュアルとコードの寄せ集めになってしまいやがて問題となります。 デザインの一貫性とは デザインの一貫性がある製品は、変更を加えても見た目や動作が全体としてまとまりがあるように見えます。これは、特に大規模なサイトで
FOLIOリブランディングの裏側 ──構想からリリースまでの8ヶ月の軌跡──｜広野 萌
株式会社FOLIO CDO（Chief Design Officer）の広野です。 この度、オンライン証券サービス「フォリオ」の正式リリースに伴いまして、思い切ったリブランディングをおこないました。 ビフォーアフターはこちらです。 ご覧の通り、今回のリブランディングプロジェクトはいわゆる「ロゴリニューアル」に留まらず、サービスを提供する上でのスタンスを改めて定義し直した、新たなブランドとしてのフォリオを再誕させることになりました。 パット見のビジュアルでいうと、安心を感じさせる「青」から、躍動感のある「赤」に変わるのですから、FinTech系スタートアップとしてはかなり挑戦的なリブランディングのようにも思われるかもしれません。 ここまで辿りつくのに紆余曲折ありましたが、包み隠さずリアルな8ヶ月の軌跡をここに記したいと思います。 【目次】 1. 危機感 2. 幕開け 3. 壁 4. 光 5.
デザイナーの勉強になる、有名ブランドのスタイルガイド厳選50個まとめ
海外デザインブログCanva Design School Blogで公開された「50 Meticulous Style Guides Every Startup Should See Before Launching」より許可をもらい、日本語抄訳しています。 ブランドイメージは、まるで機械のようなものです。A brand is like a machine. たくさんの小さなパーツを一緒にすることで、全体が完成します。もしパーツを忘れてしまうと、その機械は正常通り動かないか、最悪の場合壊れてしまうかもしれません。以下の手順書を読むことで、あなたが機械を組み立てるときに、壊れてしまうのを防ぎましょう。 ブランドイメージを構築するために、配色や書体、ロゴやイメージ画像、パターン素材、スローガンなどをまとめたスタイルガイドの作成は、デザイン作業を楽にしてくれるひとつの方法です。細かいポイントをま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Login - Uber
feb19
Style Guides by Pro Designers