All elements of this portfolio are visible, but viewing it in booklet form requires JavaScript

Project:

Portfolio book

Class:

Document Design

Semester:

Fall 2013

Degree:

M.S., Information Architecture

University:

Illinois Institute of Technology

Table of Contents

introduction

about me as a designer

I'm a librarian. And while the nature of my work in digital services means that I rarely ever touch a book, I still exhibit many of the profession's classic tendencies:

My designs tend to be very precise. It's not that I don't ever color outside the lines, I do. But when I do, I take care to convey the idea that I know exactly where those lines are, dammit, and so this is intentional.

I took a drawing class a few years ago. My final project was an intricate ink drawing of a field of lillies at night—hundreds of them—with two that had opened in the moonlight. The instructor's comment was:

I love this—it's so obsessive!

I'm OK with that.

about this portfolio

This portfolio contains assignments from throughout the semester that explore the theory of graphic design, typography, and document layouts.

Many of the assignments were adapted from the text Graphic Design: The New Basics, by Ellen Lupton and Jennifer Cole Phillips.

letters

Recreate the letters shown digitally or by hand.

comments

This was created in Adobe Illustrator with the pen tool. I traced over the original bitmapped elements to recreate the image as precisely as possible.

words

Demonstrate the meaning of a word by varying the size, placement or orientation of the letters.

word options

comments—expansion

The normal association with the word expansion is to get larger. Another is simply: "growth," and when I think of growth, I think of kudzu.

Kudzu is a vine native to South America that was planted along riverbanks in the southern United States in an ill-fated attempt to reduce soil erosion. It quickly grew far beyond the original intent, and now large swaths of the South are covered in it. I wanted to simulate the illusion of growth with the word, and so I used curved lines as type guidelines to direct the flow of text.

comments—contraction

I wanted to use the secondary definition of the word contraction—to replace a letter—and thought the second "t" would be a good candidate. The "ion" sound is almost automatic, and the "t" looks somewhat like an apostrophe already.

My live-in roving critic (aka spouse) wandered by as I was testing fonts and offered some helpful, if unsolicited, advice of using a narrower font. I agreed because it suggested the primary definition of contraction as well.

text

Use a standard serif in a square format to express the meaning of this quote from Orality and Literacy: The Technologizing of the Word by Walter Ong.

Print situates words in space more relentlessly than writing ever did. Writing moves words from the sound world to a world of visual space, but print locks words into position in this space. Control of position is everything in print. Printed texts look machine-made, as they are. In handwriting, control of space tends to be ornamental, ornate, as in calligraphy. Typographic control typically impresses most by its tidiness and invisibility: the lines perfectly regular, all justified on the right side, everything coming out even visually, and without the aid of guidelines or ruled borders that often occur in manuscripts. This is an insistent world of cold, non-human, facts.

comments

I chose to highlight certain words in the text that would create an additional message. I did this by popping out certain of the stronger words: relentlessly, machine-made, non-human facts.

Once I realized I was constructing a Borg-like statement, I decided to make the format as machine-like as possible. This involved modifying the line height of the larger words so that they still matched the line height of the paragraphs and playing with the paragraph tracking so that it wasn't disruptive in a fully justified setting.

point—line—plane

Photograph examples of a point, line and plane and crop to a square format.

comments

I turned to my archives for this assignment; there was no need to take new photographs when I have a library of over 10,000 images already. I decided to challenge myself and find images that could be displayed together as a series.

The images I chose were taken with a macro lens of three different types of succulent plants at the Garfield Park Conservatory. I adjusted the contrast so that the images more closely matched each other in tone, and I moved the "plane" image to the center to balance out the harsh contrast of the other images. I see it as a calming influence between the spikes and barbs of the other two because I see in it a hooded figure holding an infant, protecting it.

point

plane

line

symmetry—asymmetry

Use color, contrast, size, scale and cropping methods to express symmetrical and asymmetrical designs.

comments—symmetry

This is an example of predictive vision. I wanted to create an image that was both symmetrical and asymmetrical. I decided to use circles and then size and place them so that they were just outside of the image area. They are unnamed planes within the context of the image area, but the brain reads them as circles.

Even though I myself know these aren't circles, my own brain makes up the difference and that's what I see.

comments—asymmetry

I wanted to show color as an anchor, and that the lack of color causes the other squares to "drift away." There is a direct correlation between the size of each square and the amount of desaturation it has to help convey the idea.

I also stacked the images so that the order was that largest square was at the bottom (and so on) to give the impression of time: the longer a square is around, the larger and more desaturated it becomes.

scale

Photograph miniature objects so that they appear normal sized.

comments

I had to shoot new photos for this assignment instead of going to my archives. I was afraid the perfectionist photographer in me would take over and I would spend far more time on the project than was necessary.

I was right: by the time I was finished, I had borrowed doll furniture from friends, constructed a set, and drafted a reluctant assistant into helping with the lighting.

