La prima lezione del corso di GUI introdurrà lo studente all'interno della progettazione di applicativi digitali. All'inizio verrà richiesto allo studente una vera e propria completa confessione di tutto ciò che nel suo individuo e accostabile al concetto di web design, che è il termine che più facilmente si accosta alla designazione di prodotti non legati prettamente al mondo cartaceo ed editoriale.Dopo aver argomentato in maniera autonoma attraverso un saggio breve tutto ciò che l'essere conosce, attraverso l'utlizzo di Authorea, la quale piattaforma verrà introdotta ed esplicata nella stessa, il gruppo classe allestirà un vero e proprio dibattito per cercare di capire cosa è accostabile nel contemporaneo a tale argomento. Il saggio breve personale verrà ovviamente conteggiato e potrà essere continuamente aggiornato durante tutto l'anno accademico, per creare quella che verrà poi considerata la propria visione/interpretazione del contesto di analisi e di azione.Tutto l'apprendimento è quindi legato ad un tempo che non direttamente proporzionale allo svisceramento dei contenuti.La sua efficacia si misura nel futuro prossimo, non nell'immediato.

Seguendo le modalità di analisi fornite durante la lezione, ogni studente è chiamato ad analizzare ed argomentare un prodotto che si sviluppi in ambito editoriale (quindi stampato) e in ambito digitale (piattaforma web). L'esercitazione prevede un'analisi che visualizzi e divulghi le ragioni per il quale la linea guida venga o meno seguita all'interno dello sviluppo del prodotto nei due differenti ambiti.Non ci sono limiti, la ricerca può essere ad esito positivo o negativo, l'importanza di avere il prodotto stampato effetivamente disponibile non potrà far altro che giovare per l'analisi della stessa.

Ogni studente è invitato a selezionare due delle tipologie affrontate durante la lezione, e creare un elaborato analitico grafico - testuale,  considerando che dalle scelte effettuate, si procederà nelle lezioni successive con quelle che sono le parti più inerenti alla progettazione di una vera e propria piattaforma.Schemi di classificazione:TemporaleAlfabeticoGeograficoFormatoorganigrammaTaskPubblicoSubject Topic

Scuola Mohole—Corso Wordpress Basic—Esame FinaleDocente: Camillo Frigeni

Come Creare un sito di e-commerce online.1* Il primo passaggio che ho fatto è stato quello di trovare un team adatto alle mie esigenze. ho scelto quindi il Tema " Shop Isle "                                                                                                                                                                                                                                                                                                                                                                           

web design - saggio breveIl compito principale di un sito web è di promuovere il prodotto o servizio che tratta ed informare il fruitore al riguardo; dovrebbe quindi essere facile da navigare, chiaro, intuitivo e senza sovrabbondanza di elementi che potrebbero distrarre il fruitore durante la sua permanenza tra le sue pagine.Esaminando il sito di Alitalia, sito della compagnia di bandiera nostrana, ed altri siti dei suoi concorrenti, si può notare come molti elementi siano comuni: logo e logotipo, slider o banner con immagini di possibili mete, offerte su specifici voli o destinazioni, un'area clienti ed ovviamente una "searchbar" in cui si possono inserire aeroporto di partenza e destinazioni, date e numero passeggeri. Nel caso specifico di Alitalia quest'ultima viene collocata a destra sotto il banner, senza dargli un'importanza di primo piano; viene dato invece un ruolo di primo piano alle offerte per i voli nazionali ed internazionali, che sono gli elementi che spiccano di più nella home, con una scelta di colori che riprendono quelli del logo della compagnia.Nel footer vengono collocati elementi informativi secondari, contatti, link alle pagine social, newsletter e collegamenti a pagine precise del sito.Una cosa che potrebbe disturbare la fruizione del sito è l'avviso dei cookie, che compare in alto, a sovrastare tutta la home page. Confrontando il sito di Alitalia con quello di Lufthansa appaiono poche, ma sostanziali, differenze: il collocamento dell'area prenotazione voli e dell'area check-in, in Lufthansa, dominano la pagina attirando subito l'attenzione; solo in un secondo momento vengono proposte le eventuali offerte.Rispetto ad Alitalia il sito appare più curato: non ci sono troppe informazioni tutte insieme e ciò aiuta la navigazione e la percezione dell'utente.

