Comunicare il Territorio attraverso l'utilizzo dell'Icon Design e del Flat design

ACCADEMIA DI BELLE ARTI DI ROMA

A.A. 2020/2021

GRAFICA EDITORIALE

TESI DI MINGZHI ZHAO

RELATORE PROFESSORE PUSCEDDU

Comunicare il Territorio attraverso l'utilizzo dell'Icon Design e del Flat design

Candidata: Mingzhi Zhao Matricola: 15817 I° livello - Grafica editoriale Triennale superiore Relatore: Prof. Enrico Pusceddu Accademia di Belle Arti di Roma Anno accademico 2020/2021

Abstract: Il Flat design è attualmente la forma più usata e discussa di Icon design. È accettato dalle persone per i suoi vantaggi di semplicità della moda, tema di spicco e costi di progettazione inferiori. Finora è diventata una tendenza nel mondo del design. Lo stile minimalista promosso da esso porta anche nuova ispirazione e direzione nel design dell’icona. In questo percorso di tesi, ho voluto analizzare e produrre attraverso l’utilizzo e la pratica del Flat design e del Icon design, riassumere i vantaggi e gli svantaggi e ad applicarlo al mio progetto di design. Nello specifico una rivista sul quartiere Ostiense.

INDICE Abstract Introduzione

6 20 34 52

I

La Gestalt

Cosa è la Gestalt Le principali leggi della Gestalt Come usare la Gestalt nel design

II

L’Icon design

Cos’è un’icona L’uso delle icone nella quotidianità La funzione e il significato di Icon design

III

Il Flat design

La storia di sviluppo di Flat design Che cos’è Flat icon I vantaggi e gli svantaggi del Flat design

IV

Le tendenze attuale e future dell’Icon design Dallo scheumorfismo design al Flat design Combinazione di entrambi Nuovo stile di design

76 82

V

Il concetto di design delle sue declinazioni in campo comunicativo dovrebbero essere sempre considerati Conclusioni Riferimento Progetto

Prefazione Presentazione del progetto

INTRODUZIONE In primo luogo, voglio spianare la strada al design delle icone parlando della psicologia della Gestalt. Poiché si può dire che la psicologia della Gestalt sia il fondamento e la base principale del design, senza i principi visivi portati dalla psicologia della Gestalt, non ci sarebbe alcuna base per i principi del design su cui possiamo fare affidamento. Quindi elaborerò nel testo i principi visivi della psicologia della Gestalt e la sua applicazione nella progettazione grafica.

In secondo luogo, introdurrò il design delle icone introducendo le icone, esporrò i punti chiave del design delle icone e dei principi di progettazione da seguire e fornirò esempi dell'applicazione pratica del design delle icone nella nostra vita quotidiana, in modo da iniziare gradualmente a spiegare il design piatto.

In seguito, dopo aver descritto il design piatto, dobbiamo iniziare ad analizzare gli stili di design delle icone più popolari, dal precedente design scheumorfismo al design piatto più diffuso, e poi le persone scoprono gradualmente i difetti del design piatto, fino alla fine Combinandoli due stili apparentemente opposti che in realtà si stanno fondendo tra loro, ci sforziamo di offrire una migliore esperienza del prodotto agli sperimentatori di design e progettare nuovi stili di design, come la nuova Neumorphism e Glassmorphism.

In conclusione, Lo sviluppo del design non dovrebbe riguardare solo l'uniformità visiva, lo stile uniforme e un'impressione visiva di bell'aspetto, ma anche l'esperienza e le sensazioni reali degli utenti e delle persone servite dal design.

I. La Gestalt Cosa è la Gestalt Le principali leggi della Gestalt Come usare la Gestalt nel design

Anatra? Coniglio?

6

Cosa è la Gestalt

(Da sinistra a destra: Max Wertheimer(1880 - 1943), Wolfgang Köhler (1887 - 1967) e Kurt Koffka(1886 - 1941))

G

estalt è un sostantivo nel campo della psicologia, e la parola “Gestalt” stessa ha due significati. Una connotazione si riferisce alla figura o alla forma, cioè alla natura di un oggetto. Ad esempio, alcuni termini come “angolare” e “simmetrico” sono usati per rappresentare le proprietà generali degli oggetti, per mostrare alcune caratteristiche dei triangoli nelle figure geometriche e delle serie temporali. In questo senso, Gestalt significa “forma”. Un altro significato si riferisce a un oggetto specifico e alla sua caratteristica di una figura o forma speciale. Ad esempio, “angolare” o “simmetrico” si riferisce a un triangolo specifico. Piuttosto che il concetto di triangolo o serie temporali come nel primo significato, coinvolge l'oggetto stesso,

piuttosto che la forma speciale dell’oggetto, che è solo uno degli attributi dell'oggetto.

In questo senso, la Gestalt è qualsiasi tipo di tutto separato.

La teoria della Gestalt, come una delle teorie importanti in psicologia, nata e sviluppatasi agli inizi del XX secolo in Germania.

Un gruppo di psicologi tedeschi e austriaci guidati da Max Wertheimer (1880-1943), Wolfgang Köhler (1887-1967) e Kurt Koffka(1886-1941), ha riassunto e osservato importanti fenomeni visivi, esponendo le caratteristiche della percezione automatica del sistema nervoso umano e dell'elaborazione dell’input di informazioni visive dal mondo esterno.

7

In poche parole, la gestalt è il risultato finale della percezione. È la nostra percezione quando siamo assenti e senza riflessione.

La Gestalt enfatizza l’integrità dell’esperienza e del comportamento e si oppone alla teoria alla teoria degli elementi dello Strutturalismo e al Comportamentismo che erano popolari all'epoca. Credeva che il tutto non fosse uguale alla somma delle parti, la coscienza non fosse uguale alla raccolta di elementi sensoriali, e il comportamento non è uguale al ciclo degli archi di riflessione.

La scuola della Gestalt sostiene che il principio di funzionamento del cervello umano appartiene alla teoria dell'olismo, “Il tutto è diverso dalla somma delle sue parti”. Ad esempio, la nostra percezione di un fiore non è puramente derivata da informazioni sensoriali come la forma, il colore e le dimensioni del fiore. Include anche la nostra esperienza passata e le impressioni del fiore. Insieme, è la nostra percezione di un fiore.

8

“cosa hai visto veramente?”

George Armitage Miller una volta ha fornito un esempio interessante per illustrare lo slancio della psicologia della Gestalt e il dilemma dello Strutturalismo in quel momento: Quando entri nel laboratorio di psicologia, uno psicologo dello Strutturalismo ti chiede cosa vedi sul tavolo. “un libro” “Sì, certo che è un libro.”

“Ma cosa hai veramente visto?”

“Che significa? Cosa vedo ‘veramente’? Te l’ho già detto, ho visto un libro, un libro avvolto in una busta rossa.”

“A posto, devi descrivermelo il più chiaramente possibile.”

“Secondo te non è un libro? Che cos’è?”

“Sì, è un libro. Voglio solo che tu mi descriva religiosamente ciò che puoi vedere.”

“La copertina di questo libro sembra un parallelogramma rosso scuro.”

“Perfetto, vedi un rosso scuro sul parallelogramma. C’è qualcos’altro?”

“Sotto c’è un bordo grigio-bianco, e c’è una sottile linea rosso scuro. Sotto la linea sottile c’è il tavolo, circondato da strisce variegate di marrone chiaro scintillante.”

“Grazie, mi hai aiutato a dimostrare ancora una volta il mio principio percettivo. Quello che vedi è colore piuttosto che oggetto, pensi che sia un libro perché non è qualcos’altro, ma solo una combinazione di questi elementi sensoriali. “ Allora, cosa hai visto veramente?

In questo momento, lo psicologo della Gestalt ha detto: “Ogni persona stupida sa che il ‘libro’ è il primo fatto di percezione ottenuto direttamente! Per quanto riguarda la riduzione della percezione a sentimento, non è qualcos’altro, è solo un gioco intellettuale. Chiunque veda alcune macchie rosso scuro dove dovrebbe vedere il libro, allora quella persona è un paziente.”

9

Gli psicologi della Gestalt credevano che il modo più fruttuoso di vedere i fenomeni psicologici fosse come un insieme organizzato e strutturato. Hanno sostenuto che il “tutto” psicologico ha la priorità e che le “parti” sono definite dalla struttura del tutto, piuttosto che viceversa. Si potrebbe dire che l’approccio era basato su una visione macroscopica della psicologia piuttosto che su un approccio microscopico. Le teorie della percezione di Gestalt si basano sulla natura umana incline a comprendere gli oggetti come un’intera struttura piuttosto che la somma delle sue parti. Cioè, l’immagine visiva viene prima riconosciuta come un tutto unificato e poi riconosciuta sotto forma di parti. Prima “vediamo” l’intera composizione e poi “vediamo” le parti che compongono l’intera composizione.

Ci sono anche molti studiosi in Italia che hanno studiato la teoria della Gestalt. Fabio Metelli, per studi nel campo della percezione visiva, ed in tempi recenti Gaetano Kanizsa, dei cui studi è particolarmente noto il fenomeno percettivo detto Triangolo di Kanizsa. Altri autori di rilievo, che hanno contribuito a diffondere lo studio della Teoria della Gestalt nelle università italiane, sono Paolo Bozzi e Giovanni Bruno Vicario. Alla diffusione della Gestalt in Italia contribuì anche Cesare Musatti. Nino Di Salvatore (fondatore della Scuola politecnica di design di Milano nel 1954) effettuò studi di Scienza della Visione. La psicologia della Gestalt, per via dell’influenza e delle tradizioni di ricerca avviate da questi grandi maestri, rappresentò uno dei principali programmi di lavoro della psicologia sperimentale italiana tra gli anni Cinquanta ed i primi anni Ottanta, prima di essere progressivamente sostituita dal cognitivismo.

10

Il termine Gestalt nasce dalla ricerca nel campo visivo, ma non si limita al campo visivo, o addirittura all’intero campo della percezione, il suo campo di applicazione supera di gran lunga i limiti dell’esperienza sensoriale. Dopo gli anni’30, le persone applicavano il metodo della Gestalt all’estetica e lo combinavano con vari processi psicologici, che promuovevano la ricerca estetica con la tendenza della Gestalt. Se studi in profondità il principio della Gestalt, potrebbe volerci molto tempo per imparare e capire. Penso che come designer visivo, fintanto che comprendi il significato e l’uso di questi principi, puoi guidare e supportare il tuo progetto.

Le principali leggi della Gestalt

La Gestalt è un sistema teorico relativamente completo.

All’inizio della ricerca, il fondatore della psicologia della Gestalt ha avanzato le cinque regole della Gestalt: Principio della vicinanza Principio della somiglianza Principio di chiusura o completamento Principio di continuità Principio di semplicità

Principio della vicinanza

Principio della somiglianza

Gli elementi con una distanza o una posizione simile tendono a formare un insieme.

Gli elementi che sono simili in una certa parte. (dimensione, colore, forma, ecc.)

Tendono a formare un tutto.

Come l’immagine sopra, poiché la distanza tra i due cerchi è più vicina, generalmente vediamo prima 3 gruppi di cerchi invece di 6 piccoli cerchi indipendenti.

