Web 開発スキルの向上に役立つ 7 つのパターン ライブラリ_html/css_WEB-ITnose

言語スタイルガイドと同様に、パターンライブラリは 2 つの主な目的を果たします。まず、Web 開発チームが Web サイト全体に適用できる一連のコーディングまたはデザイン標準を提供し、一貫したコーディングの実践と外観を維持するのに役立ちます。第 2 に、Web デザインのベスト プラクティスを学ぶのに役立ちます。

この記事では、Web デザインと開発プロセスにおけるベスト プラクティスであり、学ぶ価値のある 7 つの Web デザイン スタイル ガイドとパターン ライブラリを紹介します。

Google HTML & CSS スタイル ガイド

私が皆さんに最初にお勧めするのは、開発者に HTML と CSS コードの書き方とフォーマット方法を説明する Google のコーディング提案です。初心者の場合、これは適切なコーディング スタイルを開発するのに役立ちます。

Yahoo パターン ライブラリ

これは真のデザイン パターン ライブラリであり、ナビゲーション、インタラクション、レイアウトを扱う Yahoo デザイナーを含む、すべての Web デザイナーが遭遇するであろう問題の解決策を提供しようとしています。

A List Apart Pattern Library

A List Apart はおそらく最も有名な Web デザイン ブログです。彼らは最近、Web サイトをオープンソースにする取り組みの一環として、独自のパターン ライブラリをリリースしました。パターン ライブラリには、この Web サイト デザインの解決策と HTML コード スニペットの問題が含まれています。

レスポンシブ Web デザイン パターン

レスポンシブ デザインの詳細をレイアウトからわかりやすいサンプル画像まで網羅したレスポンシブ デザイン パターン ライブラリです。

Interaction Design Pattern Library ? Welie.com

この Web サイトのデザインは古いですが、多数のデザイン パターン情報が提供されています。これは私がこれまでに見た中で最も包括的なパターン ライブラリであり、デザイナーが直面するあらゆる状況をカバーしています。

MailChimp パターン ライブラリ

MailChimp パターン ライブラリは、応答性が高く、柔軟で直感的なアプリケーションを作成するという著者の取り組みの副産物です。継続的な反復には、効率的なワークフローと、新しいテクノロジを追加したり設計したりすることなく、新しいユーザー インターフェイスを迅速に統合できる明確なアトミック要素セットの両方が必要です。

スターバックス スタイル ガイド

最後は、グリッド フレームワークの使用、レイアウトとコンポーネントの使用などを含む、スターバックス企業 Web サイトのスタイル ガイドです。