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   
このエントリーをはてなブックマークに追加

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

2008年08月05日

個性的なphotoshopカスタムシェイプを集めた「20 great custom shapes sets」

WEBでは様々なタイプカスタムシェイプが公開されていますが、今回紹介する「20 great custom shapes sets for Photoshop hand-picked from DeviantArt」は個性的なカスタムシェイプを集めたエントリーです。子どもの落書きから、様々なスポーツでの人のシルエットから戦闘機までと様々なカスタムシェイプが公開されています。

今日は紹介されているカスタムシェイプの中から特に気になった物をピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:59  |  
Category: Design , Photoshop   
2014年05月01日

いろいろなデザインに使用できる 多彩な種類の素材をまとめた「50 fantastic freebies for web designers, May 2014」

デザイン制作をする時には、いろんな種類の素材を使用して作り上げていくことも多いと思います。今回はそんなシーンにおすすめのまとめ「50 fantastic freebies for web designers, May 2014」を紹介します。

free0501_1
Purple UI Kit Flat Responsive web template by w3layouts

フォント、テクスチャ、UI、psd、JS、CSSといった多彩な素材が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:26  |  
Category: Design   
2017年11月28日

デザイナーの為のグラフィカルな最新フリーフォントまとめ「22 Fresh Free Fonts Download」

優れたフォントはデザインをする上で欠かせない要素のひとつ。より良いデザインを目指していくためにも、常に最新のフォントはチェックしておきたいもの。今回ご紹介するのは、そんな貴方におすすめしたいデザイナーの為の最新のフリーフォントをまとめた「22 Fresh Free Fonts Download」です。

22-fresh-free-fonts-download
22 Fresh Free Fonts Download | Fonts | Graphic Design Junction

フリーフォントの中でも見出しやポイントなどに使いやすい、グラフィカルなフォントが22種類も紹介されています。その中からこれはと思ったフォントを抜き出してまとめましたので是非ご覧ください。

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

続きを読む
posted 09:00  |  
Category: Font   
2015年07月06日

デザイナーがチェックしておきたい最新フリーリソース「15+ Free Resources to Use in Your Design Projects」

フリーで使用できる素材は非常に重宝するため、つねにチェックされているデザイナーの方はとても多いのではないでしょうか?そんな中今回紹介するのは、デザイナーがチェックしておきたい最新フリーリソース「15+ Free Resources to Use in Your Design Projects」です。

resources0707_1
Free Textures: Cracked cement texture | Grunge

フォントやモックアップ、アイコンなど、よく利用する種類の素材が厳選されまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:18  |  
Category: WebService   
tag: 
2014年08月19日

50種の最新の魅力的なフリー素材を集めた「50 fantastic freebies for web designers, August 2014」

デザインするものや目的、予算などに合わせて、使う素材には様々なバリエーションが必要となってきます。今回はそんな時に是非参考にしたい、50種の最新の魅力的なフリー素材を集めた「50 fantastic freebies for web designers, August 2014」を紹介したいと思います。

free1408_1
baguetteBox.js | Demo

比較的新しい使い勝手のよい、いろんな種類の素材がピックアップされまとめられています。気になったものを選定しましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:13  |  
Category: Design   
2012年04月04日

ピンク色のデザインパターンまとめ「A Collection of 130 Pretty Pink Patterns」

デザイン制作時に非常に重宝するパターン素材はいくつあっても嬉しいもの。常に気に入ったものをストックしている方も多いのではないでしょうか?そんな中今回は、ピンク色のパターンを厳選しまとめた「A Collection of 130 Pretty Pink Patterns」を紹介したいと思います。


Pattern / pink ribbon weave :: COLOURlovers

シンプルで使い勝手の良いタイプや、模様に特徴があるタイプまで、幅広いバリエーション展開が魅力です。中でも気になったものをいくつかピックアップしましたので、下記よりご覧下さい。

(続きを読む…)

続きを読む
posted 11:36  |  
Category: Design   
2013年04月16日

古い紙のテクスチャを集めた「Early 20th Century Paper Textures」

アンティークな雰囲気の紙テクスチャをよく、デザイン制作に利用している方も多いと思いますが、汚れた雰囲気や色のあせ具合など、思い通りの一枚を見つけるのは意外に難しいかもしれません。そんな中今回紹介するのは、古い紙のテクスチャを集めた「Early 20th Century Paper Textures」です。

わら半紙ような紙から、ノートの見開きページのテクスチャまで、8種類のテクスチャがセットになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:08  |  
Category: Design   
2011年03月05日

雲を描く photoshopブラシまとめ「150 Cloud Brushes for Photoshop」

空のニュアンを決めるために重要な雲ですが、実際に撮影しようとしても、イメージにぴったり合う雲や空はなかなか見つからないもの。そこで今回紹介するのは、さまざまな雲の形を表現できるphotoshopラブラシ「Weekly Freebies: 150 Cloud Brushes for Photoshop」です。


JavierZhX (10 Brushes)

実写に近いタイプからイラスト系のものまで、約150種類ものブラシが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2009年02月12日

商用利用可能なフリーアイコンセット「100 Free Icons – Weby Icon Set」

ユーザービリティの向上や、デザインアクセントなど幅広い用途で便利に使えるアイコン。今日紹介する「100 Free Icons」は立体的でディテールの高いアイコン100個をフリーで公開しているアイコンセットです。

WEBサイト制作や、アプリケーションでの使用を前提に作られているみたいで、収録されているアイコンも実用的な物が多いです。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:53  |  
Category: WebDesign   
tag: webdesign
2017年10月17日

webサイトのUIデザインに関するPhotoshopチュートリアルまとめ「50 Tutorials for Designing Website in Photoshop – Ultimate Roundup」

デザインのスキルアップはデザイナーにとって重要な課題。日々技術を上げるため、常にアンテナを貼っている方も多いはず。そんな中今回ご紹介するのは、webサイトデザインに関するPhotoshopチュートリアルをまとめた「50 Tutorials for Designing Website in Photoshop – Ultimate Roundup」です。

50-tutorials-for-designing-photoshop1
Design a Textured Outdoors Website in Photoshop

デザインの参考やスキルアップに使える、WebのUIデザインに関したチュートリアルが、50種類もまとめられています。その中から特に気に入ったものを幾つかピックアップしてご紹介しますので、ご確認下さい。

詳しくは以下

(続きを読む…)

続きを読む

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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