Guardando l’immagine sopra, scopriremo che ci sono 2 tipi di cerchi invece di 15 cerchi. Perché i nostri occhi possono facilmente concentrarsi su oggetti simili nell’aspetto e raggrupparli insieme.

11

Principio di chiusura o completamento Gli elementi che compongono la forma chiusa tendono a formare un tutto.

Guardando l’immagine sopra, troveremo che ci sono 1 cerchio e 1 punto invece di 9 punti. Il nostro sistema visivo tenta automaticamente di chiudere la figura aperta, percependola così come un oggetto completo piuttosto che come frammenti sparsi.

Principio di semplicità Le persone riducono le informazioni visive complesse a qualcosa di più semplice, più simmetrico, più facile da capire e più significativo.

Ad esempio, nell’immagine sopra, la maggior parte delle persone tende a interpretare la figura a sinistra come due cerchi invece delle due forme a destra.

12

Principio della continuità Quando viene trovato una regola visiva, tendo a continuare l’oggetto secondo la regola.

Ad esempio, nell’immagine sopra, ti accorgerai prima che questo è un cerchio, tre linee rette e una curva. Conosciamo linee rette, cerchi e curve da quando eravamo giovani, quindi quando vediamo questa immagine, il cervello indebolirà i “blocchi” causati da queste divisioni di linea e si renderà ancora conto che è composto da tre linee rette, un cerchio e una curva.

Attraverso esempi, possiamo scoprire che queste cinque regole non esistono indipendentemente. La semplicità è più come l’obiettivo finale della cognizione, e la vicinanza, la somiglianza, la chiusura e la continuità sono i modi per raggiungere questo obiettivo.

Per quanto riguarda le leggi stesse, perché sono tutte riassunte dalle leggi del nostro sistema nervoso umano che percepisce la grafica, vale a dire, ognuno di noi ha questa abilità inconsciamente, quindi nel processo di spiegazione del principio, troverai anche Loro sono tutti facili da capire.

Come usare la Gestalt nel design

N

el capitolo precedente abbiamo parlato delle cinque leggi della psicologia della Gestalt e la stessa Gestalt, come termine usato nel campo visivo, contiene leggi e principi che non sono limitati alle cinque leggi precedenti. Molti designer hanno apportato le correzioni e derivazioni sulla base della psicologia della Gestalt

Molti designer hanno apportato correzioni e derivazioni sulla base della psicologia della Gestalt e hanno aggiustato più regole di progettazione sulla Gestalt per le persone successive.

13

(Shigeo Fukuda, Poster di grandi magazzini giapponesi, 1975)

Principio di figura o sfondo Il nostro cervello tende a percepire alcune figure come un’immagine e altre come sfondo: “È il principio delle molte illusioni ottiche.” Che a mio avviso è il più interessante come applicazioni nel graphic design, perché permette una maggiore creatività. Un principio secondo il quale noi, in una composizione tendiamo sempre a percepire alcune figure come un’immagine e le altre come uno sfondo.

Alla fine, è proprio come il nostro occhio funziona: quando parliamo con una persona distinguiamo il viso di quella persona dallo sfondo. Questo è alla base di alcune delle illusioni ottiche più belle della Gestalt.

L’applicazione più famosa è sicuramente l’illusione ottica del Vaso di Rubin, in cui si vede sia la silhouette di un vaso nella parte nera, sia due persone che si guardano.

14

(Logo del World Wildlife Fund, 1986)

Principio del destino comune Nel principio del destino comune gli elementi con un movimento uguale tra loro e diverso dagli altri, vengono raggruppati tra loro. In questo esempio percepiamo tre colonne verticali e una sola linea obliqua che gli passa dietro. Mentre in realtà si tratta di elementi spezzati (6 linee verticali e 4 linee oblique di varie dimensioni) che percepiamo come unici tra loro.

15

Principio dell’ esperienza passata Secondo questo principio, l’esperienza modella la nostra percezione. E quindi gli elementi di un insieme che riescono a far rivivere le esperienze percettive di un determinato oggetto, vengono raggruppati e formano una figura che conosciamo bene.

In questo esempio vediamo 3 segmenti ma percepiamo chiaramente una E maiuscola.

Questo perché le linee posizionate in quel modo stimolano il ricordo che abbiamo di quella lettera.

Principio della pregnanza o Buona forma Più un elemento è semplice e stabile, più appare d’impatto. la forma che si costituisce è “buona” quanto caratteristiche sono più le sue regolari, simmetriche, coesive, omogenee, equilibrate, semplici, concise Una “buona forma si impone maggiormente alla nostra percezione. Quindi è più facile ricordare il quadrato a sinistra che la figura a destra.

Principio della continuità di direzione una serie di elementi posti uno di seguito all’altro, vengono uniti in forme in base alla loro continuità di direzione. Nella figura percepiamo come unità AB e XY e non AY e XB o ancora AX e YB.

16

x a

y

b

“Il tutto è più della somma delle singole parti”

Quando progettiamo il layout, organizzeremo le informazioni grafiche in gruppi di diverse forme, dimensioni e colori per creare una gerarchia visiva che gli utenti possano leggere. Come mostrato nella figura sopra, gli elementi sono distribuiti in varie

Questo è lo slogan che la psicologia della Gestalt ha sempre sottolineato, tutti gli elementi di ogni esempio che abbiamo visto risultano privi di significato, mentre raggruppati formano un significante. La teoria della Gestalt è molto necessaria per qualunque designer che voglia far recepire in modo semplice e immediato il messaggio del suo lavoro.

Possiamo vedere l’applicazione del teorema di Gestalt ovunque nel design nella vita reale.

posizioni nel poster sotto forma di gruppi, formando livelli visivi di diverse dimensioni, permettendoci di vedere a turno le informazioni principali, le informazioni secondarie, le informazioni ausiliarie e altri contenuti.

17

Nella pagina personale di Whatsapp sopra, le funzioni sono raggruppate in utenti, e ogni gruppo è rigidamente diviso in un tutto. Le opzioni “Scopri” e “Consigliati” nell’AppStore sono più vicine al contenuto di seguito, anche se non c’è una chiara linea di demarcazione nel mezzo, ma solo una divisione morbida, gli utenti sapranno che sono un tutt’uno con il contenuto di seguito. Questa è la vicinanza del principio della Gestalt.

18

Il logo IBM, possiamo vedere che è IBM, perché ciò che vediamo visivamente non sono linee discrete, ma grafica continua.

Durante l’osservazione delle cose, non si può fare a meno di creare un senso di continuità visiva. Questo è il principio di continuità della Gestalt.

In effetti, a volte la nostra visione chiuderà anche cose non chiuse, proprio come vediamo il logo IBM nella foto sopra. Questo è il principio della chiusura della Gestalt.

La semplicità del principio della Gestalt è particolarmente utile oggi quando lo stile piatto è sotto i riflettori. Ad esempio, l’icona sopra sta diventando sempre più concisa.

19

II. L’Icon design

20

Cos’è un’icona L’uso delle icone nella quotidianità La funzione e il significato di Icon design 21

Cos’è un’icona

S

e cammini per strada, puoi vedere i segni dei negozi sulla strada; Oppure, se guardi verso la strada, vedrai i segnali stradali; Oppure osserva la superficie di qualsiasi oggetto che hai a portata di mano e puoi vedere un motivo e un marchio su di essi. Queste sono icone. Puoi anche vederlo sulla bandiera nazionale di ogni paese. Grandi quanto la bandiera nazionale e il logo del marchio, piccoli come cartelli per bagni pubblici e segnali stradali, queste sono tutte icone.

Quando le persone vedono il fumo salire, pensano al fuoco sottostante. Il fumo è un

22

segno naturale del fuoco. Nell’era delle comunicazioni sottosviluppate, le persone usavano il fumo per trasmettere informazioni relative al significato del fuoco. (Come incendio, emergenza o richiesta di aiuto, ecc.) Questo “fumo” artificiale non è solo un segnale, ma anche un segno. Si alza in alto, si diffonde lentamente e ha una forma unica che consente alle persone di vederlo rapidamente da una lunga distanza. La velocità e l’effetto di tale trasmissione non verbale sono incomparabili con la lingua e la trasmissione del testo in quel momento.

Oggi, sebbene i mezzi di trasmissione della lingua e del testo siano molto avanzati, non esiste un altro metodo di trasmissione intuitivo come loghi o icone che rendono il pubblico chiaro a colpo d’occhio, hanno un effetto rapido e non sono limitati dalle lingue di razze e paesi diversi. Qualsiasi tipo di metodo di trasmissione delle informazioni non può essere sostituito. Non è solo un tipo di grafica, ma anche una sorta di logo,

che ha le caratteristiche di essere altamente concentrato, veicolare rapidamente le informazioni ed essere facile da ricordare.

Oltre a cosa contrassegnare e cosa sostituire, ha anche la funzione di esprimere significato, emozioni e azioni di comando.

Un’icona è un tipo di grafica, segni e simboli che si trovano tra immagini fisiche e simboli astratti per riferirsi a cose.

23

(Sito di Lescaux, pitture rupestri, Francia)

L’uso delle icone nella quotidianità Le icone sono uno strumento visivo indispensabile per le persone per svolgere attività di produzione e attività sociali. L’icona ha una lunga storia di utilizzo, riconducibile al “totem” dei tempi antichi. Nell’antica Cina, ogni clan e tribù sceglieva un animale o un oggetto naturale che riteneva avesse una relazione speciale e misteriosa con sé stesso come segno speciale del clan o della tribù, che è chiamato totem.

Tra questi, i serpenti, gli orsi o gli uccelli sono usati come animali rappresentativi e 24

sono disegnati come totem. Un simbolo di un gruppo, principalmente per distinguere un gruppo dall’altro. All’inizio, le persone incidevano totem sulle caverne e sugli strumenti di lavoro, e in seguito li usavano come simboli di guerre e sacrifici e creavano bandiere ed emblemi di clan. Successivamente, dopo la nascita del paese, si è evoluto nella bandiera nazionale e nell’emblema nazionale.

Nella vita produttiva, lavorativa e sociale degli antichi, al fine di facilitare la connessione, indicare il significato e distinguere i tipi, le caratteristiche e gli effetti personali delle cose, sono stati creati e ampiamente utilizzati vari tipi di segni, come i segnali stradali, i monumenti o i sigilli. Gli archeologi hanno scoperto gli strumenti in antiche tombe egizie. La maggior parte dei segni sugli strumenti sono i segni ei nomi dei produttori, che in seguito si sono evoluti nell’icona. Le armature e gli elmi indossati dai soldati europei nel Medioevo sono contrassegnati da segni di identificazione. I nobili a quel tempo avevano anche stemmi di famiglia che rappresentavano le loro famiglie. Evolvendosi al presente, per il bene dell’ordine sociale, le persone hanno progettato segnali stradali, segnali di sicurezza e segnali operativi, ecc.; Per distinguere e rappresentare paesi, regioni, città e nazioni, le persone hanno disegnato bandiere nazionali, emblemi nazionali e segni esclusivi di gruppi etnici regionali; Per le organizzazioni sociali, le imprese e le attività hanno progettato emblemi e loghi dei marchi.

