Spot the differences


Changed Image



Final booklet

Spread 1

Added rotation and green color change to the main title “Webapp” to invoke more interest.  Second spread and following have reduced the width of comments from the previous critique.

Spread 2

Each code page have a snippet showing the progress of when that specific code was written.  Statistics include date, time taken, lines of code, and emoticon for mood.

Spread 3

Same style as above.

Spread 4

Final back cover includes the same style comments like interior, but differentiates by having a green outline indicating uniqueness of author bio.  ASCII picture of myself is left in due to popular requests.

PDF: Booklet Final Spread

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.

Grid exercise

Layout 1

Simple two column grid with all texts in the same font size and style.  Simple picture on the left side occupying two columns with the text taking up the rest of the four columns.

Layout 2

Two columns with a symmetric spread with each picture occupying three columns and corresponding text occupying two columns each.  First word is bolded of each column to give emphasis.

Layout 3

Title uses san-serif “Helvetica” with two columns that splits the text into two separate columns surrounded by diagonal pictures.  The title also uses larger size font to draw more emphasis.

Layout 4

Layout four uses three columns, with pictures occupying left and right columns and text body occupying middle and right columns.  The caption/headline is bolded and indented to a different column offset to draw attention.

Identifying typographic grids

Multicolumn grid

Grids aren’t immediately obvious.  It seems to be two columns in a two thirds one third ratio, though parts of a column may spill over the boundary.

Multicolumn grid

The pictures in these pages don’t seem to be in a grid like layout.  The text are in three columns.

Multicolumn grid

Again pictures in this particular layout aren’t very grid-like.

Multicolumn grid

This grid is made up from 3 to 5 columns with some parts of text/picture overlapping other areas.

Multicolumn grid

This layout has two columns in an one third two thirds ratio and has no pictures so layout is easier.

Multicolumn grid

This is more of a standard magazine which is divided up into three columns with the picture taking up a multiple, in this case, three columns.