portfolio - FRANZGORIA.com
Transcript
portfolio - FRANZGORIA.com
franzgoria.com portfolio © franzgoria.com | Tutti i diritti riservati 1 webdesign © franzgoria.com | Tutti i diritti riservati 2 FIFA.com Layout design artworks UI elements Definizione e redazione linee guida grafiche di sviluppo © franzgoria.com | Tutti i diritti riservati 3 © franzgoria.com | Tutti i diritti riservati 4 © franzgoria.com | Tutti i diritti riservati 5 © franzgoria.com | Tutti i diritti riservati 6 CSI-Piemonte.it Sito internet e Intranet aziendale Layout design Logo design Illustrazioni Icone CSS design UI elments e tutorial flash design © franzgoria.com | Tutti i diritti riservati 7 © franzgoria.com | Tutti i diritti riservati 8 Dati.piemonte.it Layout design Logo design Illustrazioni Icone CSS design UI elments e tutorial flash design © franzgoria.com | Tutti i diritti riservati 9 © franzgoria.com | Tutti i diritti riservati 10 © franzgoria.com | Tutti i diritti riservati 11 Guida orientamento scolastico Layout design logo design Illustrazioni infografica Icone CSS design Linee guida grafiche per lo sviluppo © franzgoria.com | Tutti i diritti riservati 12 © franzgoria.com | Tutti i diritti riservati 13 © franzgoria.com | Tutti i diritti riservati 14 © franzgoria.com | Tutti i diritti riservati 15 Diadem Layout design logo design Illustrazioni Icone CSS design © franzgoria.com | Tutti i diritti riservati 16 Unito.it Restyling design proposal Icone CSS design UI elements Linee guida grafiche per lo sviluppo del restyling di portale © franzgoria.com | Tutti i diritti riservati 17 © franzgoria.com | Tutti i diritti riservati 18 © franzgoria.com | Tutti i diritti riservati 19 Vamolà Layout design Icone CSS design UI elements © franzgoria.com | Tutti i diritti riservati 20 © franzgoria.com | Tutti i diritti riservati 21 iakta.it Layout design Artworks Icone CSS design UI elements © franzgoria.com | Tutti i diritti riservati 22 © franzgoria.com | Tutti i diritti riservati 23 Io scelgo la salute Layout design Artworks Icone CSS design UI elements © franzgoria.com | Tutti i diritti riservati 24 Riquadrilatero.it Layout design Artworks Icone CSS design UI elements © franzgoria.com | Tutti i diritti riservati 25 © franzgoria.com | Tutti i diritti riservati 26 Io scelgo la salute Layout design Artworks Icone CSS design UI elements © franzgoria.com | Tutti i diritti riservati 27 © franzgoria.com | Tutti i diritti riservati 28 UI design © franzgoria.com | Tutti i diritti riservati 29 iTorino Layout design Artworks Icone © franzgoria.com | Tutti i diritti riservati 30 © franzgoria.com | Tutti i diritti riservati 31 Goodyear appgame Layout design Artworks Icone UI design © franzgoria.com | Tutti i diritti riservati 32 © franzgoria.com | Tutti i diritti riservati 33 FIFA.com video player branded Layout design Artworks Icone UI design © franzgoria.com | Tutti i diritti riservati 34 © franzgoria.com | Tutti i diritti riservati 35 Plugin audio interface Layout design Artworks Icone UI design © franzgoria.com | Tutti i diritti riservati 36 Touch screen Info Point Layout design UI design © franzgoria.com | Tutti i diritti riservati 37 © franzgoria.com | Tutti i diritti riservati 38 grafica per touch screen, interfacce video e grafica televisiva Layout design UI design Artwork Icone © franzgoria.com | Tutti i diritti riservati 39 © franzgoria.com | Tutti i diritti riservati 40 © franzgoria.com | Tutti i diritti riservati 41 Logo design / immagine coordinata © franzgoria.com | Tutti i diritti riservati 42 Il logo attuale è una delle declinazioni e restyling avvenuti lungo il corso del tempo nel tentativo di riattualizzare e dare maggior senso di modernità al disegno originale. go CSI Piemonte Va ricordato che il disegno originale del rombo, a opera di Luciano Muzzarini, è rimasto fino a oggi immutato se non nelle declinazioni di colore. INTRODUZIONE In un secondo momento il lavoro di rivisitazione del logo, a cura di Studio Livio, ha riguardato principalmente la composizione, il colore e il lettering piuttosto che il disegno del rombo. Il logo del CSI Piemonte è stato caratterizzato in questi anni dal simbolo del rombo, composto dalle lettere dell’acronimo stesso rovesciate e ribaltate. 1977 il nuovo logo del CSI-Piemonte Restyling logo CSI Piemonte 1977 1977 CSI-Piemonte Il logo attuale è una delle declinazioni e restyling avvenuti lungo il corso del tempo nel tentativo di riattualizzare e dare maggior senso di modernità al disegno originale. INTRODUZIONE Va ricordato che il disegno originale del rombo, a opera di Luciano Muzzarini, è rimasto fino a oggi immutato se non nelle declinazioni di colore. Il logo del CSI Piemonte è stato caratterizzato in questi anni dal simbolo del rombo, composto lettere dell’acronimo stesso e ribaltate. In un secondo momento il lavoro dalle di rivisitazione del logo, a cura di rovesciate Studio Livio, ha riguardato principalmente la composizione, il colore e il lettering piuttosto che il disegno del rombo. Il logo attuale è una delle declinazioni e restyling avvenuti lungo il corso del tempo nel 2003 tentativo di riattualizzare e dare maggior senso di modernità al disegno originale. 2003 Va ricordato che il disegno originale del rombo, a opera di Luciano Muzzarini, è rimasto fino a oggi immutato se non nelle declinazioni di colore. Il restilyng, dal vecchio al nuovo Il logo del CSI Piemonte è stato caratterizzato in questi anni dal simbolo del Restyling logo rombo, composto dalle lettere dell’acronimo stesso rovesciate e ribaltate. Immagine coordinata Il logo attuale è una delle declinazioni e restyling avvenuti lungo il corso del tempo nel tentativo di riattualizzare e dare maggior senso di modernità al LA PROGETTAZIONE disegno originale. In un secondo momento il lavoro di rivisitazione del logo, a cura di Studio Livio, ha riguardato principalmente la composizione, il colore e il lettering piuttosto che il disegno del rombo. Restyling logo CSI Piemonte 2003 Per restyling si è deciso dunquedel di concentrarsi sul simbolo grafico Muzzarini, del rombo Vaprocedere ricordatoal che il disegno originale rombo, a opera di Luciano che tanto e fortemente ha caratterizzato il logo del consorzio in questi anni. è rimasto fino a oggi immutato se non nelle declinazioni di colore. In un secondo momento il lavoro di rivisitazione delaspetti logo, formali a curache di Studio L’obiettivo era quello di eliminare da questo elemento quegli lo legano al Livio,a una ha riguardato la composizione, gusto cultura visivaprincipalmente di periodi storici diversi dall’attuale. il colore e il lettering 2003 piuttosto che il disegno del rombo. Mantenendo allo stesso tempo e per quanto possibile il concetto e l’idea formale e geometrica nel suo insieme. Ammorbidendola e alleggerendola per renderla più fluida, vicina al nostro tempo e al modo attuale di concepire il mondo informatico. Non più come un La progettazione e ilall’ingegneria processoelettronica creativoe altamente specifico e specialistico qualcosa di strettamente legato ma piuttosto come un mondo di conoscenze condiviso, caratterizzato dal senso di immaterialità e distribuzione allargata. Leggero e accessibile, organico e più vicino all’uomo. Per procedere al restyling si è deciso dunque di concentrarsi3sul simbolo grafico del rombo che tanto e fortemente ha caratterizzato il logo del consorzio in questi anni. 23/06/2010 Il processo 0 3 3 ©franzgoria 23/06/2010 20/09/2010 © franzgoria.com | Tutti i diritti riservati L’obiettivo quello di eliminare da questo elementonella quegli aspetti formali Partendo dallaera forma orginale si è prima cercato di enfatizzarla sua geometria, che lo legano gusto adiuna cultura visiva di periodi storici diversi dall’attuale. espandendola conall’obiettivo isolare gli elementi di forza. InMantenendo un secondo tempo un processo semplificazione dellee forme allo seguendo stesso tempo e per diquanto possibilee modifica il concetto l’idea geometrica base si è cercato ritornare verso la forma originale edella scrittura. formale edigeometrica nel di suo insieme. Ammorbidendola alleggerendola Attraverso l’esasperazione quest’ultima formatempo e la suae ulteriore si è riusciti per renderla più fluida,di vicina al nostro al mododeformazione attuale di concepire a conferire maggiore dinamismo e ottenere quell’effetto di fluidità e leggerezza che ci si era il mondo informatico. Non più come un qualcosa di strettamente legato posti come obiettivo. all’ingegneria elettronica e altamente specifico e specialistico ma piuttosto come un mondo di conoscenze condiviso, caratterizzato dal senso di immaterialità e distribuzione allargata. Leggero e accessibile, organico e più vicino all’uomo. Partendo dalla forma orginale si è prima cercato di enfatizzarla nella sua geometria, espandendola con l’obiettivo di isolare gli elementi di forza. In un secondo tempo seguendo un processo di semplificazione e modifica delle forme geometrica di base si è cercato di ritornare verso la forma originale della scrittura. Attraverso l’esasperazione di quest’ultima forma e la sua ulteriore deformazione si è riusciti a conferire maggiore dinamismo e ottenere quell’effetto di fluidità e leggerezza che ci si era posti come obiettivo. 3 43 Oggetti di immagine coordinata istituzionale Gli oggetti principali che definiscono l’immagine coordinata istituzionale sono, a partire dai biglietti da visita, passando attraverso la carta intestata aziendale, i modelli fatture, i modelli di slide utilizzati per le presentazioni, fino ad arrivare alle cartelline portadocumenti, tutti i documenti aziendali che riportando il marchio del CSIPiemonte verso l’esterno e che contribuiscono a definire e consolidare l’immagine aziendale nel suo complesso e con i propri valori. Perchè questo accada è pero’ molto importante stabilire delle regole d’uso, così come avviene per l’utilizzo del logo aziendale, per dare vita a una serie di oggetti uniformi, che trasmettono identità e non solo verso l’esterno ma anche verso l’interno in chi li utilizzerà quotidianamente. © franzgoria.com | Tutti i diritti riservati 15/10/2010 CSI-Piemonte | Manuale di immagine coordinata 4 44 associazione moda e sport grafica per evento showroom aperti Logo design Immagine coordinata © franzgoria.com | Tutti i diritti riservati 45 iakta | logo guidelines LOGO Iakta Logo design Immagine coordinata chicchicken © franzgoria.com | Tutti i diritti riservati 03/10/2010 3 46 dvdisk | corporate image proposal IL LOGO dvdisk Logo design Immagine coordinata DVDISK www.dvdisk.com chicchicken 3 01/10/09 dvdisk | corporate image proposal dvdisk | corporate image proposal fronte 1 colore LE T-SHIRT IL BIGLIETTO DA VISITA retro dario colombo DVDISK [email protected] +39 329 89 56 777 www.dvdisk.com www.dvdisk.com 2 colori dario colombo DVDISK [email protected] +39 329 89 56 777 www.dvdisk.com www.dvdisk.com chicchicken chicchicken © franzgoria.com | Tutti i diritti riservati 01/10/09 01/10/09 8 5 47 wow | logo guidelines IL LOGO wow Logo design wow | logo guidelines COLORI chicchicken 3 17/11/09 Stampa a 2 colori e Pantone di riferimento Pantone 200 C Black 100 % Rgb (colori per web e applicazioni monitor) chicchicken © franzgoria.com | Tutti i diritti riservati CMYK ( per stampa in quadricromia) 192, 0, 56 #CC0000 C=0, M=100, Y=63, K=12 000,000,000 #000000 C=0, M=0, Y=0, K=100 17/11/09 5 48 Illustrazioni © franzgoria.com | Tutti i diritti riservati 49 Interaction Design Primer Drawings by Franz Goria, videos by Simone Muscolino. With contributions from Massimo Banzi, Elio Caccavale, Yaniv Steiner. Thanks to Barbara Ghella for the continuous support given to this project. Published by Postmedia Books Via Lampugnano, 175 20151 Milan, Italy Tel: +39 02 4525 221 Fax: +39 02 4091 0604 [email protected] www.postmediabooks.it Authors Walter Aprile Britta Boland Stefano Mirti Drawings Franz Goria © 2006 Postmedia Srl, Milan All Rights Reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without prior consent of the publisher. ISBN 12‑34567‑89‑0 Videos Simone Muscolino Contributors Massimo Banzi Elio Caccavale Yaniv Steiner Art Direction & Design Britta Boland Alessandro Busseni Silvia Kämmerling based on an original concept by Esther Mildenberger, envision+ www.envisionplus.com Photography Walter Aprile Britta Boland Ivan Gasparini Daniele Mancini Stefano Mirti Featuring the work of Davide Agnelli Aram Armstrong Shawn Bonkowski Dario Buzzini Andreea Chelaru Benjamin Dove Tal Drori Tony Dunne & Fiona Raby Helen Evans Eyal Fried Heiko Hansen David Henderson Garikoitz Iruretagoiena Crispin Jones Daniele Mancini David Mellis Tristam Sparks Thomas Stovicek Victor Szylagyi Luther Thie James Tichenor Nicolas Zambetti Haiyan Zhang 1.0 1.1 1.2 1.3 .0 2.1 2.2 2.3 .0 3.1 3.2 Interaction Design Primer (vol.1) The world of self‑produced books How to make a notebook Appendix | Introduction to Processing How to make an address book Appendix | Crunching strings for a better address book How to make a booklet Appendix | Your first digital layout 076 078 090 100 110 120 136 The diary, myself, the world How to track your life Appendix | How to sketch Learning from bananas. How DNA entered the world of design Appendix | Form follows fiction How to make a cellular automaton Appendix | Build your own cellular universe 146 148 160 168 180 188 200 Games. Computation ... ... electronics! How to make a matchbox computer Appendix | Polygen, better than magnetic poetry How to make a Turing machine Appendix | A Turing machine simulator Going electronic Appendix | First steps into physical computing 3.3 4.0 4.1 4.2 212 214 226 238 248 254 278 Tying it all together How to make a colourwalk Appendix | The realm of colours How to teach, how to learn Appendix | Learning by doing. But doing what? People, places, things. The curious index of this book Appendix | Thinking about vol. 2 286 Programming glossary | Index| 00 When we want to draw, think freely and creatively, when we want to break the linear‑thinking slavery, we need the accountant to back off and let the musician come out. If we want to sketch something meaningful and nice, this is the only way. Our cognitive system is ruled by the left part of the brain and in order to subvert the system we have to trick it. This is not as difficult as it may seem. Again, think of what you do when you drive a car. If you are at least an average driver, you don’t consciously think about all the subsequential steps you learned in driving school. Rather, you are in a magical condition where all the things you should be doing are done without thinking and you are even able to have a conversation, listen to music, and enjoy the cityscape. How is this possible? It is possible because in that very moment the right part of the brain is peacefully in charge of the driving activities, 4 leaving the left part to much more explicit activities (arguing with your boyfriend or girlfriend, assembling the shopping list, etc.). In order to draw nice things, you need to reach that same condition. Stories, toys, code, games, experiments | Walter Aprile, Britta Boland, Stefano Mirti Chapters overview 010 012 024 034 044 056 066 Drawings by Franz Goria, videos by Simone Muscolino. With contributions from Massimo Banzi, Elio Caccavale, Yaniv Steiner. Thanks to Barbara Ghella for the continuous support given to this project. 4.3 00 | Interaction Design Primer | Illustrazioni per book 004 The next experiment (once we are aware of the limits of our visual memory) should be done trying to represent things which don’t have a known shape or symbolical association. Try some bent shape like the rolled‑up cable of your computer. Try crumpled paper. If you draw things your left brain doesn’t’ know, it will be much easier. Work on the contours, the edges. Forget the colours, forget what is inside. Just focus on those specific lines dividing different areas. Everything must be expressed in this line. Work on the line, excite it, make it thick, make it thin, make it suffer, make it scream. Another trick. Before you draw with the ink on paper, draw with your finger in the air. Get to know this contour, this line. Start to feed your mind with the information needed. To make love with lines relies on the basic tenet that a line is a line and not a multitude of strokes. The line is jealous, and does not tolerate sharing your attention. Put your pen on the paper and keep it there. If you go wrong, make another sketch, but first finish this. A stroke must have one line. Not two, not five, not ten. Be responsible for your actions. Start a stroke and keep the pen down all the way. No use to stop, check, correct, proceed some more, check again. Take a look, your pen on the paper and go all the way.5 You can learn to accept the thought of nuclear explosions with a mushroom‑cloud shaped plush toy. After all, even bears are not How do we get there? Here we go: particularly cuddly in real life. Use a pen and not a pencil. We want mistakes to happen and become part of Furniture can have more than one function. It can be athe stair,drawing. or a We don’t want to use an eraser. It is better to do mistakes knowing shelf – but if you were to suddenly feel afraid, very afraid, it could that the mistake will be part of the process, rather than using the consolatory turn into something where you can hide from the outside world. Notes support of the eraser. When sketching, an eraser is useless. When you sketch, you In these images from Tony Dunne and Fiona Raby’s latest project, you see a number of devices specifically meant for the make anxious mistakes. Now that you have a nice pen (do these exercises with a nice felt person living in the age of international terrorism and world pen, not with the first pen you find on your desk) try this: draw an eye relying on empires. your memory. Next get a mirror and draw the eye that you actually see. Eh? The first object is a teddy bear shaped as an atomic mushroom, See the difference? In this first experiment we learn that memory is quite useless then you have a wooden stair that can be easily transformed in (if not deceiving and misleading) for our visual experiments. We must draw what a shelter where to hide. we see, not what we know. Tony and Fiona are at the forefront of the so‑called critical design arena. Design meant to make you thinking, and not supposed to satisfy defined needs. They both teach at the Royal College of Arts (RCA) in London. 1 In our humble opinion, Walter Gropius is to Bauhaus what J.R.R. Tolkien is to the Middle Earth. They both imagined and depicted complete universes, with their characters, ethics, languages and objects. Both Bauhaus and the Middle Earth trickle into our reality, not so much literally (we don’t meet hobbits on the streets, and we don’t sit on Mies’ chairs on a daily basis), but rather through changing our perception. Bauhaus and the Middle Earth are conceptual glasses – we see the world through them. 2 Archigram’s futuristic cities became the cities where we live now, in only forty years. Superstudio visions might take some more time. Still, the prophetic abilities of a number of gifted architects at the round of the 60’s into 70’s is quite impressive. 3 In the desert of Southern Spain, Sottsass literally built a number of intriguing installations that he then photographed: doors opening on the sun or on a shadow area, suspended wire floors over depressions in the ground, where one would stride warily, a mock subway entrance. 4 Not so far away in the future, the creation of androids (synthetic humans) is an industrial practice. These creatures, indistinguishable from humans without a careful analysis, have a lifespan of a few years. How do they react? What does it mean to have human feelings and memories, and know of your inescapable short term fate? What does it mean to have been built? 5 The plan was the specification of the Ville Radieuse concept: a dense city, where skyscrapers, separated by vast green areas, house all the population. Le Corbusier’s idea was that you would raze old cities, that are unhealthy, unscientific and impractical. Maybe you would spare a couple of old buildings, for memory’s sake. And then you would rebuild according to rational principle. 6 If you go to the Victoria and Albert Museum today, in the Twentieth Century room, there is a terrifying, or terrific depending on your vision of the world, collection of Memphis furniture. What you notice today are the loud patterns, the radical palettes, the strange and arbitrary forms. Sottsass’ furniture for Poltronova of the Sixties were experimental and radical: practically the same objects, labeled as Memphis in the Eighties, were commercial successes. 7 Utopia is a word coined by Thomas More, and it literally means “no place”, that’s to say a place that does not exist. Thomas More’s Utopia was an ideal state of human living, and thus the world has taken on positive connotations. Dystopia is the opposite of utopia: an imaginary reality, usually of a social type, that is enemy to human nature. 11 Critical design is generally defined as design activity that will not result in a marketable product or service, but rather in observations, prototypes and publications that express a specific worldview on societal or technological phenomena. For example, Crispin Jones designed a series of social mobiles for IDEO. One of the mobiles, for example, would hurt you if your interlocutor talked too loud; another one forced you to play a silly tune on a trumpet‑like instrument before allowing you to make a call. Obviously these ideas did not make it into production, but they do force you to think about the effects of mobile telephony on the social environment. The quality and the depth of their work is truly amazing, and you will find out much more from their ‘Hertzian Tales’ and ‘Design Noir’ books, or by visting their website: www.dunneandraby.co.uk 0 | Interaction Design Primer | | The diary, myself, the world | 0 12 In service design, these are called the touch points, the parts of a service that people actually deal with, such as the ATMs or the subway tickets, as opposed to the back end, such as databases or accounting. 8 It is designed with a specific reader in mind. Don’t expect flashy‑trashy tricks. Although designed by the well‑known Erik Spiekermann, the design work is discreet but effective. The Economist is like a perfect English suit: it is so perfect that nobody will notice it. 9 Due to their role, convincing them is not going to be easy at all. 10 ‘Nickel and Dimed: On (Not) Getting By in America’, Owl Books, 2002 11 | Interaction Design Primer | © franzgoria.com | Tutti i diritti riservati | The diary, myself, the world | 11 50 Interactivemedia Illustrazioni per website e adv © franzgoria.com | Tutti i diritti riservati 51 © franzgoria.com | Tutti i diritti riservati 52 Trenitalia, frecciarossa Illustrazioni per offerta restyling di servizi © franzgoria.com | Tutti i diritti riservati 53 CSI-Piemonte campagne interne promozionali Illustrazioni e layout design © franzgoria.com | Tutti i diritti riservati 54 © franzgoria.com | Tutti i diritti riservati 55