Adobe, come ormai sa anche il portiere del mio palazzo, ha ucciso Fireworks. Senza seppellirne il cadavere però, perchè resta in vendita e scaricabile.
Allora noi tutti ci stiamo imparando Sketch! Un’app di grafica vettoriale indie! La fanno i ragazzi di Bohemian Coding, specialisti in apps for designers. In realtà ne hanno giusto due, e una posso dire che è carina ma non seria. L’altra è Sketch, che vuole diventare una cosa seria.
Molto scettica all’inizio, ma mi sto convincendo poco alla volta che è un’app usabile. Non nel modo in cui usavo Fireworks, e probabilmente non ci farò mai lavori $eri, però una buona app. Per workflow e capacità. Per prestazioni, non ci siamo ancora.
Per imparare Sketch, proprio le cose elementari come dove è quale comando, come realizza quale funzione, mi sono messa a disegnare Cheep.app. Sketch vuole essere usato per fare UI. Mi sono messa a pensare, uhm, a come lo farei io un client Twitter. E sono partita ad abbozzarlo. Divertente! Vedere quali sono le cose che devi prendere in considerazione quando disegni una UI (e il 90% mi sfuggirà, avendo io 0 esperienza). Per gioco. La prima cosa in cui mi sono persa appena dopo aver abbozzato il primo rettangolo è stata andare a vedere le varie apps Twitter (ma anche i client ADN, è uguale) come risolvevano le problematiche più basilari (e non ho detto banali): scelta del font, spazi bianchi, layout generale, colori. E lì ho capito che la griglia che preferisco è quella che mette sulla stessa colonna a sx le profile pics, e in una colonna a destra il tutto il testo, in 3 livelli: sopra nome + eventuale retwittatore a sx e time stamp a dx, in mezzo il tweet, sotto un footer con metadati (geolocalizzazione, indicazione se il tweet appartiene a un thread, e forse indicazione del fav, ma questo credo possa essere risolto in più modi). Tipo Tweetbot, più o meno, come layout generale, e l’opposto di Twitterrific, che adotta una griglia tutta diversa e che io trovo brutta, troppi spazi vuoti (ma Twitterrific ha anche altre brutture). Insomma come riferimento ho preso questi due client. Di Twitterrific salvo la giocosità generale, l’ariosità, queste cose mi piacerebbe vederle nel mio client (oh LOL). Di Tweetbot boccio la condensazione estrema degli spazi, a cui contribuisce in buona parte l’uso del bold per alcuni elementi (timestamp, footer). È anche vero però che questo bold mette in risalto dati che poi visivamente aiutano la leggibilità e la lettura stessa della timeline. Ogni scelta sacrifica qualcosa. In Twitterrific nessun elemento viene messo in vero risalto, tranne il nome dell’utente tipo strillone. È pensato per un altro uso di Twitter, con una timeline poco affollata. Ma Twitter non è ADN. Se un utente che mi interessa scrive qualcosa, in Twitterrific difficilmente ci faccio caso se scorro la TL in modo veloce (non aiutano gli avatar piccoli).
Con questo quadro generale di riferimento, mi sono messa a disegnare e questo è il risultato di due giorni di lavoro. Ci ho messo un sacco di tempo a trovare kit già pronti con i glifi e poi ricavarmeli, perchè in vettoriale bello e pronto non ho trovato niente. E un bel po’ di tempo a costruirmi la griglia. Insomma non cose complesse ma che prendono tempo e richiedono pazienza. La navigation bar è un elemento che da il tono generale dell’opera, credo, e quindi i colori e il gradiente che scegli sono fondamentali per costruire il feeling dell’app. Ho optato per un gradiente morbido in toni scuri e neutri, altre tonalità (a me piacciono marroni e beige, tipo) mi sembravano appesantire il tutto. Anche per il colore di sfondo della TL ho optato per un bianco secco, dopo aver provato qualcosa sull’avorio (buono per la leggibilità di testi lunghi, non di testi brevi, in questo caso stanca, mi è parso). Anche per il testo nero deciso ma non #000000 (mai!). Per i test cliccabili (url, hashtags, usernames) un solo colore, un celeste vibrante ma non acido (Twitterrific è acidissimo). Ma questo forse va rivisto, c’è il rischio di avere tweets tutti in celeste. Tweetbot adotta colori diversi per username (blu scuro poco saturo), hashtag (grigio) e url (blu più chiaro e saturo). Ha senso, non è bellissimo esteticamente ma funziona. Nel complesso, la funzionalità di Tweetbot è eccellente e vorrei replicarla (sempre risate), senza la sua pesantezza.
Tornando alla navigation bar, due cose: l’avatar circolare e il font. La forma circolare è un po’ una moda, ma l’ho vista applicata per la prima volta, come bottone nella tool bar in basso, in Twiggy, un client ADN, e m’è piaciuta. In Cheep.app la sua funzione dovrebbe essere quella di passare da un account all’altro (la funzione che ha in Tweetbot, selezionare le liste, per me è pleonastica, non la uso). Accanto a questa icona circolare, il nome dell’app, perchè mi pare inutile scriverci “Timeline” come in Tweetbot e perchè che account hai selezionato lo vedi dall’avatar, quindi risparmi una scritta. O puoi utilizzarla per altro, qui il nome dell’app in un font un pochino à la Dribbble (Dribbble usa Wendy, questo è Confetti). Funzione puramente decorativa. E in ultimo l’iconcina per scrivere un tweet. Semitrasparente, discreta, di sonoro o rumoroso sulla nav bar c’è l’icona-avatar e il la scrittina Cheep con font fru fru. Però non so se un elemento del genere non meriti di essere maggiormente messo in risalto. Ah, non so non so. Ti perdi in queste pippe :))
Per il poco altro che rimane, questa bozza di TL view, diciamo che gli avatar hanno un bordo per non essere proprio piatti, ma non so se mi dispiacciono piatti (come li ha Twitterrific), so solo che il bordino esterno grigiastro di Tweetbot è grezzo. Il font usato è Proxima Nova (c’è anche in Twitterrific), morbido morbido. La grandezza dei vari elementi deve essere tale che in una schermata visualizzi massimo massimo 5 tweet. Avevo provato inizialmente col font più piccolo, ma poi una volta portato su iPhone (con Skala) risultava troppo piccolo. Per far risaltare i tuoi tweet, invertiamo la posizione dell’avatar, credo basti. Per risaltare le mentions, devo ancora vedere :)) Forse il classico sfondo in tonalità diversa. Devo valutare l’impatto ambientale di una barra laterale di pochi pixel con un colore bello forte in gradiente orizzontale (potrebbe essere buono anche per marcare i fav, un giallo intenso).
Ho scritto un papello! Eppure con così poca roba. Tutto st’entusiasmo quando in realtà sto reinventando la ruota :))