Scuola Mohole—Corso Wordpress Basic—Esame FinaleDocente: Camillo FrigeniAllieva: Aurora CappelloIl website da me realizzato per l’agenzia **Index Plus** mira ad evidenziare le qualità e la professionalità della stessa, consolidando la propria utenza di basso profilo ed incrementando i progetti in entrata al fine di raggiungere un target medio-alto; e dunque di maggior prestigio. Indispensabile per l’azienda sarà dunque un sito web in grado di presentare a 360°  le potenzialità di quest’ultima, i servizi offerti, un copioso e convincente background progettuale, un ricco overview aziendale accompagnato dalla sintetica descrizione del team che ne fa parte, precedenti clients, feedbacks ed efficienti canali social, i quali consentiranno alla **Index Plus** di ottenere ulteriori utenze tramite sito web e la visualizzazione dello stesso.Come dichiarato nel briefing, l’agenzia **Index Plus** visto l’ammontare dei progetti in uscita, non ha mai progettato una vera e propria immagine coordinata, pertanto le linee guida richieste sono minime. È stato fornito un semplice pittogramma, al quale  ho associato il nome dell’azienda utilizzando il font Montserrat (font istituzionale dell’azienda).

L'esigenza di offrire un prodotto in diversi ambiti, è sicuramente una pratica che consente di raggiungere il proprio target in maniera efficace e produttiva possibile.Ogni studente seguendo le nozioni ricevute durante le lezioni seguite fino ad ora è chiamato a sviluppare un website che presenti un dato prodotto (a discrezione dello studente) e mostrarne nelle caratteristiche inerenti ad esso. Interessante sarà sicuramente l'inserimento di funzionalità che non saranno strettamente legate all'installazione di base e al tema selezionato.Lo stile grafico-visivo sarà sicuramente un punto che all'interno di questa esercitazione avrà sicuramente importanza, quanto la creazione di una sitemap che aiuterà lo studente identificato nella figura del web designer a creare un'architettura informativa coerente e producente.Il tutto presentato tramite screenshot ed argomentazione, successivamente revisionate in classe.Ecco alcuni dei link presentati in classe a livello bibliografico:abookapart.comalistapart.comitalianalistapart.it

Brief - IntroL’agenzia **Index Plus**, fondata nel 2014 necessita di imprimere la propria immagine e il proprio know-how all’interno del World Wide Web. Dopo 12 mesi di attività si sono resi conto che l’attività del commerciale presente all’interno del Team (Account) riesce da solo a mantenere in positivo il bilancio societario, motivo per cui l’agenzia ha ampliato il suo organico assumendo 3 nuove figure professionali entrando nel cosiddetto rischio d’impresa successivo che potrà portare l’azienda oltre che a strutturarsi, anche a mirare a un target di maggior prestigio.L’Agenzia si muove all’interno del digitale, occupandosi solo della parte visiva degli artefatti, quindi tutto ciò che riguarda la natura di tipo programmatica è esterna all’azienda, motivo per  il quale potrebbe nascere una collaborazione se la creazione del sito risulterà efficiente.L’azienda ha quindi la necessità di cominciare a ottenere anche utenze tramite il sito web e la visualizzazione dello stesso.I canali social sono di fondamentale importanza all’interno della struttura. (Un Social Media Manager è appena stato assunto per sopperire a questa mancanza).Pubblico di riferimentoIl target di riferimento è medio alto. L’azienda con questo investimento mira a consolidare la proprio utenza di basso profilo ed incrementare i progetti in entrata spostando l’attenzione su azienda di calibro maggiore.Immagine CoordinataL’agenzia vista l’ammontare dei progetti in uscita non ha mai sviluppato una vera e propria immagine coordinata.Sono tuttavia presenti alcune linee guida:1. Montserrat nei suoi vari pesi (disponibile su google fonts)2. Utilizzo di una palette che comprende l’utilizzo di 3 colori, uno dei 3 in completo contrasto con i due principali, che possono tenere la stessa tonalità.PagineLe pagine di cui l’azienda necessità sono 4:1. Home (non sono presenti particolari restrizioni)2. Chi Siamo/About (Immagine e testo e figure professionali elencate: 1 Illustratore, 2 Graphic Designer, 1 Account Manager, 1 Social Media Manager)3. Portfolio4. ContactAll’interno di queste pagine utilizzare testo placeholder/finto.Verrà fornito solo in seguito. (ogni studente può ipotizzarlo autonomamente)Motivare le scelte.PresentazioneScuola Mohole—Corso Wordpress Basic—Esame FinaleDocente: Camillo Frigeni

A document by roberta inverardi. Click on the document to view its contents.