Tornando alla vita quotidiana di ognuno di noi, scoprirete che le icone sono davvero onnipresenti nella nostra vita quotidiana, dalle nostre app preferite ai segnali stradali durante i nostri spostamenti mattutini. Le icone servono come segnali visivi, riconoscimento del marchio; idealmente, un sistema di comunicazione globale. Le icone migliori sono semplici ed efficaci: un’immagine vettoriale con un messaggio chiaro basato su una metafora facilmente definita.

Ogni singolo segnale stradale, segnaletica del negozio, simbolo, poster incarna e trasmette una ricca gamma di informazioni complesse.

Per mostrarvi le icone onnipresenti nelle nostre vite, ho deciso di fare ricerche sul campo, anche per affinare le mie capacità nell’identificazione e analisi di icone e simboli.

(Codice Manesse, Walther von Klingen, 1300-1340)

(Bandiera Italia stemma repubblica)

25

Ho visto quest’icona cartello sopra l’ingresso di una tabaccheria sul lato della strada e l’ho fotografato. Quindi ho usato il computer per disegnare di nuovo l’icona, possiamo vedere chiaramente che è un telefono ed è rosso. Data la sua capacità di attirare l’attenzione, il rosso viene utilizzato nei vari segnali che indicano la presenza di un pericolo: da quelli stradali a quelli marittimi, fino a diventare il simbolo di molte organizzazioni e strutture che si occupano delle emergenze, come la Croce Rossa. Quindi penso che il significato di questo segno dovrebbe essere quello di fornire alle persone l’opportunità di chiamare in caso di emergenza.

Questo è un fast food che ho visto per strada. Questo dovrebbe essere il logo di questo negozio. L’ho disegnato di nuovo con il computer, Possiamo vedere chiaramente che c’è una mucca in questo logo e possiamo immaginare che questo ristorante dovrebbe essere una specialità dei panini di manzo.

26

Questo è quello che ho visto sulla porta di un negozio. Conosco questo logo, che è un software utilizzato per ordinare cibo. Questo logo è composto da una casa e un paio di stoviglie. Poiché possono consegnare cibo a casa, il logo significa che i clienti possono gustare il cibo a casa. L’arancione rappresenta positivo, Essi danno luogo a stati d’animo attivi, vivaci, tendenti all’azione. L’arancione è molto adatto per essere utilizzato come colore rappresentativo del software da asporto.

Ho visto quest’icona a un incrocio con traffico intenso. Riconosco subito che questo significa che la polizia è davanti a te, perché l’icona riassume i cappelli indossati dalla polizia italiana. È come il tipo di casco metropolitano che vediamo spesso nei vecchi film. Penso che questa sia un’icona molto locale.

27

All’ultima fermata, sono arrivato alla porta di una gastronomia e ho fatto una foto al loro logo. Anche se non sei entrato in questo negozio, puoi vedere dal logo sulla porta che si tratta di un negozio della gastronomia. Un grazioso cappello da cuoco con una lunga barba e un fiocco che simboleggia l’Italia, sento che può preparare un buon piatto. La lettera Q al centro dovrebbe essere presa dal nome del negozio Super Q-Qualità.

Le icone sono ovunque nella nostra vita quotidiana e svolgono un ruolo enorme che le persone non possono immaginare. Pertanto, è anche molto importante per i designer progettare una buona icona.

28

La funzione e il significato di Icon design

(Sinistra: Firefox logo, 2019; Destra: Google, Chrome Logo, 2014)

Iconografia e simboli sono ovunque guardi. Quando vuoi andare online, Forse è stato il cerchio multicolore che ha aperto il tuo browser Chrome, o la volpe e il globo blu per Firefox. Considera questo: quanto tempo hai impiegato per capire cosa rappresenta quell’icona? Ora, confrontalo con quanto tempo ti ci è voluto per leggere fino a questo punto e comprendere il significato e l’intento delle parole? Iconografia e simboli sono profondamente radicati nella società e nel modo in cui operano gli esseri umani. Un’immagine semplice ha la

capacità di esprimere idee complesse, comunicare messaggi e persino superare le barriere culturali. Circa il 90% delle informazioni elaborate dal cervello umano sono visive. Inoltre, il cervello umano elabora un’immagine 60.000 volte più velocemente del testo. Gli esseri umani sono visivi per natura, in quanto tali, incorporare più dati visivi nella tua strategia di marketing o di branding può essere uno strumento molto efficace. Tuttavia, non è facile creare un’immagine di marca impressionante. In questo momento, è necessario un designer.

29

Nei capitoli precedenti, le icone che ho citato sono fondamentalmente le icone che incontriamo nella vita reale. Sono le icone reali che possiamo toccare con il nostro corpo, come segnali stradali, cartelli di negozi, ecc. Ma in base all’età dell’informazione avanzata, nella nostra vita quotidiana, abbiamo più a che fare con il mondo della rete virtuale. In un giorno, le persone trascorrono più tempo immerse nel mondo virtuale costruito da innumerevoli informazioni che nel mondo reale, quindi ora le persone sono esposte a più icone dovrebbero essere le icone nel mondo dei computer. Anche se le persone sono molto abituate a vivere nel mondo delle reti digitali, potrebbero essersi abituate a quelle icone e gradualmente ignorarle, ma non possiamo negare il fatto che queste piccole immagini sono una parte essenziale della nostra interazione con computer, smartphone, tablet e altri gadget e sono diventate molto importanti nel web design. Sono davvero molto importanti per noi. Ma le icone sono disponibili in quella che sembra una quantità infinita di forme e dimensioni e ci sono molti stili creativi e potenti là fuori.

“Ma da dove inizi?”

“Come puoi scegliere?”

“Deve essere l’icona più bella là fuori?”

La quantità di domande che rientrano nella tua selezione potrebbe diventare travolgente, ma ciò che è necessario è che tu faccia un passo indietro ai fattori chiave nelle tue basi. Chi sei e cosa fai come azienda. È un dato di fatto che in quasi tutti i casi dovresti cercare icone che siano coerenti con il design, il colore, la forma o lo stile con il 30

mezzo con cui stai lavorando. Se il tuo sito è molto elegante e semplice utilizzando un’interfaccia utente piatta, guarderai le icone piatte che corrispondono. Se fosse più rustico, potresti volere qualcosa di diverso. Quando si scelgono le icone per una pagina Web per rafforzare il layout, la scheda di attività commerciale o l’utilizzo in qualche altro tipo di progetto, è necessario essere cauti. A volte le icone possono diventare complicate o essere un po’ troppo, considerando il contenuto che hai sul tuo sito o materiale di stampa. Molto dipende da cosa stai cercando di portare al tuo pubblico. Potresti aver bisogno di qualcosa di più personalizzato o specifico per i tuoi servizi che corrisponda all’aspetto del tuo marchio. C’è un’ampia ricerca da fare nel mondo in continua espansione delle icone, e ci sarà sicuramente uno stile che si abbina perfettamente alla tua interfaccia visiva, o che dia al tuo designer l’ispirazione per creare un pezzo per l’esperienza che i tuoi spettatori riconosceranno.

Sorprendentemente ci sono ancora molte icone, come Clipart che esistono ancora degli anni ‘90, che potrebbero immediatamente far sembrare il tuo sito obsoleto. È imperativo che ti allontani da questo tipo di icone che potrebbero immediatamente rendere il tuo sito obsoleto. La ricerca mostrerà gli stili popolari delle icone attuali e progettandone di nuove ti consente di personalizzarlo in modo che si adatti al tuo progetto. Assicurati di sapere di essere al passo con i design, le tendenze e le abitudini di oggi.

Vediamo gli esempi per comprendere la tendenza generale del design di icone oggi.

Piatte e delineate, liscio, croccante e pulito e icone molto generiche.

Colori pastello selettivi, ombreggiature direttive e molto pulite. Sebbene questa sia anche la tendenza attuale, potrebbe non essere la soluzione perfetta per tutti. Tutto dipende dalla attività e identità.

Alcune icone tridimensionali possono essere utili, ma per la maggior parte fuori moda.

Il designer esagera con l’effetto lucido e l’icona sembra molto pesante.

31

Quindi i designer di oggi scelgono un design di icone semplice e leggero nella maggior parte dei casi.

Come le icone di Twitter sono morbide, leggere e nitide.

E l’icona utilizzata dal software Instagram.

Diamo un’occhiata all’interfaccia che vediamo nella nostra vita quotidiana: Ci sono cinque diverse icone, si trovano sotto l’interfaccia dell’applicazione e occupano poco spazio. Tuttavia, ognuno di loro dice agli utenti di fare un’azione diversa: vai al menu principale, cerca più contenuti e account, aggiunge il tuo post personale, controlla la tua interazione, e controlla la tua home page personale. Aiutano le persone a risparmiare molto spazio.

32

Abbiamo capito chiaramente che Le icone rinforzano il messaggio. Come dice il proverbio, “un’immagine vale più di mille parole”. E in questo caso diventa una real-

tà. Un’icona può comunicare più cose del testo in uno spazio più piccolo, questo è il design dell’icona.

33

III. Il Flat design

34

La storia di sviluppo di Flat design Che cos’è Flat icon I vantaggi e gli svantaggi del Flat design 35

(Libro dei morti, Scena dal libro dei morti, Antico Egitto, XVII/XVI secolo a.C.)

La storia di sviluppo di Flat design

F

lat design è una piccola branca del design grafico. Possiamo iniziare con la storia del Graphic design.

Si può dire che la storia dello sviluppo del design grafico sia dai tempi antichi ai dipinti primitivi, i nostri antenati hanno creato vari simboli di immagine, come il “totem” di cui abbiamo parlato prima. Quando la vita primitiva dell’umanità si sta gradualmente 36

spostando verso la fase iniziale della civiltà, la comunicazione tra le persone continua a svilupparsi, il che richiede che i propri pensieri e sentimenti siano trasmessi sotto forma di simboli. L’evoluzione dei simboli grafici da complessi a semplici segna l’inizio del Graphic design.

Alla fine del XIX secolo, il graphic design è emerso come una professione distinta in Occidente, in parte a causa del processo di specializzazione del lavoro che si è verificato lì, e in parte a causa delle nuove tecnologie e possibilità commerciali portate dalla rivoluzione industriale. Nuovi metodi di produzione hanno portato alla separazione del design di un mezzo di comunicazione dalla sua produzione effettiva.

Tra la fine del XIX e l’inizio del XX secolo, agenzie pubblicitarie, editori di libri e riviste hanno assunto direttori artistici che hanno organizzato tutti gli elementi visivi della comunicazione e li hanno inseriti in un insieme armonioso, creando un’espressione adeguata al contenuto.

(Miniatura persiana, Nizami Ganjavi, Metà del XVI secolo, dinastia safavide)

