Advertisement

guielementslibrary

 

ウェブサイトを制作するときに、手描きのモックアップで下書きをした後にデザインに取り掛かる方も多いのではないでしょうか。

使い回して利用することで、ワイヤーフレーム作成の作成時間を節約してくれる便利な無料素材を見つけました。

 

海外デザインブログWebalysで、数百個に及ぶGUIベクター素材、260個のミニマルアイコン、200種類のスタイルを保存したIllustrator用インターフェースデザインキット「User Interface Design Framework」が公開されていたので、今回はご紹介します。

 

 

詳細は以下から。

 

 

収録されているファイルは3つのファイルで構成されており、まずさまざまなインターフェースに対応したベクターデザインをまとめた「GUI Library」。

あらかじめデザインされたベクター素材を、ステッカー感覚でレイアウトすることができ、拡大縮小なども自由自在に行うことができます。

 

GUIベクター素材

 

ショッピングサイトの支払い画面などで利用できそうな手順、また色をカスタマイズ可能なビデオプレイヤー用インターフェース。

video

 

パン屑リストやカテゴリー用ナビゲーションなども細かくデザインされています。

breadcrumbs

 

ユーサビリティの面も考慮した使いやすいアイコン付ボタンなどもあります。

button

 

ページネーションのデザインもいろいろ揃っていました。

すべてベクター素材となっていますので、パーツの拡大縮小、色の変更なども自由に行うことができます。

pagenavi

 

カラフルにデザインされたスライダーやプログレスバー。

slider

 

淡いグラデーションを利用した立体感のあるナビゲーションメニューだけでもこれだけ収録されています。

navigation

 

 

ミニマルUIアイコンセット

 

次にどんなデザインにも合わせやすいシンプルなモノクロアイコン260個セット、「Minimal UI Icons Set」。

こちらも描画色を変更するだけで、色の変更が可能となっています。

uiicon

 

 

スタイルライブラリー

 

最後にボタンやメニューバーなどの色の変更に便利な200種類のカラーリングでデザインされたIllustrator用スタイル。

styles

 

これらの素材を利用すれば、ウェブサイトのワイヤーフレームをサクッと完成させたいときなどに威力を発揮してくれます。

またすべての素材の利用に関して、個人利用、商用利用ともに可能となっているのもうれしいですね。

ただし商用利用の場合は、リンク先を表記する必要があるようです。

 

以下のボタンをクリックすると参照元に移動しますので、そちらよりダウンロードお願いします。

詳細情報はこちら

  • 個人利用、商用利用ともに可能
  • ダウンロードする

    参照元サイト: User Interface Design Framework - Webalys