Wireframing ( or mockups / screen blueprint / page layout / screen prototypes ) is the first step in any website or app screen design process. It is done to lay out content & functionality WITHOUT any coding or system capability playing a roll. Wireframing provide a visual layout of a project to get stakeholder, management & project team approval and before the creative phase of the project starts. It has the advantage that it is cheaper and quicker to update wireframes to ensure that clients needs and flow are met.
Wireframes (as FAQ does it) is fully interactive with all links workings so it allows a virtual walk-though of the project.
The only disadvantage of wireframes is that its only the first stage of a project. The following design and technical specification stages will take more to deliver.
Lastly, wireframes will save considerable time and money in the testing and modification phases of the project.
Case study: Nutritional production company
*Client names & products names removed due to NDA agreements.
Case study: Auction mod to Shopping cart system
These wireframes show the proposed flow to create an auction, add products to the auction & the layout of auction pages and the relevant emails send to user to confirm that a bid was placed and to notify a user of a winning bid.