What is wireframing?
- It is low fidelity represenation of your design.
- It is mean to be done with a pencil, a piece of paper and It is quick.
- Draft or base structure layout of your website before you go ahead and implement it.
mock-up?
- high fidelity represenation of your web or app design.
- It is like taking a screen shot from the future
- If you are getting somebody else to create your website, then It's nice to have a mock-up to show them.
Disadvantage of moch-up
If this is the first thing you start messing around with, you end up getting stuck on choosing colors or the icons,..etc. then It could bug you down even before you start programming.
Classic workflow
- Look other people's websites(ideas to layout, structure, UI patterns,...etc)
- Look at UI patterns ui-patterns.com
- Create a simple sketched wireframe.
- Create a mock-up(optional).
- Create a prototype(also optional).
You can see portfolios of web designers here ---> dribbble.com
This is a famous Wireframing tool ---> balsamiq.com