My original goal was to create a book that would work on iPad as well as Kindle. So I chose an orientation and a template that would work for both. As I did more and more design work with graphics for the book to increase learning the book just became ugly. I just didn’t have the freedom to place the graphics in an appealing way.
So after reading my textbook about CARP: Contrast, Alignment, Repetition, Proximity, I realized I had a huge problem with the layout of the book. The problem was that I wasn’t using any of a designer’s basic tools to not only make things more appealing but more understandable.
So I created my own template to use in my book and others like this that I write. A template allows you to create a new page, type the text, and drop the images right into place.
Here’s a shot of the original first page of the book:
You can see that it’s just a linear list of text and images that just continue like this until the end of the section. The first graphic that says “Game” is supposed to signal the reader that they need to be in game mode, meaning this part is where they are building the game in the lesson. There is no good alignment here or contrast that makes the graphic stick out or makes its meaning clear as not being important to the text but more a signal to the reader.
Here is the template I created for the page:
I tried to keep the layout as generic as I could so I could use it on any page of the book with a little alteration. The grey boxes are actually drop zones for images. I can just drop my images right on the boxes and they will be sized inside the box. An added benefit of adding the images to a drop zone like this is that the viewer can click on the image and it will expand larger making it easier to read and see details.
Here is the first page that you saw before, inserted into the template:
I added the grey background to the side of the page with the images to add some contrast to the two sides of the page. I’m not sure about the arrows.
I like how the alignment of the text on the left and the images showing what the text is describing on the right allow no breaks in the reading but help on the right exactly when you need it and with just a glance. I’m also thinking that the proximity of the images to the text might make it so I don’t need the arrows at all.
I like where this is going but I’ve just killed my ability to publish to Kindle. My next goal is to create a web layout like this book.