Process Book - Adam Carey

Process Book for the course DSGN 2010Fall Semester, 2010 Design Studio 1: Principles, Theories and Practices of 2D and 3D Design

Prof. Michael B. LeBlancDivision of DesignNSCAD University

by Adam J. Carey# 101357

32

Adam CareyAdam Carey

Table of Contents

Type Specimen . . . . . . . . . . . 5

Design Permutations . . . . . . 7

Grid . . . . . . . . . . . . . . . . . . . 9

Hierarchy . . . . . . . . . . . . . . .13

Font Flag . . . . . . . . . . . . . . . 15

Word Play . . . . . . . . . . . . . . 17

Ugly Website Regrooval . . . . 21

Mafquack . . . . . . . . . . . . . . . 25

Product/Package . . . . . . . . . .27

Home . . . . . . . . . . . . . . . . . . 33

This Photo: Charcoal Drawing 18"x24" - Febuary 2007 - ACADTitle Page Photo: Beach Pavilion Model - January 2010 - NSCAD

54


Font Specimen

Fig. 1.2 & 1.3 :Sketches September 14th 2010

Fig. 1.1:Final SubmissionSeptember 16th 2010

"Design is easy. All you do is stare at the screen

until drops of blood form on your forehead."— Marty Neumeier

76


Final 10 Submission Plus Original DesignSeptember 23rd 2010

Design Permuations (Monogram Design)

1.2

1.3

98


Fig 2.1 & 2.2: Breeding Set Fig 2.3: Sketchbook Traces

September 23rd 20102.3

2.1

Cover Page

National Geographic has been around for many decades, but has always kept one thing the same on each issue; the bold yellow boarder that measures exactly 0.5”

wide around the edge of the cover. It’s the most significant feature on the cover page, since it stands out so much (more so than the title itself) and helps to easily distinguish the magazine, though is not used at all inside the magazine. Inside the

left and right sides of the boarder is 0.25” of space between the title text “National Geographic” and the subti-tle below, “Bahamas Blue”.

The text centered at the top of the page “Restoring

Tribal lands | Egypt’s An-cient Whales” and the red

text above in the yellow boarder both have 3/8” of

space from the boarders inside-edge on both left

and right sides. The green text “Dive into Beauty,

Danger, and Discovery” below the issue title is

once again centered, but this time with 5/8” of gap

from the boarder. Although these texts do not line up

with one another, they are all centered on the

page. The only text that is not centered is “Pullout

Poster” in distinguishing red text, unlike the blues and greens that go with

the background photo. The text is offset to the right,

and lines up with the right side of the green text. The red text seems to be used

for matters unrelated to the articles, like advertis-ing the NatGeo TV chan-

nel or a free poster inside. It looks as though the background photo was placed first and then text was placed afterwards to work with the photo. Its also clear that the designer uses Inches (and

fractions of inches) as units of measurement in this magazine.

Grid

2.2

1110


Contents Page

The contents page consists of centered text on the upper half of the page and a large photograph centered below. This page contains a grid that is some-what comparable to the cover page. Nothing on the page lines up with cover’s yellow boarder, other than the Cap height of the small text “Official Journal of National Geo-graphic Society” which aligns with the top of the yellow boarder. Although the yellow boarder discontinues throughout after the cover page, it is still there in a sense, since most of the main content tends to sit within the boarder area (except page numbers and credits). It’s also no-ticeable that the left side of the photo shares a vertical alignment where the cover’s title starts. The contents text also shares baselines with the cover page. “Deep Dark Secrets” aligns with the cover’s “National”, and “Reviving Native Lands” aligns with “Geographic on the cover. Other than that, the contents page takes on a grid of its own, though still con-siders negative space that makes it easier for the viewer to navigate through the page; There is always at least ¼” of space between groups of text. There is 5/8” of space from the top and both sides, and 1.25” from the bottom, making the page considerably condensed and centered. A 5/8” gap sits between the photo and bottom of the contents text.

