Webサイト（ページ）のインターフェースデザインの流れ
Webサイトのインターフェースデザインは、Webサイトの完成イメージに合わせて、制作工程ごとにアプリケーションを使い分けながら作業を進めていきます。大まかな作業の流れを下記で紹介しているので、理解しておきましょう。
ワイヤーフレームの作成
Webサイトの目的、掲載する情報（写真や画像、文字情報など）、メニュー数などを考えて、全体的なレイアウトｎイメージを紙に手書きするなどして、大まかなイメージを固めていきます。
デザインの作成
Photoshop、Illustrator、Fireworksで、Webサイトに掲載する写真を補正・加工したり、ロゴマーク、イラスト、アイコンを作成したあと、PhotoshopでWebサイトの骨格であるワイヤーフレームに写真やイラストなどを配置して、詳細なデザインを作成していきます。
画像のスライスと最適化
Webサイト全体のデザインができたら、Webサイトを構成しているパーツ単位に切り分けます。この画像の切り分け作業を「スライス」といいます。また、画像はPhotoshopで作成したファイルのままではインターネットブラウザ上で表示することができません。そこで画像のファイル形式をインターネットブラウザで表示できる形式に変更して、ファイルサイズや画質を調整する必要があります。これを「画像の最適化」といいます。
Webサイト（ページ）の構築
スライスして書き出した画像はそのままではWebサイトとして表示することはできません。スライスして作成した画像と文字情報を、Photoshopで作成したWebサイトのデザインと同じようにインターネットブラウザで表示するために、HTML／CSS（スタイルシート）コーディングを行います。
※上記工程はデザイナーによって何のツールを使って作成するか好みが分かれます。Photoshop、Illustrator、Fireworksすべてがワイヤーフレーム、UIデザイン、WEB用にスライス、最適化する機能を持っており、どの作業を何のツールでしないといけないとい決まりはありません。