Wireframing Academy | BalsamiqThis is a wireframe, a schematic or blueprint displaying the functional elements of a website or app. It helps you think about and communicate the structure of the product you’re building with your product team or client. Back to web view
なぜデザインツール「Whimsical」はワイヤーフレームの迅速な作成に適しているのか ｜ブログ｜root｜芯を問い、成長に貢献する
Webサイトやアプリを作る際に設計図として欠かせないワイヤーフレーム。各画面で何を伝えたいかを一緒に開発するエンジニアやディレクターに伝えるコミュニケーションツールとして大事な役割を持っています。 一方で、ワイヤーフレーム作成の段階でグラフィック要素を多くしてしまったり、色やロゴ、複雑なフォントを多用するなど、ついデザインを作り込んでしまったことはないでしょうか。こうした問題は、特に初心者のデザイナーの方に陥りがちかと思います。 しかし、作り込んだからといって良いワイヤーフレームと言えるとは限りません。むしろWebサイトやアプリの方向性の合意を関係者内で早めにとり、そのあとで細かく作り込む方が、効率よくデザインを進めることが出来ます。 この記事では、素早くワイヤーフレームを作るためにrootでも使っているデザインツール「Whimsical」をご紹介します。 直感的な操作が可能なデザインコラ
Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の３ステップ｜重松佑 / Shhh inc.
先日1500ページくらいのやや大きめなコーポレートサイトのワイヤーフレームをディレクター、デザイナー、テクニカル担当、アシスタントという職能や経験もバラバラのチームで共同作成しました。みなが足並みを揃えて進めていけるようにワイヤーフレームの作り方を要素分解して、共通理解を持って作業をできるようにしました。どのような手順や考え方で進めていったのかをnoteにも記しておきます。 0. 情報設計とトンマナ設計を分けて考える Webサイト制作ではデザイン着手前の工程でワイヤーフレームと呼ばれるWebサイトの設計図のようなものを多くの場合で作ります。デザインとの違いは何かというと、上図のようにワイヤーフレームでは「情報設計」を主として扱います。そのためトンマナ（トーン&マナー）と呼ばれるWebサイトの印象や雰囲気を形作る要素については考えず、Webサイトに掲載する情報について決定することが目的となり
そのワイヤーフレームやプロトタイプは何を目的としてつくられているのか？｜エイマエダカツタロウ
皆さんはワイヤーフレームやプロトタイプを作成・共有する時に「何を目的として」それを行っていますか？ 昔からよく話していることなのですが、ワイヤーフレームで完成形をイメージできるのはワイヤーフレームを作成するプロセスを共有しているか、脳内で補完する能力の高い人だと考えています。そのため、ワイヤーフレームで完成形をイメージしつつレイアウトの確認を依頼することは受け手によっては難易度が高いと考えていました。 そのため、ワイヤーフレームで確認するのは「画面構成要素」「画面遷移」と考えているのですが、「（画面）レイアウト」を確認するツールとして使われているケースも多いのではないでしょうか？ Adobe XDやFigmaといったコラボレーションツールと呼ばれるツールの登場によって、ワイヤーフレームやプロトタイプを作成するハードルが下がっていますが、その反面、そこに至るまでのプロセスが軽視されているよう
User flow is the new wireframe – UX Collective
What do user flows have to do with wireframes? Wait… there’s different types of user flows? Continue on my dear reader… Am I going to be being (overly) dramatic — no way! (Yes). Am I (probably) biased—you bet. But do you have an informative, opinionated article in front of you which will add a tool to your designer tool-belt—yeah sure why not! Contents📚 A quick definition of user flows🖥 What rol
Wireframes are becoming less relevant — and that’s a good thing
Over time I’ve found wireframes to be less and less useful, and I don’t think I’m alone. Because the term is somewhat loosely defined, it’s probably important to be specific. While there are many types of prototypes that examine levels of fidelity across various dimensions, I’d like to focus on the specific variant that most immediately comes to mind when hearing the word…
私があえて紙でワイヤーフレームを描く理由
AlexはStockholmに住むUXデザイナーです。アクセシビリティやフロントエンドの開発において長年の経験があります。物事をシンプルで楽しく、効率良くするために日々奮闘し、その経験をデザインコミュニティでシェアするのが大好きです。 近年ではワイヤーフレームを描画するためのツールが多く存在しますが、私はあえて紙のワイヤーフレームキットを利用しています。この記事ではその理由と、紙のワイヤーフレームを使用してより優れたデザイナーになるための方法をご紹介します。 2012年に、私は自分のワイヤーフレームスキルを次のレベルへと引き上げるべく、 新しいiPad用に「Paper by Fiftythree」という素晴らしいアプリをインストールし、そしてアメリカ国内の口コミで好評だった２つのタブレットスケッチペンを取り寄せました。 同じ頃、私はスウェーデンのデザイナー、MårtenAngnerによる紙
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
Adobe、iPad向けデザインカンプ作成アプリ「Comp CC」を公開
米Adobe Systemsは現地時間2015年3月30日、デザインカンプ作成アプリケーション「Adobe Comp CC」を公開したと発表した。すでに米Appleの「App Store」を通じて「iPad」向けアプリケーションを無償提供している。現時点で日本語には対応していない。 Adobeは、昨年10月に開催した「Adobe MAX」カンファレンスにおいて、「Project LayUp」の開発コード名で同アプリケーションのスニークプレビューを行っていた。 Comp CCを使用するには、同社のクリエイター向けクラウドサービス「Creative Cloud」に会員登録する必要がある。 Comp CCはiPadのユーザーインタフェースに最適化されており、画像ボックスやテキストボックスの作成などが簡単な指先のタッチ操作で実行できる。デザイナーは、iPad上でComp CCを使ってデザインプロジ
カンプがなくなったときのデザイナーの役割
手段を再想像する 昨年末に開催された CSS Nite Shift 5 で「Reimagination（再想像する） 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。 例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。 また、Photoshop や Fireworks
未来をプロトタイプしよう
http://www.yasuhisa.com/could/article/prototype-the-future/ 見た目先行によるコンテンツの欠落、インタラクションがわからない静的画像、修正・改善にコストがかかるワークフロー。今までもあったかもしれない課題ではありますが、マルチデバイス化が進むことで『ヒズミ』が大きくなりました。昨年、今年とモバイル機器を見据えた新しい手法が数々でてきましたが、それらも従来の作り方を維持したままでは、制作側の負担がさらに増えるだけです。 今年の基調講演では、新しい作り方を通してWebサイトをデザインするプロフェッショナルでしかできない価値について話します。作るだけではない、手法をそのまま使うだけではない、お客様を先導できるようになるためのヒントをいくつか紹介します。
アドビ、iPadに対応した「Adobe Proto」と「Adobe Collage」リリース
アドビ システムズは、デザイン、編集、洗練されたプレゼンテーションをiPadで行うことができる最新アプリ「Adobe Proto」と「Adobe Collage」を発売した。価格はともに850円。 「Adobe Proto」は、シンプルなタッチジェスチャーでWebサイトとモバイルアプリのインタラクティブワイヤフレームとプロトタイプをデザインできる。最新のWebKitプレビューとjQueryのサポートしており、CSSグリッドシステムを使ってワイヤフレームの構築が行える。作成したワイヤフレームは、「Adobe Creative Cloud」と同期して、「Adobe Dreamweaver CS6」を使って、さらに作品の手を加えられる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ironhack Wireframe Kit | Figma
Why are we colouring in wireframes?
複雑なアプリケーションにオブジェクト指向UIで立ち向かう
3 rapid prototyping exercises to improve your UX skills
Gluue - A blog about work, life, and internet apps. By Paste Interactive
Re-Introducing Page Description Diagrams