Wireframes & Mockups
A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. Typically mid to high fidelity, mockups reflect the design choices for color schemes, layouts, typography, iconography, the visuals of navigation, and the overall atmosphere of the product.
Articles

Narrative Wireframes: The story-telling approach to UX design
We are accustomed to perceiving design and especially wireframes as purely visual/aesthetic entity. The desired impact of design though is way bigger than just that. The design has to provoke action and help the product live up to its full potential. This signifies the meaningful aspect of interface and experience design that might lead us to the point where a meaningful aspect becomes the priority.

The Messy Art Of UX Sketching
When you need to ideate website layouts or mobile applications or to storyboard workflows and context scenarios, sketching is much more efficient. It keeps you from getting caught up in the technology, and instead focuses you on the best possible solution, freeing you to take risks that you might not otherwise take.