Spread #1

Here we have a column of text on the left and a large photograph (9.25” x 6.5”) to the left of it. The name of the author and photographer are at the top left and

line up with the photo. There is exactly 1.5” of space between the top of the text/photo and the edge of the page. On the left side of the page, there is a gap

of 5/8 be-tween the

text and edge, and

on the right side a gap of ¼” be-

tween the edge and

the photo. The text of the article starts off

in a larger capital-

ized Sans font with

heavier line spacing to

grab the readers

attention. The text column

includes horizontal spaces to separate the main body of text from the author and photog-rapher, but altogether it lines of vertically perfect on the left and right sides, with

a 7/8” gap between the right side and the photographs edge. A 7/8” gap is also used between the top edge of the main text and the bottom of “photography

by Alex Webb”. At the bottom of the page we have page numbers, name of the magazine and month on the left side, and title of the article on the right, which

share a baseline 3/8” from the bottom of the page. What’s odd is the photo cap-tion, which doesn’t really align with anything else. It would look much nicer be-

ing moved over to the right to line up either with the photo above it, or the page number at the bottom corner (offset by 1/8”). However, we do see the 7/8” gap

again from the bottom of the image to the bottom of its caption.

1312


Spread #2

This spread is similar to the first spread, in that it includes large photo and a column of text, this time of the photo being on the left. With that said, much of the first shares a similar layout to this second spread. The 7/8” gap between the photograph and left side of the text is seen again, as well as another 7/8” gap between the bottom of the photo and bottom of its caption. The images are the exact same size also (9.25” x 6.5”). The page numbers/title etc at the bot-tom also stays the same as before. Even the text on the right side has a 1/5” gap from the top of the page and top of the text (which once again, lines up with the top of the photograph). What’s different in this spread, is new informa-tion at the top of the page, “Baku no longer supplies…” in black bold sans font with uppercase letters, followed by “…half the world’s petroleum as it did at the opening of the 20th century, but it feels like it does.” In red, oblique, lower case letters in a serif font. Much like the beginning of the article text in the last spread, this could be a method the designer uses to attract attention. This text is split in 2 parts across the 2 pages, and there exists a ½” gap between the binding down the middle of the page and the inner edge of the text for both sides, most likely for easier reading, rather than having to stretch the magazine apart to read it. This line of text has a baseline that hangs ¾” from the top of the page, but oddly does not align with anything vertically on left or right side. If it was shifted exactly 1/8” to the left, it would align perfectly with the bottom left page number and the left side of the photo caption. Also, the bottom of the text column has a space of ¾” from the bottom of the page.

Hierarchy

4.3

1514


Fig 4.1: Initial Thumbnails - October 8th 2010Fig 4.2: 6 Best choices - Ocober 12th 2010

Fig 4.3: Final Poster - October 14th 2010

4.1

4.2

Final Submission - October 21st 2010

Font Flag

1716


Thumnails & Sketches/Research - Oct. 17th 2010

Word Play

