TOP  >  UI

Tag : UI

2019年01月07日

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

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

uisound01

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

詳しくは以下

(続きを読む…)

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

デザイナーのための フリーAdobe XD用UIキット20種「20 Free Adobe XD UI Kits for Web & Mobile App Designers」

数年前まで、UIデザインはPhotoshopとSketchを中心に行われていましたが、2017年に正式リリースをしたAdode XDが着実にアップデートを重ね、新たなUIデザインツールとして頭角を表してきています。今回は、WEBやUIデザインに役立つ、Adobe XDのUIキットを20種をまとめた「20 Free Adobe XD UI Kits for Web & Mobile App Designers」をご紹介します。

adobexd_ui_05
Free Adobe XD Collaboration App by Edwin Delgado – Dribbble

どのキットも、無料で利用できるので、チェックしておくと重宝してくれそうです。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Design   
このエントリーをはてなブックマークに追加
2018年06月09日

UIデザインやWebデザインに役立つフリーのhtml UIキット「25 Fresh Free HTML UI Kits」

Webやアプリケーションのデザインに欠かせないUI設計。しかし使いやすく最適なUIデザインを一から考えるのは中々手間がかかるもの。今回ご紹介するのはそんなデザイナーの方におすすめしたい、最新のUIデザインキット「25 Fresh Free HTML UI Kits」です。

html0609
GitHub – ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web

CSSやHTMLの知識が必要にはなりますが、使いやすく多彩なシーンで活躍できるUIデザインキット25種類が紹介されています。さらにその中から幾つかおすすめのUIキットをピックアップしてみましたのでご覧ください。

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

続きを読む
posted 09:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2018年04月18日

Webデザインに役立つECサイトを想定したUIキット「M989 Website UI Kit」

ユーザーの動線やサイトの使いやすさに深く関わるUI設計。特にUIがユーザーのコンバージョンに直結するようなECサイトなどの場合、その設計は非常に重要な行程です。今回ご紹介するのは、そんなECサイトでのUI制作に役立つECサイトを想定したUIキット「M989 Website UI Kit」です。

m989-website-ui-kit1

シンプルながらもポピュラーな親しみやすさのあるUIデザインのキットです。

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

続きを読む
posted 09:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2018年02月14日

iOS11とiPhoneXモックアップに最適なテンプレート「iOS 11 UI Kit for iPhone X」

日々進化し続けるテクノロジーの変化にともないアップデートされるiOS。webデザインに関わる方なら誰もがその変化や最新の技術に目を向けておくべきです。そんな中今回紹介するのは、iOS11とiPhoneXモックアップに最適なテンプレート「iOS 11 UI Kit for iPhone X」です。

iOS11_UIki01

Webデザインにとって重要な役割をもつUIが豊富に揃ったセットです。気になった方は是非チェックしてみてください。

詳しくは以下

(続きを読む…)

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

クリエイティブなスマートフォン向けフリーUIキット「H1 / Free Mobile UI Kit for Sketch & Photoshop」

日々進化するデザイン。常に最新のものを情報としても、そして素材でも取得しておきたいもの。そんな中今回紹介するのは、最新のトレンドが随所に反映されたフリーUIキット「H1 / Free Mobile UI Kit for Sketch & Photoshop」です。

uikit

デュオトーンやフレッシュなカラーリングが特徴の、非常にクリエイティブ性のあるスマートフォン向けのUIキットとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WebService   
このエントリーをはてなブックマークに追加
1234...10...

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

2011年05月12日

webサイト制作のアイデアソースとなるポートフォリオサイト30選「30 Portfolios to Inspire You」

自信のこれまでの作品やアートワークを、多くの人に見てもらう為に作成するポートフォリオサイト。作品はもちろん、サイト自体のデザイン性やクリエイティブ性も、センスを問われる重要な要素の一つです。そこで今回は、ポートフォリオサイト制作の参考となりそうなwebサイトまとめ「30 Portfolios to Inspire You」を紹介したいと思います。


Rickard Sund

素材や色使いへの配慮が行き届いたポートフォリオサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2017年12月30日

フリーで使用できる最新のアイコンをサーチできるサイト「IconBros」

多種多様なアイコンはストックしておきたいもの。また、常に新しいものを手にしておくことで、デザインのトレンド性を保つことができると思います。そんな中今回紹介するのは、最新のアイコンをチェックできる便利なアイコンストックサイト「IconBros」です。

iconbros_top

既に700個以上のデザインアイコンが収録されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Design , WebDesign   
2018年03月13日

知っていると便利なCSSで創るハーフトーンエフェクト「Pure CSS Halftone Effect」

モダンな雰囲気からスタイリッシュな雰囲気まで、幅広い演出をしてくれるハーフトーン。今まで画像としてWebサイトに取り込むことが多かったのではないでしょうか。今回ご紹介する「Pure CSS Halftone Effect」ではWebならではの動きを楽しむことができるエフェクトを通したハーフトーンになります。

PureCSSHalftoneEffect

美しい動きで視線を惹き付ける、ぜひ取り入れてみたいエフェクトとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WebDesign   
2010年08月15日

