デザイナー向けの 10 の無料 Web UI キットとリソース

クレジット:

クレジット:

この投稿では、次のプロジェクトの初期段階を開始するための、Web 上から集めた最高の無料 Web UI キット、リソース、ステンシル 10 個を取り上げます。

特定の無料 Web UI キットやリソースに興味がある場合は、以下のコメントでお知らせください。

1.UIデザインフレームワーク

クレジット:

これは、インターフェイス設計用の数百のベクトル要素を含むグラフィカル ユーザー インターフェイス (GUI) ライブラリを含む完全な設計フレームワークです。さらに、Illustrator 用の 260 個のベクター アイコンで設定された最小限の UI アイコンと、Illustrator に適用する 200 個のスタイルを備えたライブラリが備わっています。これらを利用すると、一貫性があり、適切に設計された共通 UI 要素を使用して、より包括的なワイヤーフレーム、モックアップ、成果物を作成できます。

各ベクター要素は、サイズ変更、色付け、外観の調整によってニーズに合わせて簡単にカスタマイズでき、すべて整理された Illustrator パネル内にきちんと含まれています。

2.Web UIとボタンセット

クレジット:

大規模で多用途な Web UI とボタンのセットは、誰にとっても便利なものです。 7 色以上の 3 つの異なるスタイルが用意されており、光沢、サテン/ライト グラデーション、単色という 3 つの異なる美学を持つ要素が含まれています。サテン/ライト グラデーション セットは 7 つの異なる色で利用できます (すべて PSD ファイルにあります)。

セット内の個々の要素には、コントロール ボタン、情報およびテキスト ボックス、ナビゲーション要素、ドロップダウンおよび折りたたみ可能なボックス スタイル、吹き出し、検索フォーム、読み込み要素が含まれます。

3.スケッチ&ワイヤーフレームキット

クレジット:

これは、フォーム要素、アイコン、インジケーター、フィードバック メッセージ、ツールチップ、ナビゲーション要素、画像プレースホルダー、埋め込みビデオ、スライダー、一般的な広告バナーで構成される、スケッチとワイヤーフレームのための包括的でよく整理されたリソースのセットです。

このキットには 2 つのベクター形式があり、1 つは Adob​​e Illustrator 用、もう 1 つは SVG ベクター形式で、簡単に変更できます。 PDF および EPS 形式でダウンロードすることもできます。

4.ブラウザとフォーム要素

クレジット:

Designers Toolbox は優れたリソースです。無料の Web ブラウザ ウィンドウと標準の HTML フォーム要素に注目してください。 Windows Vista (IE/Firefox)、Windows XP (IE/Firefox)、Mac OS X (Firefox/Safari) など、いくつかのオプションから選択できます。オペレーティング システムとブラウザを選択したら、640x480px から 1600x1200px の範囲で必要なブラウザ ウィンドウ サイズをダウンロードできます。

各フォーム要素パッケージには、プルダウン メニュー、入力フィールド、ラジオ ボタン、チェック ボックス、ボタン、テキスト フィールド、スクロール バーがすべて簡単に編集可能な PSD ファイル内に含まれています。

5.最新の Web UI セット

クレジット:

これは、Web デザイン、アプリケーション、印刷で使用するためのクリーンでモダンな Web UI セットです。すっきりとした白黒の美しさは、事実上あらゆる状況で使用できることを意味します。パッケージには、ナビゲーション要素、ボタン、ドロップダウン メニュー、スクロール バー、ログイン パネルが含まれています。このセットは非破壊的な方法で構築されています。つまり、PSD ファイルに含まれるすべてのものはフォルダーに整理されており、ボタンの形状からグラデーション、テキストに至るまで、Photoshop のベクター レイヤーを使用して完全に編集可能です。

すべての要素を編集可能にすると、既存の項目をベースとして使用するだけで、ファイルに含まれていない必要なものを再作成できることになります。

