Thesis by Brandon Smith

Print VerSus Digital Prcess JanBook Apr 2013 1

Brandon Smith

Jan 2013

Thesis

My thesis will be an exploration of digital publication based on my research into different user interfaces. Exploration within these similar experiences will give users a sense of interaction. The iPad is a multi-touch screen made for interactions, anticipating the user’s maneuvers through its digital framework. The digital framework consists of text, pictures, and video. The purpose behind replacing print with an iPad is the potential for a superior solution to print. Although it may seem like the iPad is the main work of my  thesis, there will also be printed books included as well. The books, though, will  not be interactive, since the audience won’t even be able to touch them. By maintaining the books high on the wall out of reach, I will force the audience to stand away from the iPad in order to see the book covers. By doing this I hope to raise awareness in the audience, to encourage them to wonder what is in those books. My hope is that after using the tablet they crave the tangible experience of the book. Information that is printed in a book is permanently there on the page, while a tablet display is temporary, constellated of pixels, and is constantly being refreshed. The installation of my work was new to me, and the whole thesis process was a learning experience. Never had I displayed work in a symbolic way before (Figure 1). Thinking about how to present both two and three-dimensional work was also very intimidating. From learning new programs to organizing the installation, I approached challenges that I never before thought I would encounter.

Jan 2013

Notes

I used a series of notes and graph paper displaying how I learned the basics of html, programs and more. I kept most of my ideas in these little note books. Most of this thesis was self taught and my notes, really helped me understand, how a program would work.

Jan 2013

Notes

<Html> Ex.

A. Container B. Scollable container

These notes breifly explained how I set up sliding elements for one of my digitial pages. I would go into Photoshop and use the slice tool and then save my slices as pngs. Once my slice where all set I would then go into dreamweaver. where I would then make containers and create links to my pngs. Once I had all my slice I would then save my html file in a folder were all my images were placed, so that there could be a direct link to my html slides. When placing my html file I would put it into the same folder. The images i had sliced would be larger then the container that I placed it in. This would create a slide effect. Just like when you create a html page through dreamweaver if your container is larger then the actrual web page you get a scroll effect. These where just some of the basic html effects that were done through html coding. As you can see in the notes I had divided 768 px by 3. I had this down to a tee because any thing to small would cause the page to scroll a little to the left or right. By making the pixels exactly as wide as the image, the image scrolls smoothly up and down. The same element can be done also horizontaly.

Notes about Html

Notes

Jan 2013

Analog and digital

When I had first started my thesis I wanted to talk about the importance of technology and how it has changed the way we have communicated with one another. A really big break through in technology was the transformation from analog to digital. The reasons why is because most technolgy was recored with magnetic tape. Once technology moved to digital, it was now stored in a binarry code. The graphs on the right show the diffrence in stored information. The graphs on the top show a smooth frequency indicating that its stored through analog technology while the graph below shows a more jagged frequency, because digital collects data in a binary code. The bennefits of digital is that because its stored through a binnary code, is that it can never change. The bad part is, is that it only takes the information that it needs, this is why the frequencys tend to jagged. when analog gathers information, it gathers every thing but at the same time, there might be unwanted information.

Analog and Digital

Paper Ipads I had developed mock ups on paper. The iPad that are printed out are too size of an actual iPad. This made it a lot more easier to keep track of. Sense before I was trying to layout grids on the computer, which made it a lot more difficult sense i was always changing the form of digital publication.

Wireframe

The web design class helped me determine ways of navigating around my digital publication. I just donâ&#x20AC;&#x2122;t wireframe on paper, I also take paper that has ipads already sketched up and app layouts and wireframe the structures with rope and tac. I would hang up the paper, horizontal or vertical, according to the layout. Each tack marks a destination of what is activated and where it brings you.

Posters

FEB 2013

But Seriously

