STUDIO CONRAD STOCKS
Hello Process
This book is a visual record of the course work completed for Studio One B taught by Michael LeBlanc at NSCAD University. The following visual records are comprised of the processes and outcomes of the nine assignments that were completed over a period of 14 weeks. The sections in this book are documented in order and have been organized in a way that is representative of my design process.
2
3
CONTENTS TYPE SPECIMEN
WORD PLAY
DESIGN BREEDING
WEBSITE RE-DESIGN
GRID ANALYSIS
PRODUCT & PACKAGE
Idea Generation Finished Specimen Sheet Refinement
Idea Generation Finished 10 Refinement
Written Analysis Spreads Written Analysis
cont
TYPE HIERARCHY Idea Generation Six-UP Refinement
Idea Generation Gracious Mafia Refinement
Initial Impression Re-Groove
Idea Generation Product Photos Refinement
HOME
Double Page Spread
FONT FLAG POSTER Idea Generation Already Seen Refinement
4
5
TYPE SPECIMEN Sept 17th, 2010
ASSIGNMENT BRIEF
Choose a font from the DejaVu family and make a Type Specimen page in InDesign.
PAGE CREATION
The Fonts were chosen based on the fact that each typefaces spoke a different visual language. The letters for comparison were select and listed in order of frequency that they appear in the English language.
EXPERIENCE
Being the first assignment completed using inDesign, I've since found that the art of creating a balanced layout is much more complex then I had originally thought, especially selecting the right typeface for a design.
8
Above: A "IO-Path" screen capture of my mouse and tablet movements, documenting the creation of the font sheet.
EE E DejaVu Sans
Helvetic Neue
Fontin Sans
9
REFINEMENT
To take this design further, I would address some of the more fundamental alignment problems. The one problem that this sheet has is that the font labels are not aligned with each other. Instead they are aligned with the bounding box of each letter thus creating a small but obvious offset. Another issue that is holding this design back is that the character examples are not all justified on the same line, which creates a uneven look. In terms of the actual layout, if the bottom portion was setup so that there was even spacing between the characters and their labels throughout.
12
Above: Finished Type Specimen Sheet.
13
DESIGN BREEDING Sept 28th, 2010
ASSIGNMENT BRIEF
Create a series of variations on a monogram theme. At the end of this a total of 145 different monogram designs.
MONOGRAM CREATION
The process for this started with the generation of 45 different letter position combinations. From there two sets of monograms to be developed were selected. Next, 25 different combinations were created for each different principle: Rotation, Scale, Weight and Border. The next stage in this process was to evolve the monograms further by "breeding" each set with another different one in order to create hybrids. For example mixing the Scale and Rotation to create a new set. In the end 50 hybrid monograms were bred.
16
C M S
Above: A "IO-Path" screen capture of my mouse and tablet movements, documenting the creation of the font sheet.
CS M
Above: God-Father Monogram
Above: God-Father Monogram
17
Final 10
091306 Conrad McGee-Stocks
REFINEMENT
In order to push these designs further there would need to be some changes made to both the concepts and the visual alignment of the monograms. To push the concepts of some of these monograms I would have to rethink the use and placement of the line used in the border set. Left as they are now, the borders create pools of empty space in some areas while feeling very tight in others making the monograms feel unbalanced. To compensate for the alignment problems that the foundation M. monograms are suffering from, it would be necessary to move the letter C over in all of them.
20
21
GRID ANALYSIS Oct 5th, 2010
ASSIGNMENT BRIEF
Learn about using "the grid" to visually organize information by analyzing a magazine layout.
WRITTEN ANALYSIS
SBC Surf is a Canadian publication dedicated to surfing. After dissecting the front cover of the magazine, there are a few areas of interest, worth analyzing. The first area of interest is the mixing of two different text justifications which work together to create a balance. With the bulk of the text on the cover center justified, the title of the magazine appears much stronger. Further down the page, the bolding of adventure creates a visual column that aligns with the active element of the background picture, which helps to balance the cover, allowing the eye to move freely over the page. Another design element worthy of note is the use of the bar code in the layout. Typically the barcode is either stuck on after the fact, as a sticker that seems to always leave a residue, or it is hidden, tucked away in one of the corners of the magazine. With this layout, however, the bar code is centered which helps to anchor the rest of the layout on the page.
24
Above: Cover
Above: Contents
The Contents page is arranged horizontally and laid out with a four column grid. The layout not only establishes an informational hierarchy through the use of gradually diminishing weights but also prevents the eye's gaze from being sucked into one area. The titles of the main editorial content, along with their respective underlines, are the heaviest, while, in contrast, the accompanying page numbers feel the lightest. It is through this juxtaposition, however, that their visual weight is achieved. The page numbers’ visual weight is also achieved through the support of the bottom image. Another interesting element of design is the alignment between the middle gutter of the contents blocks and the surfer in the picture. The disparity in size between the gutters is also noteworthy in that the left and top gutters are equal in size, but the right gutter is smaller. This double page spread is an example of an effective layout that uses a three column grid to creatively manage gutters and to create a symmetrical, but not stale, design. One of the ways in which this is accomplished is through the use of “gutter halving.” An example of this is where the horizontal gutter intersects the top left photo at its mid point (Figure 1). This occurs again at the top of the right hand page, only this time with the horizontal gutter (Figure 2). Both of these instances create balance and allow the eye to easily move between elements in the design. The existence of a three column grid is apparent when you look at the right hand side of the page and note that each element spans either one, two, or three of the columns.
25
Above: Cover Page, Contents Below: Double Page Spread.
WRITTEN ANALYSIS
cont.
While most of the elements within this double page spread adhere to the three column grid, the picture in the bottom left breaks this in effect, by spanning four columns and crossing the page gutter. By allowing this picture to span onto the next layout, it helps the eye transfer from the left to right spread. As well, both of the pictures chosen for the left page layout have a strong left to right feel; this is in part due to their nature as surfing photographs, which tend to read very horizontally. When compared to the first double page spread, the first thing that sticks out is the lack of direct similarities; however, that is not to say that the layouts do not share anything in common. While the first layout's title was more subdued in terms of the layout as a whole, the second double page spread's title was a very prominent element within the design. In both cases, the layouts make use of a three column grid, though much more apparent in the first spread. Again both layouts use photos crossing the page gutter to help the eye move to the right side of the two page spread. Gutters, on the other hand, play less of a role in the second spread as opposed to the first; this is in part due to the fact that there are fewer elements to the layout and thus fewer gutters are created between elements.
Above: Double Page Spread
Above: Comparison Double Page Spread
28
29
TYPE HIERARCHY Oct 15th, 2010
ASSIGNMENT BRIEF
Create a small poster for the Atlantic Jazz Festival. Use Letter size, Portrait mode, only the DejaVu family of fonts, black ink only and one grey scale image
Idea Generation
I started with three different ideas, using one to drive each of my posters. With the first poster, I tried to use even spacing and an Element-Croped image. In the second poster, I used a black bar along the right side to help establish a hierarchy of information. For the third poster I used a diagonal grid to create visual interest.
Above: A "IO-Path" screen capture of my mouse and tablet movements, documenting the creation of the font sheet.
Above: A scan of preliminary idea sketches.
32
33
34
35
REFINEMENT
In order to make this a better design a few changes would need to be made. The pool of empty space at the bottom would need to be resolved. The spacing on the right side of the page between the blocks of text could be handled better to give a more concrete sense of hierarchy. The type inside the black triangle could also be moved over to the left a touch because it appears extremely tight on the right.
36
37
FONT FLAG POSTER Oct 22nd, 2010
ASSIGNMENT BRIEF
Design a Font Flag poster for one of the three DejaVu fonts. use color, illustration, photographic imagery, or just the type itself.
IDEA GENERATION
40
I started this assignment by jumping right into the creation of four poster each based around an idea each with a separate way of visually communicating them. The first poster was a minimalist approach to the font flag. The text was supposed to be different mental phenomenon based around Deja Vu. The second poster used a quote from the first matrix movie and repeating text to establish a figure and ground relationship. The third poster used a clipping masks and a "puzzle piece" approach. The final poster was an attempt to showcase all of the different "flavors" of DejaVu.
Above: First Four Designs
Above: A "IO-Path" screen capture of my mouse and tablet movements, documenting the creation of the font sheet.
41
REFINEMENT
This design was the first one that I was actually happy about. That being said, to push this design further I would first look at the color choice, possibly changing from a gold to a green to compliment the purple. The other thing that I think would push this design further would be trying slightly different arrangments to get a more snug fit between each character.
Above: Final Poster
44
45
WORD PLAY
Nov 5th, 2010
ASSIGNMENT BRIEF
You will be given two words, a noun and an adjective. The noun is Mafia, it communicates a negative idea. The second is an adjective that communicates 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.
IDEA GENERATION To start this project I sat in the midst of some mental thundershowers looking for images that were evocative of "graciousness." After a while I settled on the idea of someone privileged giving to someone else less fortunate. This seemed a good direction not only because the act is a gracious act but because mafia members during prohibition era would give out money to poor children on the streets.
48
Above: Beta Version of Gracious Mafia Poster
Above: Pen & Paper Brain Storming
49
REFINEMENT
Since the first version I lightened the background color and changed the hand positioning. To push this poster further I would try to have a set of female hands receiving the money. One problem with this design is that the money and mafia elements could give the perception that this was a image of a drug deal. If the cash was switched for food that problem may have been solved.
Above: Final Poster
52
53
WEBSITE RE-DESIGN Nov 12th, 2010
ASSIGNMENT BRIEF
Select a web site from the "Sites to be Regrooved" propose an alternative design that improves user experience.
INITIAL IMPRESSION
The Halifax Foundation's website has two fundamental flaws. The fist problem is that there is no cap on the height of pages, leading to pages that can be longer then 8000px height. The other problem that I have with the website is that the links to other pages on the site are unnecessarily complex.
Above: Close Up Navigation Menu
Above: List of Projects Above: Our Projects Page
56
57
RE-GROOVE
The page that I chose to "ReGroove" was the projects page. To make this website more user friendly, I relocated the menu bar to be front and centre. When a item is selected from the menu the type changes color to white. Under the menu there is a "carousel style" display showing the project images. When one of the projects is selected the icon enlarges and the main body of the page changes to display the project information.
Above: Re-Made Website
58
59
PRODUCT & PACKAGE
Nov 30th, 2010
ASSIGNMENT BRIEF
Design a box label for a new pharmaceutical product, "Butane Honey Oil." Your label design for the box will NOT use the standard pharmaceutical graphic design; it will incorporate "casino style" visuals.
IDEA GENERATION
Starting this project, my aim was to emulate the look of a lottery ticket by creating a honey golden font appearance. My next step was determining the hierarchy of the text for the front of the box. After creating the English side of the box I mirrored my layout for the French side. The last thing that I had to resolve was the layout of the side of box. One revision of my first box was the color. Initially the blues were too calming.
62
Above: A "IO-Path" screen capture of my mouse and tablet movements, documenting the creation of the font sheet.
Above: Rough Idea Sketch
Above: Preliminary Box
63
REFINEMENT
Out of all my projects this one is the most effective by far. I accomplished this by sticking to a four color pallet and establishing a strong hierarchy of information. The only thing that would push this design further was correcting the spelling mistake on the English front of the box. If I was to do this project again, I would go in a different direction because I feel that this design is nearly worked to its completion.
Above: Final Box Design
Above: Detail Close up
66
67
HOME
Dec 14th, 2010
DPE FRAMES
A pair of Distant Presence Emulating Frames that produces a dynamic feeling of contact between two people.
Emits Bright "Fire Place" Glow.
Emits a Gentle Glowing Heartbeat
Frame is OFF
The frames work by using CONN-FI technology and a wireless network to connect to their counterparts to send display information in the form of one of the three presence levels.
CLOSE AROUND GONE
A hug-able distance. In & out of the room. Not in the room at all.
The products' driving idea is the visual communication of both parties. The presence level will help connect the two people using their frames, by creating a sense of their presence remotely.
FIN.