TOP  >  UX

Tag : UX

2019年01月07日

様々なサービスのUIサウンドを集めた「UI Sounds」

エラー・許可・着信などなど、優れたユーザーインターフェイスは視覚だけではなくて、直感的にわかりやすい音があり、表示されるユーザーインターフェイスに組み合わせることで、ユーザーがどのようなことをしたかの理解を早めてくれます。今日紹介するのはそんなユーザーインターフェイスの音を、様々なサービス別に集めたWEBサイト「UI Sounds」です。

uisound01

今までユーザーインターフェイスをまとめて紹介するサイトは多数ありましたが、こうして音に注目したサイトは珍しいと思います。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年09月06日

様々な場面で役に立つUXのSketchテンプレートを集約した「Must-Have Sketch Templates for New UX Designers」

使いやすく見やすい、ユーザーに満足してもらえるUXデザインをより短時間で作ることは、デザイナーであればぜひマスターしておきたいもの。そんな中今回は、特にSketchを利用している方におすすめ、様々な場面で役に立つSketchテンプレートを集約した「Must-Have Sketch Templates for New UX Designers」を紹介したいと思います。

sketchkit01
FREEBIE – Flowchart kit for Sketch by Greg Dlubacz – Dribbble

Sketchで活用できる秀逸なテンプレートがまとめられており、どれも非常に魅力的なものばかりが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:18  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2016年12月06日

クリエイティブなホバーアクションを簡単に実装する「Tilt Hover Effects」

PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。

TiltHoverEffects_800x600

一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2016年10月09日

UIデザインのベースにできるシンプルなUIフリーサンプル「Ease UI Component Free Sample」

WEBデザインのトレンドの推移は早く、年々あらたなトレンドが生まれては消えていきますが、今日紹介するのはUIデザインのベースにできるシンプルなUIフリーサンプル「Ease UI Component Free Sample」です。

Ease-UI-Component-Free-Sample-prev02

非常にシンプルでスタイリッシュなデザインでブログ、メディア、フォーム、Eコマース、ベースパーツなどなど様々なユーザーインターフェースのパーツが収録されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:11  |  
Category: Design , Photoshop   
このエントリーをはてなブックマークに追加
2016年09月05日

チャットの開発やデザインのためのUIキット「Chat UI Design Kit」

国内でもスタンダードなコミュニケーションツールの一つチャット。様々なWEBサービスやコミュニティで導入されています。今日紹介するのはそんなチャットの開発やデザインのためのUIキット「Chat UI Design Kit」です。

chatui

「Chat UI Design Kit」ではチャットに必要な様々なユーザーインターフェイスがまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:11  |  
Category: Design , vector , WebDesign   
このエントリーをはてなブックマークに追加
2016年07月17日

WEBやアプリの最新のアニメーション事例をまとめた「20 Animated Interfaces: New Ways to Present a Concept」

UI/UXを豊かにそして直感的にしてくれるアニメーション。上手く利用すればWEBサイトやアプリケーションを劇的にブラッシュアップしてくれますが、取り入れるのはなかなか難しいものです。今日紹介するのはWEBやアプリの最新のアニメーション事例をまとめたエントリー「20 Animated Interfaces: New Ways to Present a Concept」です。

city-intro
City intro animation by Vasjen Katro – Dribbble

アプリケーションからスマートウォッチまで全部で20ものアニメーションが纏められていますが、今日はその中から特に気になったものを幾つかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:07  |  
Category: Design , WebDesign   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2013年02月09日

スマートフォンのジェスチャーベクターデータ「IPHONE GESTURES」

スマートフォンの操作は独特で、普段利用している方であれば、当たり前のように利用できますが、スマートフォンを購入した手のユーザーにとっては用語で説明しても伝わりにくく、「スワイプ」「ティルト」などなかなか言葉からは想像しにくいものもあります。今日紹介するのはスマートフォンの操作をアイコン的に伝えられる、ジェスチャーベクターデータ「IPHONE GESTURES」です。

スワイプ、タップ、ピンチ、ズーム、ティルト、シェイク、マルチタッチといった基本的な操作が手の動きやスマートフォンの動きとともに表現されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:54  |  
Category: Design , vector   
2015年04月20日

継ぎ目なく配置できる シームレスなフリーベクターパターンまとめ「27 Seamless Free Vector Patterns」

背景などにデザイン的に配置するパターン素材。いろいろな種類がありますが、特にwebサイトなどの背景はスクリーンサイズを考慮して継ぎ目なく配置したいもの。今回はそんな時に便利な、シームレスなフリーベクターパターンまとめ「27 Seamless Free Vector Patterns」を紹介したいと思います。

pattern0420_1
Dribbble – Free Autumn Wallpaper by Carla Corrales

パターンの境目を気にすることなく使用できるベクターパターンがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2017年07月22日

HTMLの例をタグ毎に記したクリエイティブなチートシート「Interactive HTML Cheat Sheet」

