エンジニアが最高のUIをつくるためのプロトタイピング方法まとめ（2017年版） - Qiita
こんにちは、 UXデザイナーの @yuh_iw です。 この記事は NTTコミュニケーションズ Advent Calendar 2017 の23日目です。 すべては最高の体験のために 弊社では、ようやく社内にUXデザインという言葉が浸透し始めていますが、 実態はUIと共に語られることが多いです。（実際は違うよ） とはいえ今回はUIを作るために私達がいつも行っていることについて記載します。 どうやってUIを作っていくのがよいか とにもかくにも、ユーザーに対する検証と学習をくり返すことです。 最高のUI=カッコイイUIではありません。アーティスティックなUIでもありません。 UIにはユーザーがいるので、ユーザーが使いやすいと思わなければならないのです。 そのために、使ってくれそうな人に、検証していく必要があります。 検証するためにはいくつか方法がありますが、 本稿ではUIプロトタイピングを行う
Mac用のiOSアプリのプロトタイプ作成ツールの決定版「Form」がGoogleパワーで無料解放！！ | ソフトアンテナ
Mac用のiOSアプリのプロトタイプ作成ツールの決定版「Form」がGoogleパワーで無料解放！！ 2014 11/20 Mac用のiOSアプリのプロトタイプ作成ツール「Form」(以前の価格7800円)が無料化されました(iDownloadBlog、9to5Google)。ドラッグ＆ドロップで素早くアプリのプロトタイプを作成することができるツールで、今のところiOSアプリの作成に対応しています We're excited to announce that we're joining Google to continue working on Form! :) http://t.co/JvsloB5ba1 — RelativeWave (@RelativeWave) 2014, 11月 19 公式サイトによると開発チームがGoogleに買収され、その影響で無料化されたそうなので、期間限定
アプリのUI設計に便利！無料ツール「Flinto」を使ってプロトタイプをつくってみた
こんにちは。デザイナーのまんです。 Webサイトやモバイルアプリをつくる上でUIに悩むことは多いと思います。 ワイヤーフレームを引いてみても、動かしてみたときを頭の中で想像しながらだとなかなか時間が掛るし思うようにならない…。 そんなとき！作った画面をお手軽にがしがし動かしてくれるプロトタイプツールが便利です。 今回使ってみたのは「Flinto」というWebツール。(1ヶ月体験無料) 実際に使ってみた感想や気づきをご紹介します。 使い方 基本的にはよくあるプロトタイプツールと同じで ①画面イメージ（画像）を登録する ↓↓↓ ②リンク箇所とリンク先を設定する （みょい～～～んとアンカーが伸びるのが気持ちよくてすごく好きです） リンク設定しおわったら「Share & Install」からURLを生成してモバイルのホーム画面に追加すると まるで本物のアプリのような動きをしてくれます！（Web上で
Marvel - The design platform for digital products. Get started for free.
Introducing Ballpark - Simple surveys and user testing for prototypes
iOS Prototyping With TAP And Adobe Fireworks (Part 2) | Smashing Fireworks
iOS Prototyping With TAP And Adobe Fireworks (Part 2) | Smashing Fireworks In the previous article in this series, “iOS Prototyping With Adobe Fireworks and TAP, Part 1: Laying the Foundation,” I looked in detail at the four major stages that all of our projects at Cooper go through, as well as our approach to Fireworks PNG organization, and the main components of Fireworks (pages, shared layers,
PopApp Magazine - Popular Magazine
About Us Welcome to PopApp.in, your trusted source for the latest news, information, and insights. We are dedicated to delivering high-quality content that informs, engages, and entertains our diverse readership. Our MissionAt PopApp.in, our mission is clear: to provide you with accurate, unbiased, and timely news that matters. We believe in the power of information to shape perspectives, drive co
Ratchet
Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own. 2. Connect pages with push.js Read about push.js then start connecting y
bootstrapfireworks.com
Welcome After launching ExtendingFireworks in January of this year (2012) You would think that I wouldn’t want to start another blog, right? The Fireworks vectors that I created of the truly great Twitter Bootstrap got a lot of attention. (Thanks for all of your comments and suggestions!) Not too long after the initial release of Bootstrap Fireworks, there were some changes made to Twitter toolkit
ここが違う！ Adobe Fireworksで軽快プロトタイピング
情報設計（ワイヤーフレーム） ワイヤーフレームドキュメントをPDFで書き出す 情報設計のフェーズで、クライアントや社内メンバーの共通の資料として作成することの多いワイヤーフレームですが、プロジェクトによって大量のページを扱うことがあります。ワイヤーフレームの作成にIllustratorを利用している方が多いと思いますが、以下のような欠点もあります。 ページが増えれば増えるほど動作が遅くなる ページのコピー＆ペーストをすると、コピー後のファイル上のオブジェクトに小数点以下のピクセル単位で「ズレ」が生じてしまう 10ページを超えるようなファイルをまとめる場合は、Fireworksのほうが動作も軽快で適しているといえます。 例として、タブレット端末で動くフォトビューア＆編集アプリケーションのワイヤーフレームを作ってみます（参考：サンプルファイルの「sample1_WF_base」）。 【1】用途
Wireframing, Prototyping, Mockuping - What’s the Difference? - Designmodo
Wireframing, Prototyping, Mockuping – What’s the Difference? Wireframing, Prototyping, Mockuping – What’s the Difference? UX DesignMarcin Treder • September 08, 2016 • 6 minutes READ A couple of years ago I realised that a lot of my IT, non-designer, friends were using the names of my beloved design deliverables synonymously. They assumed that a wireframe, prototype and mockup are exactly the same
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Framework7 - Full Featured HTML Framework For Building iOS7 Apps
StackPath
New Content Available soon!
Prototyping Your Next iOS App Directly on Your Mac | Thoughts and ramblings on user experience and interaction design