少ない装飾で素材の魅力を生かす、ズルいWebサービスデザイン実践編 // Speaker Deck
WCAF Vol.11 「Design」 in 福井 で発表させていただきました。 http://wcaf.doorkeeper.jp/events/7028 協力： we love heroku by @ppworks http://welove.herokuapp.com/ （参考）ppworks 氏によるエントリー http://www.genuineblue.jp/posts/weloveheroku-design-renewal/ ズルいデザインテクニック2013 + セミフラット version - in 福井 https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku2013-plus-semihuratuto-version-in-fu-jing
WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu
Tweet * WhatFont is not affiliated with MyFonts and/or the WhatTheFont service. ← Back to Chengyin's main page What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on. To embrace the new web font
第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。 - 納豆には卵を入れる派です。
どうも。 書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。 先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck 反響の大きさに驚き！ありがとうございました。 実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザイン
デザインの引き出しを増やそう！細部にまでこだわった美しいウェブUIエレメントのPSD素材のまとめ
細部まで作り込まれた美しいデザインのウェブ用のUIエレメントのPSD素材を紹介します。 そのまま制作に使ってもよし、インスピレーションをもらってもよし、PSDなのでエフェクトの勉強をしてもよし、などいろいろ活用できると思います。 ※一部のファイルはPNGフォーマットです。
これくらいはやってほしいWebデザイン
PHPカンファレンス2012@東京 ( http://www.ustream.tv/recorded/25414614 )
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
2万以上もの各種ボタン・アイコン・バーなどのユーザーインターフェースパーツのデザインを検索してダウンロードできる「UICloud」
「Download button」「CSS button」「Music Player」など、テキストボックスに欲しいユーザーインターフェースパーツを記入するだけで、総合計2万個以上のパーツの中から欲しいものを検索してきてくれるのが「UICloud」です。 UICloud | User Interface Design Search Engine, UI Elements, GUI Design, Free Downloads http://ui-cloud.com/ トップページのテキストボックスに探したいパーツの名称を記入して「Search」ボタンを押します。今回は「Download button」で探してみました。 すると検索結果一覧が表示されます。色んなダウンロードボタンがずらり。 気になったものをクリックします。 すると、大きめサイズのイメージが表示されます。 画面右端には詳細情報
行ってきた活動
HTML Best Practices 保守しやすく、規模に依存しない、HTML文書の基本的な書き方をまとめた文書です。 vim-css3-syntax Vimのビルトイン・ランタイムに含まれるCSSのシンタックス・ファイルを拡張する形で、CSS3の様々なプロパティーなどに対応させます。 Color Blindness Emulation SVGフィルターを使い、画像やウェブページに対して8種類の色覚多様性を再現します。 hail2u-ipsum このウェブサイトの文章を利用して、アルファベットやカタカナが適度に混じった日本語の無意味な文章を生成します。 MN Google Fontsで公開されている等幅フォントを普通のウェブページで利用すると、どのような印象になるかを確認できるウェブサイトです。 Drawic SVGで描かれたアイコンの小さなセットです。 CSS MQPacker CSS
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
シリコンバレーで聞いたデザインが美しいWebサービス／アプリ15選 - パパパパ
このブログは、僕がこれまでWebサービスをいくつか作ってきて、失敗したり成功したり色々体験していることをまとめています。 シリコンバレーに来て45日が経ちました。今日はいつもと趣向を変えて、こちらで聞いた、デザインやUI/UXが美しいWebサービスやアプリの一部を紹介してみたいと思います。 Chill http://chill.com/ デザインのイケてるサービスを聞くと、かなりの確率でこのサービスの名前が挙がりました。動画の上に投稿者のプロフィール画像が円形に表示されているのが素敵です。詳細ページの「Thoughts?」ボタンの動きが秀逸。色々参考になるサイトだと思います。 ChillのようにPinterest風デザインは、今まさにトレンドのようで、教えてもらったサイトの中でも本家に負けず劣らずのデザイン性を持ったサービスも多いです。女性ウケが良いことと、画像をファーストビューでたくさん
Dribbble - Show and tell for designers
Get inspired by the work of millions of top-rated designers & agencies around the world.
Fire.app: Dead Easy HTML Prototyping
Sass + Compass Love Sass/Compass but hate command line interface? Fire.app has first class Sass/Compass support just like our Compass.app. No more vendor CSS prefixes and hand-crafting sprite images! Template languages Haml/ERB/Markdown formats are supported as the content templating engine. Layouts, partials, and helpers can all be written in different format that fits the best for faster design.
Coding a Clean Web 2.0 Style Web Design from Photoshop
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. In this web development tutorial, you’
Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework
What We're Building The focus here is on an web page design example using the Blueprint CSS grid framework, based on my earlier Which CSS Grid Framework article. However, you can apply the same process to any CSS grid framework you prefer. If you don't like using grid frameworks on production sites, you can always replace the CSS code and corresponding HTML classes with your own. The page design s
25 Excellent Photoshop Web Design Layout Tutorials
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. Photoshop is a popular web design tool
無題ドキュメント
Adobe Photoshopで始める Webデザイン Photoshopのデザインをそのままブラウザへ 2 3 デスクトップにフォルダを作成し、myWebsiteとい う名前を付けます。このフォルダが、これから作成 するWebサイトのメインフォルダ（ルートフォルダ） になります。次にDreamweaverを起動し、サイトメ ニューから「新規サイト」を選択します。このウィ ザードは、新規プロジェクト用Webサイトの作成手 順を順に実行します。 Dreamweaverで、ファイルメニューから「新規」を 選択し、ページタイプ列から「HTML」を、レイアウ ト列から「<なし>」を選択して、「作成」をクリック します。 Dreamweaverで、ファイルメニューから「新規」 を選択し、ページタイプ列から「CSS」を選択して、 「作成」をクリックします。現在、2つの無題ドキュ メントが開いています
27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts - DzineBlog.com
27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts For beginner web designers – design tutorials really help to understand the basic knowledge about web design!, Here is a collection of 27 layout design tutorials that will help you with designing a decent looking website. Some of them are really good!, Design a cool Photography Portfolio Design A Grungy Website Design In Ph
Webデザインのセオリーを学ぼう
2012年2月16日 福井工業高等専門学校で行いましたデザインセミナーでのスライドです。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/04/photoshop-layout.html
新着記事
