webサイトのワイヤフレーム作成について

###前提・実現したいこと
ノンデザイナーです。
Macユーザーです。
ホームページの作成（もしかしたらディレクションも兼ねる）デザイン〜素材製作＆切り出し〜コーディングまでを担当することになりました。
社内で聞くことができない（他に担当者がいない）環境です。

使えるグラフィック系のソフト（環境）はPhotoshop・Illustrator・sketch・prototyperです。

なるべく簡単な操作でワイヤフレーム製作をしたいのです。（早めの期間にてトップページのみ・レスポンシブ）
htmlワイヤフレームにはせず、pdfなどでクライアントに見ていただく予定です。

//ここで質問です。//
レスポンシブなのですが、写真を３枚横に並べる時、(PC：width：1024でアートボード切ってあります)余白などを考慮せずにフレームいっぱいに写真を並べていいのでしょうか

実際のテキストや写真を入れて２、３案作らねばとかんがえているのですが、
みなさんは何のソフト（またはソフト〜ソフト間の作業の流れなど）で作っていますか？
おすすめ手順やその紹介urlなどありましたら教えてください。
初歩的な質問でしかも説明下手なので申し訳無く思っていますが、どなたかよろしくお願いいたします。

###現状
現在Photoshopでワイヤフレームを作ろうとしていますが、
アートボードにガイド引いて（８：２０）グリッドで作るやり方を推奨されましたが、
他サイトからのトレース段階でいまいちこのやり方でいいのかわからずもやもやしています・・・

テキストなどはイラレかsketchから持ってくるべきでしょうか？
（グリッドデザインでガイドをどこに何本引けばいいのか、いろいろなサイトそれぞれなのでよくわからずにおります。。。）

そもそもPhotoshopで作るのが作りやすいのかもわかりません・・・

###試したこと
フォトショップのワイヤフレーム作成についてブラウザでいろいろググってみました・・・余計に混乱しています