Media QueriesYou are now being GOOGLE.COM...
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
Collection: Design Patterns
Reuse, recycle, but don’t reinvent the wheel unless necessary. by Brian Christiansen at UI Engineering. Via. This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web. Please note that the content of these sets is not representative of all of the patterns I've captured. I tend to use tags more religiously and recommend that you look ther
Twitter新デザインは昔からあるアレです
Twitter公式ウェブの新デザインはもう試しました？ あれ見て、｢はて？ どこかで見たような...｣と思った方は鋭い！ そうなのです、黄金比（Golden Ratio）になってるんですねー。 Googleトップデザイナーの職を辞めて話題を振り撒いたTwitter現クリエイティブディレクターのDoug Bowman氏が、その発想の源をFlickrに公開し、明らかになりました（上図）。 黄金比は古くは古代ギリシャの時代からあり、フィボナッチ数列で有名になったコンセプトですよね。この比率の四角形は黄金四角形といって、正方形を切り取ると、残る長方形も黄金四角形になって、延々正方形ができていく永久スパイラル。パルテノン神殿からモンドリアンの絵画、巻き貝など、至るところで目にすることができます。 それが毎日のツイートにも！ [Flickr via Laughing Squid] Brian Barr
Minimalism in Web Design: A Guide
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. Minimalism is a word that gets tossed
お馴染みのあのコンピューターアイコン達にまつわる話
誰でも知ってるあのアイコン、一体どんな意味が？ 毎日毎日ガジェットと過ごしていると、たくさんのアイコンが目に入ります。電源アイコン、コマンドアイコン、BluetoothにUSB！ あまりにも当たり前になって気に留めてなかったアイコン達。一体それぞれのアイコンにはどんなストーリーがあるのでしょうか？ 電源コンピューターの電源オン／オフボタンのアイコン。ここを押せばスタートしますよ。TシャツになったりNYのコンドームパッケージデザインに選ばれたり、人気絶頂のお馴染みアイコン。 このアイコンのストーリーは、第2次世界大戦までさかのぼります。エンジニア達は各電源ボタンやスイッチをバイナリシステムを使ったラベルでタグづけしていました。1はオン、0はオフ。1973年、国際電気標準会議（International Electrotechnical Commission）にて、切れ目のある円の中にラインは
iPad App and Website Usability | Free UX Research Report by NN/g
Learn how iPad users interact with apps and websites on their devices, and whether usability improves with time as people practice and learn new interfaces. The design guidelines are based on 2 rounds of usability studies, conducted one year apart. We observed participants working on their own iPads to accomplish a broad variety of tasks. Articles on research findings: iPad Usability: First Findin
配色センスに自信がなくても綺麗なサイトをつくる方法 | nanapi[ナナピ]
配色センスに自信がなくても綺麗なサイトをつくる方法 に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。配色はセンスではない！ よく「私は色のセンスがないから…」などという言葉を聞きますが、 配色には基本となるセオリーがあり、知識として学ぶことができるものなのです。 よりよいWebデザインにするための配色のセオリー http://sweetlovexx.seesaa.net/article/90107619.html こちらにもいろいろ参考になる情報が盛りだくさんです。 書籍もいろいろあるのでamazonなどで検索してみてはいかがでしょうか。 「でも勉強とか面倒じゃないですか」 というひとでも大丈夫。 以下のサイトを使えば、なんとなくそれとなくカッコいい配色が手に入ります。 Color Scheme Designer 3 http:/
Appleのようなデザインをするためのコーディングチュートリアル15 – creamu
Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集です。 かなりかっこいいのが揃っていますよ。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Appleの製品紹介で使われているような、スライドショー。jQueryで動作し、PHPやDBは必要ない Apple style Accordion Menu Appleのサイドバーで使われているような、アコーディオンメニュー How to: Recreate apple.com menubar Appleのグローバルメニューはデザインがよく、ソースも綺麗。
iPhone向けWebアプリを作ろう（1/4） − ＠IT
Safari Web Content Guide for iPhoneを読み解きながら、iPhone／iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します。 （編集部） Safari Web Content Guide for iPhoneを読み解く ネイティブアプリケーション開発を可能にするSDKが公開され、一層注目を集めている米アップルのiPhone（Applle Developer）。3Gへの対応がうわさされ、日本市場向けの発表も待たれますが、読者の中には、早速iPhone向けのアプリケーション開発にチャレンジしている人もいるでしょう。 しかし、ネイティブアプリケーションを作るにはそれなりにプログラミングスキルが必要ですし、完成したアプリケーションは米アップルが用意する「App Store」経由でしか配布できないといった制約
Seasar Conference 2006 Spring (5) - 世界線航跡蔵
前の記事 に続いてSeasar Conferenceをレポートする。 セッション4 DB-sideのほうは「EJB3時代のERDレッスン - Activity Based Datamodel」 Seasar-sideのほうは「片手でスイスイWebアプリ2.0 - Tuigwaa劇場へようこそ」 ミニセッションのほうは「S2Flex2」 Tuigwaaのセッションは聴衆を感動と興奮の渦に巻き込んだらしいけれど、それは想像に難くない。 千葉滋PM採択案件最終成果報告会 で一応話は聞いて、私も非常に感動した。 Tuigwaaは一度聞いたからいいやと思って、私は「ERDレッスン」を聞いてきた。 はぶさん ERDセッションの発表者は、はぶあきひろさん。御本人を見るのは初めてで、少しイメージが違った。 はぶにっき は愛読しているけれども、偶に、SIerさんが書いていると想像するとちょっと鼻につくように
ASCII.jp：もう配色には困らない！「Adobe Kuler」
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな（得意な）色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」（クーラー）だ。Kulerは、さまざまな色の組み合わせ（配色パターン、Kulerでは「テーマ」と呼ぶ）をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上（2009年1月現在）ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ（以降の説明はログインしているものとして進める）。
フォームデザインいろいろ - DesignWalker
今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。 登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web
モダンCSSにおける黄金比とは？ | CREAMU
CSSでのレイアウトに黄金比を取り入れたい。 そんなときに参考になるのが、『Golden Ratio in modern CSS』。モダンCSSにおける黄金比だ。 このエントリーでは、960pxのdivがある場合、960 / 1.62 = 593px が左カラム、960 – 593 = 367pxが右カラムになるといったように、黄金比を取り入れたレイアウトの方法が解説されている。 その他にも、 line-height = font-size x 1.62 paragraph margin = paragraph line-height x 1.62 / 2 といったような設計の例が紹介されている。 結論としては、 Many people will argue, that this technic is an utopia and we cannot spend time coding ne
プロフェッショナルのデザイナーがよく使う21種類のフォント
ウェブデザインの世界においてどのようなフォントが好まれて使われているのかを調査した結果、21種類のフォントが選び出されたそうです。どれもこれも使い勝手の良さそうな、見やすくわかりやすい、それでいてインパクトのある英文フォントばかりなので、覚えておいて損はありません。 プロフェッショナルのデザイナーによく使われている21種類のフォント一覧は以下から。 21 Most Used Fonts By Professional Designers | instantShift Helvetica Frutiger Myriad Pro Avenir Std Trajan Optima Std ITC Franklin Gothic Std Futura Bickham Script Univers Eurostile Interstate Trade Gothic Gill Sans Warnock
MOONGIFT: » ネットワーク図を簡単に描ける「Network Notepad」:オープンソースを毎日紹介
ちょっと懐かしめの、それでいて現役で役立つソフトウェアの紹介だ。 オフィスのLAN配線図や、Webサービスのサーバ配置図を作る際にネットワーク図を作ることがある。Microsoft Visioがあれば良いが、高価なソフトウェアだけに全員分は難しい。とは言え、単なる四角などではちょっと雰囲気が出ないので寂しいだろう。 ネットワーク図を簡単に作成する そこで使ってみたいのがNetwork Notepadだ。Windows向けのフリーウェアで、ネットワーク図を作成するのに必要な機能およびアイコンが多数登録されている。 Network Notepadは各種オブジェクトを配置して線で結んだり、水平線を引いたりしてネットワーク図を作成するためのソフトウェアだ。もちろんオブジェクト同士をつないだ線は、オブジェクトの移動に合わせて長さが変わるようになっている。 多数のオブジェクトが存在する IPアドレスを
3D円グラフを使うのはやめよう | Okumura's Blog
落伍弟子さんの目の錯覚を誘うグラフの受け売りで申し訳ないが，都立高校教科書採択結果のPDFの図がすべて3D円グラフになっており，目の錯覚で誤解が生じやすい。例えば右図で日文は啓林の2倍あるのに中心角は啓林のほうが大きく，面積比でもほぼ互角に見える。情報リテラシーではっきり「3D円グラフは使うな」と教えてほしい。 Rのヘルプの「pie」の項目にも次のようにあるように，そもそも円グラフが良くない。 Pie charts are a very bad way of displaying information. The eye is good at judging linear measures and bad at judging relative areas. A bar chart or dot chart is a preferable way of displaying this ty
MOONGIFT: » これはすごい！Firefoxを使ってサイトのモックアップを簡単に作成する「Pencil」:オープンソースを毎日紹介
これはデザイナーのみならず導入必須のソフトウェアと言えそうだ。 Webサイトを作る際には、モックアップが必要になる。それをベースにして「ここをこうしよう」「次はどこに遷移させよう」といった議論が可能になる。頭の中だけではイメージがはっきりせず、意見も出しづらい。 ドラッグアンドドロップでモックアップを作成できる そんなモックアップを作成しようと思ったら、紙やHTMLオーソライズソフトウェア、画像編集ソフトウェアを使うことが多かった。だが画像編集ソフトウェアではチェックボックスやテキストボックスが作りづらい、HTMLオーソライズソフトウェアではデザインの微調整が面倒、紙では重ね書きしづらい…とそれぞれに欠点があった。そこでこれを導入してみよう。 今回紹介するオープンソース・ソフトウェアはPencil、Firefoxアドオンとして動作するモックアップ作成ソフトウェアだ。 個人的にはモックアップ
削る - jkondoの日記
はてなハイクのh:keyword:Wacomさん、ペンタブレット欲しい！が相変わらずの賑わいを見せている。世の中には（あるいははてなユーザーには）こんなにたくさん絵を描く人がいたのかと思う。「2色だけで絵を描いてください」という限定感がむしろ絵を描く意欲を喚起したのかなと思うが、こういう割り切りはサービスを作る上でも重要だなと思う。そもそもハイクのお絵描きパレットの色は最初からそれほど多くないが、最近これといって色が足りないという要望も聞かなくなってきた。新しいエントリーを投稿するインターフェースは、Ajaxを使って画面遷移なしに投稿できるようにしようかと思っていて、結局リリース直前で間に合わなかったので先送りにしたんだけど、今の仕組みでもそれほど不満があるようには思えない。 長い期間サービスを作ってきていると、「この先に進むとやりすぎだから必要以上に作りこんではいけない」とか「ここはこだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-379.html