Sebbene il suo avvento come professione sia piuttosto recente, il design grafico ha radici che affondano nell’antichità. Manoscritti illustrati furono realizzati nell’antica Cina, Egitto, Grecia e Roma. L’invenzione della “carta” ha fatto sì che le persone lavorassero per registrare il verificarsi di eventi su carta e le storie del passaparola sono state trasformate in testo e immagini su carta. Sebbene i primi designer di manoscritti non creassero consapevolmente “ Graphic design “, gli scribi e gli illustratori lavorarono per creare una miscela di testo e immagine che fosse allo stesso tempo armoniosa ed efficace nel trasmettere l’idea del manoscritto.

Con lo sviluppo della stampa e della produzione di libri nel XV secolo, i progressi nel design grafico si svilupparono parallelamente ad essa nei secoli successivi, con compositori o tipografi che spesso progettano le pagine mentre impostano il tipo.

Nel 1922 il tipografo William A. Dwiggins coniò il termine graphic design per identificare il campo emergente. Il graphic design di questo periodo ha due caratteristiche eccezionali. Il primo è soddisfare le esigenze di produzione e vendita. L’imballaggio delle materie prime e la pubblicità esterna divennero popolari e poster e giornali furono più commercializzati. Il secondo è la domanda sociale determinata dall’impatto del commercio, e sono apparsi un gran numero di necessità e decorazioni quotidiane di nuova concezione.

(Libro d’Ore, Meester van Catharina van Kleef, circa 1440) 37

ART NOUVEAU 1890 - 1920

Stile disegnato a mano intricato Design a base lineare Uso di forme naturali Presenta una forma femminile

MODERNA 1910 - 1935

VITTORIANO 1837 - 1901

EARLY MODERN 1910-1935 Basato geometricamente Approccio minimalista Più foto e Meno illustrazioni

Bordi esterni decorativi Tipografia elaborata Simmetria Altamente elaborate e Immagini complesso Pochissime linee rette o bordi

1830

1890 1880

1910 1900

1930 1920

194

ARTI E MESTIERI 1880 - 1910

Elementi di stile tradizionali e vecchi riutilizzati Forme semplici Tipografia illustrata Molte trame

38

FUTURISMO 1900 - 1930'S

Eclettismo Caratterizzare o utilizzare la nuova tecnologia Testo offset Qualche influenza di Cubismo Nessuna caratteristica tradizionale

REALISMO EROICO 1910 - 1940'S

Immagini realistiche Di solito presenta una perso Promuovere un ideale Messaggio forte nel testo Carattere chiaro e in grasset

40

O

ona

tto

ART DECO 1920 - 1940

(Questa immagine è un riepilogo generale dei cambiamenti di stile nella storia del design grafico)

Forme geometriche audaci Uso di linee di movimento Uso di Sunburst Alto contrasto di colori Piatto (in termini di profondità)

PSYCHEDELIC 1960'S

Influenzato da droghe allucinatorie Caratterizzato da vortici astratti di colore intenso Calligrafia curvilinea Intensa vibrazione ottica del colore

KITSCH 1950'S

Immagini e caratteri contrastanti Colori audaci e vibranti Forme aerodinamiche Persone in pose drammatiche

FLAT 2010 - PRESENTE

POSTMODERNISMO 1970'S - 1980'S

Minimalismo Nessuna profondità Linee rette Uso intelligente dello spazio negativo

Collage come lustrazioni Elementi sovrapposti Impulsivo e giocoso Asse inclinato

1950

1970 1960

1990 1980

2000

CONTEMPORANEO 1945 - 1960

Forme geometriche distorte Disposizione strutturale informale Chiaro e semplice Non è decorativo

2010 2020

GRUNGE 200O -2015 STILE SVIZZERO 1940 - 1980'S

Uso dello spazio negativo Molto "pulito" e semplice Caratteri sans serif preferiti Layout asimmetrici

Texture sporche e immagini di sfondo Linee e cornici irregolari Anelli di caffè, liquidi fuoriusciti e macchie Carta strappata e bordi sporchi Elementi scritti a mano

39

Per tutto il XX secolo, la tecnologia a disposizione dei designer ha continuato a progredire rapidamente, così come le possibilità artistiche e commerciali per il design.

La professione si espanse enormemente e i grafici crearono, tra le altre cose, pagine di riviste, copertine di libri, poster, copertine di compact disc, francobolli, imballaggi, marchi, insegne, pubblicità, titoli cinetici per programmi televisivi e film e siti Web. All’inizio del XXI secolo, il design grafico era diventato una professione globale, poiché la tecnologia avanzata e l’industria si diffondevano in tutto il mondo.

Oggi, il termine “Flat design” è applicato alla grafica per numerosi scopi e compiti che hanno caratteristiche stilistiche comuni.

Il Flat design è la direzione che ha trovato la sua ampia e diversificata espressione nell’arte digitale ed è famosa per l’uso minimalista e conciso dei mezzi espressivi visivi. Il flat design si è sviluppato attivamente negli ultimi due anni coprendo sempre più campi del design grafico trovando ancora l’applicazione più ampia e diversificata nell’ambito del design digitale per interfacce web e mobile. Questo approccio progettuale è lo stile favorevole per migliorare l’usabilità e l’armonia visiva delle interfacce

40

utente. Il Flat design non appare all’improvviso. Le sue radici sono solitamente fissate nello stile svizzero, che gli storici del design trovano il suo diretto antenato.

Lo stile svizzero, noto anche come Stile tipografico internazionale o Stile internazionale più breve, è la direzione che è apparsa e ha ricevuto la sua dose di critiche negli anni ‘20 e in seguito ha vinto la sua brillante espressione nel design grafico nella Svizzera degli anni ‘40 -’50, diventando piuttosto la solida base del design grafico della metà del XX secolo in tutto il mondo. I leader di questo movimento creativo erano Josef Müller-Brockmann, il rappresentante della Scuola di Arti e Kraft di Zurigo, e Armin Hofmann della Scuola di Design di Basilea. Lo stile di questo design privilegiava la semplicità, la leggibilità e l’obiettività.

Tra i tanti contributi da sviluppare dalle due scuole ci sono stati l’uso della tipografia sans-serif, delle griglie e dei layout asimmetrici. Inoltre, è stata sottolineata la combinazione di tipografia e fotografia come mezzo di comunicazione visiva. Le opere più influenti sono state sviluppate come poster, che sono stati visti come il mezzo di comunicazione più efficace.

I manifesti qui presentati come esempi rendono ovvio che ai fan di questo stile piacevano forme semplici, caratteri audaci e rigorosi di alto livello di leggibilità, combinazioni di dettagli armoniche e basate sulla geometria, illustrazioni piatte e chiara gerarchia visiva. È cresciuto rapidamente sempre più popolare in diversi paesi del mondo e ha preso una nuova vita nell’arte dell’inizio del XXI secolo.

Sebbene questo stile abbia avuto una varietà di espressioni nella sfera del design visivo per la stampa, come poster, francobolli, cartoline, copertine di libri, riviste ecc., Ha ampliato significativamente i suoi orizzonti con l’era del design digitale, specialmente nel dominio del design per interfacce utente. I siti web e le applicazioni mobili che attraversano lo sviluppo dinamico della ricerca creativa hanno aperto la prospettiva sorprendente e fruttuosa per questo approccio minimalista e funzionale alle soluzioni di design. Lo stile prese il nome di “Flat design” che divenne immediatamente popolare e iniziò una nuova direzione nel design grafico audace scheumorfismo e supportato da nuove sfide aperte dal campo dell’interaction design.

(I Manifesti in stile svizzero, da sinistra a destra: Un’esibizione all’aperto di balletto classico, Giselle, Armin Hofmann, 1959; Manifesto del concerto della Tonhalle di Zurigo, Josef Müller-Brockmann, 1958; Manifesto del Club automobilistico svizzero, Josef Müller-Brockmann, 1952)

(Progettazione dell’interfaccia dello schermo per MacPaint, Bill Atkinson e Susan Kare, 1983)

Subito dopo essere entrati nel XXI secolo, il rapido sviluppo della tecnologia informatica e l’innovazione tecnologica di Internet mobile hanno completamente cambiato la vita delle persone e cambiato il modo di navigare in Internet delle persone. Siamo passati dallo stare seduti davanti al computer all’utilizzo dei telefoni cellulari per navigare in Internet sempre e ovunque. La rete cambia più stili di vita, modelli di business e porta anche l’ascesa di un settore, vale a dire i designer di interfacce utente.

Interface design, letteralmente progettazione delle interfacce, è comunemente intesa come l’attività di progettazione dell’interfaccia utente, I designer sono responsabili della progettazione dello stile e dell’estetica dell’interfaccia. E la cosa più importante nell’interfaccia interattiva del terminale dell’utente è l ‘”icona”. Dopo diversi secoli, abbiamo finalmente rivisto le “icone” in luoghi diversi dai totem tribali, utensili e antichi murales sui muri, sullo schermo dei nostri computer e sui nostri telefoni cellulari.

Non molte persone sanno che la parola “icona” è stata inizialmente utilizzata in campo religioso per riferirsi alle immagini che raffiguravano figure sacre: sculture, dipinti, ecc. Tuttavia, è con la comparsa dei primi computer più di 40 anni fa, quando sono emerse per la prima volta le icone (come le conosciamo).

41

Xerox Star - Il pioniere La prima GUI (Graphical User Interface) è stata utilizzata negli anni ‘70 da Xerox e all’inizio degli anni ‘80 hanno sviluppato il primo computer con icone grafiche, lo Xerox Star.3.

Le icone di Apple Lisa e Susan Kare Nel 1983, il design accessibile e divertente di Susan Kare ha conferito all’interfaccia di Apple Lisa un aspetto rilassato. Kare non sapeva che le sue icone avrebbero stabilito un precedente nella storia della GUI. Alcuni di loro sono ancora utilizzati nei nostri desktop. Laggiù, le icone erano piatte e in bianco e nero.

Internet è nato nel 1969 e nel 1973 Xerox ha progettato il primo personal computer “Alto” che utilizzava confronti desktop. Nel 1983, Apple Computer ha lanciato il personal computer Apple Lisa, il primo personal computer al mondo dotato di un’interfaccia utente grafica (GUI). Resta da verificare se Alto di Xerox o Lisa di Apple sia il primo computer dotato di una GUI. 42

Poiché Internet non era molto sviluppato a quel tempo, queste interfacce erano fondamentalmente tutte le pagine fornite con i computer. Quindi la progettazione dell’interfaccia utente non era un’industria indipendente a quel tempo e il design delle icone era fondamentalmente fatto da ingegneri informatici per inciso. Sebbene all’epoca esistessero sistemi Mac e Windows, dopotutto non erano popolari. La maggior parte dei monitor di computer può visualizzare solo pixel monocromatici. Pertanto, il web design a quel tempo era “minimalista”, senza immagini, solo testo semplice in stile pixel monocromatico. Web Design significava solo la combinazione di simboli + tabulazione (tasto Tab).

L’era dello Scheumorfismo Nel 1990, Windows 3.0 di Microsoft ha iniziato ad avere elementi di pagina “rilievo e ombra”, ha segnato l’inizio dello scheumorfismo.