The “But Seriously” posters was the begingin of my thesis work. My posters were based off a series of time lapses. I discovered the art of doing time lapses from Mark Jamra’s class. When I was at a skate park. I found that by observing these time lapses that I could see time in a difrent prespective. Learning from what I couldn’t gather by regular time. These posters are inpired by Wolfgang Weingart. The use of lines, scale wieght and difrent fonts are inspired by “New Wave” design by Weingart.

Maine type labs picture for thesis

Posters

Poster 1

FEB 2013

Poster 2

Posters

Poster 3

FEB 2013

Poster 4

Jan-mar 2013

tools

Mag Plus Dream Weaver Indesign Photoshop Camera Timer Macbook Pro External Hard drive Ipad

One day, when we all hit that age of being older than dirt. I would like to remeber a few of these tools that I once used to craft my thesis. Starting from top to bottom. The iPad has been the technology breakthrough of our generation. Everywere you go there is an iPad because of its user friendly apps, which makes it addaptible to any kind of information. The little square thing to the left is a external hardrive. The external hardrive allows me to transfer information to one computer to another. The thin rectangle at the bottom is called a Macbook. A computer and if I have to explain what a computer is you should google it.

Tools

Jan 2013

Hardware

Mag Plus Dream Weaver Indesign Photoshop Camera Timer Macbook Pro External Hard drive Ipad

Tools

Software

Mag Plus Dream Weaver Indesign Photoshop Camera Timer Macbook Pro External Hard drive Ipad

Software

Mag plus

Software

how Mag+ works Mag Plus is an extension of InDesign. Just like many Adobe programs it is a mixture of content. The way mag plus work is, there are two key layer. Your A layer and B layer. The B layer never moves, it is the back ground. The A layers can move freely up and down. Once the A layer moves pass a transition guid the page transitions to another papge.

A layer

B layer

Software

DreamWeaver

Software

indesign

Software

photoshop

paper and screen

print & pixles

Web body text sizes (14-16px) feel too small on iPad, while bigger sizes clash with the canvas dimensions. This leads to all sorts of grid restrictions. The iPad’s resolution is higher than a regular LCD but still lower than an iPhone, which gives the pixel type an unusual “in between” feel. Paradoxically this can make type feel more pixelated than on a regular computer screen, which is usually farther away from the eye and less contrast-intense. (At first I thought it’s the sub-pixel anti-aliasing that becomes more apparent — there is a blue and orange glow around black-on-white type contrast — yet iPhone and iPad don’t have sub pixel anti-aliasing. So contrary to my initial assumption, the lack of sub-pixel anti-aliasing might be another reason why text doesn’t look as smooth as expected.)

Horizontal and vertical

two ways of displaying information The iPad displays 768px by 1024px or 1024px by 768px, thats 786432 pixles. The ipad can be displayed vertically or horizontally. This leads to a couple of problems. When displaying a page verticaly or horizontally, it can be compromised, when shown in an other way because the display needs to be able to shift fluently. There is a couple ways to avoid this. You could set up two kinds of grids one for vertical display and another for horizontal display.

Horizontal Title

iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegr-

Vertical Title iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhg iuadphg iudahg iueahriue hgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh iuhadiufhaiuhfiauhfvdaiuhvgaiuhvbiuahviuadhviuadhvipdfhgpadfhgidiapughdaipuhgiuadphgiudahgiueahriuehgiuhgaiphegrpaiughaeiuhgriauhgiuahegiuheairughaighaghv9jiuviearjgivueh

Designers

Inspiration

1.Wolfgang weingart New Wave 2.Jacky Myint New York Times 3.Erik Spiekermann Evolution of Print 4.Chip Kidd Book Covers

4. 43

Wolfgang weingart

Designer and instructor Wolfgang Weingart is recognized for his typographic explorations and teaching at the Schule f端r Gestaltung Basel, and who, through the work of his students, created a more experimental and expressive approach to typography that was influential around the world. Weingart was born near the Swiss border of Germany, in the Salem Valley, in 1941. He enrolled in a two-year course in applied art and design at the Merz Academy in Stuttgart in 1958. There he discovered the school printing facilities and, at the age of 17, set metal type for the first time. After graduating, he undertook a rigorous apprenticeship as a typesetter at Ruwe Printing in Stuttgart, where he met house designer Karl-August Hanke, a former student at the Basel School of Design. It was Hanke who became a mentor to the young Weingart, introducing him to design being done outside of Germany, particularly in Switzerland, where Ruder, Armin Hofmann and Karl Gerstner were making work that would come to be referred to as International Style.

