ブックマークしておきたい！UIデザインのアイデアに困った時、参考になるサイトのまとめ | コリス
WebサイトやアプリなどのUIデザインのアイデアに困った時の参考に、そして勉強になるサイトを紹介します。 ページのレイアウト、UIのさまざまなコンポーネント、動きが気持ちいいアニメーション、実装のテクニックなど、定期的にチェックしておきたいサイトばかりです。 UI Patterns ページのレイアウト、ナビゲーション、データコンテンツ、フォーム、ユーザスクリーンなど、インタラクティブ性の高いUIデザインのさまざまな事例から、UIの問題を解決するデザインのパターンが紹介されています。 ローンチして間もないサイトですが、内容は非常に充実しています。 Collect UI DribbbleでUIデザインを探す人には、かなり便利です。日々アップロードされるDribbleのアートワークのUIデザインに関するもののみをコレクションしているサイトです。 このサイトもローンチしたばかり、登録数は2,000
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
HTML5とCSS3を使った高品質なWebテンプレート「50 High Quality Free HTML5 And CSS3 Web Templates」
TOP > WebDesign > HTML5とCSS3を使った高品質なWebテンプレート「50 High Quality Free HTML5 And CSS3 Web Templates」 HTMLやCSSの発展とともにWebサイトの表現の幅も広がってきていて、以前よりもクリエイティブなWebサイトが短時間で制作できるようになりました。今回はそんなHTML・CSSを用いたWebテンプレートを集めたエントリー「50 High Quality Free HTML5 And CSS3 Web Templates」を紹介したいと思います。 PhotoArtWork どれも高品質なWebテンプレート。WEBサイトが制作できる方であれば大幅に時間を短縮してWebサイトを制作することができます。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 Demo Free
これだけは講読したい！デザイナー向け海外ブログ厳選20本+α | 素材系・ノウハウ系 etc.
使える資金が少なく、宣伝広告にリソースを割けないスタートアップ。ユーザを増やし、サービスを使ってもらうための有力な施策の一つは、良いデザインを採用することです。 先日、日本発のOrigamiがスタートアップ界隈で有名になりましたが、優れたデザインが高く評価されたことは記憶に新しいでしょう（記事：出資元のKDDIがデザインセンスを高く評価、5億円を出資）。スタートアップといえども、デザインを軽視することはできないのです。 Webデザインだけでなく、最近ではアプリのUIなど、デザイナーの仕事は広がっていくばかり。忙しさを理由に、日々の情報収集を日本語のブログだけで済ませていませんか？ 良いデザインを誰よりもいち早くキャッチアップしサービスに活かすため、海外ブログの購読はもはや常識と言っても過言ではありません。 このエントリーで取り上げるブログのカテゴリは以下の通りです。 ● デザイン方法論系
FlatなUIが美しいWEBサイト２５:phpspot開発日誌
25 Best Examples of Flat UI Design Websites | The Design Inspiration FlatなUIが美しいWEBサイト２５がまとまっていました。 GoogleやMicrosoftのWindows8といいフラットなデザインが流行っています。 この背景には、作り手にとっては作りやすくて、見る側には見やすく好き嫌いがなさそう、っていうところがありそうですが、フラットなデザインでも綺麗にデザインされたサイトがあってフラットなサイトを作る際に参考にできそう。 関連エントリ HTML5を使ったクールなサイトデザイン集２１ モダンなサイトデザインのPhotoshopテンプレート１３ Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」
アプリのUIデザインはズルいデザインテクニックを活用しよう！ - 40歳からのキャリアチェンジ
@ITのHTML5 + UX : HTML5とUXの総合情報フォーラムというカテゴリで、少ない手間と知識でそれなりに見せる、ズルいデザインテクニックという記事があります。 クラフトビールの情報（特にクラフトビールが買えるお店のやつ）をiPhoneで気軽にチェックしたいという自分の欲求を満たすためにアプリ作っているのですが、UIデザインをそれっぽく仕上げたいので上記記事を参考にして、このような↓感じのUIを作ってみました。 グラデーション設定での工夫点 SassやCompassを使って、ズルいデザインテクニック (1/2)という記事の中でズルいグラデーションという内容が取り上げられています。 一部引用すると ベタ塗り一歩手前くらいの、微妙な明度差のグラデーションで本物っぽい質感を出そう 一見、1色でベタ塗りにしたように見えるけど、よく見ると微妙に上下で色の明るさが異なるグラデーションを、「ズ
メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い EXPANDING OVERLAY EFFECT / Maka-Veli .com
CodropsでMARY LOUという方が書かれていたんですが、可愛かったのでご紹介。 CSS/JS/で作られていて、デモでは天気予報を作られているんですが、アイコンはフォント。オーバーレイエフェクトもとても良い感じです。 メトロっぽいデザイン、増えてきましたよね。 個人的には結構好きなんですが、色と枠内のバランスをミスると一気に下品な感じになりがちなので結構難しい・・・ ダウンロードも出来ます。詳しく知りたい方はこちら PUTTING CSS CLIP TO WORK: EXPANDING OVERLAY EFFECT / Codrops http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/ メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
Flash を必要としない HTML5 オーサリングツールを元アップルエンジニアが公開
［Hype for Mac］ 元アップルエンジニアによる HTML5 オーサリングツールの話がおもしろい。 9 to 5 Mac: “Believe the Hype: Former Apple engineers release Flash-killing HTML5 authoring tool” by Christian Zibreg: 24 May 2011 ＊ ＊ ＊ HTML5 コーディングは大変 HTML5 が盛んに持てはやされるが、魅力的ウェブサイトを HTML5 でコーディングしようとするとウェブ開発者にとっては大変な作業になる。もうたくさんというわけで、２人のエンジニアがアップルを辞め、Y Combinator が資金を出すスタートアップ「Tumult」を設立した。ちゃんとした HTML5 オーサリングツールの恒常的不足を解決しようというのが設立目的だ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.smaroomch.net/html_css_sample30/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Re* Programming » c#
Flat UI - Free Bootstrap Framework and Theme
何度も読み直したい！はてブ数300以上のWeb制作系スライド2012年版