Interactive Drag and Drop Coloring Concept | Codrops
A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette. Today we would like to share a fun interactive coloring concept with you. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it (like sections or texts). You might have encountered customization tools before, but we wanted to a
RESTful API Design With NodeJS & Restify | Envato Tuts+
The RESTful API consists of two main concepts: Resource, and Representation. Resource can be any object associated with data, or identified with a URI (more than one URI can refer to the same resource), and can be operated using HTTP methods. Representation is the way you display the resource. In this tutorial we will cover some theoretical information about RESTful API design, and implement an ex
Recreating the Touch Ripple Effect as Seen on Google Design | Envato Tuts+
Google's new design efforts are vast and justify a significant amount of conversation. But instead of talking about the theory of Material Design and the implications of Google's newest efforts, we're going to focus on an interesting technique Google has employed on their Design landing page. When the user clicks on one of the blocks, an SVG circle expands from the point of the user's click to fil
アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？
Googleが開催した「Google I/O」では多くの新デバイス・サービスが明らかになりましたが、その中で次期Androidの「L」に採用される新しいUXの体系「Material Design」も発表されました。Googleのプラットフォームを統一するアニメーションを使った新たなデザイン「Material Design」とはどんなものなのか、ムービーが公開されています。 Google Design http://www.google.com/design/ Material designがどのように端末に採用されるのかは、以下のムービーを見るとよく分かります。 Material design - YouTube 例えば、以下の受信箱ではメッセージが「今日」「昨日」に分けられています。 そのうち1つのメッセージをタップ。 すると夏のバーベキューに関しての2人のやりとりが表示されました。 間
The Day's Color
Inspired by Stars of the Lid 'And Their Refinement...'
15 Free Bootstrap Admin Themes
In the past, the admin sections of web applications were often built with functionality as the only priority, with little or no consideration given to the design. Thankfully, times have changed, and in recent years, there has been a pleasing convergence of powerful functionality and beautiful design. This trend has been supported by the popularity of the Bootstrap framework, which has made it easi
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
ブレないアプリデザインのすすめかた
目を惹くポートフォリオの8つのポイントと6つのコツ / 8 key points and 6 tips for portfolios
progre(c)ss! - スタイルシートだけで実現するシンプルなプログレスバー MOONGIFT
処理中を知らせるためのプログレスバーは大事な存在です。最近ではYouTubeなどでウィンドウ上部に読み込み中のステータスバーを出すといったUIも採用されています。いずれにしても無反応な状態を回避するのはユーザストレス軽減につながるはずです。 ステータスバーを表示するライブラリは幾つかありますが、今回はprogre(c)ss!というソフトウェアを紹介します。一本線のとてもシンプルなステータスバーライブラリです。 progre(c)ss!の使い方 progre(c)ss!はその名の通り、スタイルシートだけで作られています。なのでスタイルシートを読み込んだら、後はHTMLで次のような記述をするだけです。 <div class="progrecss" data-progrecss="77"> My first progre(c)ss! </div> ちなみにスタイルシートファイルを見ると1ポイント
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
Google Tipsのようなヒントカードを並べて拡大できるUIを実装できる「jQuery Tip Cards」:phpspot開発日誌
jQuery Tip Cards by Pete R. | The Pete Design Google Tipsのようなヒントカードを並べて拡大できるUIを実装できる「jQuery Tip Cards」 次のようにカードがならんでいて、フォーカスで傾いてクリックでLightBox風に拡大されるというUIが実装できます 関連エントリ html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」 クールなニュースティッカーを実装できるjQueryプラグイン「Advanced News Ticker」 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 スクロールが使いやすいカレンダーピッカー実装jQueryプラグイン「continuous-calendar」 サイト内にパノラマ画像をモダンな感じ
Android Action Bar をカスタマイズする
Android Developers Blog: Customizing the Action Bar Action Bar のデザインパターンを紹介してから、多くのアプリケーションが Action Bar を使うようになりました。 そして、このデザインパターンは Android 3.0 でデフォルトの機能になりました。 Honeycomb をターゲットとしたアプリで Action Bar を使う方法は using Action Bar を参照してください。 Theme.Holo.* を継承した独自スタイルを定義して、ここで Action Bar をカスタマイズしていきます。 <style name="Theme.MyTheme" parent="android:style/Theme.Holo.Light"> … </style> ■ Icon Android Asset Studio
無料で使える高品質な50のデザインパーツ素材集 ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
最近デザインに関する記事を少しずつ増やしているSEO Japanですが、予想以上に人気に嬉しいながらも微妙に戸惑っていたりもします。とはいえ、需要があればお届けするということで新たな無料素材のご紹介。 — SEO Japan 世の中には高品質のデザイン素材を作成し、無料で公開してくれる素晴らしいデザイナーが沢山いる。今回の記事ではそんな素材を50まとめてみた。 Blaubarry UI Kit Review & Rating Stars… (PSD) 7 Styled Tickets Settings Menu (PSD) Black UI Kit LOGIN FORM PSD Sign In Notepad Solid UI Kit Classic Login Form UI-Element Set Simple Slider UI Elements White&blue set MP3
様々な場面で参考になるオススメUIデザインキット45選 | バンクーバーのうぇぶ屋
様々な場面で参考になるUIキットが世の中には本当に沢山ありますが、UIキットと言っても、その種類はPCからiPhoneやiPadなどのキャリア別、質感、色相や目的、本当に様々なUIがありますよね。 そこで今回は僕がこれまでのWEB屋歴の中で見つけたUIキットを僕なりにタイプ別に分けてご紹介。 どういう時に使うのかは人それぞれですが、沢山の人が考えに考えぬいたUIキットであれば、そこから得られる物も本当に多いと思うので、是非参考にしてみるのはいかがでしょう。 黒ベースなUIデザイン Black UI Kit Blaubarry UI Kit FREE Ui elements Set d’elements ui (PSD) スマートフォン/タブレットPC系 UIキット Android GUI PSD Vector Kit Mobility: A free set of mobile UI de
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Experiments | CodyHouse
IDEA * IDEA
http://nanobar.micronube.com/
サービス終了のお知らせ
http://smartphone-zine.com/mobile/custom-component-calendarview%E3%82%92%E4%BD%9C%E6%88%90.html
Design Tickle | General Blog
