Wireframes

A wireframe is a basic skeleton of a layout. Wireframes don’t use real user interface elements; instead, they use placeholders - UI elements are represented as boxes. Usually, wireframes are used early on in the design and development process to validate information architecture and general user flows. Wireframing is a very important step in designing a system application or a website, since it helps to visualize how the application or website will function as an end product. Wireframes helps the members involved in the project to have a clear picture of the product features and overall structure. Wireframes helps in documentation as a visual guide when specifying the system features and functions.

Following are some tips that can be followed to design effective wireframes.

● Begin designing wireframes for a specific function or a goal - First step in system development is to gather requirements and analyse data. Functions of a system application or a website will be build based on the gathered requirements. Therefore, wireframes should be designed to specific functionalities of a system that satisfies a goal. It’s important to consider two goals - the business goals and the user goals.Wireframes can also be used during detailed discussions with customers to visualize the functionalities and obtain feedback from customers.

● Draw wireframes which are functional and simple - Wireframes need not have detailed and complex designs. Wireframes should be easy to draw and update when required. A wireframe should be clear and simple enough to understand the key functionalities. Eg. How many text fields are available, availability of a reset button, save button etc. Wireframes should not be pretty or colourful. Sticking to a few colours like black, grey and white helps to avoid distractions in the wireframe.

● Be ready to discard or change wireframes - You should be ready to change or completely remove a wireframe as and when system takes shapes. Getting attached to the wireframes will make it difficult for the designer to think outside the box specially in situation where the wireframe do not match with the product concept. Different variations of wireframes will need to be tried out to select one or discard all in the process until the proper prototype is established.

References

• https://www.mockplus.com/blog/post/dos-donts-of-wireframing

• https://blog.teamtreehouse.com/20-steps-to-better-wireframing