process book
design studio 1 sebastian tory-pratt
table of contents
2
foreword 1
wordplay 17
type specimen 3
workshop 21
monogram permutations 6
speculative design 25
grid 8 heirarchy 12 website regroove 15
3
one
type specimen
4
Brief Choose a font from the DejaVu family, make a Type Specimen page in InDesign, and add it to your Process Book. A type specimen is a sample of a typeface, a kind of a catalog for fonts.
The type specimen assignment was the first assignment we recieved for the class. It is intended to serve as a very simple introduction to the use of inDesign. The layout and format were largely predetermined, although I did make some independed design decisions. These include optically aligning the compared characters as opposed to simply aligning their text boxes. In order to aid legibility and visual appeal I also added a grey screen behind sections of the comparisons to allow them to be more easily distinguished.
5
two
monogram pemutation
6
Brief This assignment is an adaptation of the customary “draw 100 thumbnails� that is the bane of all first-year design students; however, the end result of this exercise is not a finished Monogram Design. It is an exploration of the complex and iterative nature of the design process. Gain insight into the almost infinite range of possibilities available within strict constraints, to try to place values on these artifacts, and to explore methods of combining these idea families to create new and unexpected designs.
Initial Cut and Paste Positional Monograms
The monogram permutations project introduced us to a set method of ideation. The initial restriction to cut and pasted printed letters strongly influenced initial design decisions, although later Iterations were created using inDesign. My focus was to push design options as far as possible, to make bold decisions, that even if they failed, would serve to inform later choices and the final monogram set.
Rotational set
7
The best monograms from each set were then selected and bred in pairs to produce another set of designs. The final ten designs were then picked from these.
T T T T T s Ts T T p s p s T p p s s T T T p s sSS SSp T p p p T S T T T p T T T T S P T T T TP T S t TP p T P S SPtP TT p T T T TTTT TTT S TTT TTT p S TTT TP T S TP S p Tp T p TTT T TTT STT T S T S T T T T T P S T T T T S TP T S ttT TP p T P T T T T t p T T S S T T S T T T T T p T T T T T P T T T T TP T S TP p T P T t T T T s T S S S T T T p T T T T p T t T s T ST STP STP p P T T TP T TP T p T T T s T T t p S STP S P T TP p S tts sp ttss T tt TTs tts Tttps SSTP TtTpT P TP s P s S p p S s s p s p p s tts SSptts ptts sptt s p tp p pttts s t S p p p p p s s s s ptts p ttssss tpp tts ttt Sp s ps p p tts p p p p ttt p ss p ss p s s p s p p p p t t p p p s ttt p P p s s s s p p p s s s p p p p p t p ts p t p t t P p t t p p s p s s p s ps s s p tts p p p p sp ps p p pP p pP P pP p P p s p s P t p p p p s P P s P P t P s P p p p P P P s S S pP P p TTTTTP TTTTT p TTTT P P P STTTT S T T T T T P T TP TP TT S T TTTP S TT TT TT TP P T
T TT TTTTT TT TT TT T TT TT T
pppp TTT TTTT TTT TT T T TTTT T TTT TT TT
TTTT p ppp p ppp
TTT TT T TTT TT
ssssssss
T T T T T T T T
tPPtPPPtPPPtPPPP TTTT p p p p p p p p p p p p pp
p p pp
P P P P
P P P P
S S S
TTTTP T T T T TTTP P P T T PP S
T TT TTTTTTTTTTTTTTTTT
PPPPPPPP P
pp
p p
TT T TT T TT
P
S
P P P P
S
pp
p p
TT T T
TT TT TTP TP TP T TT TP TTT s TTTP T TP TT s P s s P s s P s s P
p p
TT TTTTTTTTTTTTTTTTTT TTT
S S S
PPPPPPPP
TT TT TTT
P P P P P P
S S S
TTT TTTTTTTTT
TTT TTTTTTTTT
S SS S
t pts pts t pss p tt ss p p t ps t ps
TPPP
T TP S P TTTT S TP P TTTT T T T TP P P P
8
Tp T TTTTTTTTT TT ppppppTp
ttS p p S p p S t S ttt ttt T T T T T T TT TT T T TT
TTTTTTTTTT
Border Set
S S
TTTTTTT TTT
TTTTTTTTTTTT
tts tts ttss ptts ss sp s pp p p s p s tts tts tts tts p p p p p p p p p p STps TpsSs pTp p S ps Tps S
ppppTTTTTTTTTTTT
Scale and Weight Sets
PP PP
final ten
9
three the grid
10
Brief Learn about using “the grid� to visually organize information by analyzing a magazine layout.
The cover is largely unstructured, with minimal gridding. This is likely to allow the headlines to mold organically around whatever photo is chosen for the cover. This increases legibility by allowing the designer to avoid areas with lots of light/dark contrast which would make the creation of a legible headline virtually impossible. The only elements that cover
are truly locked into a grid are the title of the magazine, its tagline, and the issue date and number. This is likely due to the way magazines are displayed, upright and overlapping in racks, with only the top third or so visible. If the grid allowed the headline to slide all over the page, then many potential layouts would put the title out of view of the viewer, and therefore depriving them of information about the magazine.
The table of contents is a lot more ordered than the title page. The reason for this increased organization is that the information in the table of contents needs to be well organized so that it can be easily navigated and read by a reader to allow them to quickly find the information they are looking for. The page is divided into three main columns, with an extra sidebar the serves as a space for the issue number in the top left. In that same area, is that the rule that divides the issue number and the magazine information is placed on the gridline, rather than in the gutter between the two. The rest of the content is organized tightly inside the columns. The caption for the background image and the cover have been allowed to creep outside the grid and into the gutter, possibly to eliminate an orphaned word. The designer also chose to right align the third chunk of text in the first column to allow the shape of the rag to fit to the image. table of contents
11
The first two page spread consists of 4 columns of equal width and one column occupying two thirds of the right hand page. There is also a row across the top that serves as a space for a small headline identifying the section of the magazine the spread is from. Things obey the grid pretty strictly in this spread, the principal elements that break it being the photograph for the article and the header and subhead. The largest column in this section is the 2/3 page dedicated to advertising. Likely the magazine actually has a six column layout, but that isn’t apparent in this spread. Of note is that the ads ignore the row left for the header, and instead go
12
all the way to the margin. One thing that seems odd to me is the rather large space left in the middle of the two ads. I wonder whether this is intentional or whether one of the advertisers sent in an ad with the wrong dimensions or if the ad was actually intended to match to the gap at the bottom of of the header row.
When I put the overlay onto the second spread, things lined up almost perfectly. The row for the section identifier at the top was there, and for the most part the content stayed within the already drawn guides, and when things did break the grid, they simply spanned two columns. One thing I noticed however, was the inconsistency of placement of the advertising.
On the left hand side there is another awkward gap between the two half page height ads, and the top ad intrudes partway into the identifier row but not as far as the ad on the previous spread. Meanwhile, the bottom ad aligns to the same margin as the rest of the page content. Yet the ad on the far side of the spread jumps this line and stops in alignment with the bottom of the folio. This sloppiness and inconsistency really contrasts to the staightforward, decisions made elsewhere in the layout. It seems like the ads have been inserted by a completely different person. Which could actually be true, and its interesting that its possible to make this inference entirely from comparing two 2-page spreads.
13
four heirarchy
14
Brief This is an exercise in creating an information hierarchy in the context of a poster. Text copy and two photographs will be provided. Your assignment is to create a small poster for the Atlantic Jazz Festival using Adobe Illustrator or Adobe InDesign. Use standard Letter size paper, Portrait mode. Use only the DejaVu family of fonts, black ink only.
This assignment involved the creation of a poster for a fictional Jazz event. The emphasis was on conciously creating heirarchy in the text through composition, contrast, size and other design devices. Imagery was limited to a choice between two different photos. In making the initial thumbnails, I tried to focus on creating numerous obviously different direction, rather than refining a single thought. After the thumbnail phase we progressed into drafts.
15
Six different directions were then chosen, developed, and presented to the class. After discussion of the merits of each, I went back to the drawing board and tried to use what had been found to be most effective in each individual poster to craft a final that was much stronger than any single one of the previous drafts. This synthesized design then went through many iterations.
first six rough drafts
refinement of selected rough
16
Positioning this at the top means that it is out of the primary circuit made by the eyes.
Working with size and contrast within this block of text was reccomended to emphasize that this is a jazz concert. The contrast between white and black was deemed harsh in some areas, the areas of white outside of the band created by free concerts this week could be toned down with a grey
Changing these subheads to an oblique would make them sync better with the overall angle of the black bar.
This version of the poster was modified using the suggestions recieved in crit. I feel that it is actually less effective and visually pleasing than the original work, although greying out the background was a good decision.
17
five
worldplay
18
Brief You will be given two words, a noun and an adjective. The first list contains nouns that communicate a negative idea. The second list contains adjectives that communicate a positive idea. Use typographic design to adapt the word from the first list so that it communicates the idea of the adjective in the second list.
The word pair I recieved was “informative cockroach.” My first steps were to research informative and its synonyms and to create a mind map and do word association in order to come up with potential material to be used to communicate the idea of “informative.” Then I began creating thumbnails. From these thumbnails I developed a few rough computer mockups. I felt these were generally unsuccessful, so instead of developing them further I went back to sketching to see what I could develop.
19
COC
ACH
The end result of my sketching, combined with a prompt from my professor, pushed me to develop some of my thumbnails involving barcodes further into the realm of QR codes. My initial explorations provided interesting visual material but quickly degenerated into near illegibility. Illegibility being the near polar opposite of and “informative� object, this direction was abandoned. Once the overall structure of elements had been laid, I set to removing as much extraneous detail as possible, to reduce the idea to its most direct form possible.
20
Colour possibly too vibrant, something light, less saturated could be better.
QR code too larger, doesnt fit inside same line as letters
Blue radial strokes as a whole are possibly unnecessary.
COCKR ACH
This version of the design was modified using the suggestions recieved in crit.
21
six website regroove
22
Brief Choose a high school website. You will then analyze the content, reorganize and redesign it.
The first step was to look at the existing website and identify problems A tracing papaer overlay was laid over a printout of the site and notes were taken on how to improve the aesthetic appeal, useability and clarity of the site. One obvious problem was the profusion o f navigation links that made finding what you wanted very difficult. I targetted these first and organized them into categories
23
Then I started to look at how the site itself coulrd be structured sketcches and thumbnails were purused that eventually turned into the final design.
24
25
seven visiting workshop
26
Brief Our class was challenged by visiting designer Michael Uhlarik in a series of three assignments the developed our concepts of semiotics and of visual communication.
The first task was to render an method of transportation that we had some kind of deep personal connection to. My choice was a Boeing 767, due to having spent a lot of time in them during my childhood.
27
Modification of the original object to make it convey more meaning
28
Communication different moods without physically modifying the object.
29
eight speculative design
30
Brief An exercise in speculative design. Prepare a photographic scenario as a fullpage spread in your process book that illustrates the use of a product or service that you have developed, using the theme “Day�.
After being given our theme, we were instructed to brainstorm as many potential products and services as possible. After brainstorming, I eventually settled on the idea of a product that allows the user to re-experience past events and experiment with how changing their actions would change the final product.
31
LookBack
32
When you’ve made a mistake, you want to know what went wrong. Lookback lets you retrace your steps. You can explore how different actions in a given situation would affect the outcome.Using sophisticated Simulsense brain activation, our simulations are so immersive and realistic that users can learn what works and what doesn’t with amazing efficiency, giving your organization an edge on the competition.
You can trust LookBack to help you understand problems. And then make sure everything goes smoothly the next time. Our patented Futurepath (TM) technology allows your employees to train and improve constantly at minimal cost.
Now you can get ahead, by looking back.
Mistakes cost money. Learn from them with LookBack 33