Windows 95 lanciato da Microsoft nel 1995 dovrebbe apparire come la prima interfaccia per computer nella nostra comprensione, l’interfaccia di 95 ha impresso convesso, concavo e altri effetti, incluso il concavo della finestra della cartella, per simulare il reale stato fisico e l’effetto fisico della pressione del pulsante operazione. Tuttavia, lo scheumorfismo di Microsoft non ha scavato in profondità nella trama e nel materiale, ma lo ha applicato in termini di volume, luce e ombra.

L’età di Flat design

Nel settembre 2000, Apple ha rilasciato la nuovissima interfaccia utente Aqua (Aqua è il marchio GUI di Mac OS X) progettata da Cordell Ratzlaff, che generalmente riconosciamo come lo scheumorfismo entrato formalmente nella fase della storia.

Il Flat design è principalmente influenzato dallo stile tipografico internazionale (noto anche come stile svizzero), dall’interfaccia utente testuale, dal modernismo e dagli stili emergenti dal Bauhaus. Lo stile tipografico internazionale è spesso considerato l’influenza più sostanziale sul design piatto, e la sua comparsa e divulgazione durante gli anni ‘50 e ‘60 è considerato il punto di partenza del Flat design, anche se ha fatto la sua apparizione nel mondo digitale qualche tempo dopo.

Nel 2010, Microsoft ha lanciato il suo smartphone di prima generazione, Windows Phone 7. Questa può essere considerata la prima volta che il design piatto ha mostrato la sua apparizione al mondo sui prodotti informativi, utilizzando semplici blocchi dei colori quadrati e il carattere sans serif.

L’interfaccia e le icone non sono più presentate nello scheumorfismo, ma dettagli e ombre rimossi.

Successivamente, anche il sistema iOS dell’iPhone ha continuato a utilizzare questo linguaggio di design e ha davvero portato avanti. Da allora, è entrato nel dominio visivo dello scheumorfismo per 13 anni, compreso l’avvento di WinXP e Win7 nel mondo del design non ha scosso la posizione dello scheumorfismo del design.

(Logo Microsoft 2012) 43

Microsoft ha chiamato questa interfaccia Modern UI, quindi ha iniziato a integrarsi nei prodotti dell’azienda, come Xbox 360 e il software della serie Office, è stato utilizzato anche su Windows 8 nel 2012.

IOS7, progettato da Jonathan Paul Ive nel 2013, ha causato uno shock nel mondo del design e della tecnologia. Scartò tutto il precedente design dello scheumorfismo, rimosse la proiezione, rimosse il meccanismo e apparve un nuovo design del flat con concezione e design del vetro smerigliato aggiunte. Allo stesso tempo, ha avuto un impatto senza precedenti sul design.

Material Design e Win10 sono tutti correlati a iOS7 nel periodo successivo. Un anno dopo il rilascio di iOS7, Apple ha rilasciato OS X 10.10 Yosemite.

Ciò migliora le prestazioni e l’esperienza di Internet mobile e ancora una volta promuove il rapido sviluppo di Internet mobile.

Allo stesso tempo, il design piatto riduce notevolmente il consumo di memoria, migliora notevolmente i costi e l’efficienza di progettazione e consente a più APP e web design di seguire l’esempio, sovvertendo così completamente il design di Internet.

44

Che cos’è Flat icon Flat letteralmente significa che l’effetto complessivo del design tende ad essere piatto senza un effetto tridimensionale. Flat icon è abbandonare gli effetti decorativi come luci, ombre, trame e sfumature nel design ed esprimere la funzione e il significato delle icone attraverso elementi di design grafico simbolico o semplificato.

Nel design di Flat icon, gli effetti e le interazioni ridondanti vengono rimossi e il fulcro dell’interazione è evidenziare l’uso della funzione stessa. Il design originale di Flat icon è quello di rendere nuovamente le “informazioni” stesse come il fulcro principale.

E sottolinea l’astrazione, il minimalismo e il simbolismo negli elementi di design.

Come accennato in precedenza, il design dei sistemi Windows, Mac OS, iOS e Android è stato sviluppato verso il flat design.

Flat icons usano forme e colori più concisi per costruire modelli, invece dello Scheumorfismo, simili alla grafica piatta. È semplice come le icone che possiamo vedere

(iOS 6)

sul web design, i bordi delle icone sono chiari e il layout è fondamentalmente una grafica bidimensionale. Per comprendere il flat icon, dobbiamo prima chiarire due aspetti di flat icon: 1. Appiattimento dell’interazione 2. Appiattimento visivo Fammi parlare del primo. L’appiattimento dell’interazione si riflette principalmente nella struttura del software, che si riferisce alla riduzione del livello della struttura del software, consentendo la visualizzazione di più contenuti su un piano che gli utenti possono scegliere e riducendo le fasi operative dell’utente. Secondo, la piattezza della visione è più incarnata nell’interfaccia visiva del software, dall’icona dell’app ai vari elementi interni, riducendo gli effetti di luce e ombra e le sfumature di colore, e più di uno sfondo di colore puro con icone semplici. La ragione principale per l’emergere e il rapido sviluppo di flat design non si basa sull’estetica, ma sulle esigenze dell’informatica.

(iOS 7) 45

Apple ha abbandonato il pesante mattone di vetro e ha appiattito le icone. Ora i designer delle icone dei designer possono risparmiare più tempo disegnando icone delle applicazioni più semplici e l’efficienza del lavoro del designer viene gradualmente migliorata. È proprio a causa di flat icon che l’onere di trasportare le informazioni di rete viene gradualmente ridotto. Il caricamento di una figura geometrica piatta bidimensionale deve essere molto più semplice che caricare un’icona spessa tridimensionale e richiede meno tempo.

È proprio a causa della comparsa di flat icon che riducono il carico di trasmissione delle informazioni di rete e riducono anche il costo dei progettisti che le realizzano. È proprio a causa di flat design che le icone possono essere applicate alla presentazione di vari dispositivi: TV, schermi di computer, luci a LED e tatuaggi.

46

Di conseguenza, i loghi di molti marchi tendono ad essere piatti. Perché più semplice è la grafica, più possono essere visualizzati su più materiali, anche se il logo è ridotto in una certa misura, ha comunque un forte grado di riconoscimento.

(L’evoluzione del logo di Pepsi) 47

I vantaggi e gli svantaggi del Flat design Sempre più studi hanno dimostrato che le abitudini delle persone di utilizzare prodotti elettronici sono cambiate dall’emergere degli smartphone. Gli utenti trascorrono più tempo utilizzando gli smartphone rispetto ai personal computer in un giorno. Dopo tutto, i telefoni cellulari possono essere utilizzati sempre e ovunque. In questo caso, è necessario considerare la necessità di essere in grado di presentare un’esperienza utente coerente su dispositivi di dimensioni diverse. Il Flat design sembra avere alcuni grandi vantaggi per risolvere il problema.

48

La stessa esperienza utente: I blocchi di colore dal flat design sono semplici, facili da estendere e possono presentare uno stile coerente su dispositivi di diverse dimensioni e hanno caratteristiche reattive; mentre è probabile che i pulsanti dello scheumorfismo causi l’appiattimento delle ombre o della lucentezza quando vengono allungati e ritratti e altri problemi di distorsione.

Mantienilo semplice: Il flat design ha una buona leggibilità. Dopo aver rimosso l’effetto decorativo aggiuntivo, lascia un motivo geometrico chiaro e chiaro, mostrando uno stile minimalista e gli utenti non devono ingrandire lo schermo per trovare link o pulsanti.

Accelera il flusso di lavoro: A causa della semplificazione dei dettagli del modello, che sia in Adobe Photoshop o Adobe Illustrator per rendere il documento può accelerare la velocità di progettazione, inoltre, molti effetti possono essere presentati direttamente con HTML / CSS.

Meno risorse in generale: Colore brillante e gerarchia visiva: Nella combinazione di colori, i colori brillanti vengono solitamente utilizzati in grandi quantità e i colori vengono utilizzati per differenziare la gerarchia e la composizione, in modo che gli utenti abbiano un aspetto positivo.

Rispetto ai file di immagine quasi materializzati, le icone piatte riducono notevolmente le dimensioni del file. Alcuni effetti possono anche essere sostituiti direttamente con poche righe di codice CSS e Js, che elimina direttamente l’immagine e riduce le dimensioni del Web e dell’applicazione.

49

Carica più velocemente: Poiché lo spazio di sistema e le prestazioni hardware dei telefoni cellulari sono ancora inferiori a quelle dei PC, il design piatto riduce le dimensioni dei file e una migliore flessibilità può aumentare la velocità di caricamento.

È una tendenza: Molte note società di software, come Microsoft, Apple e Google, e pagine Web e applicazione si sono unite ai ranghi del design piatto, quindi stare al passo con la tendenza è una pratica sicura e ci sono molte risorse correlate disponibili su Internet.

50

Concentrati su caratteri e tipografia eccezionali: I designers possono concentrarsi sulla tipografia e sul testo per rendere lo schermo nitido e chiaro, invece di decorazioni ridondanti del testo ed effetti di animazione privi di significato. Il carattere sans serif consente inoltre agli utenti di comprendere rapidamente il contenuto senza distrarre l’attenzione.

Sembra che il flat design sia molto buono. Sembra che abbia sconfitto il design scheumorfismo che è stato popolare per molti anni, ma in molti casi non possiamo essere così assoluti. Dovremmo anche pensare agli svantaggi del flat design che sono state esposte.

Le tavolozze dei colori sono difficili da abbinare:

Preoccupazioni sull’usabilità:

Può sembrare troppo semplice:

Quando si tratta di esperienze utente più complesse, il design piatto a volte può, beh, cadere piatto. Non tutti gli utenti si sentono a proprio agio con lo stile dell’interfaccia e non sempre sanno cosa e dove fare clic o toccare. Un’analisi del Norman Nielsen Group ha rilevato che gli stili di design piatto possono ostacolare l’usabilità perché gli utenti non sempre sanno cosa è selezionabile. Inoltre, i progetti di design piatto tendono a includere una minore “densità di informazioni” nel tentativo di mantenerla semplice. La conclusione è che il flat design ha difficoltà a presentare informazioni a più livelli e informazioni complesse. Win8 è un buon esempio di fallimento.

Un altro problema è che il telefono cellulare non ha un cursore del mouse come un computer e ha una funzione “Hover” che cambia il colore o il carattere di una icona quando viene spostato su di esso. L’utente non è sempre chiaro su quale lato può fare clic e quale lato può essere utilizzato per l’inserire il testo.

Quando si progettano opere grafiche in stile piatto, una cosa che può facilmente portare a è che l’immagine è troppo monotona.

Sceglie alcuni elementi semplici. Sebbene sia facile creare semplicità e bellezza, se il layout non è buono nel design, Sembra un lavoro fallito. Non tutte le decorazioni sono cattive. Il flat design limita davvero il numero delle tecniche che puoi usare.

Quando vengono utilizzati più tipi di colori nell’interfaccia, diventerà molto difficile coordinare i colori tra loro. La padronanza dei designer dei pro e dei contro dei colori sarà molto evidente. Oltre al gusto estetico e alla bellezza, hanno anche bisogno di comprendere un po’ di psicologia del colore. La maggior parte degli ingegneri non conosce l’estetica e la maggior parte dei designer non capisce il linguaggio web.

