【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe BlogThe Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
デザインはもっとシンプルに！無駄な要素を削ぎ落としたUIデザイン「コンプレクション・リダクション」とは？
「あれ、いつのまにかデザインが白っぽくシンプルになってきたなぁ」 Facebook MessengerやInstagramなどのスマートフォンアプリの度重なるアップデートの末に、こんなことに気づいたひともいるのではないでしょうか。 デザインは、よりシンプルで、ストレスのかかる要素をそぎ落とす方向へとどんどんと進んでいます。 2012年頃に広まった*「フラットデザイン」を皮切りに、「マテリアルデザイン」や「ミニマルデザイン」、そして「フラットデザイン2.0」や「メトロUI」*と呼ばれるデザインなどのトレンドが次々と流行し、そうしたトレンドを踏まえたホームページやアプリが量産されました。 そして、2017年、果たして次に来るデザイントレンドは一体何なのでしょうか。 その答えが、*「白っぽいデザイン」*に現れています。 今回は、「白っぽいデザイン」の正体である新しいデザイントレンド*「コンプレク
「センスない」と言わせない！ 非デザイナーでもわかるUI配色のコツ
どんなに機能がイケてるアプリでも、デザインがイマイチだとなかなか使ってもらえません。そこで必要なのが、「色」の知識。もうセンスが悪いなんて言わせません。 Kissmetricsによると、製品の外観は消費者の購入決定判断に一番影響する要素です。最近では、マーケティングマネージャーがカラーコンサルタントを登用し、カスタマーを引きつける力のある色をどう選ぶべきかアドバイスを受けるのが通常になってきています。色が重要なマーケティングツールだと理解しているからです。モバイルアプリの開発者にとっても、そうした流れから学ぶべき、役立つことはたくさんあります。 カラーセオリーとは 3原色（赤、黄、青）を基本としたカラーホイールを芸術家が使うようになってから、もう何世紀もたちます。最初のカラーダイアグラムは350年前に誕生し、ニュートンによって開発されました。 最近使われるカラーホイールは、二次色（緑、オレ
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
How to Create a 3D Tag Cloud in jQuery | Devirtuoso
With browsers rendering JavaScript faster than ever before, it’s a great opportunity to get creative with jQuery. This tutorial will show how to create a scrolling 3D tag cloud…it’s not as difficult as you might think. 3D Tag Clouds..Oh My What exactly will we be building? It’s somewhat like a carousel, but we’re going to have the take fade off into the distance like the lone ranger at the end o
25 Examples of Mega Menus in Web Design - DesignM.ag
Mega menus are a growing trend in web design (see Mega Menus: The Next Web Design Trend from Sitepoint). For sites that involve a lot of pages and/or products, a mega menu may be able to improve navigation and usability. In this post we’ll look at 25 examples of mega menus in action. Many of those featured in this post are from e-commerce websites. Mega menus are common on e-commerce sites because
CSSでゲームのような円形メニューを作るサンプル:phpspot開発日誌
Stu Nicholls | CSSplay | A circular menu with circular sub menus CSSでゲームのような円形メニューを作るサンプル。 次のような、可愛い円形メニューが作れます。 アイコンにカーソルを合わせると、「HOME」といったメニュー内容が表示されるため、迷うことなく使えそう。 鉛筆にカーソルを合わせると、追加で２つのアイコンが表示され、次のアクションにいけます。 人型のアイコンにカーソルを合わせると、４つのアイコンが表示。 メールアイコンにあわせると次のアクションとなる４アイコンが表示。 という感じで、なかなかユニークなナビゲーションで、触っているだけでもなんとなく楽しい感じがします。 実装すると、それだけでアイデアの利いたサイトだなぁと思われそう。 こうした枠の幅を最小限にしてすべての項目を見せつつスマートに配置できるという点でＵＩと
YUI最新版、CSSをオンザフライで変更するユーティリティ | エンタープライズ | マイコミジャーナル
YUI - Yahoo! User Interface Library The YUI development communityは18日(米国時間)、YUI (Yahoo! User Interface Library)の最新版となるYUI 2.7.0を公開した。YUIはYahoo!で開発されたAjax JavaScriptフレームワーク。さまざまなUIコンポーネントが用意されている。対応ブラウザチェックも充実しており、クロスブラウザ開発に活用できる。 YUI 2.7.0の主な特徴は次のとおり。 StyleSheet Utilityコンポーネントの導入 IE8サポートの改善 ベータ扱いから正式コンポーネントへ格上げ (Element、ProfilerViewer、Selector) コンポーネントの機能拡張 (Charts Enhancements、Dom Collection、Cont
jQueryを使ったフェードインするポップアップバブル | CREAMU
クールにツールチップを表示させたい。 そんなときにおすすめなのが、『Create a jQuery Popup Bubble』。jQueryを使ったフェードインするポップアップバブルだ。 このエントリーでは、↑のようにマウスオーバーでフェードイン&アウトするチールチップの実装方法が紹介されている。 デモは以下から。 » View Demo jQueryを使ったフェードインするポップアップバブル、チェックして参考にしてみてはいかがだろうか。 » Create a jQuery Popup Bubble 恵比寿でカフェ中っと。天気がよくて気持ちいいですねーー。 テンションが上がったのでアニメGIFにしてみましたm(_ _)m
jQuery UI タブ - ［JavaScript］All About
<script src="./jquery.js" type="text/javascript"></script> <script src="./ui.tabs.js" type="text/javascript"></script> <link href="./ui.tabs.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> $(function() { $('#jqtab-example1 > ul').tabs(); }); </script> <div id="jqtab-example1"> <ul> <li><a href="#tab-1"><span>タブ-1</span></a></li> <li><a href="#tab-2"><span>タブ-2</span></a></li
サイト作りに使えるインターフェースのパターンが満載！『UI Patterns』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近よく見かけるレスポンシブ対応のUIコンポーネントやレイアウトがよく分かるHTML, PSD, Sketchの素材 -Now UI Kit
IDEA * IDEA
UIパターンいろいろ - DesignWalker
フォームのデザインいろいろ - DesignWalker
ソシオメディア | UIデザインパターン