6.UIデザインキット

クレジット:

インタラクティブまたは複雑なワイヤーフレームやモックアップを作成したくない人にとって、この UI キットは価値のある代替手段を提供します。 Photoshop 内で開くだけで、含まれている要素を利用し始めることができます。このキットには、ボタン、ドロップダウン メニュー、スクロール バー、ナビゲーション要素、吹き出し、ラジオ ボタン、アバター、タブ、チェックボックス、テキスト フィールド、および検索バーが含まれています。

パッケージにはシェイプ オブジェクトが含まれており、場合によっては SmartObject に変換されているため、完全にスケーラブルです。

7.UIのボタンとアイコン

クレジット:

ここには、AI、JPEG、SVG 形式で利用できる 165 個の高品質 UI アイコンとボタンが用意されており、各要素を簡単に変更できます。カラーも5種類からお選びいただけます。パッケージには、アイコン、読み込みバー、シンボル、ボタン、矢印、および星による評価が含まれています。

これは、あらゆるタイプの UI デザイン、ワイヤーフレーム、モックアップを始めるときに使用する優れたベースを提供する、適切にデザインされたクリーンなコレクションです。

8.UIライブラリ

クレジット:

これは、アートボード上にすべての要素が整理された、シンプルですが非常に便利な Adob​​e Illustrator シンボル ライブラリ ファイルです。パッケージには、スクロール バー、リスト、ボタン、テーブル、タブ、広告、テキスト フィールド、読み込みバーが含まれています。この UI コンポーネントのライブラリは、ワイヤーフレームやモックアップを作成するときにうまく利用できます。

このライブラリをインストールするには、「Wireframe Symbols.ai」という名前のファイルを Adob​​e Illustrator Symbols ディレクトリにドラッグ アンド ドロップするだけです。 Illustrator を開いたら、シンボル パレットに移動してライブラリを読み込みます。

9.Web 要素キット

クレジット:

ここには、レイヤー スタイルを通じて簡単に変更できる UI 要素の膨大なセットが表示されます。パッケージには合計 17 個のモジュールが含まれており、各モジュールにはさまざまな色のオプションが含まれています。 「オールインワン」PSD を使用することも、要素ごとに個別の PSD ファイルを使用することもできます。全体として、このセットは各レイヤーにラベルが付けられてよく整理されているため、プロジェクトにドラッグ アンド ドロップするだけで済みます。

各テキスト フィールドは完全に編集可能で、色も簡単にカスタマイズできます。ファイルの最適な使用方法に関する情報を記載した「ハウツー」ヘルプ ファイルも含まれています。

10.OmniGraffle UI ステンシル

クレジット:

OmniGraffle でワイヤーフレームとモックアップを作成するために、この一連のシェイプを試してみてください。これは、ユーザー インターフェイス仕様を作成するために必要な基本コンポーネントで構成されています。パッケージには、ヘッダーおよびフッターの変数、ボタン、スイッチ、コントロール、スライダー、メニュー、見出し、矢印、タブ、メディア プレーヤー、モーダル ウィンドウ、カラー ピッカー、およびページネーション要素が含まれています。

オムニグラッフルUXテンプレートこれには、タイトル ページ、ワイヤーフレーム、ストーリーボードなど、基本的な UX ドキュメントのニーズに対応する共有レイヤーが含まれています (無料)。のUXフォームステンシルまた、OmniGraffle の優れたリソースでもあり、さまざまなボタン レイアウト、進行状況インジケーター、キャプチャ コード入力フィールド、ラベルなどを提供します。

他にお勧めの無料の UI リソースはありますか?その場合は、以下のコメント欄でお知らせください。

ベンとジェリーのジョーがサポートするシリーズ

クレジット:

このシリーズによってサポートされていますベンとジェリーのジョー, ベン&ジェリーのフェアトレード・フローズンアイスコーヒードリンクの新ラインナップ。詳しくはこちらここ