Wireframing

Wireframes are used to plan out the layout and content on a web page. Wireframing is the same as forming schematics or blueprints, it is a way of forming a visual plan of the framework of a website. This includes where the image and type will lay on the web or app page, the page layout if branded properly would use this wireframe consistently throughout all of the websites pages as a sign of a brand, a consistent frame and look will become visible, this will start to represent the company who's website or app it is.

In screen design, you can't start building pixel layers in photoshop, or writing blocks of code, without knowing where the information is going to go. A wireframe is also very useful in determining how the user interacts with the interface. For example, wireframes can contain various states of button or menu behaviours. It allows the designer to plan the layout and interaction of an interface while it is at its bare minimum and not being bulked with images or type. The wireframe and grid allows the designer to be creative with the contents of the website though still keeping the hierarchy of the information in mind.