Quindi nessun profilo di design è perfetto.

Personalizza il tuo design per ogni progetto in modo che l’aspetto corrisponda alla sensazione e al tono del messaggio. Il design è qualcosa di più di come appare qualcosa. Riguarda anche l’usabilità e la funzionalità. Un buon design è facile da usare.

51

IV. Le tendenze attuale e future dell’Icon design Dallo scheumorfismo design al Flat design Combinazione di entrambi Nuovo stile di design

52

53

Dallo Scheumorfismo design al Flat design

I

l design scheumorfismo è lo stesso del flat design. È anche perché l’attuale vita digitale è uno stile di design dell’interfaccia utente. È nato prima del design piatto.

Piuttosto, il design scheumorfismo è uno stile di design dell’interfaccia utente sperimentato e accettato dal pubblico nel primo periodo.

Lo scheumorfismo ha iniziato a prendere forma negli anni ‘80. Uno dei suoi primi sostenitori fu Steve Jobs di Apple. L’idea era semplice, le interfacce dei computer sarebbero molto più intuitive per gli utenti se fosse applicato il design scheumorfismo.

Lo scheumorfismo è il punto in cui un oggetto nel software imita la sua controparte del mondo reale. Il “bidone della spazzatura” è, forse, l’oggetto scheumorfismo più riconoscibile. Quel cestino può consentire agli utenti di trascinare cose che non volevano sui loro computer in un vero e proprio cestino. Puoi spostare i file in cartelle (un altro equivalente nella vita reale). Significava che non eravamo sconcertati da tutte queste nuove strutture perché avevamo qualcosa a cui fare riferimento nella vita reale.

James Gibson, lo psicologo ambientale, una volta ha suggerito che percepiamo il mondo come un insieme di “ affordances”.

Un’offerta è un oggetto la cui forma suggerisce il suo utilizzo. Le offerte più comunemente citate includerebbero maniglie delle porte e pulsanti. Lo scheumorfismo rappresenta anche le “perceived affordances”(offerte percepite). Si adatta alla nostra

interpretazione naturale degli oggetti ma in un mondo digitale.

54

Un grosso problema che è stato continuamente dibattuto nella comunità di progettazione dell’interfaccia utente negli ultimi anni: l’interfaccia utente dovrebbe essere “ scheumorfismo “ o “Flat design”?

“l’interfaccia utente dovrebbe essere ‘scheumorfismo’ o ‘Flat design’?”

55

Almeno prima di ios7, il design dell’interfaccia utente di Apple era dominato da un design scheumorfismo, Windows anche.

(Sinistra: Windows 7; Destra, iOS6; Sotto Apple, iBooks Store)

56

(Chrysler LeBaron Town, Country Station Wagon, 1986)

Scheumorfismo è un ornamento fisico o grafico apposto su un oggetto allo scopo di richiamare le caratteristiche estetiche di un altro, come ad esempio una ceramica ornata con dei rivetti per far in modo che ricordi una pentola di metallo o un software di visualizzazione che mostra i dati suddivisi in pagine animate che riproducono le caratteristiche fisiche della carta.

Fare un esempio: questo tipo di carrozzeria è modellato su trame di legno ed è chiamato station wagon in stile Woody. È un modello dello scheumorfismo design. Sebbene il guscio assomigli al legno, in realtà non usa il legno.

Il termine “scheumorfismo” deriva dalle parole greche skéuos, σκεῦος (contenitore o attrezzo) e morphḗ, μορφή (forma). Nella lingua italiana è un neologismo che riprende il termine in uso con lo stesso significato nella lingua inglese. In quest’ultima è invece un termine attestato, con riferimento agli oggetti materiali, fin dal 1890. Grazie alla diffusione dei computer, nella seconda metà del Novecento il suo significato si è poi esteso anche alle interfacce grafiche e alle rappresentazioni digitali.

57

(Puoi sapere come utilizzare l’interfaccia di regolazione del volume senza costi di apprendimento, perché è uguale alla regolazione del volume della tua radio di casa)

Lo stile scheumorfismo è usato deliberatamente per rendere molti design di aspetto più confortevoli e familiari. Può essere perché l ‘”imitazione” può evocare le abitudini radicate e indelebili della maggior parte delle persone, perché all’inizio tutti ne usano alcune. Oggetti comunemente usati nella vita quotidiana solo allora hanno iniziato a utilizzare l’interfaccia del computer.

Alcuni studiosi, attraverso la ricerca nel design, nelle abitudini degli utenti e nella scienza cognitiva, ritengono che l’interazione di sistema “scheumorfismo” possa risolvere molte differenze culturali ed esperienze di vita personale che portano a diverse abitudini di utilizzo, e quindi la nascita del conformarsi ai tempi.

58

A causa dell’avvento dell’era digitale, lo “scheumorfismo” sembra intensificarsi.

Molti programmi per computer hanno interfacce grafiche utente “Pseudo-materializzazione” progettate per imitare oggetti fisici.

Un esempio ben noto è RealThings di IBM nel 1998.

(RealPhone-RealThings, IBM, 1998)

Un esempio più estremo è l’interfaccia di vari sintetizzatori musicali e software di elaborazione del suono, che sono fatti per assomigliare a versioni reali di strumenti musicali e apparecchiature audio: varie funzioni come pulsanti, fader, transizioni, diapositive, ecc., Controlli di ingresso in

ogni dettaglio È quasi come una copia fisica. Alcuni software includono anche alcuni modelli che non hanno alcuna funzione, come viti, maniglie e fori. Queste decorazioni sono prive di significato in termini di interazione software.

(AmpliTube 3 IK Multimedia è un famoso simulatore software di amplificatori, più correttamente, un simulatore di suoni di amplificatori. Questa è una delle sue interfacce utente)

Lo scheumorfismo ha aiutato una generazione a superare la curva di apprendimento per affrontare l’era digitale. Ma ha anche iniziato a trattenerci. Abbiamo acquisito familiarità con i concetti e sono entrati nella lingua e nella nostra vita quotidiana, ma il design scettico ha portato a enormi quantità di disordine sul desktop. Hanno portato nei nostri computer troppi dettagli inutili di cui non avevamo più bisogno.

C’è un argomento interessante e filosofico secondo cui il design scheumorfismo è un prodotto di transizione dell’apprendimento cognitivo umano, proprio come l’aspetto delle auto prodotte in serie all’inizio del XX secolo è molto simile alle carrozze trainate da cavalli a cui le persone sono abituate.

59

(Carrozza)

(Prime auto)

Nel periodo in cui le persone non hanno ancora appreso nuove conoscenze, tenendo conto delle abitudini degli utenti originali, utilizzando le cose che hanno familiarità per accedere a nuove conoscenze, riducendo i costi di apprendimento e le soglie degli utenti, quando le persone imparano a usare i computer alla fine nel XX secolo, sono entrati in contatto per la prima volta con lo scheumorfismo. In base alla progettazione, quando hanno iniziato a toccare gli smartphone nel 2007, hanno portato na60

turalmente le abitudini del passato, proprio come in passato far funzionare i computer.

In realtà, il cosiddetto “smartphone” era originariamente un piccolo computer. Dopo un periodo di tempo, dopo che gli utenti si sono abituati alle cose nuove, possono svilupparsi in una direzione veramente adatta, proprio come le auto successive, anche se non sono progettate per assomigliare a carrozze trainate da cavalli, le persone possono accettarle.

Nel 2007, la rivista Forbes ha annunciato la morte dello scheumorfismo. Apple aveva optato per una nuova forma di design: il flat design. Con l’annuncio di iOS7 all’Apple WorldWide Developers Conference, Apple è ufficialmente passata dallo “scheumorfismo” a un design più semplice, portando al prologo della cosiddetta “ la morte dello scheumorfismo”, ha iniziato l’era del flat design.

Ovviamente, il design scheumorfismo non è realmente “morte”, ma all’epoca lo stile di “Flat design” dominato da Apple e Windows era in prima linea per la popolarità ed era una tendenza importante nel design dell’interfaccia utente. In effetti, in un’epoca in cui la popolarità dei dispositivi digitali non è elevata, lo scheumorfismo è efficace.

Soprattutto per i bambini e gli anziani, il design dello scheumorfismo è più intuitivo e interessante. Tuttavia, con lo sviluppo della tecnologia digitale, i vantaggi dello scheumorfismo diventeranno sempre meno, il che comporterà problemi come l’aumento dei costi di sviluppo e l’affaticamento estetico. Lo stile scheumorfismo è più una decorazione visiva. Le cose hanno sempre bisogno di un processo astratto, proprio come la mucca dipinta da Picasso.

(Il toro di Picasso) 61

Ci sono molti dibattiti sul flat design e sul design dello scheumorfismo. Il punto di vista estremo è che il flat design sta per sostituire il design dello scheumorfismo. Flat design o Scheumorfismo? In effetti, dipende dalla funzione del prodotto.

62

Ad esempio, i prodotti di lettura o di informazione possono essere estremamente piatti e i prodotti di strumenti musicali non riesco a immaginare quanto siano piatti.

Pertanto, prima la funzione, non la progettazione.

Combinazione di entrambi

(Alexander Plyuto, 2019) Nel novembre 2019, il designer ucraino Alexander Plyuto ha rilasciato una serie di lavori di interfaccia utente denominati “Skeuomorph Mobile Banking” su più piattaforme. Lo stile di design pulito, leggero e tridimensionale ha ottenuto ampi consensi in un breve periodo di tempo, dando il via a un nuovo boom dello stile.

Dalla sua uscita, questo lavoro ha ricevuto centinaia di migliaia di visualizzazioni e migliaia di Mi piace e la sua popolarità ha continuato a crescere. Dopo che questo

stile è apparso, ha anche aggiunto una nuova forma di visualizzazione al popolare flat design.

L’autore originale ha originariamente chiamato questo stile di lavoro dopo Skeuomorph. La discussione su questo stile è iniziata nell’area dei commenti. Alcune persone hanno detto che si trattava di New Skeuomorphism, mentre altri hanno detto che era Skeuomorph 2.0, infine, è stata creata una nuova parola: “Neumorphism”(Neumorfismo).

63

Ma cos’è cambiato sostanzialmente nel design?

Per rendere i pulsanti e le card così reali e piacevoli è necessario cambiare completamente il modo con cui queste vengono disegnate.

Modern/Material card: Un componente materiale è solitamente una superficie che “levita” sopra il nostro background proiettando su di esso un’ombra.

L’ombra conferisce profondità e in molti casi definisce anche la forma stessa, poiché spesso è senza bordi.

Neumorphism card: Un componente “neomorfo” invece simula un elemento estruso. È una forma rialzata e “realizzata” con lo stesso materiale dello sfondo. Guardandolo lateralmente infatti vediamo che non è sospeso in aria come nel material.

64

Questo effetto è abbastanza facile da ottenere lavorando su due ombre. Ma affinché questo funzioni il nostro sfondo non può essere completamente nero o completamente bianco. Ha bisogno di differenziarsi un po’ per rendere visibili sia le ombre scure che quelle chiare. È possibile utilizzare qualsiasi tonalità per lo sfondo in modo che possa essere più caldo o più freddo. Ma sia le ombre bianche che quelle scure devono essere visibili, anche leggermente.

