Design for Screen - Wireframes

- Visual representation of a user interface, stripped of any visual design or branding elements. It is used by UX designers to define the hierarchy of items on a screen and communication what the items on that page should be based on user needs. 
- Usually made when the persona, user journey, sitemap and other discovery activities are completed
- simplified outline of your product, usually recognised by the distinctive block layouts, use of lines to represent text and use of the 'X' squares indicating placeholders for future images

Use:
- giving visual designers a basis to begin creating screens
- using as a reference point for functional specifications
- communicating the functionality you are going to build with stakeholders without muddying the waters with visual design elements or branding
- exploring ideas without the difficulty of change inherent in Photoshop mockups
- using as a basis for prototyping and for user testing ideas early on 

Content:
- think about what the content on the page will be
- Placeholder text isn't good to use for app design because the space is so limited and needs to be precise
- do not include images into your wireframes
- comment on what kind of image will be placed in the chosen area

Layout:
- grid based system needs to be decided upon
- wireframes can be created simply by dragging and dropping UI elements onto the screen using a dedicated wireframe tool
- come up with multiple routes and assess the pros and cons of each

Design documentation:

Wireframes as the skeleton, loosely showing the shape of the final product and giving a reliable idea of where everything will eventually go. 
Mockup's are strictly visual, the solidification of your visual decisions and chance to experiment with variations and create pixel-perfect drafts. 
Prototypes test your interface ideas and generate the feedback necessary to keep the design headed in the right direction. Prototypes should be used during every stage of the design process and can be as simple as adding interaction to a wireframe. Prototypes are the most functional and useful documentation, wireframes just help you focus on the placement of content for your prototype. 

Examples that I think work the best for me to understand my design decisions: