The dominance of mobile browsing is triggering an evolution in all areas of web design, and wireframing is no exception.
Content wireframes refer to the on-screen content without actually depicting it. They focus on creating "blocks" of content categories that designers can reshape easily for various breakpoints and percentages.
Latest Videos From Creative Bloq
Content Wireframing for Responsive Design explains everything a designer needs to know about content wireframing, a best practice for structuring responsive design. The book is written by Adobe-certified author Tom Green, who also serves as a Professor of Interactive Media at Humboldt College.
Tom Green explains how to wireframe multiple content categories, and the three-step process for creating responsive wireframes yourself. This e-book, part of the free design library from the prototyping app UXPin, discusses:
3 useful wireframing processes (and how mockups and prototypes fit in)
How to create a content inventory, assign priorities, and carve out a visual hierarchy for responsive design
Design teardown in which a popular site is rebuilt with mobile-first wireframes
How to make your own content wireframe in 8 steps, with screenshots
How to create a customizable grid to organize content across multiple screen sizes
