Compatibile con Xcode

Creare interfacce applicazioni con Sketch. Il sogno di ogni non grafico!

ENTRA NEL NOSTRO GRUPPO FACEBOOK

×

Corso creare applicazioni per iOS con il linguaggio Swift

In una parola, Design. É da molte lezioni che punto l'attenzione sull'importanza di appoggiarsi ad un grafico per la realizzazione di un'interfaccia. Non è un gioco, l'interfaccia è quella che fa entrare in sintonia l'utente con la tua applicazione ed è anche la prima cosa che viene apprezzata o odiata di un'applicazione. La grafica e [...]

Torna a: Corso creare applicazioni per iOS con il linguaggio Swift > Sketch ed interfacce in Xcode
  • Gianvittorio Mascia

    Meravigliosa! Solo questa lezione vale il prezzo del corso! Erano mesi che cercavo di far funzionare un software per la parte puramente grafica dell’interfaccia, e nonostante decine di tutorial non ci ero ancora riuscito.

    In poco meno di un’ora mi hai risolto un problema annoso, spiegandolo alla grande e con una semplicità disarmante!

    Superbo, come sempre!

    • Grazie mille Vittorio,

      Sketch è fantastico per chi non è del mestiere della grafica. Con pochi accorgimenti si possono realizzare davvero belle interfacce ed in pochissimo tempo! Nella prossima lezione vedremo qualche esempio pratico ;)

  • Complimenti Peppe..!
    ottimo tutorial, ottimi esempi, ottimo tutto :D
    non vedo l’ora che arrivi la prossima lezione!! nel frattempo.. via a provare su sketch :)

    • Grazie mille Mauro,

      Sono contento che questa lezione ti sia stata d’aiuto!

  • Marco

    ciao Peppe, di PaintCode 2 cosa ne pensi?? sai darmi qualche indicazione? da quel che ho potuto capire crea immagini e animazioni vettoriali esportando in codice

    • Paintcode è eccezionale se usato con parsimonia. Crea una marea di codice che se non si sa dove metterlo e quando usarlo rende un macigno l’applicazione. Il reale beneficio lo si ha quando non si ha a disposizione un grafico (più o meno come Sketch) ma con la differenza che è appositamente creato per i programmatori (hai a che fare con codice invece che con figure). Quindi io vado più per Sketch, più semplice ed immediato, infatti quando mi sono posto il problema: “parlo di sketch o di paintcode?” la mia risposta è stata: perché devo parlare di paintcode se sketch è più semplice?
      Il punto verte solo sulla semplicità di utilizzo ed implementazione. Per il resto sono software dalla potenza smisurata (neanche io saprei quantificarti quale dei due sia il migliore)!

  • Alegia

    Ciao Peppe, innanzitutto complimenti per il corso! :-) Mi permetto di “correggerti” su alcune cose che hai detto su cui non sono molto d’accordo.

    Innanzitutto, il tono della lezione (e di quella successiva) mi è sembrato molto “se non sei un grafico c’è sketch”, che non è del tutto esatto. Sketch è usato da designer di tutto il mondo per creare le interfacce (che siano per applicazioni o siti web) che ha completamente scalzato photoshop da questo ruolo. E’ proprio per la sua semplicità ed immediatezza che è stato preferito dai professionisti e non solo dai dilettanti. Basti pensare che la Adobe, avendo avuto dei pesanti cali in questo senso, ha deciso di copiare in tutto e per tutto Sketch creando un tool praticamente identico e facendo delle piccole miglorie (http://blogs.adobe.com/creativecloud/introducing-project-comet-a-new-tool-for-designing-and-prototyping-user-experiences/) per riguadagnarsi una fetta di designer migrati nello “sketch-world”. Quindi non stiamo parlando assolutamente di uno strumento da dilettanti anzi, è tutto il contrario.

    Seconda cosa, questo non è un corso di grafica (anche se non sarebbe niente male aggiungere un corso di interfacce su sketch per coloro che sono a digiuno!) e volevi dare solo un’idea generale di come creare un’interfaccia e degli strumenti ( a pima vista pochi ma in realtà molto potenti) del programma. Però secondo me hai mancato di accennare ad una cosa fondamentale: i template. Se si va in sketch e poi File>New from Template c’è il paradiso: vari template già fatti per disegnare le interfacce ios, per interfacce android (e quindi con material design), per icone e quant’altro. Questo, per chi non lo sappia, è il vero primo step per creare un’interfaccia. Dopo aver disegnato su carta uno schizzo di come dovrebbe andare il design si apre sketch e, oltre ad un documento vuoto con la vostra artboard, si apre anche un template. Così si può, per esempio, mettere la navigation bar “originale” (e non doverla creare da zero), oppure usare le icone “originali” di sistema come quelle di condivisione, o i pulsanti di riproduzione audio ecc. Insomma i template ricreano tutti gli elementi grafici già esistenti nel sistema operativo così che i designer non debbano di volta in volta creare i vari elementi da zero! Sketch offre i template di base (che già di per sé sono abbastanza per creare un responsive design) ma questi template si possono anche scaricare da altri siti (come ad esempio, sketchappresources.com che hai accennato anche tu). Alla luce di ciò diventa molto più facile imparare e creare un design degno di un professionista, bastano poche cose: un po’ di gusto estetico, un po’ di pazienza e copiare, copiare, copiare. E’ l’esercizio più utile per dei principianti: prendere un’interfaccia che è piaciuta e cercare di ricrearla in sketch. Dopo 2-3 interfacce fatte non solo avrete capito cos’è che va di moda o meno (perché alla fine, gira e rigira, le interfacce hanno molti elementi comuni) ma avete preso anche molta praticità e quel “know-how” che sarà fondamentale quando andrete a creare la vostra di interfaccia.

    Terza cosa, il prototipo. Non si può creare un’interfaccia senza farne il prototipo e provarlo sul telefono. Esistono tantissimi tool gratuiti (o “parzialmente gratuiti”). Sicuramente il più famoso è InVision (http://www.invisionapp.com) che è un tool gratuito che permette, appunto, di creare prototipi. E’ di una semplicità disarmante: fate l’upload di tutti gli assets (le schermate) della vostra applicazione e poi, con invision, create dei “bottoni” invisibili sugli elementi che volete rendere cliccabili e poi ne specificate l’animazione e la schermata che deve apparire dopo il click. Insomma, è una bomba. Non a caso anche questo tool (che, a proposito, non si scarica ma è da web) è usato dalle più grandi aziende e multinazionali. InVision ha anche l’app per l’iphone (gratuita anche questa), dove potete poi provare “con mano” come si vede e cosa c’è da cambiare. E’ una cosa utilissima, oltre ogni immaginazione, non so quante volte ho creato un’interfaccia e solo quando l’ho vista sul telefono ho capito che qualche pulsante era troppo piccolo/grande o che qualche scritta era troppo grande/piccola, o altri problemi di spazio/usabilità che, inutile che insistete, dal computer/simulatore &Co non vi accorgerete mai. Ovviamente la versione gratuita ha delle limitazioni, ma nulla di impossibile. Potete creare un solo progetto alla volta, tutto qui. Un altro tool, gratuito anche questo perché di recente acquistato da Google, è Pixate (http://www.pixate.com). Non è elementare e veloce come InVision, ma è di sicuro più potente e siete più liberi di creare qualcosa di più particolare.

    Quarta ultima cosa, il vero sito da prendere come fonte di ispirazione, nonché paradiso per tutti i designer è Dribbble (https://dribbble.com). Su questo sito designer da tutto il mondo caricano degli screenshot dei progetti su cui stanno lavorando/hanno lavorato chiedendo opinioni. E’ qui che si vede davvero dove sta andando il design e quali saranno le ultime tendenze. Infine, visto che hai linkato le linee guida per il material design di google, non vedo perché non linkare le linee guida della apple: iOS Human Interface Guidelines
    (https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/)

    Ho già scritto tantissimo, spero che questo commento possa chiarire alcuni aspetti non presi in considerazione dalla lezione ed essere utile a chi si affaccia per la prima volta nel design delle app :-)
    Passo e chiudo!

    • Ciao Alegia e grazie per il contributo.

      Il tono della lezione e di quella successiva credo sia: “se non sei un grafico trovati un grafico o prova ad usare Sketch” che è ben diverso. Infatti ripeto spesso la necessità di affiancare un grafico allo sviluppo di un’applicazione.
      In genere quando faccio dei preventivi per creare applicazioni a delle aziende metto sempre dentro il costo dello sviluppo dell’interfaccia (quasi sempre sopra i 2.000 euro) oltre al prezzo dello sviluppo generale dell’applicazione.
      In base quindi alle miei esperienze mi sembrava utile dare delle nozioni basilari di grafica con Sketch nel caso in cui non si abbia la disponibilità di un grafico.
      Questo non vuol dire che Sketch è fatto solo per principianti o solo per professionisti, é come Xcode lo possono usare entrambe le categorie.
      Per il resto, non essendo un grafico e non essendo un corso di grafica, non potevo inserire argomenti di cui non sono sempre sicuro o di cui non ho piena conoscenza dato che, quando lavoro, tutto quello che riguarda la grafica lo faccio fare ad un grafico e vorrei che chi segue i miei corsi abbia ben chiaro questo concetto.

      Tool per la prototipazione ce n’è a bizzeffe ed esulano dalla reale capacità di sviluppare un’applicazione. Servono più per il comparto grafico, quindi al grafico, che per lo sviluppatore inteso come progettista del software. In questo corso si impara lo sviluppo del software applicativo con un accenno alla grafica applicativa. Quindi in queste lezioni ho dato il minimo sindacabile per poter cominciare a creare qualche semplice interfaccia con Sketch (cose che magari in altri corsi non fanno).

      Ribadisco che per me grafico e developer sono due figure distinte e che, almeno ad alti livelli, non possono coesistere nella stessa persona. O si fa parte di una categoria o dell’altra, in un team di sviluppo non esiste la figura del grafico-sviluppatore e dato che mi sembra di capire che sei un grafico spero che adesso sia arrivato il giusto messaggio.
      D’altra parte, almeno per me, non si può essere specialisti in due settori, sarebbe una contraddizione in termini. Al massimo si possono avere conoscenze base-intermedie in altri settori anche perché è impossibile seguire l’avanzamento tecnologico di entrambe le categorie.

      Il tuo commento è una dimostrazione della mia tesi :P

      Grazie per i link e per le considerazioni che hai fatto,
      alla prossima ;)

      • Alegia

        Sì questo non è un corso di grafica ed è proprio questo che mi ha spinto a scrivere questo commento. Ho pensato che le persone presenti in questo corso non avessero (non tutte, almeno) la possibilità di pagare 1000 e più euro ad un grafico. Proprio per questo, visto che nella lezione non erano menzionate delle cose, ho voluto dare altri link e supporti a chi dovesse fare da solo, in modo da avere tool più pratici su cui lavorare e partire. Proprio per coloro che fanno da sé il prototyping diventa abbastanza fondamentale perché, per come la penso io, si dovrebbe iniziare a programmare solo quando si ha una chiara idea di come le cose dovrebbero essere (tralasciando particolari minori modificabili senza problemi anche in corso d’opera).

        Non mi trovi d’accordo sul fatto che non si può eccellere in entrambi i campi, ma questa è solo la mia personalissima opinione. In fondo dipende molto dalla voglia di imparare e soprattutto dalle capacità ;)

        A presto :)

        • Si questo senza dubbio, più che altro non ci sono i tempi se si parla di sviluppo in azienda o per commissioni (quindi con scadenze). Quando si hanno scadenze e c’è un team, il developer comincia a sviluppare il core dell’applicazione prima di buttare dentro la grafica (a cui sta lavorando in parallelo il grafico). Se no bisognerebbe sempre aspettare una delle due parti oppure dovresti perdere tempo prima a fare una delle due cose e poi passare all’altra.
          Comunque qui siamo sempre alla disperata ricerca di grafici o di persone che vogliono buttarsi nella stesura di tutorial riguardanti la grafica applicativa, ergo se è qualcosa che può interessarti fai un fischio :P

          • Alegia

            Beh anche questo è vero. Penso che poi dipenda dall’organizzazione in sé e di come l’azienda preferisce strutturare il progetto. Per quanto riguarda la tua proposta, innanzitutto grazie già solo per il fatto di avermi proposto una cosa dle genere! La grafica non è il mio mestiere ma sono anni che un po’ per gioco un po’ per curiosità mi metto lì a “smanettare”. Quindi perché no, non sono un professionista ma metto felicemente a disposizione degli altri ciò che ho imparato! Dimmi come posso esserti utile :)

            • Contattami pure in privato e mandami una tua email. Così ti invito su Slack, una piattaforma che uso per parlare con altri dev o i membri del team.

            • Alegia

              Ok ti mando l’email in privato ;)

    • Marco

      Grazie mille Alegia per i tuoi consigli e suggerimenti!
      Spero di vedere presto un bel tutorial scritto da te…
      Grazie

      • Alegia

        Felice di essere stata d’aiuto :-)

  • Marco

    Grazie a questa lezione e al commento di algia ho voluto approfondire meglio su sketch…
    Per chiunque fosse interessato, basta digitare su YouTube sketch 3 e si aprirà un mondo!!!! Ottimi tutorial (ho iniziato oggi uno da 35 video) e tips sull’utilizzo di sketch.

  • Marco Piazza

    Avrei una domanda per @Alegia e @peppe_sapienza
    Dopo una Full Immersion di Tutorial penso di aver abbastanza capito il funzionamento di sketch (non sono a digiuno di grafica avendo già seguito corsi e lavori con Illustrator)..
    vorrei porvi una domanda al quale non trovo risposta in giro per il web.. ho trovato alcune soluzione ma penso non siano le migliori..
    Una volta creata la mia bella app con sketch, creati i blur, le varie label con font e text, spaziature e incolonnato il tutto con le guide per creare una ui experience armoniosa, aperti diversi artboard.. ecc ecc; Insomma creato il tutto esporto la mia App, graficamente finita, manca solo il controller e quindi importo tutto in Xcode, ma quest’ultimo gestisce come immagini e non come uno storyboard importato, quindi i miei text con le spaziature dei caratteri, le mie mask create con tanto impegno e sopratutto le constrain create in sketch vanno a perdersI???
    Cioè passo 6/7/8/9 ore per creare un app al meglio e poi devo “rifarla” su Xcode, rifare i constrain, rifare i text, ecc ecc???? questa cosa non mi è chiara..
    Nel web development è tutto molto più semplice.. esporto e importo anche effetti, font, ecc ecc..

  • Marco Piazza

    Avrei una domanda per @xcoding-cda72177eba360ff16b7f836e2754370:disqus e @peppe_sapienza:disqus
    Dopo una Full Immersion di Tutorial penso di aver abbastanza capito il funzionamento di sketch (non sono a digiuno di grafica avendo già seguito corsi e lavori con Illustrator)..
    vorrei porvi una domanda al quale non trovo risposta in giro per il web.. ho trovato alcune soluzione ma penso non siano le migliori..
    Una volta creata la mia bella app con sketch, creati i blur, le varie label con font e text, spaziature e incolonnato il tutto con le guide per creare una ui experience armoniosa, aperti diversi artboard.. ecc ecc; Insomma creato il tutto esporto la mia App, graficamente finita, manca solo il controller e quindi importo tutto in Xcode, ma quest’ultimo gestisce come immagini e non come uno storyboard importato, quindi i miei text con le spaziature dei caratteri, le mie mask create con tanto impegno e sopratutto le constrain create in sketch vanno a perdersI???
    Cioè passo 6/7/8/9 ore per creare un app al meglio e poi devo “rifarla” su Xcode, rifare i constrain, rifare i text, ecc ecc???? questa cosa non mi è chiara..
    Nel web development è tutto molto più semplice.. esporto e importo anche effetti, font, ecc ecc..

    • Alegia

      Ciao Marco,
      in realtà penso che tu abbia frainteso il fine ultimo di ricreare un’interfaccia con sketch. Quando andiamo a creare un’interfaccia con questo programma, l’unica cosa che vogliamo fare è quella di definire la forma della nostra creazione. Decidere quindi dove e come posizionare le cose, lo stile di un’eventuale menù e così via! Solo alcuni elementi di quelli ricreati andranno importati in xcode. Ad esempio, se crei uno sfondo sfumato, le icone ecc. Ma di certo non importi la tua interfaccia in toto, così come sta. Se ti stai ancora chiedendo allora a cosa serve sketch, pensa a questo: se vogliamo costruire una casa, abbiamo prima bisogno del disegno dell’architetto che segna tutti i dettagli, le metrature ecc. Insomma ci dice cosa va dove. Dopo che abbiamo il progetto possiamo chiamare la nostra ditta che, tenendo conto del progetto dell’architetto, va a costruire tutto ciò che è presente nel documento! E’ pericoloso, secondo me, iniziare a programmare un app se non si sa ancora bene cosa fare e come farlo. Pensa ad esempio al menù. Io proprio ultimamente ho cambiato per ben 3 volte la forma del mio menù. Fortunatamente ero ancora su sketch. Pensa se avessi dovuto rifarlo/cambiarlo tutte e 3 le volte da xCode. Avrei perso solo un sacco di tempo!

      • Marco Piazza

        Risposta esauriente!!!!
        Molto probabilmente non avevo capito l’utilità di sketch perché non ho mai lavorato in team.. Eravamo in due ed entrambi programmatori, io per passione lui con p.i.
        Dico lavoro in team perché da quel che ho capito dalla tua spiegazione, sketch consegna la grafica al developer che lavora su Xcode, quindi il developer ha l’app finita come ui e segue le linee guida del grafico.

        • Esatto Marco,

          Sketch serve al designer in modo da poterti passare tutti gli elementi in maniera separata per poterli inserire correttamente su Xcode. Quindi tu segui le linee guida del design creato su Sketch. Quando mi commissionano delle applicazioni, il grafico definisce il layout ed i componenti, poi la crea con Sketch (mentre io creo il codice che ci starà dietro) ed infine io metto dentro lo storyboard gli elementi che mi ha passato.
          Quindi se siete in due potete fare così. Lui crea l’interfaccia e tu cominci a definire il codice e tutto gli altri elementi che man mano inizierete a vedere durante il corso.

  • Alain Desitter

    Ciao,

    rieccomi dopo una lunga assenza, ho ripreso con il corso ed ho
    finito di buttare giù il necessario grafico della mia app.

    Mi sono creato l’immagine con sketch della pagina di avvio con lo
    sfondo, le sfumature, il logo e la frase di benvenuto, tendenzialmente è solo
    una pagina di transito durante il caricamento quindi l’ho esportata come unica
    immagine che finirà nel launchscreen.storyboard.

    Poi mi sono creato i vari purlsanti ed etichette che ho esportato in
    file differenti che devo caricare in assets.xcassets.

    Magari mi è sfuggito qualche pezzo, cosa che non escludo, ma xcode
    ha una funzione per importare o c’è qualche passaggio da fare? Oppure basta
    trascinare le immagini?

    • Ciao Alain e ben tornato,

      Xcode non ha nessun tool automatizzato. Quindi ogni volta che crei in sketch delle immagini, poi le devi passare su Xcode in maniera manuale, cioè esportandole nei vari formati.

      Se ci sono altri dubbi, mi trovi qui ;)
      Buona Programmazione,
      Giuseppe

Start typing and press Enter to search