便利なPhotoshopのカスタムシェイプ

Naldz Graphicsで、便利なPhotoshopのカスタムシェイプがまとまっています。

ざっといくつかご紹介。

↑はCustom Shape Mix。

People Silhouettes

Live Trees

Custom Shapes Pack v. 1.1

Splats N Drips_Custom Shapes

deviantArtなどにリンクしているので、ライセンスについてはリンク先を確認してください。

» 30+ Useful Photoshop Custom Shapes Set

知っておきたいフリーのデザインアプリ

Creative Nerdsで、知っておきたいフリーのデザインアプリが紹介されています。

ざっといくつかご紹介。

» Active Pixels
　Photoshopに似た素晴らしいフリーソフト
» Inkscape
　オープンソースのベクターグラフィックエディタ
» Pencil 0.4.4b
　オープンソースの手書きアニメ作成ソフト。Windows,Mac,Linuxで動作する。↑のキャプチャはこちら
» Blender
　オープンソースの3Dモデリングソフトウェア
» Synfig
　ベクターベースの2Dアニメーション作成ソフト

なんだかすごいのがいっぱいあります。

その他のリストは以下からどうぞ。

» 25 Free Must Download Design Programs

宇宙のスケールのでかさを垣間見られる惑星・恒星のスケールモデル

UIまとめサイト

Collection: Design Patterns

第一位はここかなぁ・・・。なんだかんだでFlickrでUIパターンを集めているグループが一番かな、と。インターフェースはFlickrそのものだし、事例も豊富です。

Collection: [Design Solutions]

ほぼ同点で二位はこちら。こちらもFlickrグループですね。

Interaction Design Pattern Library - Welie.com

三位はこちら。ちょっとマニアックですが、きっちりまとめてあって好感が持てます。

MephoBox | Web Design and Web Inspiration

これが四位かな。いまどきのインターフェースがスタイリッシュにまとめられています。

Pattern Tap : Organized Web Design Collection of User Interfaces for Inspiration and Ideas. The CSS Gallery Alternative - Pattern Tap

こちらが五位。ほぼ四位と一緒ですが。こちらもいまどきのUIですね。

Product Images - ecommr: a collection of e-commerce interface and design elements

ここらへんから番外編。これはショッピングサイトに特化したUIまとめサイトです。そっち系の人は参考になるのでは。

Yahoo! Design Pattern Library

これも番外編。Yahoo!がまとめたソーシャルサイトのUIパターンです。勉強になりますよ。Stack Overflowの記事とあわせてどうぞ。

UI-patterns.com

最後にこれ。サイトの読み込みが遅くて評価しずらいのですが、内容としてはよくまとまっています。

自分でコンセントから充電するロボット

シャツをあっという間にたたむ裏技

リアルロボット写真集

リアルロボットの写真・ビデオ

こちらはＮＡＳＡのロボット写真・ビデオ

CSSスプライトを使ったメニューの作り方

LINE25というサイトで、CSSスプライトを使ったメニューの作り方が紹介されています。

1枚の背景画像を使って、こんな感じでCSSを指定していきます。

デモは以下から。

» View Demo

ソースファイルもダウンロードできますね。

ぜひ見てみてくださいー。

» How to Create a CSS Menu Using Image Sprites

ページのめくれを実装する方法

WebDesignBoothで、ページのめくれを実装する方法が紹介されています。

ざっとご紹介。

» imple Page Peel Effect with jQuery and CSS by Soh Tanaka
Soh Tanakaによる、jQueryとCSSを使った例
» The Sexy Curls jQuery Plugin
　Elliott Kemberによる、jQueryを使った例。jQueryとjQuery UIの両方が必要
» jQuery Page Peel 1.2 by Smpl Multimedia
オプションが豊富なjQueryプラグイン
» How to create a page peel advertisement in Wordpress
　WordPressでページのめくれを実装する方法
» Wordpress Page Peel plugin
　Avramovicによる、WordPressで使えるプラグイン。コンパネからいじれる

詳しくは以下からどうぞ。

» 5 Extremely Simple Ways To Add Page Curl To Your Website

アイコンセット

Smashing Magazineで、これからのデザインのためのアイコンセットがたくさん紹介されています。

ざっといくつかご紹介。

↑はChalkwork HTML Royalty-free Icons。
個人利用・商用利用ともに無料

On Stage Icons Set
フリーのベクターアイコン49。psdファイルつき。個人利用・商用利用ともに無料

Coquette 4 Icons Set
角丸でカラフルなクオリティーの高いアイコンが50個

Coquette 5 Icons Set
32bit、透過PNGのかわいいアイコンが50個

Chalkwork Payments (Free) Icons
Eコマース系のアイコン集。個人利用・商用利用ともに無料

Finance Icons Set
個人利用・商用利用ともに無料だがサイトへのリンクが必要

Free Vector Icons Pack 03
かわいいベクターアイコン集

その他のリストは以下からどうぞ。

» 50 Fresh Useful Icon Sets For Your Next Design

The Evolution of a Dance Party

Watch The Evolution of a Dance Party and more funny videos on CollegeHumor

大胆、豪快に寝る猫

ロボットのダンス

keepon キーポンⅡ

優れた購入プロセス １２

1. いきなりユーザー登録をさせない
2. 在庫数を表示する
3. 簡単に注文を修正できるように設計する（取り消しボタンを設置するなど）
4. リアルタイムのサポートを提供する（DELLの電話サポートは今すぐ、1分以内に、などのサポートが選べる）
5. 機能的な戻るボタンを設置する（検索結果がない場合に、わかりやすい場所に前のページに戻るボタンを設置するなど）
6. 買い物かごのアイテムに写真や商品内容、リンクをつける
7. 買い物プロセスのどこにいるかのインジケータを表示する
8. インターフェースをシンプルにする
9. ユーザーが購入プロセスから反れないようにする（フローティングウィンドウでヘルプを表示するなど）
10. 商品が届くまでに何日かかるかを知らせる
11. 買い物終了後に何が起こるのかを知らせる（確認のメールをお送りしますなど）
12. 購入内容の確認メールを送る

「Checkout pages gallery」にはチェックアウトデザインの例がいくつか載っていますね。

一度見てみてください。

» 12 Tips For Designing an Excellent Checkout Process