タグ

2009年5月18日のブックマーク (7件)

  • Tokyo O life - ずばぴたテック » Webサイト構成書用テンプレート for PowerPointを作ってみた

    Webサイト ディレクターのみなさんに質問。画面構成書ってどうやって作っていますか? Webの世界では、サイトの企画者・発注者が画面構成書もしくはワイヤーフレームという設計図を作る。ディレクターが構成書を作成し、それをもとにデザイナーがUIデザインを作り、プログラマがUIの適用されてないプログラムを作成。コーダー(マークアップエンジニア)がUIデザインをHTMLCSSにして、プログラムに適用する、という流れでWebサイトを作るという感じ。プログラマ向けにはもっと細かい資料も必要に応じて提供されるけど、サイトマップと画面構成書がサイト制作発注から完成までの土台になる。これは、雑誌作りだと、台割りとラフレイアウトが仕事の土台となるのによく似ている。 画面構成書の例は、たとえば、かなりラフだけど、こんな感じ… (こんなサイトを作る予定はありません。いまのところ…) 画面構成書を作るツールとして

    two_three
    two_three 2009/05/18
  • Introducing Flair Builder! - Fantastech.co!

    Meet the All New UI Builder for Building Responsive Websites! FlairBuilder is a lightweight and simple wireframing tool that lets you create interactive wireframes for websites. It's clean and easy to use, and comes with a lot of features. FlariBuilder is currently under development, but you can join our waiting listing to get notified when we release it. At Fantastech, we're a WordPress developme

    Introducing Flair Builder! - Fantastech.co!
  • Balsamiq Mockups | Balsamiq

    Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer. It really forces you to focus on structure and content, avoiding lengthy discussions about colors and details that should come later in the process. Wireframes is FAST: you will generate more ideas, so you can throw out the bad ones and disco

    Balsamiq Mockups | Balsamiq
  • サイト制作に便利なOmniGraffleステンシル : could

    UIワイヤーフレーム サイト制作に便利なOmniGraffleステンシル 制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle で作っています。 OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版ではプレゼンテーションモードがあるので、出先で

    サイト制作に便利なOmniGraffleステンシル : could
  • 効果的なプロトタイプを早く作るコツ

    プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。 スゴいコツだ!というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。 使えるパレットを用意する よく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用とPowerPoint用を利用すると手軽です。 テンプレートを用意する OmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成することが出来ます。単位をピクセルにし、グリ

    効果的なプロトタイプを早く作るコツ
  • PowerPoint Prototyping Toolkit (release 0.2)

    After hearing about the impact and success it had in Microsoft, I couldn’t wait to get my hands on prototyping in PowerPoint 2007. Amongst a few things Manuel Clement suggested a few weeks ago in his presentation about “wireframe prototyping with Office PowerPoint 2007”, was to create a toolkit of commonly used GUI components to copy and paste when designing the prototype screens. That’s what I se

    PowerPoint Prototyping Toolkit (release 0.2)
  • Designers Toolbox Web Safe Area

    Design tools for creative professionals. Print resources, online guides, legal forms, and much more.

    two_three
    two_three 2009/05/18
    Web safe areaのサイズやブラウザスキンがダウンロードできる