I shot this with a macro lens which helps bring small items into a larger scale but magnifies every imperfection in the scene. I kept reshooting to straighten fabric, straighten a wall, etc. The lighting was crucial to making the scene appear in normal scale: the light source had to appear natural for the setting, which meant trying various flashlights and funnels until a soft, atmospheric light appeared that cast shadows under the piano.

texture

Photograph examples of texture with a strong color focus.

comments

I have many photos from the natural world that would have served well for texture examples, but chose two man–made textures instead. One is an aluminum bronze roof covered in gold leaf, each tile perfectly symmetrical. The other is hand-painted mosaic tiles, uneven in size, roughly hewn and worn. They add a physical texture to the visual scene.

The textures are very dissimilar. And so are the colors: the blues and golds are near opposites on the color wheel. But what I enjoy about this piece is that they are two images of the same building: the Dome of the Rock shrine in Jerusalem.

color

Choose either the symmetry or asymmetry exercise and add a color scheme to add depth and dimension.

comments

There are only two colors used here with varying brightness and saturation. I used my symmetry example for this because changing the colors also made new shapes appear: an eclipse, a pimento-stuffed olive, a manga-like face.

The bright complimentary colors give the effect of simple graphic icons.

figure—ground

Use color strategy to explore the following figure—ground relationships below.

  • Stable:

    The figure and background are clearly defined.

  • Reversible:

    The figure and background can change places by advancing and receding.

  • Ambiguous:

    A clear focal point in the image cannot be established.

comments

I decided to treat these three images as a series and so used the same color scheme for each.

I started with the reversible image because I wanted to create two separate images. Not as a repeating pattern, but something more organic. I searched online for basic icon images and looked at the negative spaces to see if another image was suggested. I saw a bird outline in one fleur–di–lis icon, and decided to try and make a flower out of several bird silhouettes.

I then created a simple, stylized bird outline for the stable image, and zoomed in on my reversible image for the ambiguous.

Stable

Reversible

Ambiguous

hierarchy

Select one of your portfolio pages that has several sections of text and explore different ways to convey the meaning of the text.

comments

Since the first iterations of my project were code based and didn't focus on font and colors, I had to make those decisions first. I like the colourlovers.com site for ideas on color schemes, so I took some options from there as a starting point. I limited my font options to those available from Google Fonts.

I think the second design works best: the third is too busy and the first seems indecisive. I also made the headings and quote semi–transparent to ease the heaviness of the font and size; the background image showing through the headers is a nice subtle effect.

Example 1

Example 2

Example 3

layers

Rearrange the content from your table of contents page into a visually appealing design.

comments

When I saw this assignment, I immediately thought of the transparency layer in CSS and how I could use it for my table of contents. I decided to focus on creating a background image that would be highlighted by transparent cutouts of my various assignments.

I was able to create a function to swap out images easily enough and reuse code. Then I started playing with different ways to bring the highlighted assignment to the forefront.

Hover image

grid

Choose a page from your portfolio book that includes multiple forms of content and restructure it into a grid format.

Comments

Since the grid is a very rigid structure, the simple layout seems too basic. The complex layout is more interesting but is still grounded by the strong grid to keep from being busy.

I broke up the sentences and had them grouped towards the center of the images, but kept the ideas unique so that it doesn't matter where the viewer starts reading.

simple

complex

rules and randomness

What is a book?

That was the first set of rules I had to come up with for this project. I always knew this portfolio would be in web form, but what, exactly, would make it a book? I considered things like verso pages and numbering, but decided that—to me—an online book would need to have the same visual elements as a physical one: a spine, pages that turn, and front and back covers.

The jQuery booklet plugin solved one of those problems, while Adobe Illustrator and JavaScript programming helped me with the others.

Crafting the e-book in an HTML page created the randomness. The infinite number of screen sizes and aspect ratios can be frustrating, and you must consider how text and images flow across the pages at many different viewpoints.

After deciding to drop small screen support (can you imagine viewing this on a phone?), I chose to focus on a responsive design by changing sizes, margins, and padding while allowing the layout to remain fluid.

Using a PDF would have alleviated the layout problems I encountered. PDF provides a framework that can render a project precisely as the designer meant it to be viewed. It can be viewed online or printed in physical form and look the same in each instance. But for a portfolio like mine, which will only live online, it seems like cheating to deploy a non-native format like a PDF in a browser and hold your viewers accountable for supporting it.

Using fluid HTML rather than the rigid structure a PDF provides forces you to give up some control, but it adds scalability and search engine optimization without requiring the viewer to install additional items to the browser.

Yes, a PDF would have done nicely, but it's not nearly as appealing as an eloquently written JavaScript function.

—Christine McClure

early reviews for "portfolio"

James Maciukenas, Ph.D.

professor and taskmaster

"Another great result driven by careful analysis, review, and editing what is necessary to shape the final composition. [...] Well done."

Pete Valavanis

spouse and E.E. Cummings fan

"very, very cool."

Yvonne McClure

skeptical parent

"What's this degree you're getting again?"

©2013 Christine McClure (design and content)