Here is one way to show your responsive website in your brand book or process book. The three examples below are from Web Typography, Fall 2016.
Feel free to download an image, erase the site imagery, and put in your own screenshots. You can also find other templates online if you prefer.
mediaqueri.es
Media Queries showcases some lovely responsive web sites, showing at a glance what they would look like at four different sizes (smart phone, tablet, laptop, desktop).
liquidapsive.com
Liquidapsive (Liqui-dap-sive) shows how the same web page responds to a changing browser size when produced using Adaptive. Liquid, Responsive, and Static layout. We’ll be building responsive web sites (layouts) in this class. We can’t cover all the UX issues.
A Simple Site Map
Mari Pfeiffer, a freelance writer and web designer based in Southern California, shows how simply you can approach a site map. You don’t need fancy software. You can do a final version in Illustrator or InDesign if you want to, but it’s not required.
Creating a Site Map: What it is, How to Do It.
This slideshare is a comprehensive explanation of what a site map is. Slides 12-14 (out of 30) especially pertain to what we are doing in this class! Also, in order to create a good site map, you should be able to answer all of the questions on slide 26 (below). This is a great resource.
18 Great Examples of Sketched UI Wireframes and Mockups
“…it’s always a good idea to start with a wireframe. It can be a big time saver if you’re able to nail down the placement of major layout elements early on in a project. …”
Concerning Fidelity in Design
This is an informative, yet easy to read article on design methods. Tyler Tate writes that design methods are not mutually exclusive. Each method is well-suited for a particular phase of the design process, with one level of fidelity (low to high technology) often leading into the next. He backs this up with loads of examples. Read this to get a sense of where wire frames fit into the overall design process!