これは便利!レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
これは便利!レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
来年のテーマを早くも「断捨離」に決めた sakai です。 今回は Fireworks でワイヤーフレームを作成する際に活用したい機能についてです。 この記事は Fireworks Lover Advent Calendar 2012 の 10日目です。良記事ばかりなので、ぜひチェックしてみてください! Fireworks でワイヤーフレームを作成することのメリット そもそも、なぜ Fireworks でワイヤーフレームを作るの? ピクセルベースで作業ができる。 ピクセルベースでオブジェクトを作成・配置できるので、グリッドでレイアウトすることも簡単です。 ページ機能・共有レイヤー・共有ライブラリ・ステート機能が強力すぎる。 Web サイトの制作に特化したツールだけに、他のツールにはない強力な機能があります。 ワイヤーフレームの作成からコーディング直前までの工程を Fireworks オンリ
3日間、ノロウイルスにやられ寝込んでいました ishida です。 手洗い・うがいはキチンとしておきましょうね。 さてさて今回は、「Fireworks Lover Advent Calendar 2012」 8日目のエントリーとして Fireworksでワイヤフレーム・モック作成時に覚えておくと便利な拡張機能について2つご紹介します。 自分はワイヤーフレーム作成につかうツールは、もっぱらFireworksです。 CS6にバージョンアップされてからワイヤーフレーム用の共有シンボルがめちゃくちゃ増えて、デザインツールとしてだけではなくワイヤフレーム作成ツールとしても便利になりました。 ちなみに共有シンボルの「ワイヤフレーム」内にあるパーツはこんな感じです。 また「jQuery Bootstrap」のパーツもあったりします。 これだけでもかなり便利なのですが、コンテンツ内のアタリ画像とダミーテキ
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載!実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その3 目標:わかりやすいワイヤーフレームを作成することができる 必要なもの:紙とペン 対象レベル:超初心者OK
Catch insights, sketch ideas.Printable Wireframe Templates for Designers Planning apps or websites is not always completely digital: sometimes you may need pencil, paper and some good sketch sheet templates to speed up your creative process. Precision GridMultipurpose grid with column marks A generic A4 grid template with column marks ideal for website wireframes as well as icon, font and logo des
TOP > Design , Photoshop > ワイヤーフレーム制作のための素材セット「The Ultimate Wireframe UI Kit」 サイト制作の前に制作するワイヤーフレーム。サイトの構成や構造をわかりやすく事前に見せるためには非常に有効な手段ですが、作る精度によってはかなりの時間を費やしてしまうこともあると思います。今日紹介するのはそんなワイヤーフレームを制作する時間を短縮してくれる、素材セット「The Ultimate Wireframe UI Kit」です。 ローディング、ボタン、グローバルメニューなどなど、サイトにひつようなパーツが、数多く収録されており、それらを組み合わせえてりようすることで切り貼りでサイトのワイヤーフレームを作ることができます。 詳しくは以下 かなりの種類のインターフェースのパーツが収録されており、その数は60にものぼります。データ
まるでスケッチブックに書くように、webサイトのインタラクティブワイヤーフレームを直感的に作れちゃうアプリ Adobe Proto ですが、このアプリで作ったワイヤーフレーム.proファイルをPC上で開く方法がわかりました。 情報元:Adobe Forums: Can I open Proto files in Dreamweaver? ※Adobe Protoとは http://www.adobe.com/jp/products/proto.html iOS/Androidで提供されているワイヤーフレーム作成アプリです。タブとかアコーディオンメニューとかdivとか動画とか、いろんな要素をぽんぽん並べて拡縮して文字書いて、って感じで簡単にレイアウトを作れます。プレビューモードでは実際にボタン等をクリックして動作を見ることもできます。 この記事ではiOS版Adobe Protoでワイヤ
Sketching is a technique mainly used by designers for web design and graphic design projects. There are times you get stuck and frustrated in design process of a website so a piece of paper and a pencil will be a great helper for you.Sketching will help you stay focused on designing websites or blogs.Many of you may think website sketching is an old school but it is a proven method to visualise fi
本格的に仕事でワイヤーを引いたり、デザインディレクションをしたりすることが増えてきたので、いいデザインリファラー(※)がないかなーと思っていたところ、ホッテントリに『シンプルで上質なウェブデザインの国内サイトまとめ』なる記事を発見! (※「リファラー」というと、Web解析業界では通常「参照元URL(どのサイトから訪問したのか)」を指しますが、制作会社では「デザインの参考になるサイト」を指すそうです。) 普段であれば「いつか参考にしよう」とブックマークして終わり、となりがちですが、一段深く理解して勉強するため、「ワイヤーフレーム模写」をしてみたところ、これが非常に面白いことに気が付きました。 手順1)ノートを取り出す 手順2)トップページのレイアウトを手描きで写しとる 手順3)下層ページを1ページ選んで、レイアウトを手描きで写しとる 手順4)手順1〜3をひたすら繰り返す(100本ノック) 以
スマートフォン向けサイトやアプリケーションを開発するのに役立つフレームワーク・ツール・プラグインなどのリソース、ナビゲーションをはじめとするUIパターンをまとめたサイトを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く