Scuola Mohole—Corso Wordpress Basic—Esame FinaleDocente: Camillo FrigeniCiao Camillo Ho realizzato il website per l' azienda Index Plus ,con tutte le caratteristiche richieste nella consegna (font,palette,menu..). Ho cercato tra svariati temi quello più adatto e ne ho scelto uno onepage. I due colori principali sono il nero e il grigio , quello  in contrasto è il bianco.Ho scelto questi colori perché a mio parere davano un senso di maggiore serietà e professionalità.

Ogni singolo gruppo sarà chiamato ad analizzare uno dei seguenti strumenti di progettazione e di prototipazione.Strumenti:Adobe MuseSketchJust in MindInvisionaxurepencilLa consegna prevederà una presentazione degli elaborati tramite la creazione di una presentazione seguendo le nozioni impartite.Lo strumento sarà a discrezione degli studenti e del gruppo di lavoro.PresentazioneCosa è Sketch ?Sketch è un programma di grafica vettoriale molto simile a Illustrator. Nasce per la progettazione web e di interfacce grafiche. (SLIDE 1)Funzioni PrincipaliL'utilizzo di oggetti e forme vettoriali con maniglie di modifica per punti; (SLIDE 2)The Inspector: un editor di oggetti con funzionalità come traccie, bagliori e ombre; (SLIDE 3)Creazione di simboli, stili di testo e di oggetti; (SLIDE 4)Diverse pagine e spazi di lavoro su cui progettare attraverso griglie; (SLIDE 5)Esportazione per il web, anche di singoli elementi, con anteprime per tutti i dispositivi; (SLIDE 6)(SLIDE 7)Pro/contro rispetto IllustratorPro:Molto veloce da apprendere, accessibile;Nativo Mac, strutturato per utilizzarne le funzioni intrinseche;Funzioni uniche per il web;Contro:Molte meno funzioni;Nativo Mac, quindi non presente su altri sistemi operativi;Poche risorse online;Slide 1: Logotipo e marchio del programmaSlide 2: una forma vettoriale in modifica con le maniglie di trasformazione visibili;Slide 3: barra di modifica a destra che mostra le varie funzionalità di modifica, magari evidenziata in qualche modo rispetto al resto dell'area di lavoro;Slide 4: l'opzione di creazione simboli;Slide 5: più pagine aperte;Slide 6: funzione slice ed esportazione;Slide 7: visualizzazione di una pagina in vari formati web;Se non dovessi riuscire a fare qualche screenshot rubali brutalmente dal loro sito.

Ogni singolo gruppo sarà chiamato ad analizzare uno dei seguenti strumenti di progettazione e di prototipazione.Strumenti:Adobe MuseSketchJust in MindInvisionaxurepencilLa consegna prevederà una presentazione degli elaborati tramite la creazione di una presentazione seguendo le nozioni impartite.Lo strumento sarà a discrezione degli studenti e del gruppo di lavoro.ADOBE MUSE-Cos'è e cosa faIl programma che andiamo ad analizzare è Adobe Muse, utilizzato per la progettazione e la pubblicazione di un sito web, e che permette l'utilizzo di altri strumenti di Adobe (es. InDesign, Illustrator e Photoshop).-Pannelli PrincipaliTra i pannelli principali troviamo:Pianificazione (permette la realizzazione di mappe per siti web, impostando la struttura delle pagine e attraverso pagine mastro);Progettazione (contiene il quadro della pagina web , ossia dove si progetta la pagina web);Anteprima (modalità che permette la visualizzazione del sito web simile a quello che apparirà successivamente nei browser);Pubblicazione (consente la pubblicazione del sito);Menù Condividi (consente la condivisione dell' URL del sito appena pubblicato).-Barra StrumentiNella barra degli strumenti troviamo:Strumento di Selezione ( selezionare, spostare , ingrandire etc);Strumento Taglierina (solo per immagini);Strumento di testo (si divide in Strumento di testo e in Strumento di testo verticale);Strumento rettangolo (funziona come ogni strumento forma);Strumento cornice rettangolo ( per inserimento immagini);Strumento Mano (consente di spostarsi all'interno della pagina);Strumento Zoom ( per ingrandire o rimpicciolire la pagina);Strumento di ancoraggio e di collegamento da inserire(consente di creare e gestire collegamenti ipertestuali);Strumento formatta testo tra punti di interruzione(permette la modifica del testo es. colore , font ,interlinea..).-FinestraNelle opzioni che ci sono in finestra, rispetto a quelli che conosciamo essendo simili ai programmi che già utilizziamo (Illustrator, Photoshop, InDesign), troviamo :  

