プロペラがすごい！よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller
最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。 Propeller Propeller -GitHub Propellerの特徴 Propellerのスタイル・コンポーネント Propellerの特徴 PropellerはMaterial Designのデザインやアニメーション、Bootstrapのモバイルファーストで構築されたレスポンシブ対応のフレームワークです。 MITライセンスで、個人でも商用でも無料で利用できます。 25個のUI要素を含むレスポンシブ対応のコンポーネントのライブラリ 開発プロセスをスピードアップするテンプレート UI要素を段階的に使用する詳細なユーザーマニュアル 対応ブ
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
少ない装飾で素材の魅力を生かす、ズルい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
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
ズルいデザインテクニック2013 + セミフラット version
[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/k…
Subtle Patterns | Free textures for your next web project
These lovely water-colorful dots will make your designs pop...
アイディアは紙から始まる。スマホ、タブレットなどに使えるワイヤーフレーム・テンプレートたち。 – TechDoll.
企画書も原稿も、まずアイディアを紙に書き出すことから始める。そうすることで散らばっていたアイディアが洗練されてまとまっていく。スマホアプリ、ウェブサイト、タブレットのデザインを考えるときも紙から始めるとはかどるよね。 今回はそんなワイヤーフレームの作成に便利なテンプレートをご紹介。UI STENCILSは各デバイスのスケッチブックやステンシルを販売しているおすすめサイト。 UI Stencils Browser Sketch Pad. from Design Commission on Vimeo. Pad Sketch Sheets iPadのスケッチシート。簡単なスケッチはグリッドなしバージョンで、詳細スケッチはグリッドありを活用して。 iPad Idea Sheet 日本語のサイト。原寸大のシート(横向き)、70%縮小シート(縦向き)、50%縮小シート(横向き)の3種類。画面内で縦横
Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」:phpspot開発日誌
Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
