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