Final Submission - Nov. 4th 2010`

1918


6.1 6.3

6.4

6.2

Fig 6.1 : Second Choice for Final Submission - Nov. 2nd 2010Fig 6.2, 6.3 & 6.4: Sketches/Research - Oct. 30th 2010

Fig 6.5, 6.6 & 6.7: Sketches/Research - Oct. 29th - Nov. 2nd 2010

6.5 6.6

6.7

2120


Figures 6.8, 6.9, 6.10 & 6.11: Sketches/Research

6.10

6.8 6.9

6.11

Ugly Website Regrooval

Final Submission

Register HereDonate Today

Ride for Sight is Canada’s largest motorcycle charityfundraiser in support of the Foundation Fighting Blindness. Central Ontario

Alberta

Newfoundland & Labrador

Manitoba

Maritimes

NorthwesternOntario

Saskatchewan

Exciting News!

Canadian Trial to Enrol Retinis Pigmentosa Patients.click here for details

Toronto Motorcycle Show December 10-12 - Metro Convention Center Friday December 10: 10:00 am - 10:00 pm Saturday December 11: 10:00 am - 8:00 pm Sunday December 12: 10:00 am - 5:00 pm

Home About RFS About FFB Online Store Media Center Contact Us

Congratulations 2010 Ride For Sight High Millers!

High Millers are a special group of fundraisers who have col-lected $1000+ in donations! To get your name on the list, get fundraising!

This list is not complete as we are still processing all the rider infor-mation from all the Ride for Sight events.

[Keith Andison, Alberta], [Derrick & Sharon Anderson, Newfound

Enter to WIN a VIP Weekend to Central OntarioRide for Sight 2011!Sign up for eblast!

Thank you to our national sponsors for their generous support and dedication to Ride for Sight!

)Search Website

2322


Ride for Sight is Canada’s largest motorcycle charity fundraiser in support of the Foundation Fighting Blindness. Central Ontario

Alberta

Newfoundland & Labrador

Manitoba

Maritimes

NorthwesternOntario

Saskatchewan

Exciting News!

Canadian Trial to Enrol Retinis Pigmentosa Patients.click here for details

Toronto Motorcycle Show December 10-12 - Metro Convention Center Friday December 10: 10:00 am - 10:00 pm Saturday December 11: 10:00 am - 8:00 pm Sunday December 12: 10:00 am - 5:00 pm

Home About RFS About FFB Online Store Media Center Contact Us

Congratulations 2010 Ride For Sight High Millers!

High Millers are a special group of fundraisers who have collected $1000+ in donations! To get your name on the list, get fundraising!This list is not complete as we are still processing all the rider in-formation from all the Ride for Sight events.

[Keith Andison, Alberta], [Derrick & Sharon Anderson, Newfound

WIN a VIP Weekend to Central OntarioRide for Sight 2011!Sign up for eblast!

Thank you to our national sponsors for their generous support and dedication to Ride for Sight!

Register HereDonate Today

)Search Website

Figure 7.1: Second Choice Figure 7.2: Early Dx-esign Concept

7.1

7.2

7.3 7.4

7.5

Figure 7.3, 7.4 & 7.5: Design Sketches and Research

2524


afquack

At first glance, the “Ride For Sight” (fig. 1) website doesnt seem so badly designed, but after gridding the page there are obvious flaws. First of all, the main title at the top is uneven; the “R” hangs lower than the “t” and nothing else around it lines up. It is centered in the middle of the page, along with the links “Register here”, “Donate Today”, “Motorcyclists Fighting Blindness”, as well as that gray toolbar (Home, About RFS, etc)(see fig. 2). Directly below that sits some red text (fig. 3) that is now alligned to the left, but it does line up with more red text be-low the provincial photos (fig. 4). The little white “motorcycle show” logo (fig. 5) alligns itself right underneath the blue one above it, and looks awkward compared to the photos below it. The content below (provin-cial photos a however is not quite centered, but shifted to the left. The “Alberta” photo (in fig. 4) seems to take on the midpoints, and the red and white text underneath (fig. 6) seems centered also but alligns with the red text way at the top (fig.3). The white box at the bot-tom filled with sponsor logos, oddly enough,shares a centered allignment with the top information (in fig. 1 and 2), with the left and right edges lining up with the gray toolbar’s edges. The far right side of the page has a small advertisement at the top (fig. 7), lining up with the height of the red text (in fig.3), but then there is a massive negative space that makes the page very unbalanced. The website is a mess because the designer centered certain parts of the page in different midpoints, while other parts are alligned to the left or right. The grid is not well used in this website’s design.

Figure 7.6: Original Website Homepage and Analysis

7.6Xercilit alissit num velis nostrud magniscipit, vel dolorercidui eratie delit dit adit, consequi tio eugait vullaor aliquat ex etuero

Ure facipsusci blam dolor adigna feugue molorperatum ver se dignibh ex estinibh el

iurerci duipissit vel utem ing et alit vel ilissed dolenisit lobortie mod duisi tat voloreet numsandrem nos nonse magnit am, quis dolor sum dio et dit inis nonsenit nosto eliquip eril dolorem dolore consed tat velesectem iustrud minim deliquatuer iriusto ea faci eu feugue magnim velessisim irilla.

Conulla consequam quisl illa consed modo odolore feugiat volum ipit lumsand reraesenis aliquisim amet, sent loboreetum zzriuscin utatuer incip eugiamc onsequatie feuisit dolorem eu faci blam, quipsus cipsustrud tin ullametue vel incipit am alit dolor sum niamcon sequism odiatem ing et lor sectem essis nonum zzrit, quipsum augait lutat lut ulpute dipis nit il ent lor am deliquisim quisl ea commy nibh eummolut iriurerit alit erit wisi bla conse faccum zzriuscil iriuscipsum eu feugiatie magnit ullut ea core et, sum do digna faci ex eumsan ullaor sed ent acip eum ipsustinci bla core duis do dionsent nos augait prat, conum zzrit adit nis do

duis nummodolummy non ullam, si tie minim do etue ex eu feugiamcon henibh eu facilit adit lamet il eumsan ulluptat ullaorting ero consed dolore eliquip summodo lorperostio estrud tincilluptat am, sumsan henit alit eugait vercili siscilla conullummy nulla facidunt

landip esequip ea am venis ea faccum illuptat.

Uptate tat. Ullum quipit wisl elessectet nulla feu facillut voloborem num iril ut iurem dolorti ncilit lor sum nisl ut utat. Duismol eniscilla aute molorper sed do diamet, verostio odionullam, sequat.

Pisl ing esenim nulla faccum do commy nibh eugiat acilla consequis dunt nos augiam zzril eum dipsusto cor si enit del utat. Dui essed ea corem zzril il el ip elesto dolortie dolorem zzrit vullum duisi.

Nisl utat dolore tie magnis nit praestrud euissed digna feuismolore eugait vullaor aliquat ex etuero dolor se et luptat doloree tumsan hendre feuissequisl dit adit vercillam ad estismodipit verciduis do consenim do euisl il exeros nosto consequismod tin velese enim vero odolortio con elit utet, suscidunt at er inim zzriusto ea accum dolum ip euis nibh et, venis nim illummy nonsecte euipsum dolobore dolor ip ea facin hent vero odolor ip enim qui bla feum vel ing er augait il iniamet ing et, sequis elit iliquam, sum vel ipisit irit, vel inim il dignit acil dolor sum veliquat ex et vulputate tem ip ex el del dolese dolorting ex eugait dolortinit at nulla ad eu feu feugait et, quis alit am do consequis etumsan dreriliqui tem veliqui psustrud dolore feugiatet,

voloboreet dipsuscinci ese dolobore dolor iliqui tie facidunt acipismod tat.

Deliscidunt autem dolore feugait augue duisl euismod ipsuscidui eraestrud dolore ercip essisse quamcon sendre magna accum zzrillandre duip eugiam zzrit vulput volor sustrud dolore tatinim At, si. Ed eriure digna feu faccum iril et a

m, qui essecte tet, sequatie min ut nit il ip ea conummy nim dunt prat nullam, secte tis num iniat dipisim vent nonse deliquipit nonum dolore magnibh ex eu faciduisit la feum quip et volortisim vulput lobor suscillum digna facidunt et, si.

Iduisl dip et, commy non ullumsandre minciliquisi blandre feuipit nulla consequat. Dui blam quamcommod te eum iure con veros alis nulputat. Ut luptat iriure mincipsustin veliquat, core modigna facidunt et iure dunt iliqui te min volutem dolenismodo con henit, consenisl ing eugait lum quat luptat. Na feum irit incilla feum quatum iliqui blandipit aute feuisl euis nullut volorem dunt ipismodit nisi.

Feuisi. Umsandrero od esequip eummodi onsequat dolore commolorer in estie tatuerat, conumsan utatue velisim at. Ut amconse quatinim velenibh eriustrud ent num zzriure con hendignis nulput lore magnim zzrit augiamcon ulla commy niscipisi tie min henim nullamc onsendr erciduis adiatet ut eu feuissed eugue dion velis alis nos esto commy num dolor irilla feuguer atissim dunt lorper ipsum dolortin vel et amconse quametum exeril eum nullaor iuscidunt am dolorerit at.

Facin eum quat, sustrud minibh eniat, sequam duisl ea feugait, quatet aliquip enim quis adipis niam, veliquam, veraessit vendre

Mafquack assignment

2726


Product/Package (Butane Honey Oil)

Final Product Packaging - Front View

2928


Figure 8.1: Package Front View

Figure 8.2: Package Back & Side View

Figure 8.3: Early Prototype Designs Figures 8.4 & 8.5: Notes from Research Phase

8.1 8.2

8.3

8.4

8.5

3130


Pharmaceutical Design vs. Casino Gaming Design

Pharmaceutical products must be very communicative, and there-fore tend to use very simple design. I noticed that most pharma-ceutical packaging uses sans serif text (with the name of the drug usually in bold) in order for the product to be read easily. Not very much color is used, and the colors that are used are quite soft and subtle, and most of the time use white backgrounds. Blue is a popu-lar color pharmaceutical design, probably because it resembles purity and cleanliness to many. I could see color psychology being a major element of pharmaceutical design. Not very much imagery is used either. Images are also very soft and gentle, such as plant leaves and doves, and are never more overpowering than the text. Pharmaceutical design seems plain and boring, but is meant for im-portant products, and therefore must be clear, informative, simple and trustworthy.

Gaming Design can be seen in various forms such as scratch tick-ets and slot machines, and contrasts deeply with pharmaceutical design. Gaming design commonly uses very bold type to grab the attention of people. Though usually sans serif, there are many ex-amples of serif types on scratch tickets and slots that are still big, bold and in-your-face. Unlike pharmaceutical design, gaming design uses bright, solid flamboyant colors, and plenty of them. The colors are often “fruity” and also include lots of golds. Themes are often incorporated into the design, (such as old west, holidays, etc) but usually have to do with good luck (ie: pots of gold, rainbows, horse shoes, etc). Other common elements of casino/gaming design are bright lights, annoying sounds coming from slot machines, and very tacky cartoon imagery. Generally, gaming design compares to nui-sance Internet ads, and may appear untrustworthy to many, but is meant to appear fun and appealing to people that feel lucky.

Figures 8.6 & 8.7: Sketches

8.6

8.7

3332


"Home"

Figure 8.8, 8.9, 8.10: Sketches

8.8 8.9

8.10

"Home is no longer a location, home is a concept. I want the feelings of home wherever I am."

-Watts Wacker

Fig. 9.1: Class Brainstorm

3534


nose

skin

ears

eyes

The Stimulamp

Programmable Aroma dispenser.

Adjustable room temperature and humidity

Mp3 Input and built in stereo

Customizable lamp tones on the touch-screen that compliment home.

A multi-functional lamp that feels like home in any room. Controlled with a 5" touch-screen, the Stimulamp is designed to stimulate your senses to give you the feeling of home when your away at school, stressed at work, or just feeling a little homesick.Every aspect is customizable to make it feel just like Home!

3736


Detail Page: Product Dimensions and Touch-Screen Layouts. Fig. 9.2 & 9.3: Product Sketches

38

Adam Carey

Process Book - Adam Carey

Documents

Transcript of Process Book - Adam Carey