Googleの提唱する「マテリアルデザイン」の事例を集めまくって無料で素材のダウンロードまで可能な「MaterialUp」
Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。 The Best Of Material Design, daily – MaterialUp http://www.materialup.com/ マテリアルデザインとは何か？ということは、以下の記事から読むことが可能です。 アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？ - GIGAZINE
自分でできるデザイナーズ・サイト、Bootstrapをさらに簡単に最速でUIを構築できる「Jetstrap」は全てのウェブ制作関係者必携サービスとなるか 【増田 @maskin】 | TechWave（テックウェーブ）
「アイディアはあるんだけど、モックすら作れないIT起業家」「“UIだけなら自分で作れる” とやってみたけど、見にくいページにしかならない、どうしよう、、、」。高度なテクニックは不要、でも、やっぱりデザイナーさんに依頼しないといけないシーンが多いこの業界。 しかし、「Twitter Bootstrap」(以下 bootstrap)の登場により、多くの人がデザイン性の高いページデザインを短期間で作れるようになり世界は変わった。bootstrapは、プログラマーやディレクターなどが、最低限のコードの組み合わせでスッキリと解りやすいユーザーインターフェイス(UI)を構築できるライブラリ(支援プログラム群)のこと。 Bootstrapの登場で、スタートアップはスピーディにページを作りあげ、プログラマーは必要なページを “とりあえず” 作っておくくらいのことをするのが手軽になった。ただ、bootstr
UIデザインが素晴らしい35のウェブスタートアップ ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
最近かつて以上にウェブサービスにとってデザインが重要だ、ということがいわれることが多くなってきた気もします。PinterestやFlipboard等、いわゆる次世代ウェブデザインを代表するようなサービスも大人気ですが、もちろんそれだけはありません。今回から新たに登場する米国の人気デザインブログspyrestudiosから、最近のスタートアップでデザインが素晴らしいサイトを35まとめた記事を紹介します。 — SEO Japan 何年か前までは誰もがWeb2.0の流行について話していた。インターネットではMySpace、Friendster、Facebook、Twitter、そして最近ではFoursquareやPinterestに続く新しいスタートアップが次々に登場している。テクスタートアップの世界では、新しいアイデアにこと切れることはない。 ウェブデザインに関しても同じことがいえる。今回、最
ロゴデザインする時の参考に！ロゴデザインギャラリーのオンパレードと注目記事色々！ | バンクーバーのうぇぶ屋
僕がロゴを作るってことはこれまで正直殆ど無かったんですが、実は今とあるWEBサービスの開発に関わっていてそのフロントエンドの制作取り回しを担当させて頂くことになりました！ とは言っても、小さいプロジェクトなのでロゴも自分で作ることになったのですが、なんともまぁ久々のロゴデザインなわけですよ。サービス名もまだ思案段階で着手するのはもうちょい先かなと思うんですが、どうせ作るなら恥ずかしくない物にしたいと思い、ちょっと最近の流行やらロゴデザインの参考になりそうなサイトをEvernoteから引っ張ってきたので今日はその辺ついでにご紹介出来ればと思います！ いやしかし、ここ数年でめっちゃロゴだらけのサイト増えましたねー。僕がWEBとかデザインとか勉強しだした時ロゴサンプルとかは Doslogosとか LosLogosとか買って参考にするくらいしかロゴのサンプルというか、参考に見る機会無かった気がする
最近気になってきたjQueryについて色々調べてみました - もとまか日記
最近、「jQuery」というキーワードをよく見かけます。 これって何だろ？と思ったので調べてみたら、JavaScriptのライブラリのようで。 てことで、最近ちょっと気になってたJQueryについて調べてみました。 jQueryの概要 まずは難しいことは抜きにして、以下を読んでみると分かりやすいです。 はじめてのjQuery jQuery仕様関連 一応ですが、仕様について。 jQuery 日本語リファレンス 必要に応じてみればいいかな？と思ってるので、まだ細かくは見てません。 初心者向けの基礎知識、基礎講座 最初は初心者向けの記事を読んでみると良さそうです。 ASCII.jp：40分で覚える！jQuery速習講座一晩で覚えるjQueryの逆引き基礎サンプル7つjQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみるjQuery 開発者向けメモ サンプル、プラグイン 調べてて
「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」～ 性年代別にみる操作印象 ～ / IMJモバイル
株式会社アイ・エム・ジェイ（JASDAQ 4305）のグループ会社である株式会社IMJモバイル（本社：東京都目黒区 代表取締役社長：川合純一）は、「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」を実施いたしました。 調査期間は2012年3月2日～3月3日、有効回答数は826名から得られました。 調査結果概要 スマートフォンの進化により、サイト内での様々なインタラクティブUIを用いた表現方法が見受けられるようになりました。そこで、今回は複数のインタラクティブUI実例を用いたユーザーの操作印象について調査を行いました。 調査結果より、インタラクティブUIの受容性や好まれる表現は性年代によって異なることがわかりました。 例えば商品カテゴリを選択する際の階層情報を表示する表現では、20代男性の場合、「サブウィンドウが開く表現」もしくは「横タブでの表現」が好まれる結果となった一方、2
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
Home
Fellow Photographers, I want to introduce myself. I’m Dan Harlacher, the VP of Products at ON1. You may recognize me from some ON1 announcement videos ...
CSS Design: Taming Lists
What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. For example, I find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such. Of course the reason that we don
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
CSSで作成されたサイトのメニューサンプル集:phpspot開発日誌
Designrific - Mostafa Mourad from Egypt - Blog: 71 CSS menus for free CSSで作成されたサイトのメニューサンプル集。 サイトのデザインにとってメニュー部分は重要な箇所になってきます。そのメニュー部分のサンプル集。 多くのリソースから自分の作りたいサイトにあったナビゲーションを選んで使えますね。 11 CSS navigation menus 12 more CSS Navigation Menus. 14 Free Vertical CSS Menus 2-level horizontal navigation Absolute Lists Accessible Image-Tab Rollovers ADxMenu A drop-down theme Bookend Lists Bulletproof Slants C
Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
【レビュー】ドラッグ&ドロップで今風のWebサイトを作ろうぜ - Weeblyを使いこなす (4) 自分好みにカスタマイズ | エンタープライズ | マイコミジャーナル
Weeblyでは、図22のようにテーマがあらかじめ用意されている。さらに、テーマごとに拡張設定が用意されているので(図23)、自分らしいデザインを作っていくことができる。 図22 テーマがあらかじめ用意されている 図23 テーマごとに拡張設定が用意されている 作成したWebサイトはWeeblyのサイトからそのままコンテンツ配信することもできるが、zipファイルとしてダウンロードすることもできる(図24)。 図24 作成したWebサイトをダウンロードできる Weeblyは、使い勝手が良く、試してみる価値のあるサービスと言えよう。執筆時点では、まだβ版だったので、今後はさらにエレメントの追加などが行われることだろう。また、場合によっては履歴を記録する機能なども追加されるかもしれない。今後の発展が楽しみなサービスだ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
最近よく見かけるぼやけた背景にマッチするUIエレメントのPSD素材 -Metallic and Glassy GUI Pack
純利益をあげているEコマースTOP100サイトに見る、購入フローの全ステップをキャプチャでおさめたまとめ
CSS3だけで作るボタンデザインいろいろ
About E-lusion: Your go-to for web design tips
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
WEBデザインに優れたサイトのサムネイルギャラリー ≪ サムネイルクラウド ≫ | ホームページのネタをお探しのデサイナーへ