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.

Thinking about grids

What’s a grid?

A grid is a two dimensional mix of horizontal and vertical lines with the purpose of structuring content.  The simplest grid design is a single column surrounded by margins.  With more complex information, multicolumned grid designs are better by further dividing the space for images and different types of texts.

What are margins and why are they important?

Margins are spaces left at each side of a page that surround the main body.  Margins can symmetrical or asymmetrical with respective to a single page or the facing page depending on style.  Margins are important because it determines how much of a page is devoted to conveying information.  In addition, with varying spaces that surrounds the page, different feel can be portrayed.

Which sample design do you like best from this chapter? Why?

I liked the design under “Modular Grid” because it combines the “hangline” and consistent vertical and horizontal division.  This is how most textbooks are designed, which is why I find them extremely easy to read and conveys the needed information very well.  Designs that deviate from the “Modular Grid” like most magazines I find difficult to read, because the parts are just everywhere.

What grid(s) are used to layout the “Grid” chapter of this book?

I think the chapter is designed using a modular grid system, with the columns split with the golden ratio proportion and the rows based on the height of the heading.  It’s much easier to see how the column is split vs the rows, since all the text seems to all stop at the golden ratio (some pictures don’t go all the way).  Horizontally it’s a tough call because it’s hard to see what’s the largest spacing that consistently divides all portions of the chapter.

What type of grid is best for simple documents?

For simple documents, the single column grid works great.  It’s the most default one (aka how most people write papers for class).