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サイトに掲載する情報について決定することが目的となり
「トークシナリオ法」でUIを設計する｜TSUYOSHI KANEKO / GOGEN株式会社CXO
インターフェースの設計をユーザー視点で構築するのは、決して難しいことではありません。 ここでご紹介するのは、私がユーザーとUIの整合性を取るために使う、最も簡単な思考法です。 良いインターフェースは会話をするあなたがこれから設計するインターフェースは、あなたの代わりにユーザーと会話をしてくれる人間のような存在です。 何かを販売・広告するウェブサイトなら、あなたの代わりに24時間営業トークを行うセールスマンのようなものであり、 また、ライフスタイルのアプリ等であればそれを隣で説明する良き友人であり、それが業務ツールであれば使い方を教えるよきメンターになります。 良いインターフェースのデザインを設計したいのであれば、このような優秀な解説者のトークシナリオ（台本）を作成するかのようにUIを設計するのが一つの解決策です。 よく設計されたインターフェースは、ユーザーの一つひとつの思考に対して、一つひ
ワイヤーフレームとは何なのか問題についてについて
昨日、ワイヤーフレームとは何なのか問題についてのスライドを公開した。非常にあっさりしたスライドなのでひとまず見てみてほしい。 前々から、ワイヤーフレームはスペック検討が主旨であり、デザインやレイアウトといった見てくれの検討をするものではないというのを必要に応じて述べているんだけども、その言説がパーマリンクを持ってないのが不便だなと改めて思ったからでもある。 ワイヤーフレームとは何なのか問題そのものだけでなく、関連して思っていることはいろいろあり、そうした背景のようなものの一部を以下に述べておきたい。 つい今週開催されてたMAX Japanで、Adobeが日本特有のデザインプロセスに対するソリューションとしてXD用にQuick Mockupなるものを発表したようだが、これも結局、ワイヤーフレームなのか、デザインの中間成果物なのかがはっきりしない印象がある。日本特有のデザインプロセスっていうの
そのワイヤーフレームやプロトタイプは何を目的としてつくられているのか？｜エイマエダカツタロウ
皆さんはワイヤーフレームやプロトタイプを作成・共有する時に「何を目的として」それを行っていますか？ 昔からよく話していることなのですが、ワイヤーフレームで完成形をイメージできるのはワイヤーフレームを作成するプロセスを共有しているか、脳内で補完する能力の高い人だと考えています。そのため、ワイヤーフレームで完成形をイメージしつつレイアウトの確認を依頼することは受け手によっては難易度が高いと考えていました。 そのため、ワイヤーフレームで確認するのは「画面構成要素」「画面遷移」と考えているのですが、「（画面）レイアウト」を確認するツールとして使われているケースも多いのではないでしょうか？ Adobe XDやFigmaといったコラボレーションツールと呼ばれるツールの登場によって、ワイヤーフレームやプロトタイプを作成するハードルが下がっていますが、その反面、そこに至るまでのプロセスが軽視されているよう
オブジェクトモデリング入門編！SmartHRでOOUIワークショップを開催しました｜Goodpatch Blog グッドパッチブログ
先日、GoodpatchはSmartHRさんのオフィスでワークショップを開催しました！ OOUIの基礎知識をインプットできる座学、オブジェクトモデリングワークショップをUIデザイナー、PMの皆さんに体験していただきました。本記事では開催の背景から当日の様子をご紹介します。 今回ワークショップを実施したSmartHRさんが提供するクラウド人事労務ソフト「SmartHR」のUIデザインは、2018年9月まで1人のデザイナーによって作られていました。デザイナーやプロダクトの機能が増えるにつれて、様々な課題が出てきたそうです。その一つとしてUIデザイナー佐々木さんのnoteにはこのように綴られています。 現在のSmartHRでは情報の見せ方がタスクベースであることに引っ張られてしまったことで、同じオブジェクトであるはずのものが画面によって名称が別のものになってしまったり、正しく定義できていないなど
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による紙
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ironhack Wireframe Kit | Figma
Why you need to create your own wireframe kit
Sketch, Wireframe, Mockup, and Prototype: Why, When and How
Use this process to create wireframes fast and improve UX design
Why are we colouring in wireframes?
Why wireframes are becoming obsolete
The Blog | Welcome to Adobe Blog
複雑なアプリケーションにオブジェクト指向UIで立ち向かう
3 rapid prototyping exercises to improve your UX skills
The Blog | Welcome to Adobe Blog