I would like to know the difference between Wireframes and Mockups. I’m hoping to gain a simple understanding of the difference or to definitively know that both are the same.
I googled it but I couldn’t understand what exactly the difference is, I would appreciate it if someone could explain it to me concisely.
A wireframe is about functionality. It can be a really simple sketch that demonstrates what sort of things you can do in your design. For example, a wireframe of a website will show the navigation, the main buttons, the columns, the placing of different elements. You can think of it as a blueprint for a website.
A mockup is a realistic representation of what the product will look like, in this case: a website. The final result can look exactly like the mockup, or be a variation of it after version revisions. While some people prefer to draw the mockups using graphics software, others do it straight in HTML/CSS.
I use Balsamiq for wireframes, and either Photoshop / Illustrator or HTML + CSS (depending on complexity) for mockups.
An example of a wireframe: