Wireframing (UX design 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 provides 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-through of the project.
The only disadvantage of wireframes is that it's 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.
*Client names & products names removed due to NDA agreements.
CASE STUDY: ONLINE IN-BASKET EXERCISE
The wireframes show some of the pages in the online In-Basket Exercise and the corresponding page from the live website.
CASE STUDY: NUTRITIONAL PRODUCTION COMPANY
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.