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
Adobe Xd
Xd Wireframe

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.

Prototype Adobe Xd
Prototype
Full Hi Def mockup
Phone App MockUp