タグ

Wireframeに関するshn43のブックマーク (5)

  • デザイナーがワイヤーフレーム作成時に気をつけるべき6つのポイント | FICCナレッジブログ | FICC

    Webサイト制作時に作成する「ワイヤーフレーム」。デザイナーの方は、ディレクターからワイヤーフレームを受け取り、それを元にデザインに着手することが多いと思います。 では、デザイナーの方がディレクターにステップアップし、実際にワイヤーフレームを作成する側の立場になった際、どのような点を押さえておくべきでしょうか。“デザインのラフ案”のように作成してしまうと、トンマナを確認するものなのか、構成を確認するものなのかとクライアントが困惑してしまい、来確認すべきポイントがかすんでしまうなどという事態に陥ります。 ワイヤーフレームの役割をきちんと理解した上で、プロジェクトの内容に応じて最適なワイヤーフレームを作成できるよう、基的なポイントについて紹介します。 ワイヤーフレームはチーム全員のイメージを共有するツール そもそもワイヤーフレームとは、これから作り上げるWebサイトの設計図としてクライアン

    デザイナーがワイヤーフレーム作成時に気をつけるべき6つのポイント | FICCナレッジブログ | FICC
  • Shunter.jp - ワイヤーフレームの初心者ガイド

    ワイヤーフレームの初心者ガイド: Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you’ve yet to use wireframing, it’s time to get your feet wet.. | Tags: Workflow この記事はWebdesign tuts+の記事を翻訳したものです。 この記事はシリーズUX Founda

  • エウレカ&グッドパッチのデザイナーに聞くワイヤーフレームの作りかた! | Goodpatch Blog

    先日、エウレカさんとグッドパッチのデザイナーで第一回合同勉強会を開催しました。今回のテーマはワイヤーフレームです。この勉強会は、ワークショップを通してナレッジの共有をし合い、個々のデザイナースキルを上げる目的があります。エウレカさんのレポートはこちらです。合わせてご覧ください! 1.ワイヤーフレームを作る意味とは ワイヤーフレームを作る意味についてお話をしてくれたのは、エウレカ原さんです。案件を進めるときにまずすること、ワイヤーフレームはなぜ必要か、ワイヤーフレーム制作で意識するポイントについて解説していただきました。 ワイヤーフレームを書く前に 案件を進めるとき、まずすべきことはプロダクトの目的とゴールの再確認です。 最終的に作っているものの方向性を見失わないようにするために、 何が目的でそれを実装するのか? なんで必要なのか? それを作ることによって何を解決するのか? を考える必要があ

    エウレカ&グッドパッチのデザイナーに聞くワイヤーフレームの作りかた! | Goodpatch Blog
  • Prototyperを使ったモックアップ主導のUI設計プロセス

    ユーザーインターフェイスを設計するためのワイヤーフレームとモックアップの取捨選択とプロトタイピングに適したモックアップツールを記載しています。 UI設計はUXデザインプロセスの4段階目 アプリやWebサービス、サイトなどを作っていく全体の流れは以下のプロセスを行っています。基的なUXデザインのプロセス通りですが、コンセプトやアイディアの前に調査(理解)を重視している点と、ワイヤフレームではなくインタラクティブなモックアップを作成している点が多少異なるかもしれません。その他のプロセスにご興味がありましたら詳細は問題解決型UXデザインアプローチを御覧ください。 理解 アイディア ストーリー UI ビジュアルデザイン 開発 フィードバック 今回は上記の中で画面の要素やレイアウトを検討する「UI」フェイズの「モックアップ」に関してを、整理していきながら記載していきたいと思います。このUIフェイズ

  • 知らないと損する!企画書を作るのに便利なWEBサービス10選。 | SIROKグロースハックブログ

    企画書を作るのは、どうしても時間が掛かってしまいます。今回は、企画書を作る際に使用すると、作業が捗るWEBツールをまとめました! ワイヤーフレーム 1、Cacoo Web上で図の作成、公開、リアルタイムコラボレーションができるドローツール。サイトマップやワイアーフレーム、UML、ネットワーク図などの図を簡単に作成できる。 2、WireframeSketcher Eclipse GEF/EMF ベースでつくられており、WindowsMacLinux 対応。ダウンロードしすぐ実行できるオールインワンのスタンドアローン版の他、Eclipse プラグイン版も用意されている。 マインドマップ 3、EasyStep 高機能マインドマップウェブアプリケーション。曲線も自由自在に使えて評判も高い。 4、mindmeister 有名なマインドマップツール。iPhoneAndroidでもアプリをリリース

    知らないと損する!企画書を作るのに便利なWEBサービス10選。 | SIROKグロースハックブログ
  • 1