Over the years, I have collaborated on numerous agile projects that required me to help someone carry out their vision. Countless hours were spent on ideating and creating a prototype version, only to have it entirely scrapped or edited numerous times dangerously close to production. I was naïve to think that every moment of inspiration needed to be shared and prototyped for discussions back in the day. The more choices, the better, right?  

Now, a little bit wiser, I have embraced the planning phase. The planning phase for website/app consists of methods to create a low-fidelity barebones structure of the central concept. These foundational structures can be built out during the design and implementation phases. My main planning techniques to use are Wireframes and Mock-ups.  

A wireframe is like the blueprint of a website/app. It is commonly presented with boxes, colors, and placeholders. Since the wireframe is simplified to the basic structures of a page, the designer and stakeholders can focus more on the features and functionality of an app without any other visual distractions.    

A mock-up is a static wireframe with more UI and visual details. It is a more realistic impression of how the app/website will look like; a mock-up can include style, colors, and sometimes content. This technique is usually used during the later stages of planning.   

In any case, employing either wireframe or mock-up by itself or sequentially allows you to have a low-cost, easy-to-understand visual to iterate on. Ensure that you have a process of sign-off and approvals on versions to mitigate any risks of last-minute changes that have not been tested.