デザインを開発するという視点でお伝えするクリエイティブBLOG
Webサイト閲覧中によく見かけるプログレスバーですが、最近は動きや形も様々で遊び心のあるものも増えてきています。そんな中今回は、プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」の紹介したいと思います。
Animated Goal Progress Bar jQuery plugin
ベーシックなものから、ちょっと変わったものまで9種類のプログレスバーがピックアップされています。
詳しくは以下
WEB制作の流れや構造を一覧化して分かりやすくするのに便利なのがフローチャート。簡易的なものもありますが、グラフィカルに作ろうと思うと結構手間がかかったりします。そこで今日紹介するのは手間無く、グラフィカルなフローチャートや構造図を描くことできるWEBサービス「Lovely Charts」を紹介したいと思います。
このWEBサービスはユーザー登録をすれば、無料で利用することができ、簡単なチュートリアルも用意されており、Lovely Chartsの使い方が90秒でまとめられています。だれでも簡単に質の高いフローチャートを描く事ができます。海外のサービスなので英語になりますが、分かりやすいインターフェイスなので英語が苦手の方でも迷うことなく利用できるかと思います。
詳しくは以下
photoshopで背景を作り込む時に便利なパターン素材。キャンパスのサイズに応じてパターンを展開できるかなり便利なものです。今日紹介するのはレトロ、幻想的、シンプルなどといった、様々テイストのphotoshopパターンを集めたエントリー「200+ free beautiful Photoshop patterns」を紹介したいと思います。
今日は今までDesigndevelopで紹介した事が無いもののなかからいくつかピックアップして紹介したいと思います。
詳しくは以下から
最近DesigndevelopではphotoshopによるグラフィックデザインのTips集を「リアルなガジェット制作のためのphotoshopチュートリアル「27 Best Photoshop Gadget Design Tutorials」」や「素晴らしいphotoshopのテキストエフェクトチュ−トリアル50選「50+ Great Photoshop Text Effect Tutorials」」など紹介してきましたが、今日紹介するのはillustratorの様々なテクニックのチュートリアルを集めた「25+ illustrator tutorials to start your week | ifoh designs」を紹介したいと思います。
Free Watercolor Brushes and Tutorial
illustoratorでも個々まで表現できるんだなと思わせてくれるようなチュートリアルが満載です。今日はその中でも特に気になったチュートリアルをいくつか紹介したいと思います。
詳しくは以下
日々新しいデザインが公開されるフォント。デザイナーにとってフォント選びは重要な作業です。様々なジャンルの異なるフォントを持ち合わせていれば、いざデザインを始める際に困ることはありません。そんな中今回紹介するのは、異なるテイストがピックアップされたフリーフォント17種「17 Fresh Free Fonts for Graphic Designers」です。
Cunia Free Font Typeface on Behance
デザインを魅力的に見せてくれるフリーのフォントが紹介されたサイトです。気になったものをピックアップしましたのでぜひチェックしてみてください。
詳しくは以下
動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分をGIFアニメーションで代替して利用するというサイトを最近では見かけます。今日紹介するのはFacebookライクなインターフェイスでGIFアニメーションプレビューを実装できる「Facebook Like GIF Preview Using jQuery」です。
こちらはjQueryベースで制作されており、jQueryとライブラリ、CSSを読みこせて、HTMLとjsを追記するという形で、比較的簡単に実装が可能です。
詳しくは以下
GIFのマークをクリックするとGIFアニメーションがスタートし、再度クリックすると元に戻ります。挙動については、デモサイトが準備されていましたので「Gif Preview with jquery」からご覧ください。
クリックでイベントが起きるため、スクロール位置などイベントを作っておけば、表示位置に来たら自動的に再生するなんてこともできそう。使い方次第ではグッとサイトが良くなるかもしれないjQueryプラグインだと思います。ソースコードはgithubにて公開されておりましたので、試してみたい方は「Fork it on Github」からどうぞ。
インターネット上から数多くのフリー素材がダウンロードできるようになっていることもあり、どの素材を選んでいいか迷ってしまうこともあるのではないでしょうか？そんな中今回は、さまざまな種類の素材を厳選してまとめた「50 fantastic freebies for web designers, December 2014」を紹介したいと思います。
Menú despegable estilo acordeón | Accordion Menu
UIやフォント、ツールなど、たくさんある素材から利用活用度の高そうなものが選定され、紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
フォントはその種類や形で、デザインに与える影響力、フォント自体がもつイメージがガラリと変わりますが、今回はエレガントでクリーンな印象をもつ、フリーフォントを集めたエントリー「20 Elegant Fonts for Clean Design」を紹介したいと思います。
様々なフォントがまとめられていますが、気になったフォントをピックアップしていくつか紹介したいと思います。
詳しくは以下
イラストや写真などの他、テキストを使ってデザインを魅力的に表現する方法もありますが、表現の幅がどうしても狭くなってしまいがち。今回はそんなシーンに活用したい、デザイン性を高められるエフェクトチュートリアル「New Photoshop Text Effect Tutorials」を紹介したいと思います。
How to Conform Text to a Surface Using a Displacement Map in Photoshop | Design Panoply
テキストデザインをより魅力的に演出できるエフェクト例がまとめられています。気になったものをピックアップしましたので、下記より御覧ください。
詳しくは以下
フォントと一口にいっても様々なフォントがリリースされていて、フォントの種類によって大きく印象が異なります。今日紹介するのはフォントの中でも、擬似的に立体的に見せている3Dフォントを集めたエントリー「30 Free High Quality 3D Fonts Collection」を紹介したいと思います。
上記のように立方体的なものから、少しだけ浮き出て見えるフォントまで様々なフォントが集められています。今日はその中からいくつか気になったフォントをピックアップして紹介したいと思います。
詳しくは以下
一枚に連なった、長いWEBページも最近増えてきていて、ユーザーにとっては全体像がよくわからなかったりするなんていうときが時にはあるかもしれません。そこで今回紹介するのは、サイト全体のプレビュー画像をサイトサイドに出力してくれるjQuery「jQuery.frace」。
上記のようにサイトのサイドバーに全体を縮小してどの範囲が見えているかを直感的に理解できるような機能を付加できます。
詳しくは以下
