サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Google StyleGuides Every major open-source project hasits own styleguide: a set of conventions (sometimes arbitrary) about how to write code for that project.It is much easier to understand a large codebase when all the code init is in a consistent style. “Style” covers a lot of ground, from “use camelCase for variable names” to “never use global variables” to “never use exceptions.” This pro
ZackはUXPinのUXデザインライターです。彼の仕事はUX Magやawwwards、 Speckyboyで出版されています。デザインシステム、パターンライブラリ、スタイルガイドという言葉が、同じような意味で使われていることがあります。 これら３つのコンセプトには繋がりはあれども、決して同じものではありません。 この記事では、定義を明確にして、それらがどのように繋がっているかを視覚化します。そしてデザインシステムを構築するための、主なガイドラインについて紹介します。デザインシステムの定義 まず直接の定義を理解しましょう。そうすることで、これらの概念がどのように繋がっているかを学び、より良い製品作りに活用する方法を考えることができます。デザインシステム―デザインの基準やドキュメント、原則、および基準を達成するためのUIパターンやコードコンポーネントなどのツールキットを、すべて含んだ
Nextstage Nite vol.2 - 実践されるデザインガイドライン - での登壇資料です。 LIMIAのスタイルガイド作成までのお話。 闇を抱えたサービス、サイトにおすすめの手法です。 https://connpass.com/event/68231/
TAMでは規模の大きな企業さまと仕事をすることが多いので、スタイルガイドを使った案件も比較的多いです。 数百ページ規模のサイトのスタイルガイドを作成してきましたが、考え方が少しずつ固まってきました。そして、この考え方はコードを書く人だけがもっていればいいわけではなく、ディレクターやデザイナー、部分的にはクライアント（発注者）にも共有しておく必要があると感じています。 この記事を読んだあとに、スタイルガイドを作るうえで考えておくべきことを知り、全員のスタート地点を揃えることができればいいなと思っています。 コーディングの知識がないとわからない箇所もありますが、冒頭にコーディング担当者以外に向けた要約を入れているので安心してください。 内容は以下のようになっています。 スタイルガイドを使うメリットとデメリットを共有する コーディング前に情報設計とデザインを固めておく ページの量産までにスタイル
Tomasはリトアニアの旅行ライフスタイルに関する起業家およびブロガーです。彼はブログや毎週配信されるニュースレターで、趣味やライフスタイルデザイン、起業精神について執筆をしています。現在、100万人の人々のライフスタイルを良いものにするというミッションの元、世界中を飛び回っています。 Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意す
Hologram is aRuby gem that parses comments in yourCSS and turns them into a beautiful styleguide. Quick start: gem install hologram And then: hologram init View onGithub Why would I useit? Hologram makesbuilding a styleguide as easy as maintaining yourCSS.It issimilar to Kneath Style Sheets and Styledocco. Your documentation is written in your productionCSS using a combination ofYAML and
Aigis is a styleguide generator. Make easier and maintainable. View onGitHub What isaigis?Aigis is a Node.js package that parses comments in yourCSS and auto-generate a styleguide.It issimilar to Hologram , like a Node.js implementation of Hologram. Why did wecreateaigis? We didn't want the dependence onRuby environment only to generate a styleguide. Less dependencies is better. So we
Living styleguides help front-end developers transform front-end codebases into well-described pattern libraries with the minimum of effort. But to make them really efficient, we need to choose the proper tools — so let’s have a closer look at what our community has to offer. In this article, Robert Haritonov has arranged the tools by function, highlighting only the most powerful ones worth knowi
Website StyleGuide ResourcesGitHub repoTwitter updates Contributors Examples Real life pattern libraries, code standards documents and content styleguides. Carbon Design System By IBM Carbon is the design system for IBM Cloud products.It is a series of individual styles, components, andguidelines used forcreating unifiedUI. frontendcodepatternsvoiceandtone Code For America frontendpatterns
This is only a small selection of styleguides and pattern libraries that I like, you should check out styleguides.io for more resources. If you like this collection of styleguides and pattern libraries, you might also enjoy some of my other projects motivational quotes, free stock images, collection ofCSS Puns and my list of marketing andSEO tools. "This is truly an inspiring collection of sty
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