In effetti, non è difficile ottenere questo effetto, capire la struttura di questo stile.

È composto principalmente da tre parti, 1 sfondo e 2 proiezioni. Su questa base, è possibile ottenere diversi effetti modificando i parametri di colore e dimensione.

Ho provato a usare il colore per ottenere questo effetto. Ha ancora un effetto quando si utilizza uno sfondo chiaro, ma quando si utilizza un colore più scuro, sorge il problema.

L’effetto è più simile alla luce o alla proiezione esterna. Questo potrebbe anche essere il motivo per cui la maggior parte delle opere utilizza colori relativamente semplici come sfondo.

65

Allora come si relaziona il neumorfismo allo scheumorfismo? Una delle cose più interessanti del neumorfismo è che attinge sia dallo scheumorfismo che da altri stili estremamente popolari, come il flat design.

Sì, entrambi sono opposti l’uno all’altro e il neumorfismo si trova da qualche parte nel mezzo.

Questa tendenza si concentra sull’eliminazione di tutti gli aspetti appariscenti dell’interfaccia, creando una visuale morbida che rimane coerente in tutto il prodotto. Non si concentra sulla ricreazione della realtà nel mondo digitale, come lo scheumorfismo.

Invece, cerca di creare qualcosa di completamente nuovo.

66

Ci sono alcune aziende di marchi molto note che hanno combinato nuovi stili nei loro design, come l’evento Galaxy Unpacked tenuto da Samsung e il video introduttivo di MKBHD. Gli effetti sono davvero impressionanti. Quando la mania delle tendenze si è ritirata, il nuovo stile di imitazione non ha rimescolato l’intero cerchio del design come hanno insistito alcuni commentatori.

(Evento Samsung Galaxy Unpacked, 2021)

(MKBHD ha utilizzato questo stile nella sua introduzione nel 2020) 67

(Filip Legierski, 2020)

Ci sono già molti esempi simili sul sito Web di progettazione di Dribbble, come questo lettore musicale.

In effetti, possiamo già vedere alcuni problemi: La grafica evidenziata sull’interfaccia piatta è visivamente attraente e può svolgere un ruolo nell’enfatizzazione. Tuttavia, questo lettore musicale ha sollevato cerchi ovunque, il che equivale a dare enfasi all’intera interfaccia, e enfatizzare tutto significa non enfatizzare tutto; E le informazioni sulla traccia più critiche utilizzano un grigio molto chiaro, come si può vedere dalla foto, il titolo della canzone, il nome del cantante e altre parole non sono molto accattivanti.

68

Parliamo nello specifico di alcuni dei problemi che già esistevano in questo stile.

Visibilità – Accessibilità: Il problema principale è che essendo dello stesso colore non c’è contrasto tra pulsante e sfondo e ciò penalizza decisamente l’accessibilità delle nostre UI progettate seguendo questo stile. A causa della mancanza di contrasto, è difficile impressionare le persone.

(Kevin AI-Rizal, 2020)

(Samson Vowles, 2020)

L’operazione: Poiché quasi tutti gli elementi nell’interfaccia hanno lo stesso effetto tranne il testo, l’utente avrà l’impressione che l’interfaccia sia composta da tutti i pulsanti. Anche i pulsanti operativi principali nell’interfaccia non sono realmente enfatizzati. Il contrasto tra lo stato normale del pulsante e lo stato clic-

cato non è molto diverso ed è facile creare confusione nello stato. Il desiderio dell’utente di fare clic è relativamente basso, il che non è favorevole a guidare le persone al passaggio successivo.

69

E i pulsanti sono probabilmente lo scenario peggiore per usare quelle doppie ombre.

Soprattutto lo stato pressato. Per molte persone non ci sarà assolutamente alcuna differenza tra questi stati, come sul lato destro qui.

Come mostrato di seguito i neumorphism, lo scheumorfismo e il flat design. Possiamo vedere chiaramente che i pulsanti dal nuovo stile non hanno l’aspetto di pulsanti, né servono come guida per il funzionamento.

Il designer Michal Malewicz ha escogitato diversi schemi “pulsanti” migliorati basati sul neumorfismo iniziale. Come usare un

contorno e un’icona piena, una sottolineatura o persino riempire lo stato premuto con un colore.

70

Per questo neumorfismo, i designers possono esserci davvero molte idee, ma l’importante è che il cambio di stato sia immediatamente riconoscibile.

Inoltre, ci sono domande sullo “sviluppo”.

Ogni elemento deve aggiungere la proiezione, i codici di stile aumentano, il carico di lavoro noioso, lo spazio software diventa più grande, anche gli sviluppatori front-end non sono contenti.

Questo nuovo trend ha sicuramente ispirato molti designer e continuerà a farlo sempre più nei prossimi mesi. E tenendo a mente però che ogni nuova tendenza dev’essere attentamente progettata per essere utilizzabile.

Nuovo stile di design C’è un nuovo stile sul blocco in questo momento e sta crescendo in popolarità. Mentre il neumorfismo imitava una superficie di plastica estrusa (ma sembrava ancora uno strato), questa nuova tendenza diventa un po ‘più verticale. Le sue caratteristiche più importanti sono: Trasparenza: Effetto vetro smerigliato utilizzando una sfocatura dello sfondo. Ciò aggiunge profondità al design e stabilisce la verticalità. La sfocatura degli oggetti conferisce al layout un senso di prospettiva, quasi come se fluttuassero nello spazio 3D. Fluttuazione: Approccio a più livelli con oggetti fluttuanti nello spazio. Con gli oggetti che fluttuano

nello spazio, l’interfaccia a strati mantiene un aspetto pulito che è piacevole per gli occhi. Questo stile funziona meglio con uno o più livelli trasparenti su uno sfondo luminoso e colorato.

Vivace: Colori vivaci per evidenziare la trasparenza sfocata.

Sottile: Un bordo sottile e leggero sugli oggetti traslucidi, può far risaltare un oggetto dallo sfondo.

A causa di quell’aspetto vitreo, i designer lo chiamano sia “Glassmorphism”. Ovviamente, la parola Glassmorphism è una combinazione di “Glass” e “Skeumorphism”.

71

(Michal Malewicz, 2020) Per dirla semplicemente, il glassmorphism è simile al neumorfismo per alcuni aspetti, ma ha una metafora visiva relativamente più specifica, che è il vetro con cui entriamo in contatto quotidianamente.

Glassmorphism è una tendenza moderna che è costantemente cresciuta in popolarità nel corso dell’ultimo anno. Comunemente utilizzato nella progettazione di web e

72

applicazione, sta rapidamente diventando mainstream. Ma non è necessariamente un’idea nuova di zecca. Lo stile è fortemente influenzato da concetti simili che sono stati introdotti per la prima volta da Apple nel 2013 con iOS 7, come “La sfocatura dello sfondo”. È riemerso quando Apple ha riportato l’effetto con il suo ultimo aggiornamento, Mac OS Big Sur nel novembre 2020.

Anche il sistema di progettazione fluente di Microsoft si basa su questo effetto.

Chiamano questo particolare elemento The Acrylic e lo mostrano come parte integrante del loro sistema di design.

L’acrilico è un tipo di pennello che crea una texture traslucida. Puoi applicare l’acrilico alle superfici delle app per aggiungere profondità e aiutare a stabilire una gerarchia visiva. - Sistema Microsoft Fluent Design

73

Ovviamente, come con qualsiasi tendenza dell’interfaccia utente, in Dribbble e Behance, noterai che molti designer stanno consapevolmente adottando il design estetico del Glassmorphism. Questo sta iniziando a riprendere lentamente e ci sono già alcuni

bei esempi. Ovviamente hanno tutti molto a che fare con la presentazione, poiché sullo schermo di un telefono reale non avranno uno sfondo facile da vedere su cui sovrapporsi. Questo è semplicemente perché le app sui telefoni sono tutte a schermo intero.

(Happy Tri Milliarta, 2020)

L’esempio sopra potrebbe essere sull’orlo della leggibilità in alcuni punti, ma è una chiara rappresentazione di questa tendenza. Lo sfondo è molto sottile, ma ancora visibile, e le forme hanno un contorno bianco semitrasparente a 1 punto per simulare il bordo del vetro.

Proprio come con il neumorfismo, questo stile brilla particolarmente quando viene uti74

lizzato su un solo elemento, come gli sfondi nell’esempio sopra. Ovviamente, ancora una volta, la presentazione gioca un ruolo enorme qui, ma potresti immaginare un’interfaccia web desktop che utilizzi un livello di trasparenza simile solo per gli sfondi.

(Ghulam Rasool, 2020)

Proprio come con il neumorfismo, questo stile brilla particolarmente quando viene utilizzato su un solo elemento, come gli sfondi nell’esempio sopra. Ovviamente, ancora una volta, la presentazione gioca un ruolo enorme qui, ma potresti immaginare un’interfaccia web desktop che utilizzi un livello di trasparenza simile solo per gli sfondi.

Le icone possono essere un po’ controverse, ma stanno anche ricevendo il trattamento del glassmorfismo come negli esempi sopra.

(Marshall, 2020)

(Joanna Wróbel, 2021)

Apple che introduce questo stile nel Big Sur è un modo sicuro per essere emulato e imitato nei mesi a venire. Probabilmente non prenderà il controllo di tutte le interfacce, ma sarà un po’ più popolare di quanto non sia adesso.

75

V. Il concetto di des declinazioni in cam dovrebbero essere s

76

sign delle sue mpo comunicativo sempre considerati

77

N

oi, come esseri umani, ci stanchiamo facilmente di una tendenza e ogni pochi anni il pendolo oscilla verso l’altro lato. Per un po’ abbiamo utilizzato interfacce super minimali, quasi piatte, ma poi hanno iniziato a diventare più colorate, più verticali e più “in faccia”. Come designer, dobbiamo esplorare tutti i modi potenziali e creativi di realizzare un prodotto.

A parte lo scheumorfismo, il flat design, il neumorfismo e il glassmorfismo che abbiamo già menzionato, quali altre tendenze di design popolari dovremmo comprendere in questa fase?

L’illustrazione e il 3d Abbiamo decisamente bisogno di un panorama illustrativo più diversificato. Attual78

La modalità scura La modalità oscura sarà una cosa che ci piaccia o no. Ma non necessariamente la modalità scura grigio-blu desaturata che vediamo ovunque. Dall’introduzione degli schermi OLED è ovvio che il nero puro non utilizza molta energia. Quindi, se l’obiettivo di una modalità oscura è risparmiare batteria, dovremmo iniziare a vedere interfacce più minimali e funzionali che sono principalmente nere. Non grigio scuro. L’affaticamento degli occhi può essere un altro motivo per le modalità scure e, in tal caso, quelle modalità scure morbide hanno un aspetto decisamente migliore.

mente lo stile più popolare con quelle parti del corpo leggermente sproporzionate e le linee sciolte si sta mostrando ovunque.

Questo diventa rapidamente noioso.

Tuttavia, l’illustrazione è uno dei modi migliori per distinguersi, ma dobbiamo sperimentarla di più per non cadere nella trappola dell’uguaglianza.

