Designing a Digital Planner - First Steps

Designing a Digital Planner - First Steps
So you want to make your own digital planner for GoodNotes. But, where do you start? I've done a lot of research and I've found that, so far, there aren't any set rules. Each digital artist has their own preferences. However, there are a few common factors.

Keynote
The Keynote app is our first factor. Many artists use Keynote, Google Slides or Powerpoint to create their hyperlinked planners for GoodNotes. After experimenting with Keynote, I found that when you export your planner from Keynote, it will have a default resolution of 300 dpi. So, we will want to create our planner design assets with a resolution of 300 dpi. But what page dimensions should we use?

GoodNotes Standard
Our second factor is the GoodNotes app. GoodNotes has many built-in planner sizes (see screenshot). The GoodNotes Standard size is 2386 px by 1491 px at 264 dpi. This converts roughly to 9 inches by 5.6 inches.

Corners
The next decision to be made is between squared or rounded corners for our cover, dividers and pages. After a little testing in Photoshop, I decided to use a 40 px radius for rounded corners on the cover and square corners for the dividers and pages.

Portrait or Landscape Orientation
Planners come in two orientations (see screenshot). With the portrait or vertical orientation, we will have only a one page view or spread. So a vertical planner page can be as large as 9 inches tall and 5.6 inches wide.

With the landscape or horizontal orientation, we can have a one-page or a two-page spread. With the single-page spread, our page can be up to 5.6 inches tall and 9 inches wide. With a two-page spread, each page can be up to 5.6 inches tall and 4.5 inches wide.

Perfect or Spiral Binding
Some digital planners are designed with perfect binding. With Perfect binding, the cover, usually one large rectangle, wraps around the spine of the planner. However, spiral binding is a more popular choice. With spiral binding, the pages are held together by a metal coil (see screenshot).

8 by 8 Grid
As we all know by now, GoodNotes is an app for the iPad. Depending on your iPad model, the screen size varies but there is one thing that is standard. Each screen size is divisible by 8. Why does this matter. I mention this only because the 8 px/pt grid is very popular with UI (user interface) designers.

Most digital planner artists don't take this into consideration when designing their design elements. However, I started using an 8 px grid when I was designing the graphics for a few iPad book apps. And, I found that the grid really helped in my workflow. To get more information about the 8 point grid and image size and resolution guidelines for mobile apps, use the links below.

Human Interface Guidelines for iOS
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/

Intro to The 8-Point Grid System
https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

The 8-Point Grid
https://spec.fm/specifics/8-pt-grid




RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map





Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.