デザインシステムが作り出す明文化への道
明文化をテーマにしていた2016年 今年の初めデザイン SDK のようなものが欲しいという記事を書きました。開発者から提案されているフロントエンド寄りのスタイルガイドはコードの品質管理と、見た目の再現性を高める上で有効な手段です。しかし、これだとコードを理解していることがスタイルガイドの利用・関与の大前提になります。すべてのデザインがコードから始まるとは限らないですし、デザイナーであれば Sketch や Photoshop といった日々使うツールを活用して最低限の品質を保つ手段が必要になります。 共通言語を作っていく。 これは文字通り言葉だけでなく、UI を始めた視覚的な部分など、今まで好みや感覚で済ませていたこともきちんと言葉にすることも指しています。デザイン批評も共通言語を作り上げるために必要なプロセスです。 建築家クリストファー・アレグザンダーの著書「Pattern Languag
Front-end Style Guides
Style guides, once the exclusive domain of print designers, are now finding their way onto the web. In this book, you'll learn about the style guides that have been created specifically for websites, and how to make and maintain your own. Designers and developers have taken different approaches to putting together their own web-based style guides. This book highlights the various techniques and th
フロントエンドスタイルガイド： 定義と要件、コンポーネントチェックリスト
フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義： フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ
Firefox Brand - Mozilla Dot Design
Most consumers know Firefox as a web browser – but that’s changing. We’ve been busy building a suite of new products and services that empower users and demonstrate that we’re the tech company that’s on their side. Brand Positioning To even have a seat at the table, our products have to perform as well as everything else out there, and meet users’ felt needs. But it’s our dual purpose – improving
Website Style Guide Resources
Website Style Guide Resources GitHub repo Twitter updates Contributors Examples Real life pattern libraries, code standards documents and content style guides. Carbon Design System By IBM Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines used for creating unified UI. frontendcodepatternsvoiceandtone Code For America frontendpatterns
Style Guide - About - Hail2u.net
Sketch, markup, code, style, test, and then deploy. Weblog Documents Projects About Hail2u.netで使われているマークアップやスタイルの解説兼プレビューのページです。マークアップはHTMLのソースを、スタイルについては全ての変更履歴を含むGitリポジトリかこのページで参照されている非圧縮のCSSファイルを参照してください。このページに限ってはマークアップにおかしいところが多々ありますが、その多くはプレビューを作る上でのやむを得ない事情によるものです。 バージョニング フォーマットはSemantic Versioningを使っています。ただしAPIの変更などというものはあまりないので、以下のような条件でバージョン番号の増加を行っています: メジャー・バージョンは、レイアウトの大幅な置き換えやテーマカラー
Front-end Style Guides
We all know that feeling: some time after we launch a site, new designers and developers come in and make adjustments. They add styles that don’t fit with the content, use typefaces that make us cringe, or chuck in bloated code. But if we didn’t leave behind any documentation, we can’t really blame them for messing up our hard work. To counter this problem, graphic designers are often commissioned
Creating Style Guides
Several years ago, I was working on a large, complex application. It was a bit of a legacy project: many different designers and front-end developers had come and gone, each appending a new portion to the sprawling application. By the time I arrived, the CSS was huge, the styles were varied, and it took a lot of effort to find out if anything was reusable. During all this, I discovered style guide
生きたスタイルガイドのためのKSS | 第1回 KSSの特徴
生きたスタイルガイドのためのKSS 第1回 KSSの特徴 このシリーズではスタイルガイドジェネレーターのKSSを紹介します。第1回目はKSSがどんな特徴を持っているジェネレーターなのかを解説しています。 KSSとは KSSはスタイルガイドジェネレータのひとつです。先にCodeGridで紹介しているStyleDocco*と同様に、CSSで定義されたスタイルとその説明を一覧化したWebページを出力するものです。 *注：StyleDocco StyleDoccoに関しては「賢く使うStyleDocco」シリーズを参照してください。 KSSのWebサイト、KSS · Knyle Style Sheetsでは、KSSで作成されたスタイルガイドのよい例としてGitHubのCSS · Styleguideが挙げられています。スタイルが多くのカテゴリに分類されていますが、とりわけ、ボタン用スタイルを並べた
Code for America Style Guide
Using the Guide Code for America aims to improve the relationships between citizens and government. The following logos, materials, and character of the Code for America brand were created to express the following: Openness: That the organization is approachable, easy to understand, easy to get involved with, and welcoming to both scrutiny and participation. Currency + Progress: We’ve attempted to
Curbside Burgers
Here’s the deal HERE AT CURBSIDE, we know great burgers. Using a proprietary blend of beef — that goes through the grinder a unique way — combined with signature toppings, buttery brioche buns, fresh cut fries and an ice cold beer, we think we’ve created the perfect burger experience. We’re burger junkies and we take pride in everything we do. The food is real. Thanks a lot for loving it!
Sass: Style Guide
Contributing to this website? Awesome! Use this style guide, developed by Team Sass Design. If you add new design, please document it here. Site ObjectivesSite Objectives permalink Show why Sass is the best CSS Preprocessor, and why you should use it. Be a resource for those who are already using Sass, at whatever level.
Home - Mozilla Dot Design
Privacy Cookies Legal Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation. Portions of this content are ©1998–2019 by individual mozilla.org contributors. Content available under a Creative Commons license. Please refer to our trademark policy regarding usage of Mozilla wordmarks and logos.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Wikimedia Design Style Guide (WikimediaUI)
Fractal
Carbon Design System
Material Design
Yelp Design — Cookbook
sideproject.io - a really cool domain parked on Park.io
Examples of block quote metadata ❧ Oli.jp (@boblet)