Il 3d d’altra parte è un po’ più facile da realizzare in un modo diverso. È anche molto

più difficile da realizzare e richiede uno sforzo maggiore. Ciò significa che se quel tempo è stato speso per realizzare un rendering 3D, è probabile che sia di migliore qualità e on-brand.

79

Ultra minimalismo

L’animazione

Quest’anno molte persone sono passati alla disintossicazione digitale e all’uso di prodotti più minimali.

Le transizioni e gli allestimenti di scene aumenteranno ancora di più quest’anno. Uno del catalizzatore sono le nuove ed entusiasmanti librerie JavaScript che consentono transizioni complesse 2d e 3d con relativa facilità.

Dispositivi come Mudita Pure o Light Phone 2 offrono interfacce semplici, in bianco e nero e super minimali. Se consideriamo le applicazioni che utilizziamo come strumenti che devono svolgere una funzione specifica, un’interfaccia minimale ha senso.

Ovviamente non tutte applicazioni funzioneranno in quello stile.

Interfacce vocali Forse nel prossimo futuro utilizzeremo principalmente il riconoscimento vocale, parlando con i nostri dispositivi. Anche se questo sembra futuristico e ha senso in alcuni scenari (durante la guida o l’allenamento), ci sono due problemi principali che penso non spingeranno l’interfaccia utente vocale in una posizione dominante.

Ci sono enormi preoccupazioni in merito alla privacy e all’intelligenza artificiale “inquietante”. Non molto tempo fa Alexa ha consigliato ai suoi utenti di uccidersi poiché è il modo migliore per fermare il riscaldamento globale e salvare il pianeta. Anche se questo può logicamente essere vero, è sicuramente un titolo esca da clic. Induce le persone a chiedersi quanto siano fastidiosi gli altoparlanti intelligenti. Ascoltano ogni nostra parola e costruiscono segretamente la prossima generazione della rete di computer.

(Mudita Pure, 2019) 80

In molti casi è davvero strano parlare al telefono (specialmente in pubblico). Alcuni tocchi rapidi sono più privati e più veloci. E una lunga esperienza personale ci ha fatto sapere che c’è ancora molto spazio per migliorare la tecnologia di riconoscimento vocale.

Le tendenze di design prevalenti sul mercato sono sopravvissute allo screening del tempo e del mercato. Questi design sono tutti i design che possiamo sperimentare nella nostra vita quotidiana o che sono in uso. Abbiamo discusso molto e possiamo già vedere che nessun design è assolutamente buono e nessun design è assolutamente cattivo. Ogni design ha i suoi aspetti positivi e negativi.

negare il suo alto grado di riconoscimento. lo scheumorfismo è il primo design che ci porta nel mondo digitale intelligente, e per il principio dello scheumorfismo che il flat design può essere implementato e entrato nelle nostre vite. Anche le interfacce vocali, sebbene non sia davvero molto utile ora, e ci sono stati eventi spaventosi, ma per chi ha problemi di vista, potrebbe essere un design utile in futuro.

Ad esempio, lo scheumorfismo, forse ora è un rappresentante obsoleto, ma non si può

81

Conclusioni A causa dell’aumento della qualità del tenore di vita, gli standard estetici delle persone stanno gradualmente migliorando.

Inoltre, il rapporto quotidiano delle persone con i dispositivi elettronici ha gradualmente migliorato la capacità delle persone nell’uso delle varie interfacce utente e nella cognizione delle relative icone. Ma questo non significa che il design possa essere arbitrario. Il designer non dovrebbe riguardare solo l’uniformità visiva, lo stile uniforme e un’impressione visiva di bell’aspetto, fa solo bei design, ma non sono facili da usare.

Dovremmo pensare a cos’è un designer, cosa dovrebbe fare un designer. In realtà i designer sono le persone che costruiscono un ponte tra l’arte e il design funzionale centrato sull’obiettivo.

Mescolano il potere dell’arte e della funzionalità entro i limiti di obiettivi particolari e un pubbli-

82

co definito. Fanno lavoro di bellezza per le persone. Il graphic designer fa in modo che tutti elementi della percezione visiva trasferiscano il messaggio, quindi li rende funzionali. Pertanto, potremmo dire che i grafici sono artisti che applicano i loro talenti principalmente non nell’arte pura, ma nell’arte comunicativa e propositiva.

Abbiamo imparato una lezione dal flat design. I designer dovrebbero anche considerare l’esperienza e le sensazioni reali degli utenti e delle persone servite dal design. Quindi il mercato di oggi ha vari stili di design come la modalità scura, l’illustrazione e il 3d, l’animazione, ultra-minimalismo e le Interfacce vocali ecc. Questi design sono creati dal mercato per servire diversi tipi di persone. Il design non è mai perfetto, il design è progressivo, costantemente alla ricerca della perfezione.

Riferimento • Lorenzo Miglietta, Che cos’è la Gestalt, E come si applica al Graphic Design, 2019 • Philip Baxter Meggs, History of Graphic Design, 1983 • Amelia Rubio, The Importance of Icons in Web Design, 2020 • Michal Malewicz, Glassmorphism in user interfaces, 2020 • https://www.grafigata.com/gestalt-e-grafica/ • https://www.britannica.com/art/graphic-design • https://www.freepik.com/blog/the-importance-icons-web-design/ • https://www.bbc.com/news/magazine-22840833 • https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9 • https://medicine-man.net/2017/11/07/how-does-design-effect-our-lives/ • https://zhuanlan.zhihu.com/p/126317133 • https://www.mydesy.com/nielsen-norman

83

Progetto

Prefazione Presentazione del progetto

84

Prefazione Come studentessa di grafica editoriale presso l’Accademia di Belle Arti di Roma, ha avuto una relazione con il distretto di Ostiense e dall’inizio della prima lezione di audizione. Ogni volta che vado a scuola dopo scuola, posso passeggiare in quest’area e gradualmente ne provo delle emozioni.

prendere meglio la storia di quest’area e ho completato un progetto di design sulla cultura di Ostiense. Qui voglio usare ulteriormente il design che ho realizzato nel progetto del corso per progettare una rivista di viaggi per il quartiere Ostiense, imparando a conoscere l’origine culturale dell’area e studiando alcuni principi di Una volta in un corso base del design in corsi professionale, ho avu- professionali. to l’opportunità di com-

85

Presentazione del progetto Una rivista di viaggi Vivi Ostiense Uno dei tesori di Roma

Fare una rivista guida che introduce l’area Ostiense, tra cui discipline umanistiche, architettura, cibo, ecc.

86

10

Ostiense è il decimo quartiere di Roma, indicato con Q.X. ...

UNO

42

Il complesso è situato nel rione Testaccio e copre un’area ...

DEI

68

Sempre su Via del Porto Fluviale troviamo “Fish ‘n Kids” ...

TESORI

DI

2021 Ostiense

ROMA

87

Colori Il verde rappresenta il parco, la vegetazione e le montagne dell’ostiense.

C=39 M=5 Y=36 K=0 R=169 G=209 B=178 #a9d1b2 Il blu rappresenta il cielo, il traffico e i fiumi dell’ostiense.

C=47 M=28 Y=5 K=0 R=144 G=164 B=202 #90a4ca Il giallo rappresenta la terra, la storia e la cultura dell’ostiense.

C=7 M=21 Y=48 K=0 R=238 G=207 B=114 #eecf90 88

Tipografia VIVI OSTIENSE

Myanmar MN

UNO DEI TESORI DI ROMA

ADELE

ABCDEFGHIJKLMNOPQRSTUVWXZY abcdefghijklmnopqrstuvwxzy 1234567890 ,./?!@#$%^&*()_+=:;”\’{}[]|

ABCDEFGHIJKLMNOPQRSTUVWXZY abcdefghijklmnopqrstuvwxzy 1234567890 ,./?!@#$%^&*()_+=:;”\’{}[]|

OSTIENSE

ABCDEFGHIJKLMNOPQRSTUVWXZY abcdefghijklmnopqrstuvwxzy 1234567890 ,./?!@#$%^&*()_+=:;”\’{}[]|

Titolo della rivista

Titolo della rivista

Gill Sans Testo

89

90

Illustrazione del capitolo I I monumenti

91

92

Illustrazione del capitolo II L’arte del graffito

93

94

Illustrazione del capitolo III Gastronomia

95

96

97

98

99

I nt rod u zion e a l l e attra z io n i

VIVI La Porta San Paolo è una delle porte meridionali delle Mura aureliane a Roma, ed è tra le più imponenti e meglio conservate tra le porte originali dell'intera cerchia muraria.

OSTIENSE

Il Cimitero Acattolico ('Cimitero non cattolico') di Roma, spesso indicato come Cimitero dei protestanti ('Cimitero protestante')è un cimitero privato nel rione del Testaccio a Roma .

La Piramide Cestia è una piramide di stile egizio costruita a Roma tra il 18 e il 12 a.C. Si trova nelle immediate adiacenze di porta San Paolo ed è inglobata nel perimetro del posteriore cimitero acattolico.

Il cimitero militare di Roma (in inglese Rome War Cemetery) è un memoriale di guerra che custodisce le spoglie dei militari appartenenti al Commonwealth caduti a Roma durante la seconda guerra mondiale.

Era una centrale termoelettrica sulla via Ostiense a Roma. A seguito della sua dismissione come impianto di produzione di energia elettrica è oggi adibita a museo facente parte del sistema museale di Roma.

UN TOUR PER ESPLORARE, SCOPRIRE, CONOSCERE

Sito archeologico fatto interamente di anfore sopratutto olearie da periodo Augusteo fino al terzo secolo d.c. Si innalza per circa 49 metri ed è visitabile solo su prenotazione mediante le associazioni culturali.

Ex mattatoio, Da allora il complesso, considerato uno dei pezzi fondamentali dell'archeologia industriale romana, ha subito diverse ristrutturazioni nelle sue diverse parti Graziella Mazzaglia Un "gigante" in ferro nel quartiere Ostiense. Ricordi di storia recente, il gazometro è un esempio di archeologia industriale, risalente al 1935.

Ex Magazzini è la discoteca di Ostiense che rappresenta la vera grande novità della stagione 2016 – 2017 della capitale.

Situato in via delle Conce nel quartiere Ostiense, famoso per le opere di Street Art è possibile passeggiare e osservare capolavori murari e non di artisti sconosciuti e affermati.

o s t i en s e

Ostiense è il decimo quartiere di Roma, indicato con Q. X. Il toponimo indica anche la zona urbanistica 11A del Municipio Roma VIII di Roma Capitale.

Fino al 1930 esisté anche un suburbio omonimo indicato con S.O.

Pieghevole

OSTIENSE MAP

1. Porta San Paolo 2. Piramide 3. Cimitero acattolico di roma 4. Cimitero del Commonwealth 5. Broken pot mountain 6. Mattatoio 7. Gazometro 8. Discoteca Ex Magazzini 9. Ponte di Ferro 10. Centrale Montemartini

100

Cartolina

VIVI OSTIENSE

101

Ringrazio al Prof. Enrico Pusceddu e l’assistenza Morena Foglia Accademia di Belle arti di Roma