Wireframe
I was using in my web design project Wireframe (Adobe Xd and Visio) tools. Wireframes are outline of website pages using lines and boxes to represent where various element will be placed, by using Wireframes Sketch or gray boxes, we force a customer to focus on the layout and content of a page. It was good idea to keep using Wireframes and avoiding use Mock Up a page in Adobe Photoshop because Mock-up with photos and placeholder graphic we could receive comments about the images we selected or the shade of color we used.
Firas Al Rubaiawi

Wireframe Homepage 
Contact Us Page

Adobe Xd (UX & UI)
Prototype
It’s just the first step toward finishing a project. we can not skip the Prototype if we want a successful website. So, start simple with white background and black text with simple text links are just fine for laying out and getting a feel for how things go together.




