ブレないワイヤーフレームを作るコツ
すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか 作ることで何を達成させたいのかを明確にします 制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります 誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります 誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特
ワイヤーフレーム制作の５つのアプローチ
ワイヤーフレームを作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に５つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早
OmniGraffleでWeb制作/開発の人が使えそうなステンシルを20+4個選んでみた | 我流天性 がらくた屋
Mind Mapや時系列、議事録なんかはもうXMind(詳細は「日本語入力も可能なオープンソースのマインドマップ「XMind」 | コリス」にて)でいいやと思うのですが、図はやっぱりオムニグラフが良いなと僕の場合思ったりしてます。 Web制作をしてると、よく提案書や仕様書やフロー図、ワイヤーフレーム、UI画面、カンプのWebフォームなどを書くことがあります。 そういう時に便利そうなMac OSXのオムニグラフのステンシル(Stencil)を独断で選んでみました。 企画書、ドキュメント系(3) WebブラウザのUI、ワイヤーフレーム系(8) iPhone系(3) アイコン系(6) その他(4) 探したのはオムニグラフのフリーのステンシルがダウンロードできる「Graffletopia」から。 今、仕事でいろいろ書かないといけなくて、そういう目線で探してたら結構良質のデザインがたくさんあって、書
オムニグラフのステンシル ハブろぐ - havelog.ayumusato.com
Omni GraffleはMac用のドローイングソフトです。FireworksやIllustratorなどのように綺麗に作る用途ではなく、情報をサッと視覚化するために使います。 オムニグラフ - act2.com (日本販売代理店) The Omni Group - OmniGraffle (本家?) その用途は組織図やフローチャートなどのような一般的な図形はもちろん、ソフトウェア設計や家具の配置図など様々な情報を視覚化できます。Web制作の現場ではワイヤーフレームの作成やごく初期段階のモックアップに使われることもあるようです。 ステンシル ( Stencil ) Omni Graffleには標準でステンシルという様々な図形パーツのライブラリが備わっています。これらステンシルは、ユーザーが自分で制作したり配布したり、自由に拡張できます。 ユーザーが作成したステンシルの多くは、Graffle
私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う
見ているサイトをモックアップにするブックマークレット「Wirify」
サイトのモックアップを作成するツールは多々ありますが、業界の標準デザインを意識してサイトを構築するのであれば、参考にしているサイトは必ずあるはず。 今回は、そんな時に、サクっと参考サイトからモックアップを作成できるツールをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 開いたサイトをワイヤーフレームにするブックマークレット「Wirify」 「Wirify」は、見ているサイトをその場でモックアップにしてくれるブックマークレット。 サイト上の画像とテキストリンクをワイヤーフレーム表示し、画面キャプチャを撮り、追加したいものを画像編集ソフトで追加すればモックアップとして共有することができます。 サンプルモックアップ ↑これは当ブログから作ったモックアップ。ブックマークレットをクリックする
Web Design Dev - Graphic and Web Design Blog
SEO (search engine optimization) is the process of optimizing a website to increase online visibility and traffic from search results. It positively influences the visibility of a website in search engines, however, it requires time and appropriate actions and tools. In this article, we will point out what comprehensive SEO consists of and what is … Read more Combining Technical SEO Optimization &
webcreatorbox.com by Mobify
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. Most designers wireframe their designs
40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups
Creating wireframes and mock-ups is quite easy to do digitally these days. Applications are available everywhere, and there’s one for every style. While many prefer to do that part of the work digitally during the process, there are still quite a few designers who actually choose to do it the old-fashioned way using a Moleskine or other ways of drawing by hand. We all have our preferences and the
ウェブサイトのワイヤーフレームをコレクションした -Wireframe Showcase
他の人が作成したワイヤーフレームがちょっと見たいなあ、という人向けのウェブサイトのワイヤーフレームをコレクションしているサイトを紹介します。 Wireframe Showcase サイトでは現在20余りのワイヤーフレームがあり、それぞれ3ページぐらいコレクションされています。 その中から、興味深かったものをいくつかご紹介。
Paper Browser - Rain-Creative
Wireframe modeling is an extremely important stage of any web development. But once the preliminary sketches are made and the basic architecture of the site’s content is defined, it’s often tempting to go directly to the development process. And after all, creating a wireframe model – the next thing after conceptual site planning and before its concrete development – can be hugely beneficial to th
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-872.html