Don't Forget to Wireframe
Doing project without knowing how the end-product will look like feels like running without destination. Just like in software development (app, web, etc), we need to have certain figures the can help us walk in the right direction. For this, we developed a prototype first before building the product.
Mockup or wireframe will help a lot to create figures that help us stick to the initial plan.
There are some tools we can use for wireframing. Balsamiq is one of the most famous in this field. Simple, fast & easy to use. However, it cost quite a lot.
Another option is to use the open-source GUI prototyping tool, Pencil.
By the way, here is list of notable resources about wireframing, mockup and/or prototyping: