{"id":1,"date":"2022-09-03T18:27:57","date_gmt":"2022-09-03T16:27:57","guid":{"rendered":"https:\/\/www.freemindstudio.it\/istruzione\/?p=1"},"modified":"2025-02-21T11:22:05","modified_gmt":"2025-02-21T10:22:05","slug":"progettare-interfacce","status":"publish","type":"post","link":"https:\/\/www.freemindstudio.it\/istruzione\/progettare-interfacce\/","title":{"rendered":"Progettare interfacce"},"content":{"rendered":"\n

Presentazioni<\/strong><\/p>\n\n\n\n

\n

\"\" 01 |<\/strong> Fondamentali<\/a><\/p>\n\n\n\n

\"\" 02 |<\/strong> Metodi Progettuali<\/a><\/p>\n\n\n\n

\"\" 03 |<\/strong> Design System<\/a><\/p>\n\n\n\n

\"\" 04 | <\/strong>Tipografia<\/a><\/p>\n\n\n\n

\"\" 05 | <\/strong>Visual Design<\/a><\/p>\n<\/div><\/div>\n\n\n\n

Indice<\/strong><\/p>\n\n\n\n

    <\/ol>\n\n\n\n
    \n\n\n\n

    Una collezione di risorse che mi hanno formato come designer. Spero che le prossime pagine possano aiutare anche voi a migliorare come designer.<\/em> L’obbiettivo di questa pagina \u00e8 quello di essere consultata pi\u00f9 volte, soprattutto nei momenti di difficolt\u00e0 durante lo svolgimento dei propri progetti.<\/em><\/p>\n\n\n\n

    Buona lettura.<\/em><\/p>\n\n\n\n

    \n\n\n\n

    Fondamentali<\/h2>\n\n\n\n

    Prima di iniziare<\/h3>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Prima di partire con la creazione di un file ed iniziare a disegnare qualsiasi cosa, ci sono alcune considerazioni da fare.<\/p>\n\n\n\n

    Dal momento che il designer nasce come “problem-solver\u201d la prima domanda da porsi \u00e8 “Chi \u00e8 il mio pubblico? Quali sono i loro problemi?\u201d<\/strong>. Di conseguenza, trovata la risposta, tutto ci\u00f2 che andremo a progettare terr\u00e0 conto delle esigenze degli utenti finali. Questa \u00e8 una parte fondamentale perch\u00e9 se non capiamo le loro necessit\u00e0 tutto il nostro progetto non sar\u00e0 efficace.<\/p>\n\n\n\n

    Solo una volta definito il target e le loro esigenze possiamo procedere con la parte di ideazione, per poi passare successivamente al progetto vero e proprio.<\/p>\n\n\n\n

    A questo punto credo che ogni smartphone abbia la sua app per sapere che tempo fa. Anche sullo store esistono gi\u00e0 svariati applicativi che offrono questo servizio. Credo che andare progettare l’ennesima app meteo non abbia senso a meno che non risolva dei problemi in particolare. Al contrario credo che sia meglio investire il proprio tempo per risolvere problemi reali a persone reali piuttosto che ridisegnare l’ennesima app Meteo.<\/p>\n\n\n\n

    Questa \u00e8 l’etica del design<\/strong>.<\/p>\n\n\n\n

    Creare prodotti e servizi che risolvono problemi reali e aiutano le persone a vivere meglio \u00e8 un aspetto potentissimo del design che non deve essere preso alla leggera.<\/p>\n\n\n\n

    Ci\u00f2 non toglie che in fase di apprendimento si possono riprogettare anche le app pi\u00f9 conosciute come lettori musicali, calcolatrici, social oppure le stesse app meteo. Questi possono essere dei buoni esercizi non solo per la parte grafica, ma anche per capire le strutture degli applicativi che usiamo tutti giorni.<\/p>\n\n\n\n

    <\/div>\n\n\n\n

    Principi per un Buon Design<\/h3>\n\n\n\n

    Una volta capito quali sono le necessit\u00e0 del mio pubblico, e definito una strategia, possiamo procedere con la parte di creazione.<\/p>\n\n\n\n

    Ecco qui a seguito alcuni punti fondamentali per realizzare un buon progetto:<\/p>\n\n\n\n

      \n
    1. Usabilit\u00e0:<\/strong> un applicativo viene creato per essere usato. Il flusso d’uso di un applicazione o di un sito web \u00e8 una parte fondamentale, deve essere testata e corretta pi\u00f9 volte.<\/li>\n\n\n\n
    2. Estetica:<\/strong> la qualit\u00e0 estetica \u00e8 parte integrale della sua usabilit\u00e0. Pi\u00f9 un applicativo sar\u00e0 usabile pi\u00f9 gli utenti lo percepiranno graficamente gradevole.<\/li>\n\n\n\n
    3. Dettagli:<\/strong> un buon design \u00e8 curato in ogni suo minimo particolare. \u00c8 importante definire il prodotto in ogni suo singolo dettaglio analizzando tutti i casi d’uso possibili.<\/li>\n<\/ol>\n\n\n\n

      In conclusione dopo questa serie di regole e di buone pratiche da seguire possiamo dire che quello che si chiede al designer non \u00e8 solo di progettare qualcosa di graficamente gradevole ma pensare anche alle persone che utilizzeranno il prodotto finale.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      Link Utili:<\/strong><\/p>\n\n\n\n

      \n

      Design Thinking Video<\/a><\/p>\n\n\n\n

      The Double Diamond<\/a><\/p>\n\n\n\n

      Design Thinking & Ethics<\/a><\/p>\n\n\n\n

      10 Principles for “Good Design”<\/a><\/p>\n<\/div><\/div>\n\n\n\n

      <\/div>\n\n\n\n

      Reference<\/h3>\n\n\n\n

      A questo punto hai tutti gli strumenti che ti servono per partire e ti sentirai pronto per iniziare il processo creativo.<\/p>\n\n\n\n

      Sbagliato!<\/strong> Fondamentale durante il processo di ideazione grafica \u00e8 “trovare l’ispirazione\u201d<\/strong>. Esempio Pinterest e Behance sono le pi\u00f9 grosse piattaforme social basate su immagini dove trovare la giusta ispirazione, infatti, su entrambe \u00e8 facile cercare progetti ben realizzati.<\/p>\n\n\n\n

      Altri punti di ispirazione possono essere riviste o siti web specializzati in design dove vengono costantemente pubblicati articoli relativi a questo settore. Il vantaggio non sta solo nel trovare l’ispirazione ma anche nel rimanere aggiornato sui trend.<\/p>\n\n\n\n

      Per chi \u00e8 alle prime armi questo step \u00e8 molto utile perch\u00e9 educativo. Infatti osservando designer esperti si posso apprendere nuove tecniche e trovare la motivazione per migliorare.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      Link Utili:<\/strong><\/p>\n\n\n\n

      \n

      Social:<\/strong><\/p>\n\n\n\n

      Pinterest<\/a><\/p>\n\n\n\n

      Dribbble<\/a><\/p>\n\n\n\n

      Behance<\/a><\/p>\n\n\n\n

      Blogs:<\/strong><\/p>\n\n\n\n

      Awwwards<\/a><\/p>\n\n\n\n

      Branding Style Guide<\/a><\/p>\n\n\n\n

      Designboom<\/a><\/p>\n<\/div><\/div>\n\n\n\n

      \n\n\n\n

      Metodi progettuali<\/h2>\n\n\n\n

      Ux e Ui<\/h3>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      La prima volta che utilizziamo un qualsiasi prodotto dotato di schermo le prime domande che ci poniamo sono: \u201cDove sono? Come facci ad usarlo?\u201d<\/p>\n\n\n\n

      Tutti i display con cui interagiamo hanno una cosa in comune: possiedono un interfaccia.<\/strong> Questa interfaccia \u00e8 il primo approccio che ha un utente con il dispositivo quindi deve essere intuitiva e facile da usare.<\/p>\n\n\n\n

      La disciplina che si occupa di progettare interfacce viene chiama Ux\/Ui<\/strong>.<\/p>\n\n\n\n

      Ux o User Experience<\/strong> \u00e8 la parte che si occupa di valutare chi \u00e8 l’utente che utilizzer\u00e0 il nostro sistema, gli strumenti che utilizza per accedere all’applicativo, esempio utilizzer\u00e0 mouse e tastiera? Oppure Gamepad? Oppure attraverso uno schermo touch screen?<\/p>\n\n\n\n

      Altra parte fondamentale \u00e8 il flusso (flow chart), cio\u00e8 il percorso d\u2019uso tra le varie schermate, questo percorso deve essere chiaro e fare in modo che l’utente finale si senta a suo agio. In poche parole la Ux studia l\u2019ergonomia di un applicativo.<\/p>\n\n\n\n

      Ui o User Interface<\/strong> invece \u00e8 la parte che si occupa della veste grafica, quindi font, colori e forme. Non dimentichiamo per\u00f2 che deve correre pari passo con la User Experience e deve comunque agevolare l’utilizzo delle applicazioni. Esempio se facciamo un pulsante per uno schermo touch dovr\u00e0 essere della dimensione giusta per essere premuto con il pollice o con l’indice. Allo stesso tempo bisogna prestare attenzione ai colori esempio il colore del testo deve essere in contrasto con il colore dello sfondo, altrimenti il nostro utente finale non riuscir\u00e0 a leggere ci\u00f2 che c’\u00e8 scritto.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      Hardware e software<\/h3>\n\n\n\n

      Hardware e software sono le due componenti complementari di qualsiasi sistema informatico.<\/p>\n\n\n\n

      Ogni dispositivo, o computer, \u00e8 infatti un supporto fisico che funziona attraverso dei programmi, ma che sono intangibili. La differenza tra hardware e software \u00e8 proprio questa: l\u2019hardware \u00e8 la componente fisica e tangibile di un qualsiasi sistema informatico, mentre il software si riferisce a tutti gli applicativi che fanno svolgere al dispositivo tutte le funzioni di cui abbiamo bisogno.<\/p>\n\n\n\n

      Possiamo successivamente dividere gli applicativi in due macro categorie: i Sistemi Integrati<\/strong> (Embedded System oppure Embedded Software) e i Sistemi Operativi<\/strong> (OS oppure Operating System). Vediamo alcuni esempi.<\/p>\n\n\n\n

      Tra i Sistemi integrati<\/strong> troviamo tutti quei applicativi che non hanno bisogno di un PC vero e proprio per funzionare. La maggior parte di questi software sono integrati nei prodotti e ci permettono di interagire con essi.<\/p>\n\n\n\n

      Esempio i controlli dei elettrodomestici attraverso un display come la lavatrice o il forno sono dei sistemi standalone. Altro esempio le telecamere digitali oppure i fitness tracker sono basati sul mobile.<\/p>\n\n\n\n

      Potete trovare altri esempi a questo link<\/a>.<\/p>\n\n\n\n

      Dall\u2019altra parte abbiamo i Sistemi Operativi<\/strong> che consentono la gestione dei dispositivi hardware del computer e l’esecuzione dei software. Tra i sistemi operativi che usiamo tutti i giorni troviamo Windows, Android oppure MacOs e IOs. Quello che accomuna tutti i sistemi operativi \u00e8 il fatto che offrono un ambiente di interfaccia con la macchina, utilizzano dei applicativi di base come calcolatrice, calendario, browser e consentono di installare altri applicativi.<\/p>\n\n\n\n

      Attenzione<\/strong>: che i siti web non sono software veri e propri perch\u00e9 utilizzano il browser per essere visualizzati.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      Fasi della progettazione<\/h3>\n\n\n\n

      La progettazione di ogni applicativo passa attraverso varie fasi. Per semplificare possiamo dividere queste fasi in due: progettazione grafica e programmazione.<\/p>\n\n\n\n

      La Progettazione Grafica<\/strong> \u00e8 ci\u00f2 che vedremo in questo corso e come spiegato precedentemente comprende l’Ux e l’Ui. Solitamente \u00e8 una persona o un team di persone che si occupa per intero di questa fase. Queste figure dovranno poi confrontarsi con i programmatori.<\/p>\n\n\n\n

      La seconda fase \u00e8 la programmazione<\/strong>. Si prende tutto quello che si \u00e8 progettato in prima battuta e lo si fa funzionare. Esistono diversi linguaggi di programmazione e ognuno \u00e8 utilizzato per scopi diversi. Esempio per la parte di progettazione di siti web vengono utilizzati tre tipi di linguaggi l’html, css e javascript. In realt\u00e0 i primi due non sono veri e propri linguaggi di programmazione.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      L’HTML<\/strong> cio\u00e8 l’HyperText Markup Language (traduzione letterale: linguaggio a marcatori per ipertesti), \u00e8 un linguaggio di markup. Viene utilizzato per la formattazione e impaginazione di documenti ipertestuali nei siti web. In poche parole determina la struttura logica di una pagina web definita appunto dal markup.<\/p>\n\n\n\n

      Il CSS<\/strong> cio\u00e8 Cascading Style Sheets, in italiano fogli di stile a cascata, \u00e8 un linguaggio usato per definire la formattazione di documenti HTML. L’introduzione del CSS si \u00e8 resa necessaria per separare i contenuti delle pagine HTML dalla loro formattazione e permettere una programmazione pi\u00f9 chiara e facile da utilizzare.<\/p>\n\n\n\n

      Il JavaScript<\/strong> o chiamato anche JS \u00e8 un linguaggio di programmazione orientato agli eventi, comunemente utilizzato nella programmazione per la creazione di siti e applicazioni web, di effetti dinamici interattivi tramite funzioni di script, invocate da eventi innescati a loro volta in vari modi dall’utente sulla pagina web in uso (mouse, tastiera, caricamento della pagina ecc…).<\/p>\n\n\n\n

      \n\n\n\n

      Design System<\/h2>\n\n\n\n

      Costruire un linguaggio visivo<\/h3>\n\n\n\n
      \"Design<\/figure>\n\n\n\n
      \"Design<\/figure>\n\n\n\n

      Il linguaggio visivo \u00e8 come qualsiasi altro tipo di linguaggio. Esempio le incomprensioni sorgono se la lingua non \u00e8 condivisa e compresa da tutti coloro che la usano e la situazione si aggrava con l\u2019aumentare del numero di persone.<\/p>\n\n\n\n

      Allo stesso modo possiamo dire che con l\u2019aumentare della complessit\u00e0 di un progetto potrebbero aumentare le incomprensioni e costruire un linguaggio visivo solido ci consente di evitare questi problemi.<\/p>\n\n\n\n

      Costruire un linguaggio visivo vuol dire costruire un sistema di progettazione unificato ed \u00e8 essenziale per progettare in modo migliore e pi\u00f9 velocemente; migliore perch\u00e9 un’esperienza coesa \u00e8 facilmente comprensibile sia dai designer che dai nostri utenti finali, pi\u00f9 velocemente perch\u00e9 ci d\u00e0 un linguaggio comune con cui lavorare.<\/p>\n\n\n\n

      Il Design System pone le fondamenta per il nostro linguaggio visivo. Una serie di tavole che definiscono la nostra tipografia, i colori, le icone, la spaziatura e l’architettura delle informazioni. La base si rileva essenziale per guidare il nostro lavoro in una direzione unificata, lasciandoci spazio per esplorare individualmente le soluzioni di design creativo.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      Consistenza e semplicit\u00e0<\/h3>\n\n\n\n

      Costruire un sistema solido e mantenerlo durante tutta la fase di progettazione, sia che si tratti progettazione di servizi o di prodotti, avr\u00e0 ottime conseguenze sull\u2019utente finale e la sua esperienza. Infatti gli utenti sono abituati a determinati elementi e a determinate posizioni di questi elementi. Rendere tutto pi\u00f9 familiare dar\u00e0 maggior forza al vostro progetto.<\/p>\n\n\n\n

      Questo include anche stabilire colori, forme e caratteri che daranno consistenza a tutto il progetto. Infatti mantenere un collegamento tra una schermata e una altra porter\u00e0 a una facile lettura e quindi ad un utilizzo pi\u00f9 gradevole dell\u2019oggetto o servizio.<\/p>\n\n\n\n

      Un\u2019altro dei elementi chiave da considerare mentre si progetta \u00e8 la semplicit\u00e0, ma spesso creare qualcosa di semplice \u00e8 complesso.<\/p>\n\n\n\n

      Proviamo ad immaginare ad una presentazione articolata. Gli elementi dovranno essere spezzettati e introdotti nel corso della presentazione in modo graduale, solo cos\u00ec potremmo presentare un idea complessa in modo semplice. L\u2019ordine e l\u2019importanza con cui presenteremo tutti gli elementi si chiama Gerarchia.<\/p>\n\n\n\n

      Una volta individuati i nostri elementi e stabilita la loro importanza abbiamo due modi per ottenere un linguaggio semplice: mantenere le convenzioni e aumentare i \u201cWhite Space\u201d.<\/p>\n\n\n\n

      Mantenere le convenzioni vuol dire che non dobbiamo inventare niente di nuovo se non necessario. Determinati elementi che compiono determinate funzioni utilizzano linguaggi standard come le icone, le forme e i colori, quindi continuiamo anche noi ad utilizzarli. Esempio l\u2019icona del cestino per cancellare oppure l\u2019icona per spegnere un dispositivo.<\/p>\n\n\n\n

      \"Icons\"<\/figure>\n\n\n\n
      \"Icons\"<\/figure>\n\n\n\n

      Un altro modo per mantenere le convenzioni \u00e8 utilizzare la stilizzazione di oggetti reali come fanno le icone delle applicazioni che nella maggior parte dei casi ricordano oggetti di utilizzo quotidiano.<\/p>\n\n\n\n

      Aumentare i \u201cWhite Space\u201d (spazi bianchi) vuol dire aumentare lo spazio che c\u2019\u00e8 tra un elemento e un altro. Questo permette di concentrarsi meglio su ogni singolo oggetto senza distrazioni.<\/p>\n\n\n\n

      \"White<\/figure>\n\n\n\n
      \"White<\/figure>\n\n\n\n

      In conclusione la semplicit\u00e0 \u00e8 il bilanciamento corretto che ci consente di far risaltare gli elementi importanti e offuscare le informazioni non necessarie.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      Gerarchia<\/h3>\n\n\n\n
      \"Gerarchia\"<\/figure>\n\n\n\n
      \"Gerarchia\"<\/figure>\n\n\n\n

      La gerarchia suggerisce l\u2019importanza dei vari elementi in base alla presentazione e all\u2019organizzazione. La disposizione e l\u2019accento di questi elementi influenza l\u2019ordine con cui l\u2019occhio percepisce ci\u00f2 che sta vedendo.<\/p>\n\n\n\n

      Le gerarchie si creano attraverso il contrasto e il posizionamento. Il contrasto tecnicamente \u00e8 la differenza tra due colori, noi andremo a crearlo non solo con i colori ma anche con la tipografia, gli spazi e le forme.<\/p>\n\n\n\n

      Altro punto fondamentale \u00e8 la posizione. L\u2019occhio umano non legge ma scansiona attraverso un pattern che va da sinistra verso destra e dall\u2019alto verso il basso. Quello che dobbiamo fare \u00e8 assecondare questa scansione e assicurasi che tutti gli elementi siano al posto giusto.<\/p>\n\n\n\n

      La gerarchia \u00e8 fondamentale ma non possiamo far risaltare tutto perch\u00e9 se tutto viene evidenziato non esiste gerarchia.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      Stili e Componenti<\/strong><\/h3>\n\n\n\n
      \"Style<\/figure>\n\n\n\n
      \"Style<\/figure>\n\n\n\n

      Per la costruzione di un design system solido e completo dobbiamo definire gli stili e i componenti.<\/p>\n\n\n\n

      Gli stili sono i colori, le icone, le forme e la tipografia, mentre i componenti sono tutti gli elementi che prevediamo di usare all\u2019interno del progetto come bottoni, barre di navigazione, grafici ecc\u2026<\/p>\n\n\n\n

      La tipografia e i colori vengono utilizzati per esprimere lo stile e ci\u00f2 che vogliamo comunicare. Sono i due elementi pi\u00f9 importanti e dedicheremo due capitoli solo ad essi.<\/p>\n\n\n\n

      Uno dei design system pi\u00f9 famosi \u00e8 il Material Design di Google. Un documento online completo che detta le linee guida dell\u2019ecosistema google.<\/p>\n\n\n\n

      Meet Material Design 3<\/a><\/p>\n\n\n\n

      \n\n\n\n

      Tipografia<\/h2>\n\n\n\n

      Le 5 regole<\/h3>\n\n\n\n
      \"5<\/figure>\n\n\n\n
      \"5<\/figure>\n\n\n\n

      La parte tipografica \u00e8 la pi\u00f9 importante: se diventerete dei migliori tipografi diventerete anche dei migliori designer. Come suggerito dal sito praticaltyoigraohy.com<\/a>, ecco a seguito 5 regole da imparare e da seguire per migliorare come designer.<\/p>\n\n\n\n

        \n
      1. La qualit\u00e0 grafica di un documento \u00e8 determinata dall’aspetto del BODY TEXT (testo descrittivo). Perch\u00e9? Questo perch\u00e9 in un documento c’\u00e8 pi\u00f9 BODY TEXT che qualsiasi altro elemento. Quindi inizia ogni progetto determinando l\u2019aspetto del testo e non preoccuparti del resto.<\/li>\n\n\n\n
      2. La font size<\/em> (dimensione carattere) determina la grandezza del testo. In stampa la dimensione del testo pi\u00f9 leggibile varia dai 10 ai 12 pt (point). Sul web la dimensione consigliata \u00e8 variabile dai 12 ai 25 pixel. Attenzione non tutti i font con la stessa font-size appaiono della stessa dimensione.<\/li>\n\n\n\n
      3. Il line spacing<\/em> (interlinea) \u00e8 la distanza verticale tra una linea e l’altra. Dovrebbe essere di cirta 120%-145% del font size. Nei programmi testuali l’opzione automatica consente i risultati migliori.<\/li>\n\n\n\n
      4. La line length<\/em> \u00e8 la larghezza del blocco di testo. In numero di caratteri contenuti in una singola linea di testo dovrebbe essere compresa dai 45 ai 90 oppure 2\/3 la lunghezza del alfabeto scritto in stampatello minuscolo. In un documento stampato si usano i margini di pagina di almeno 2,5 cm (1 inch) mentre in un interfaccia si impedisce al testo di arrivare ai bordi del dispositivo o finestra.<\/li>\n\n\n\n
      5. E infine la scelta del font. Il modo pi\u00f9 facile per migliorare l’impatto visivo \u00e8 ignorare i font gi\u00e0 presenti sul tuo computer e i font gratuiti presenti su internet. Invece usare solo font professionali porter\u00e0 benefici al vostro lavoro.<\/li>\n<\/ol>\n\n\n\n

        Se applicherai queste 5 regole al tuo lavoro noterai che i tuoi documenti inizieranno ad assumere un aspetto pi\u00f9 professionale.<\/p>\n\n\n\n

        <\/div>\n\n\n\n

        Fonts<\/h3>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        \"Fonts\"<\/figure>\n\n\n\n

        I fonts sono la parte visuale di tutto il testo renderizzato dal computer. Ogni singola parola che leggiamo a schermo viene processata attraverso un font. I fonts non sono dei programmi ma sono dei file statici come i .jpg o i .pdf. Ogni singolo file contiene le informazioni che definiscono le forme di ogni singola lettera, simbolo e spazio.<\/p>\n\n\n\n

        Come gi\u00e0 detto la scelta del font \u00e8 una parte molto importante per il nostro design, quindi dobbiamo sapere dove trovarli e come installarli.<\/p>\n\n\n\n

        Esistono parecchi siti a pagamento con font professionali e generalmente quelli gratuiti sono tutti spazzatura. Ma esistono servizi “gratuiti\u201d che permettono di trovare e scaricare comunque fonts professionali. Ad esempio:<\/p>\n\n\n\n

        Google Fonts<\/a><\/p>\n\n\n\n

        Adobe Fonts<\/a><\/p>\n\n\n\n

        Una volta scaricato possiamo procedere all’installazione. Attenzione se il pacchetto fonts \u00e8 compresso prima bisogna scompattarlo.<\/p>\n\n\n\n

        \"\" Come installare i fonts su Windows: selezionare la serie di fonts cliccare con il destro e dal menu a tendina cliccare su installa font.<\/p>\n\n\n\n

        \"\" Come installare i fonts su Mac OS: selezionare la serie di fonts e doppio click per aprire l’applicativo, una volta aperto cliccare su installa font.<\/p>\n\n\n\n

        Una volta installati i fonts nel proprio computer potete cancellare tutti i file scaricati. I nuovi fonts appena installati li troverete direttamente nei vari editor di testo installati sul vostro computer.<\/p>\n\n\n\n

        <\/div>\n\n\n\n

        Font Family<\/h3>\n\n\n\n

        La font family determina tutta la famiglia di un determinato font, quindi spessore, inclinazione e larghezza del carattere.<\/p>\n\n\n\n

        Infatti all’interno dello stesso font possiamo scegliere se utilizzare il bold (font pi\u00f9 spesso) o l’italic (font corsivo). Nelle font family pi\u00f9 professionali troviamo diversi pesi di font che possono variare in termini numerici da 100 a 900 sia in italic che non. Considerate che per ogni numero di spessore corrisponde anche un nome. Ecco una tabella:<\/p>\n\n\n\n

        \"Peso<\/figure>\n\n\n\n
        \"Peso<\/figure>\n\n\n\n

        Per la scrittura di testi utilizzare sempre il Light o Regular. Mentre per i testi in grassetto il Bold e in corsivo Italic. Gli altri si possono utilizzare per testi pi\u00f9 \u201cartistici\u201d.<\/p>\n\n\n\n

        Comunque durante la scrittura di un testo utilizzare il grassetto e l’italico il meno possibile. Dovrebbero essere utilizzati sono per enfatizzare alcune parole. Se enfatizziamo tutto allora non enfatizziamo nulla.<\/p>\n\n\n\n

        <\/div>\n\n\n\n

        Categorie di Font<\/h3>\n\n\n\n

        Di seguito analizzeremo le varie categorie di font che possiamo utilizzare.<\/p>\n\n\n\n

        I fonts pi\u00f9 utilizzati sono di tipo Serif<\/strong> (con le grazie) e di tipo Sans Serif<\/strong> (senza grazie). La differenza sostanziale tra queste due categorie di font \u00e8 l\u2019utilizzo o meno delle \u201cgrazie\u201d, ovvero quei piccoli prolungamenti alle estremit\u00e0 delle aste che derivano dalla scrittura calligrafica manuale.<\/p>\n\n\n\n

        \"Serif<\/figure>\n\n\n\n
        \"Serif<\/figure>\n\n\n\n

        Poi abbiamo i font Monospaced cio\u00e8 a spaziatura unica. Questo nome viene dato perch\u00e9 ogni singolo carattere occupa sempre la stessa larghezza. Invece, nei caratteri visti precedentemente chiamati “proportional font\u201d, ogni carattere occupa spazi diversi. I font monospaced sono stati inventati per convertire gli standard delle macchine da scrivere in digitale. Non sono una buona scelta perch\u00e9 occupano pi\u00f9 spazio e risultano meno leggibili.<\/p>\n\n\n\n

        \"Monospaced\"<\/figure>\n\n\n\n
        \"Monospaced\"<\/figure>\n\n\n\n

        Per ultimo la categoria che chiamiamo Goofy Fonts. Sono tutto il resto dei font pi\u00f9 grafici e artistici. In un documento professionale non c’\u00e8 spazio per utilizzare questo tipo di font, l’unico suo utilizzo \u00e8 per loghi e grafiche artistiche. Di seguito qualche esempio.<\/p>\n\n\n\n

        \"Display<\/figure>\n\n\n\n
        \"Display<\/figure>\n\n\n\n
        <\/div>\n\n\n\n

        Psicologia del font<\/h3>\n\n\n\n

        La psicologia relativa ai caratteri studia come diversi stili tipografici possono impattare nei pensieri, nelle sensazioni e nei comportamenti emotivi di chi guarda.<\/p>\n\n\n\n

        Serif Fonts.<\/strong><\/p>\n\n\n\n

        I serif fonts sono i pi\u00f9 tradizionali, restituiscono sensazioni di tradizione, eleganza e allo stesso tempo fiduzia e rispetto. Utilizzati principalmente da compagnie finanziarie, brand di vestiari, universit\u00e0 ed editoriali consolidati.<\/p>\n\n\n\n

        \"Serif<\/figure>\n\n\n\n
        \"Serif<\/figure>\n\n\n\n
        <\/div>\n\n\n\n

        San Serif Fonts.<\/strong><\/p>\n\n\n\n

        I san serif sono font pi\u00f9 minimali per questo trasmettono senso di modernit\u00e0 e semplicit\u00e0. Principalmente utilizzati dalle tech companies ma possono essere usati anche da start up moderne e brand sportivi.<\/p>\n\n\n\n

        \"San<\/figure>\n\n\n\n
        \"San<\/figure>\n\n\n\n
        <\/div>\n\n\n\n

        Slab Serif<\/strong> Fonts<\/strong><\/p>\n\n\n\n

        Slab serif sono font molto simili al serif ma che conferiscono ancora pi\u00f9 solidit\u00e0 e confidenza. Sono stati utilizzati tantissimo per brand di compagnie tecnologiche e del industria dell\u2019automobile.<\/p>\n\n\n\n

        \"Slab<\/figure>\n\n\n\n
        \"Slab<\/figure>\n\n\n\n
        <\/div>\n\n\n\n

        Goofy o Display Fonts<\/strong><\/p>\n\n\n\n

        Questa tipologia di font viene utilizzata principalmente per brand unici e divertenti.<\/p>\n\n\n\n

        Aziende: Disney, Fanta, CocaCola.<\/p>\n\n\n\n

        \"Goofy<\/figure>\n\n\n\n
        \"Goofy<\/figure>\n\n\n\n
        \n\n\n\n

        Visual Design<\/h2>\n\n\n\n

        Colori e forme<\/h3>\n\n\n\n

        Scegliere le forme e i colori in qualsiasi progetto \u00e8, a livello teorico, la parte pi\u00f9 complessa e astratta. In questo processo subentrano i trend, le mode e il soggettivismo. In passato si poteva pensare anche ai limiti tecnologici ma con le potenze di calcolo che possiedono anche dei dispositivi di pi\u00f9 bassa fascia ormai si pu\u00f2 visualizzare qualsiasi progetto in qualsiasi momento.<\/p>\n\n\n\n

        Cerchiamo comunque di tenere a mente le basi come visto precedentemente per la parte di design system. Di seguito due semplici regole:<\/p>\n\n\n\n

          \n
        1. Abbiamo una buona estetica quanto l’apparenza e il comportamento si integrano con le sue funzioni. Esempio nel pannello notifiche dei smartphone lo swipe destro e sinistro in per cancellare o fissare messaggi.<\/li>\n\n\n\n
        2. Utilizzare elementi grafici standard e familiari \u00e8 una buona pratica perch\u00e9 aiuta l’utente a comprendere meglio il prodotto o servizio. Esempio affidarsi a Ui Kit \u00e8 una buona pratica soprattutto per la parte riguardante i dispositivi mobili Google e Apple.<\/li>\n<\/ol>\n\n\n\n
          <\/div>\n\n\n\n

          Colori<\/h3>\n\n\n\n

          Utilizzare una buona palette colori ci pu\u00f2 aiutare non solo nella comunicazione del nostro prodotto o servizio ma anche nella leggibilit\u00e0 dei nostri messaggi.<\/p>\n\n\n\n

          Uno dei tool migliori che si pu\u00f2 utilizzare per capire quali colori utilizzare \u00e8 certamente <\/a>https:\/\/color.adobe.com\/<\/a>.<\/p>\n\n\n\n

          Di seguito i tre principi fondamentali dei colori:<\/p>\n\n\n\n

            \n
          1. Gerarchia<\/strong>: i colori aiutano a capire quali elementi sono interattivi e quali hanno pi\u00f9 importanza di altri.<\/li>\n\n\n\n
          2. Leggibilit\u00e0<\/strong>: i colori possono aiutare a leggere dei contenuti o a nasconderli. Ricordiamo sempre che nell\u2019utilizzo di icone e testi meglio tenere un\u2019alta leggibilit\u00e0. Esistono alcuni tool, come nel sito Adobe Color – Strumenti di Accessibilit\u00e0, che consentono di analizzare il contrasto.<\/li>\n\n\n\n
          3. Espressivit\u00e0<\/strong>: I colori trasmettono emozioni, cerchiamo di utilizzarli per rafforzare le lo stile del nostro prodotto o servizio.<\/li>\n<\/ol>\n\n\n\n
            <\/div>\n\n\n\n

            Psicologia dei colori<\/h3>\n\n\n\n

            Come nella psicologia dei font, anche i colori hanno una propria psicologia e consentono di trasmettere emozioni attraverso le tonalit\u00e0 che andremo ad utilizzare.<\/p>\n\n\n\n

            Di seguito alcuni esempi di colori e cosa trasmettono:<\/p>\n\n\n\n

            Rosso<\/strong><\/p>\n\n\n\n

            Colore che trasmette amore e passione ma anche coraggio, fiducia, forza. Viene utilizzato principalmente per il settore romantico, cibi e bevande.<\/p>\n\n\n\n

            \"Rosso\"<\/figure>\n\n\n\n
            \"Rosso\"<\/figure>\n\n\n\n

            Arancione<\/strong><\/p>\n\n\n\n

            Un colore che trasmette principalmente allegria, entusiasmo e socialit\u00e0. Puo essere utilizzato per banche, settore alimentare e giovanile.<\/p>\n\n\n\n

            \"Arancio\"<\/figure>\n\n\n\n
            \"Arancio\"<\/figure>\n\n\n\n

            Giallo<\/strong><\/p>\n\n\n\n

            Trasmette felicit\u00e0, ottimismo e creativit\u00e0. Viene utilizzato da aziende tecnologiche e creative ma anche nel settore dell\u2019infanzia.<\/p>\n\n\n\n

            Esempio: Ikea, Nikon, Pumpers<\/p>\n\n\n\n

            \"Giallo\"<\/figure>\n\n\n\n
            \"Giallo\"<\/figure>\n\n\n\n

            Verde<\/strong><\/p>\n\n\n\n

            \u00c8 un colore che da sicurezza e speranza. Ultimamente spesso utilizzato per il campo relativo alla sostenibilit\u00e0 e al benessere naturale. I campi di utilizzi sono svariati dall\u2019alimentare, al medicale e farmaceutico, fino al bancario.<\/p>\n\n\n\n

            \"Verde\"<\/figure>\n\n\n\n
            \"Verde\"<\/figure>\n\n\n\n

            Blu<\/strong><\/p>\n\n\n\n

            Colore che trasmette fiducia, affidabilit\u00e0 e tranquillit\u00e0. Settore industriale, elettronica, sanitario e bancario.<\/p>\n\n\n\n

            \"Blu\"<\/figure>\n\n\n\n
            \"Blu\"<\/figure>\n\n\n\n

            Bianco e Nero<\/strong><\/p>\n\n\n\n

            Trasmettono principalmente eleganza, lusso e qualit\u00e0. Utilizzato da principalmente dai settori dell\u2019alta moda ma anche da gioielleria e aziende tecnologiche.<\/p>\n\n\n\n

            \"Bianco<\/figure>\n\n\n\n
            \"Bianco<\/figure>\n\n\n\n
            <\/div>\n\n\n\n

            Icone<\/h3>\n\n\n\n

            Le icone sono una parte importante per il design, infatti ci consentono di comunicare funzioni senza utilizzare le parole oppure di enfatizzare le parole stesse. Anche qua, come visto in precedenza, non inventiamo nulla di nuovo se esistono dei standard cerchiamo di usarli.<\/p>\n\n\n\n

            Di seguito i principi fondamentali per le icone:<\/p>\n\n\n\n

              \n
            1. Semplicit\u00e0<\/strong>: semplificare al massimo le icone per aumentare la leggibilit\u00e0.<\/li>\n\n\n\n
            2. Grafica<\/strong>: utilizzare icone grafiche e non che cerchino di ricalcare la realt\u00e0.<\/li>\n\n\n\n
            3. Consistenza<\/strong>: mantenere lo stesso stile per tutte le icone.<\/li>\n<\/ol>\n\n\n\n

              Le impostazioni che possono assumere le icone presenti in un design system:<\/p>\n\n\n\n

                \n
              • Peso: lo spessore della linea.<\/li>\n\n\n\n
              • Riempimento: se l\u2019icona \u00e8 piena o disegnata con linee.<\/li>\n<\/ul>\n\n\n\n
                <\/div>\n\n\n\n

                Bilanciamento ottico<\/h3>\n\n\n\n

                Durante la fase di disegno, affidandoci totalmente al software, incontreremo alcune difficolt\u00e0 e a volte noteremo qualcosa di sbagliato. Per esempio se cerchiamo di allineare con i comandi rapidi alcune forme ma al nostro occhio risulteranno posizionati in modo errato.<\/p>\n\n\n\n

                I calcoli che effettua un software di disegno sono sempre corretti e razionali ma non tengono mai in considerazione la percezione delle forme e dei colori da parte dell\u2019occhio umano. Quindi il nostro lavoro sar\u00e0 di correggere a livello percettivo con piccole correzioni chiamate aggiustamento ottico.<\/p>\n\n\n\n

                <\/div>\n\n\n\n

                Allineamento<\/strong><\/p>\n\n\n\n

                Il primo esempio pi\u00f9 classico \u00e8 il tasto triangolare play al centro del cerchio. Apparir\u00e0 perfettamente allineato al centro, nonostante sia decentrato quando viene delimitato da un rettangolo di costruzione.<\/p>\n\n\n\n

                Quindi come nell\u2019esempio soprastante dovremmo andare a correggere manualmente la centratura del triangolo all\u2019interno del cerchio.<\/p>\n\n\n\n

                <\/div>\n\n\n\n

                Scala<\/strong><\/p>\n\n\n\n

                La scala \u00e8 come percepisce il nostro cervello la dimensione di due elementi affiancati. Infatti se disegniamo un cerchio e un rettangolo delle stesse dimensioni, il cerchio risulter\u00e0 visivamente pi\u00f9 piccolo. Per correggere baster\u00e0 ingrandire leggermente il cerchio in modo tale di avere la percezione della stessa dimensione.<\/p>\n\n\n\n

                Questo \u00e8 il motivo per il quale se analizziamo un carattere da vicino noteremo come le lettere con elementi circolari saranno leggermente pi\u00f9 grosse rispetto le lettere con elementi verticali. Esempio:<\/p>\n\n\n\n

                <\/div>\n\n\n\n

                Testo Maiuscolo<\/strong><\/p>\n\n\n\n

                Esattamente come nella scala per quanto riguarda il testo tutto scritto in maiuscolo se affiancato a un paragrafo in minuscolo risulter\u00e0 a livello percettivo pi\u00f9 grande. Il testo in maiuscolo dovrebbe essere rimpicciolito.<\/p>\n\n\n\n

                <\/div>\n\n\n\n

                Colori<\/strong><\/p>\n\n\n\n

                Per quanto riguarda i colori il problema lo abbiamo quando utilizziamo del testo a fianco delle icone piene. Se il testo dovesse avere il lo stesso colore dell\u2019icona il testo risulta pi\u00f9 chiaro. Per compensare questo allineamento baster\u00e0 scurire leggermente il colore del testo.<\/p>\n\n\n\n

                \n","protected":false},"excerpt":{"rendered":"

                Presentazioni 01 | Fondamentali 02 | Metodi Progettuali 03 | Design System 04 | Tipografia 05 | Visual Design Una collezione di risorse che mi hanno formato come designer. Spero che le prossime pagine possano aiutare anche voi a migliorare come designer. L’obbiettivo di questa pagina \u00e8 quello di essere consultata pi\u00f9 volte, soprattutto nei […]<\/p>\n","protected":false},"author":1,"featured_media":41,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,24,25,28,27],"tags":[32],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-e-modellazione-3d","category-enac","category-jac","category-marketing-e-comunicazione","category-operatore-grafico","tag-teoria"],"_links":{"self":[{"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":59,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":1125,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/1\/revisions\/1125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}