“Berthold is still a good typeface, but even Berthold has some less than attractive features, and then I just cut them off because I didn’t like them.” —

Wolfgang Weingart

Jacky myint

Jacky is an award-winning interactive designer and developer currently working at the New York Times as a multimedia editor. Her work at MediaStorm has been recognized by The Emmys, The Society of News Design, Webbys and the Overseas Press Club. Before her time at MediaStorm, she was a multimedia producer for CondĂŠ Nast and an interactive designer with The Associated Press. Her interactives at Portfolio.com were part of a portfolio that won silver from MALOFIEJ. She is a speaker at the TED2013 conference in Long Beach, talking about her work in interactives narratives and journalism. She hails from Duke University with a B.S. in Biology and B.A. in Visual Arts and received her M.F.A. in Design and Technology from Parsons School of Design.Originally from Suffolk, Va., Jacky currently lives in Brooklyn and enjoys running half marathons and exploring her neighborhood.

“I want the user’s full attention. I want their focus in time… I want them to have a moment of wonder. I like to think of stories as living organisms jostling for people’s attention. As a designer I ask myself how do I help this story tell itself?” — 50

Jacky Myint

Erik Spiekermann

Erik Spiekermann (born May 30, 1947 in Stadthagen, Lower Saxony) is a German typographer and designer. He is a professor at the University of the Arts Bremen. Spiekermann studied art history at Berlinâ&#x20AC;&#x2122;s Free University, funding himself by running a letterpress printing press in the basement of his house.Between 1972 and 1979, he worked as a freelance graphic designer in London before returning to Berlin and founding MetaDesign with two partners. In 1989 he and his wife, Joan Spiekermann, started FontShop, the first mail-order distributor for digital fonts. FontShop International followed and now publishes the FontFont range of typefaces. MetaDesign combined clean, teutonic-looking information design and complex corporate design systems for clients like BVG (Berlin Transit), DĂźsseldorf Airport, Audi, Volkswagen and Heidelberg Printing, amongst others.

“I'm very much a word person, so that's why typography for me is the obvious extension. It just makes my words visible.” — Erick Spiekerman

Chip kidd

Chip Kidd is a Designer/Writer in New York City (and Stonington, CT, and Palm Beach, FL). His book cover designs for Alfred A. Knopf, where he has worked non-stop since 1986, have helped create a revolution in the art of American book packaging. He is the recipient of the National Design Award for Communications, as well at the Use of Photography in Design award from the International Center of Photography. And a bunch of other stuff. Kidd has published two novels, The Cheese Monkeys and The Learners, as well as Batman: Death By Design, an original graphic novel published by DC Comics and illustrated by Dave Taylor. He is also the author of several books about comics, notably ‘Peanuts: The Art of Charles M. Schulz’, ‘Mythology: The DC Comics Art of Alex Ross’, ‘Batman: Animated’, ‘Jack Cole and Plasticman’ (with Art Spiegelman), ‘Batman Collected’, ‘Shazam! The Golden Age of the World’s Mightiest Mortal’, ‘Bat-Manga: The Secret History of Batman in Japan.’ He is also the co-author and designer of ‘True Prep,’ the sequel to the beloved ‘Official Preppy Handbook.’ A distinguished and prolific Lecturer, Kidd has spoken at Princeton, Yale, Harvard, RISD and a zillion other places. His 2012 TED talk has garnered over 400,000 hits as of this writing, and is cited as one of the ‘funniest of the year.’ Lots more to tell, the above barely scratches the surface.

“Design is a response to a specific problem. You are given a problem to solve, and then you let the problem itself tell you what your solution is.” — Chip kidd

Influences