普段私たちが見ているサイト。それを構成するHTMLはこの数十年のうちに大きく発展をしてきました。開発されたプログラミング言語は膨大であり、追いかけることも一苦労。わからないことを検索するのも非常に手間がかかります。そんなときに活躍してくれる「Interactive HTML Cheat Sheet」を紹介していきたいと思います。

chi-to_sheat_top

目的のHTMLを簡単に検索することができる便利なチートシートになります。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Tool   
2017年11月25日

クリスマスムードを手軽に演出できる クリスマステーマのフリー素材まとめ「50 Free Christmas Templates & Resources for Designers」

12月と言えばクリスマス。一大イベントともあって、クリスマスのデザインを手がけている方も多いのでは?今回ご紹介するのは、そんなクリスマスのデザイナーの強い味方となってくれる、デザイナーのためのフリーのクリスマス素材をまとめた「50 Free Christmas Templates & Resources for Designers」です。

50-free-christmas-templates1
Digital Space: Premium and Free Resources for Designers and Coders – Free

クリスマスカードや可愛らしいクリスマスイラストなど、使える素材が50種類にも渡り紹介されています。さらにその中から、おすすめの素材を幾つかピックアップ致しましたのでご覧ください。

詳しくは以下
(続きを読む…)

続きを読む
posted 09:00  |  
Category: Design   
2015年09月11日

オンラインショップ等で活躍 フリークレジットカードアイコン集「15 Free Credit Card Icons Designers Love to Have For Web Design」

決済する手段として多くのシーンで利用されているクレジットカード。種類も豊富で、オンラインショップなどではどの種類が利用できるかをカードアイコンで表現することも。今回はそんなシーンに活躍する、フリークレジットカードアイコン集「15 Free Credit Card Icons Designers Love to Have For Web Design」を紹介したいと思います。

cardicon0
Dribbble – Credit Card Icons + PSD by Evgeny Seleznev

さまざまなテイストでデザインされたクレジットカードをモチーフとしたアイコンがセットダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:30  |  
Category: WebService   
2018年02月15日

カラーコードから色の相性を確認できるwebツール「.colors{}」

デザインの印象を決める配色は、組み合わせ次第で全く異なる印象へと変化する、重要な工程です。そんな配色だからこそ、しっかりと吟味して最適な組み合わせを選びたいもの。今回ご紹介するのはその配色を行う際に役立つwebツール「.colors{}」です。

dotcolors1

好きなカラーコードを入力して、その色同士の相性を確認することが出来るWebデザインに最適なツールです。

詳しくは以下
(続きを読む…)

続きを読む
2009年06月06日

フリーで使えるグラフィティフォント75個セット「75 Free GRAFFITI FONTS」

フリーフォントについては今までDesigndevelopでも様々な話題を取り上げてきましたが、今回はグラフィティやストリートアートで使われそうなグラフィカルなフォントをまとめたフォントセット「75 Free GRAFFITI FONTS」を紹介したいと思います。

grafittfont01

シンプルでキレイ目なフォントとは対照的でインパクトがあり、グラフィカルなフォントが多数紹介されています。読み物などのボディコピーには向いていませんが、雰囲気があう商材のデザインにはかなり役に立つフォントセットだと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:42  |  
Category: Design , Font   
tag: Design Font
2012年10月23日

さまざまなリボンデザインが揃ったPSD素材まとめ「30 Beautiful Ribbons PSD Files for Free Download」

プレゼントなどのラッピングに欠かせないリボンは、相手にスペシャル感を与えられる代表的なアイテム。webデザインの世界でも人気のあしらいとして、広く活用されています。今回は、そんなリボンを表現できるPSD素材をまとめた「30 Beautiful Ribbons PSD Files for Free Download」を紹介したいと思います。


Leather Ribbons & Web Elements | MediaLoot

ボタンやワンポイントなど、webサイトデザインで利用できるPSD素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:04  |  
Category: WebService   
2009年10月01日

デザイナーのためのセリフフォント集「20 Awesome and Free Fonts for Web Designers (Serif Family)」

ゴシック体よりも少し固めの雰囲気を演出できる文字のストロークの端にある小さな飾りがついたセリフフォント。様々なシーンで活躍できるスタンダードな書体でもあります。今日紹介するのはデザイナーのためのセリフフォント集「20 Awesome and Free Fonts for Web Designers (Serif Family)」です。

file-1
Serifan

全部で20ものセリフフォントが紹介されていますが、今日はその中からいくつかきになったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:12  |  
Category: Design , Font   
tag: Design Font
2013年02月14日

気品のあるバラを再現できるPhotoshopブラシまとめ「26 Lovely Sets of Rose Brushes」

立春も過ぎ、少しずつ春の兆しを感じられるようになると、花など華やかなイメージを利用する機会も増えてくるのではないでしょうか?そんな中今回紹介するのが、気品のあるバラを再現できるPhotoshopブラシをまとめた「26 Lovely Sets of Rose Brushes」です。


14 Roses Brushes for Photoshop CS4 by ~Shizuru117 on deviantART

ベクターイラストのブラシや写真を加工したようなブラシまで、さまざまなPhotoshopブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:38  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る