Ogni singolo gruppo sarà chiamato ad analizzare uno dei seguenti strumenti di progettazione e di prototipazione.Strumenti:Adobe MuseSketchJust in MindInvisionAxurepencilLa consegna prevederà una presentazione degli elaborati tramite la creazione di una presentazione seguendo le nozioni impartite.Lo strumento sarà a discrezione degli studenti e del gruppo di lavoro.

Abstract content goes here

ADUNATA SEZIONALE A.N.A. DI BERGAMO(10 Settembre 2017) Concorso per il manifestohttps://drive.google.com/drive/folders/0BwNPWawMKwfmZ2RsS3dEM3pKdTg?usp=sharing

03/10/16information architecture (content)graphic design (layout, type, color, image)user experience design: comportamenti, strettamente legato al tipo di utente con il quale dobbiamo comunicare. che tipo di esperienza dobbiamo fornire nel nostro sito? quando si parla di user experience si parla di esperienza mentre si svolge una determinata azione. ogni prodotto deve elevare e contraddistinguere la propria esperienza.front-end development: dopo la ricerca, la grafica, c'è lo sviluppo. infinite development: il sito è infinito, si può sempre cambiare e modificare.fasi del processo di progettazione1. il brief: richiesta da parte del committente (cliente, docente, autoproduzione) da formalizzare in termini progettuali;   1.1 obbiettivi e scopi: qual è la richiesta del cliente, logiche che mirano allo scopo preciso del sito.    1.2 budget e scadenza: deadline.   1.3 target audience o pubblico di riferimento: queste persone devono rivedersi nel prodotto. es. certi colori vengono associati a certe logiche visive, per questo motivo devo saper utilizzare i giusti elementi a seconda del target.    1.4 funzionalità: qual è la funzione che l'utente utilizza, che funziona ha il sito, in che modo l'utente può interagire col sito.   1.5 materiale disponibile e materiale necessario: ciò che l'azienda ha (logo, palette, linee guida). per creare un sito c'è il bisogno di sapere quali sono le linee guida, cosa il sito deve fruire, e usufruire dei materiali disponibili.    1.6 analisi di stile attuale generale: coordinare il progetto    1.7 cosa non fare e cosa il cliente non vuole che venga fatto: nel web design ogni cliente si fa la sua cliente e sa quali sono i suoi competitor da cui prende ispirazione, sapere cosa non vuole per la propria immagine così da evitare certi elementi.2. la ricerca: fase di acquisizione di tutte le informazioni disponibili sull'argomento di progetto. fase fondamentale per capire cosa è presente e come differenziarsi dalla situazione attuale. l'obbiettivo è organizzare i contenuti della ricerca in una presentazione (moodboard, grafici, diagrammi, testi).3. il progetto di creazione: fase di sviluppo delle ipotesi progettuali e rapida protipazione di differenti soluzioni di progetto. come per la grafica, all'inizio bisogna fornire 2-3 vie di uscita, bisogna fornire al cliente uno stretto ventaglio di offerte. sviluppare rapidamente ipotesi progettuali (fonti d'ispirazione, osservazione, brainstorming, creazione disordinata, associazioni d'idee, connessione).prototipare in modo rapido soluzioni progettuale (schizzi, mappe, schemi di funzionamento, wireframe).4. il progetto esecutivo: fase di selezione e di formalizzazione delle risposte progettuali, definizione di tutti gli elementi del progetto. formalizzare wireframe, definire gli elementi visual, compilare i layout, stendere i capitolati di produzione.5. lo sviluppo: scegliere le tecnologie e implementare tecnicamente i risultati del progetto esecutivo, competenze proprie e competenze esterne.

Considerationreview header (the image non represent the school), maybe will not use the same structure for the master school pagenot sure, but maybe a little video or an image that have a little movement into the header from the header will works betterwe have an excellent structure (why we don’t use that in the header, a lot of student were captured from that)use black and white as much as possiblereview master section, like the idea, play better with stylewe need a stronger footer, this look like unprofessionalwe should introduce a pixel loader and play with the square, a little animation in AE with an export with bodclean the menu, maybe not all the voice need to be thereadd call to action in the hompage (like enrool or request information)privacy policy and cookie don’t need to be present for all the timeck to start writing.users opinion must be more real as possible, if we want to mantain that, we should introuduce effective student, maybe opinion on twitter or others socialif the clients images don't have a link, they are not really functional, which is the real function of that page?