Cover ideas

Cover Idea 1

Wanted to have the front cover to give an indication of the content inside the booklet so the homepage of the web application and title in code are used.  On the back, staying true to the comment style explanation of the interior, explains the author of the booklet and portrays code in 10’s.

Cover Idea 2

This front cover assumes readers won’t care exactly what the code exactly implements, but instead just informs it’s code.  The design writes out code in ASCII letters to make it look even more retro.  The back is similar to Cover Idea, but instead overlays a photo of myself formed using ASCII characters like the front.

Cover Idea 3

Unlike the first two designs which used a lot of black, this last design keeps it clean and simple with part code style and ASCII rendering of myself.  Additionally, it includes “Webapp” to denote the main point of the code as opposed to having the emphasis on code.  This is the design used for the rough draft.


Sketches and rough spread


Most of the sketches are based off of simple grid designs like single-column and two-column.  The reason being is code and the image (application) it represents are often very abstract and not so much artistic, so anything fancy doesn’t really suit the subject.

Spread 1

Spread 1 is pretty much single-columned with two rows with alternating code and application screenshot it represents.  The contrast between black and white is symmetric with respects to diagonals.

Spread 2

This spread has a more unified look with all the code on one page and application screenshots on the other.  This look is easier on the eyes as it clearly separates the implementation from the view.

Spread 3

This design is multi-columned with two columns of code as background, but with screenshot overlay-ed on top.  It’s a interesting design, but may not be suitable for the subject matter especially for those who actually know the code, as it’s distracting.