When you are planning out your website or app, wireframing is an important step to take. Drawing rough sketches of the screen can get you to think what is the best way to lay out content and functionalities. Strategize your layout and determine what shows up before scrolling down. Planning screens step-by-step is also an excellent way to think about a user flow while paying attention to details.
I created the following templates so you can get started on wireframing with the context of most popular devices and browser. Choose from three formats: a mobile phone (iPhone 7), a tablet (iPad Pro 10.5″), and a browser (Chrome). You can click on the image, download the PDFs which are letter-sized (8.5″x11″), and print as many as you’d like. Have fun!
Mobile Templates (iPhone 7)

Two mobile screens (Letter/Portrait)

Three mobile screens (Letter/Landscape)

Four mobile screens (Letter/Landscape)

Six mobile screens (Letter/Portrait)

Tablet Templates (iPad Pro 10.5")

One tablet screen (Letter/Portrait)

Two tablet screens (Letter/Landscape)

Four tablet screens (Letter/Portrait)

Browser Templates (Chrome)

One Browser (Letter/Landscape)

Two Browsers (Letter/Portrait)

Four Browsers (Letter/Landscape)

You may also like

Back to Top