大手ITスタイルガイドがベースGoogleやMicrosoftなど大手IT企業の英語スタイルガイドの基準がベース。一般的な英語表記から外れません。
![IT英語スタイルガイド | IT英語スタイルガイド](https://cdn-ak-scissors.b.st-hatena.com/image/square/a36323de5c6ce7897ad7e6963bbd459a8e000ed4/height=288;version=1;width=512/https%3A%2F%2Fstyleguide.progeigo.org%2Fimg%2Fsocial-card.jpg)
この記事では、デザインシステムを作成するときの基本ガイドをまとめています。 この記事は3つのパートで構成されています。 デザインシステムを理解する(デザインシステムとは何か、いつ作るべきか?) デザインシステムの作成(作成プロセスとやっておきたい項目) デザインシステムの具体的なサンプル例(デザイナーとデベロッパー、それぞれの観点より) デザインシステム追加の検討事項(その他のコンセプトや参考文献など) *この記事では、Webサイトやアプリ、オンラインサービスなどを表す包括的な用語として、「プロダクト(Product)」という言葉を使用しています。 この記事のコンセプトをイラスト化するために作成した、デザインシステムを公開しています。ご自由にお使いください。 Basic Design System – Figmaファイル デザインシステムを理解しよう デザインシステムとは? デザインシステ
ソシオメディアでは、デザインコンサルティングの一環としてデザインガイドラインを作成することがよくあります。デザインガイドラインの役割は主に以下のようなものです。 大規模なシステム開発において、複数の画面設計者がそれを参照し、デザインに統一感を持たせるため 将来的に複数のサブシステムが追加開発されるのを見込んで、それらのデザインとメインシステムとに統一感を持たせるため サードパーティに対してアドオンやプラグインのAPIを提供する際、デザインガイドラインを合わせて提供するため 特に開発体制の中に専属のデザイナーがいない場合、デザインガイドラインが画面設計者にとっての拠り所となります。アプリケーション全体における概念モデルと画面構成の関係、共通画面要素の役割、各画面種別ごとの基本的なレイアウトやコントロール表現、配色やアイコンの意匠といったものをガイドラインで定めることにより、ユーザビリティ上の
はじめに このウェブサイトのHTMLや、CSS、JavaScriptについては、ほぼすべてをこのページで解説しています。それぞれに例も用意してあるので、挙動も確認できます。おおむね挙動の確認を優先しているため、言葉が足らなかったり、更新されていなかったりすることもあるので、詳細は開発者ツールなどを駆使してください。 このページのマークアップやスタイル、スクリプトには、おかしいところが多くあります。その多くは、解説や例を作る上でのやむを得ない事情によるもので、他のページではちゃんとしています。例示で使われている妙な文章は、雑記の過去記事からランダムに選択された文を組み合わせたものです。特に意味はありません。 また、このウェブサイトの完全なソース・コードをGitHubで公開しています。どのように生成されているかや、どのようなツールを利用しているかなどは、そちらを参照してください。 アイコン o
Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。 ロゴやブランディングも引き出しを増やすためにも参考にしたいですね。
Designing inspired style guides presentation slides and transcript January 19th, 2017 I gave a new talk on designing inspired style guides last week at Design Exchange Nottingham. It was a really good night, a fabulous audience which was double their normal attendance and I also got the chance to sink a few drinks with my old friend Harry. It’s very likely that I won’t give this talk again in Euro
(Living) style guides and (atomic) patterns libraries are “all the rage,” as my dear old Nana would’ve said. If articles and conference talks are to be believed, making and using them has become incredibly popular. I think there are plenty of ways we can improve how style guides look and make them better at communicating design information to creatives without it getting in the way of information
明文化をテーマにしていた2016年 今年の初めデザイン SDK のようなものが欲しいという記事を書きました。開発者から提案されているフロントエンド寄りのスタイルガイドはコードの品質管理と、見た目の再現性を高める上で有効な手段です。しかし、これだとコードを理解していることがスタイルガイドの利用・関与の大前提になります。すべてのデザインがコードから始まるとは限らないですし、デザイナーであれば Sketch や Photoshop といった日々使うツールを活用して最低限の品質を保つ手段が必要になります。 共通言語を作っていく。 これは文字通り言葉だけでなく、UI を始めた視覚的な部分など、今まで好みや感覚で済ませていたこともきちんと言葉にすることも指しています。デザイン批評も共通言語を作り上げるために必要なプロセスです。 建築家クリストファー・アレグザンダーの著書「Pattern Languag
How To Create a Web Design Style Guide Website DesignTomas Laurinavicius • March 09, 2017 • 6 minutes READ Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimized to meet business objectives and create enjoyable experiences for users. One of the ways to ensure that team is on the same page when design
MELODI69: Situs Slot Online Gacor Paling Gampang Menang Terbaik Anti Rungkad Melodi69 adalah sebuah situs slot online gacor terbaik di Indonesia yang menghadirkan pilihan game lengkap dan bervariatif. Pemain Indonesia yang bergabung bersama situs slot online resmi melodi69 pastinya dijamin bebas dari kebosanan. Pasalnya banyak sekali pilihan game yang ditawarkan bahkan selain dari slot online, ada
Avoid using HTML tags in CSS selectors E.g. Prefer .o-modal {} over div.o-modal {} Always prefer using a class over HTML tags (with some exceptions like CSS resets) Don't use ids in selectors #header is overly specific compared to, for example .header and is much harder to override Read more about the headaches associated with IDs in CSS here. Don’t nest more than 3 levels deep Nesting selectors i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く