HTMLのインデントをキレイにしてくれるWEBサービス「Ham Cutlet」

HTMLを書いていて、心がけていても時間に追われているとだんだんと乱れてきて、インデントされていなかったり、ルールがバラバラなソースになってしまうなんてことも多いと思いますが、今日紹介するのはHTMLのインデントをキレイにしてくれるWEBサービス「Ham Cutlet」です。

利用方法は非常に簡単で、WEB上で、HTMLをコピペ、その後設置されている「COOK!ボタン」をクリック。これだけです。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:31  |  
Category: WebDesign , WebService   
2014年04月05日

いろいろな種類のPhotoshop素材を集めた「Useful Collection Of Free Photoshop Files」

webサイト制作にはいろいろな素材を利用しますが、クオリティの高いものを1から作り出そうとすると手間や時間がかかってしまうもの。できれば時間を短縮しつつ、思い通りのデザインに仕上げたいものです。今回はそんなシーンにおすすめのPhotoshop素材を集めた「Useful Collection Of Free Photoshop Files」を紹介したいと思います。

psd140405_0
Transparent Organic Form – 365psd

いろいろな種類のPhotoshop素材がまとめられており、デザイン箇所に合わせて使い分けられるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:23  |  
Category: Photoshop   
2011年02月05日

文字を大胆にレイアウトしたwebサイトまとめ「Big Typography In Web Design」

webサイトにもさまざまなデザインが存在していますが、メインとなるビジュアルがないシーンもよくあるかと思います。今回はそんな状況にも対応できる、文字を大胆にレイアウトしたwebサイトまとめ「Big Typography In Web Design」を紹介致します。


My Portfolio

フォントをダイナミックに使用し、サイトのTOPを飾るメインビジュアルとしてデザインされたweb事例を多数閲覧することができます。中でもいくつか気になったものを以下にピックアップしましたので、ご覧ください。

詳しくは以下

Denise Chandler :: Designer, Freelancer, Warrior Poet
イラストとフォントを組み合わせて、一度見たら忘れられないようなインパクトの強いサイトに仕上がっています。

The Announcement – Time For Change – Sofasurfer is now Digitallabs
ブラックの背景に映える白い大きなフォントが印象的。シンプルなデザインが好きな方におすすめのテイストです。

Hull Digital Live 09 · Hulls first digital and technology conference.
手書き風の文字を使っているので、アナログ感がより強調されています。

デザインテイストもクオリティの高いものばかりで、webデザインのアイデアソースとしても最適。是非参考にしてみてください。

Big Typography In Web Design – Web Design Blog – DesignM.ag

続きを読む
posted 11:49  |  
Category: Design , WebDesign   
2010年09月20日

どんなシーンでも使える高品質なフリーフォント集「50 Best Free Fonts of All Time」

デザインを決定づけるフォント。デザインのイメージと近いフォントを利用することで、デザインのクオリティも向上します。今回紹介するのは汎用性の高い、高品質なフリーフォントを集めたエントリー「50 Best Free Fonts of All Time」です。


Caviar Dreams

少々癖のある書体も含まれていますが、比較的シンプルで使いやすそうなフォントが集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
2015年06月24日

高品質・高解像度のタイル状パターンセット「Free New Set of Material Design Patterns」

デザインの背景素材などに利用されるパターン素材。種類やデザインが非常に豊富で、ジャンル問わずストックされている方も多いのではないでしょうか?そんな中今回紹介するのは、高品質・高解像度のタイル状パターンセット「Free New Set of Material Design Patterns」です。

tiled1

独自のカラー配色がとても印象的な、タイル状パターンがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

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

グラフィックデザインのインスピレーション集「Creative Graphic Design for Advertisement」

デザインを制作する際、行き詰まる事は誰でも経験した事があると思います。そんなときに新たな刺激を与えてくれるインスピレーション集が今回紹介する「Creative Graphic Design for Advertisement」です。

liquid_color_by_chin2off
Liquid Color

様々な表現のグラフィックが紹介されていて、タイトルの通りおもに広告のデザインを集めてきているみたいです。海外のデザインなのでなかなか日本でデザインしているとなかなかできないデザインが多いですが、だからこそインスピレーションを得るにはぴったりなデザイン集だと思います。いくつか紹介されていますが、今回はその中からいくつか気になったグラフィックデザインをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:17  |  
Category: Design   
tag: Design
2010年01月30日

商用可!ベクターで使えるアイコンセット「Free Exclusive Vector Icon Pack: Web User Interface」

WEB制作に便利に使えるアイコンセット。上手く使えばユーザーインターフェイスの改善やデザインのクオリティアップに役立ちます。今日紹介するのは商用可!ベクターで使えるアイコンセット「Free Exclusive Vector Icon Pack: Web User Interface」です。

icon_vector01

全部で5種類のアイコンがセットになっていて、RSSや検索窓用の虫眼鏡などWEBのユーザーインターフェイスに使えるアイコンがセットになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:24  |  
Category: Design , vector , WebDesign   
tag: Design vector

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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