For a couple years now, I’ve had a trusty Behance Dot Grid Notebook by my side. It went with me wherever I went, ready to receive my iOS design ideas the moment I had them.
It is full of highlighter, iPhone and iPad screens, and tons of notes scrawled next to the wireframes of iOS apps that do not yet exist. It is and was a faithful companion in my iOS design escapades.
However, it always had a couple of drawbacks:
- I had to redraw & remeasure the iPhone/iPad screens and common UI elements, over and over.
- Sometimes I picked poorly and ran out of space on the page, not effectively utilizing the space I had
- My measurements according to the dot grid were never completely accurate; I ended up just drawing along the dots
- My lines for the edges of the screen were never straight
For years, I’ve wished I had sketch paper which solved all of these problems, and still gave me the freedom to write notes or sketch extra UI elements wherever I wanted.
Free time of mine has always been spent googling for the perfect wireframe/sketching paper.
However, it seems like all of the downloadable wireframing .pdfs on the internet look like this:
White space in the devices on one side, and areas to write down notes on the other. Thrown together in an hour or two on photoshop, these sorts of sketching tools are a dime-a-dozen on the web.
They caused a lot of problems for me because they were never to-scale, and they never had grid lines / element markers / anything that helped in drawing straight lines. Also, they didn’t fully utilize paper space, and the frames around the screen were never like real device frames. They were simply a sub-par solution.
The trailing second-most-common sort of sketching .pdf available on the internet is this the device frame laid over graph paper.
This is little better than having no guide lines at all, because of how visually cluttering it is. The best compromise was, by far, dottedpaper.com:
This is only a section of the full paper. Download it at www.dottedpaper.com
Simple, gray dot grid to stay out of your way while you’re designing. Behance’s notebook is essentially this same dot grid, but bound and on sketching-weight paper. This still left me with the same problems I had with the notebook.
Yesterday, I bit the bullet and created some sketching paper of my own. It combines the simplicity of the dot grid with device wireframes, and has all of the UI Element guidelines anybody would need.
The wireframes are out of the way, and maximize the amount of space you can use for writing notes and drawing extra elements or icons.
They’re on dot grid paper, have distance markers on the device and UI Element markers, and most importantly: up-to-date.
- iPad Air, Landscape
- iPad Air, Portrait
- iPhone 5S, Landscape
- iPhone 5S, Portrait
Please let me know how you like it at @MeganEHolstein.