• Italiano

Translate original post with Google Translate

Di norma gli sviluppatori non sono guru del Photoshop e del design in generale e certamente odiano rifare il proprio lavoro per venir incontro alle esigenze degli esperti.
Così abbiamo deciso di segnalarvi una guida infographic pensata per i progettisti che intendono fare App per  iOS  e aiutarli spedire file corretti per lo sviluppatore.

Lo stile di infographic e’ quello di spiegare tutto con un’immagine, che vo proponiamo di seguito:

Innanzi tutto come vediamo nell’immagine e’ necessario ricordare le dimensioni dei differendi device di Apple.

Iphone e ipod touch fino alla terza generazione: 320 x 480 px / 163 PPI
Iphone4 e ipod tpuch di ultima generazione: 640 x 960 px / 326 PPI
iPad & iPad2 : 1024 x 768 px / 132 PPI
iPad 3 : 2048 x 1536 px / 264 PPI

Apple raccomanda di utilizare icone:

44×44 px per i bottoni di controllo

Un’altro suggerimento e’ quello di preparare le icone partendo da dimensioni 512 x 512 px e 1024×1024 px nel caso di iPad con retina display, facendo sempre attenzione a visonare il design quando queste vengono rimpicciolite.

Il resto dei suggerimenti sono molto piu’ chiari se leggete con attenzione cio’ che e’ segnalato nell’immagine postata sopra.

FONTE:   un post infographic, ovvero Tutto riassunto da un’immagine,   inserito nel blog FSM (http://www.funkyspacemonkey.com/ios-app-designers-guide-infographic)

• Italiano

Translate original post with Google Translate

Quando si decide di progettare un’App è sempre necessario seguire i principi di base della progettazione industriale.
Molte persone  pensano di commissionare un’app, ma quando si trovano a dover descrivere l’applicazione e quindi come la loro idea possa essere tradotta nell’esperienza dall’utente e nell’interfacia grafica (User Experience & User Interface),  si trovano impreparati e si nascondono molto spesso dietro frasi del tipo “non saprei questo è un lavoro per tecnici, pensateci voi tecnici!”.
Inutile aggiungere che quando poi i cosidetti “Tecnici” si mettono al lavoro queste persone, che non hanno vuluto delegare il concept, inizieranno a chiedere modifiche sostanziali dispensando consigli e ragguagli di ogni genere e quasi sempre solo dopo che l’app e’ arrivata alla fase finale del suo sviluppo.
E’ ben noto il concetto secondo il quale i “tecnici”, e gli ingenieri, prima costruiscono il cuore dell’applicazione e poi ci adattano il design e fanno il contrario, loro malgrado, solo se il commitment e’ valido e convincente e, sopratutto, quando questo è deciso fin dall’inzio delle fasi di progettazione.
Di norma con l’approccio “fate voi che poi vediamo” , voluto dai professionisti distratti e poco preparati,  il risultato estetico finale può risultare quantomai scadente dato che ogni ingeniere sa bene che, prima di mettersi a scrivere codice, bisogna aver chiari i principi dell’interfaccia utente unitamente alla descrizione delle funzionalità legate all’esperienza dell’utente stesso.

Alcuni sofisti mi potranno criticare per l’uso della parola “utente”, che a volte risulta poco accattivante se si pensa che alla fine gli utenti non sono altro che persone, ovvero individui utilizzatori. Questa differenza di significato delle parole mi è molto chiara, ma per semplicità comunicativa e sopratutto per necessità di traduzione preferisco usare la parola “utente” o “utilizzatore” al posto dell’ “individuo“.

10 principi per un buon design di un’app e di un prodotto

Inanzi tutto,  per citare Steve Jobs,  propongo  una delle definizioni di design che più mi ha convinto:
“Il design è l’anima che si trova al cuore di un oggetto creato dall’uomo e che gradualmente si estrinseca ai piani esteriori.”

Di certo lo stesso Jobs si ispirava ai principi di Dieter Rams, ex-designer della Braun, che ha enumerato i suoi 10 principi per un  buon design di un prodotto:

Dieter Rams e i suoi prodotti di design

• Un buon design deve essere innovativo.
• Un buon design deve rendere il prodotto utile.
• Un buon design deve essere dotato di estetica.
• Un buon design deve aiutare a capire il prodotto.
• Un buon design non deve essere invasivo, mancare di riservatezza.
• Un buon design deve essere onesto.
• Un buon design deve essere durevole.
• Un buon design è la conseguenza dell’ultimo dettaglio.
• Un buon design si deve preoccupare dell’ambiente.
• Un buon design deve contenere il minor design possibile.

Naturalmente è facile capire che questi principi si adattano sia al design dei prodotti industriali, ma anche per il design delle Applicazioni, sopratutto se queste verranno utilizzate sui prodotti che sono stati costruiti proprio secondo i buoni principi del design industriale, come lo sono tutti i prodotti Apple.

Progettare meglio, lavorare meno

Dieter Rams, creatore dei 10 principi, ha sempre espresso il suo approccio al design con la frase: “Weniger, aber besser” , ovvero “Meno, ma meglio” .
Il minimalismo , oltre ad essere molto elegante, è sicuramente il modo migliore per permettere a tutti gli utenti-utilizzatori di comprendere d’istinto il prodotto e le sue funzionalità e rende il prodotto stesso, o l’App,  amichevole all’uso (user friendly) e “puro”.

Di seguito riporto i commenti , tradotti dall’inglese, dello stesso Rams sui principi da lui stesso enunciati:

1.  Le possibilità d’innovazione non sono esaurite. Lo sviluppo tecnologico offre sempre nuove opportunità per il design innovativo. Ma il design innovativo si sviluppa sempre assieme alla tecnologia innovativa, e non può mai essere fine a se stesso.
   (The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself )
2. Un prodotto viene acquistato per essere utilizzato. Esso deve soddisfare determinati criteri, non solo funzionali, ma anche psicologici ed estetici. Un buon design sottolinea l’utilità di un prodotto, mentre trascura tuuto ciò che potrebbe sminuirla.
   (A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it. )
3. La qualità estetica di un prodotto è parte integrante della sua utilità, perché i prodotti che utilizziamo ogni giorno influiscono sulla nostra persona e il nostro benessere. Ma solo gli oggetti ben costruiti possono essere belli.
   (The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.)
4. Chiarifica la struttura del prodotto. Meglio ancora, si può far parlare il prodotto. Meglio se esso è auto-esplicativo.
   (It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.)
5. I prodotti che soddisfano un fine sono come strumenti. Non sono né oggetti decorativi, né opere d’arte. Il loro Design dovrebbe quindi essere sia neutrale che sobrio, per lasciare spazio all’auto-espressione dell’utilizzatore.
   (Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.)
6. Non costruire il prodotto in modo da farlo apparire più innovativo, potente o importante di quanto sia realmente. E non tentare di manipolare il consumatore con promesse che non possono essere mantenute.
   (It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.)
7. Evita di seguire la moda ma non appare mai antiquato. A differenza del design “alla moda”, il prodotto deve durare per molti anni – anche nella società dell’usa e getta di oggi.
   (It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.)
8. Nulla deve essere arbitrario o lasciato al caso. La cura e la precisione, nel processo di progettazione, mostrano il rispetto nei confronti dei consumatori.
   (Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.)
9. Il Design offre un importante contributo alla salvaguardia dell’ambiente. Esso conserva le risorse e riduce al minimo l’inquinamento fisico e visivo durante tutto il ciclo di vita del prodotto.
   (Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.)
10. Meno, ma meglio – questo perchè ci si concentra sugli aspetti essenziali, e i prodotti non sono appesantiti da elementi non essenziali. Torna alla purezza, torna alla semplicità.
    (Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials.Back to purity, back to simplicity.)

Valutazione Euristica

A questo punto non mi resta che descrivere anche la cosidetta valutazione euristica.
La Valutazione Euristica è un metodo ispettivo che viene effettuato esclusivamente dagli esperti di usabilità  e consente di valutare se una serie di principi generali di progettazione sono stati applicati correttamente nell’interfaccia utente.
Le linee guida (“Ten Usability Heuristics”) su cui si basa questo tipo do valutazione sono state sviluppate negli anni 1990 da Jakob Nielsen e Rolf Molich e sono state pensate per i desktop software , ma anche in questo caso questi principi sono ancora validi per le applicazioni studiate per touchscreen, come le App iOS per iPhone e iPad ,  per le  app Android e Window Mobile.

• Italiano

Translate original post with Google Translate

L’icona di avvio (launcher icon) è un elemento grafico che rappresenta la nostra applicazione. Le icone di avvio vengono utilizzate per avviare le applicazioni e appaiono sulla schermata iniziale del dispositivo utente.
Le icone di avvio possono essere utilizzate anche per rappresentare i collegamenti (shortcuts) nella vostra applicazione (ad esempio, un’icona di collegamento contatto permette di aprire le informazioni di dettaglio per un contatto).

Quando si disegna per Android è necessario creare le icone separate per tutti i diversi display presenti sul mercato dei device che montano android gli , schermi che hanno diverse densita di pixel potranno essere a bassa, media, alta e altissima densità. Questa differenziazione assicura che le icone verranno visualizzate correttamente in tutta la gamma di dispositivi su cui l’applicazione può essere installata. Vedere Tips for Designers (Suggerimenti per i progettisti) su come lavorare con più set di icone.

Obiettivi del icona di avvio
Esempio di launcher icons per sistemi e applicazioni di terze parti

Esempi di Icone di avvio (laucers icons) per OS Android

Figura 1. Esempi di launcher icons per system applications (sinistra) e applications di terze parti (destra).

Le icone di avvio dell’applicazione hanno tre obiettivi primari:
a. Promuovere il marchio e raccontare la storia delle app.
b. Aiutare gli utenti a scoprire l’applicazione in Android Market.
c. Permettere l’avvio dell’App.

a) Promuovere la storia del marchio
Le icone di avvio applicazione sono l’occasione per presentare il marchio e la storia della vostra applicazione .
Pertanto, si dovrebbe:

• Creare un’icona con uno stile unico e memorabile.
• Utilizzare una combinazione di colori che si adatta il vostro marchio.
• Non cercate di comunicare troppo con l’icona. Una semplice icona avrà più impatto e più memorabile.
• Evitare di includere il nome dell’applicazione nell’icona. Il nome della applicazione sarà sempre visualizzato accanto all’icona.

b) Aiutare gli utenti a scoprire l’applicazione in Android Market
Le icone di avvio fornicono una prima impressione agli utenti potenziali in Android Market. Un icona di alta qualità può influenzare gli utenti che scorrono gli elenchi di applicazioni.

Un icona ben progettata può essere un segnale forte che la vostra applicazione sarà di qualità altrettanto elevata. Consideriamo quindi di lavorare con un designer professionista per sviluppare un’icona di avvio per la nostra applicazione.

c) Funzionare e pemettere l’avvio
Un’icona di successo dovra’ essere ben definita in tutte le situazioni: su qualsiasi sfondo e accanto ad altre icone e widget app.

Per fare questo, le icone dovrebbero:

• Comunicare bene anche dimensioni ridotte.
• Lavorare con una vasta gamma di sfondi.
• Rispecchiare il tipo di illuminazione del laucher (top-lit).
• Se l’icona è 3D, utilizzare una prospettiva che non sia fuori luogo con le altre icone, forward-facing (rivolte in avanti) funziona meglio.
• Icone 3D funzionano meglio con una ridotta profondità.
• Avere un profilo unico per rendere veloce il riconoscimento, non tutte le icone Android app devono avere dimesioni quadrate.
• Le icone non dovrebbero presentare un quadro ritagliato di un’immagine più grande.
• Avere un peso simile ad altre icone. Le icone che sono troppo sottili o che non utilizzano abbastanza spazio spesso non attirano l’attenzione dell’utente, o possono non stare bene in tutti i contesti/background.

Dimensioni e formato
Le icone di avvio dovrebbero essere a 32-bit PNG con un canale alfa per la trasparenza. Le dimensioni finali un’icona di avvio corrispondente a una data densità dello schermo sono riportate nella tabella sottostante.

Table 1. Summary of finished launcher icon dimensions for each generalized screen density.
Tabella 1. Sommario delle dimensioni dell’icona per ogni densità schermo.

È anche possibile includere pochi pixel di padding (imbottitura) nell icone di avvio per mantenere un peso costante visivo con le icone adiacenti. Ad esempio, un’icona di avvio a 96 x 96 pixel xhdpi può contenere una forma 88x 88 pixel con 4 pixel su ogni lato per padding. Questa imbottitura o padding può essere utilizzata anche per fare spazio a un’ombra sottile, che può aiutare a garantire che le icone di avvio siano leggibili in tutto su qualsiasi colore di sfondo.
Icone delle applicazioni in Android Market
Se si pubblica l’applicazione su Android Market, è necessario fornire anche un icona artwork di 512 x 512 pixel ad alta risoluzione. Questa icona sarà utilizzata in Android Market e non sostituisce l’icona di avvio.

Per suggerimenti e raccomandazioni sulla creazione di icone ad alta risoluzione di avvio che può essere facilmente scalata fino a 512×512, si possono vedere Suggerimenti per Designer sul sito Android Developer (Tips for Designers).

Per informazioni e specifiche sulle icone ad alta risoluzione per l’applicazione in Android Market, vedere anche il seguente articolo:
Graphic Assets for your Application (Guida di Android Market)

Cosa fare e cosa non fare
Di seguito sono riportati alcuni esempi presi dalla guida Android developers su come “fare e non fare” , sono esempi da prendere in considerazione quando si creano le icone per l’applicazione.

Disegno Troppo complicato ? Semplificare le icone non dovrebbe essere eccessivamente complicato. Ricorda che le icone di avvio saranno utilizzate a dimensioni spesso piccole, quindi dovrebbero essere distinguibili a dimensioni ridotte.

Icona ritagliata e opaca (cropped and glossy) ? Le icone non devono essere tagliate. Utilizzare forme uniche, se del caso, ricordate che le icone di avvio dovrebbe differenziare la vostra applicazione. Inoltre, non usare troppo lucido (glossy) a meno che l’oggetto rappresentato è un materiale lucido.

Troppo sottile? Le icone non devono essere sottili. Dovrebbero avere un peso simile a quello altre icone. Le icone troppo sottili non si distinguono bene con tutti i background.

Full-frame oppure sottilmente arrotondati e trattati ?Le icone dovrebbero utilizzare il canale alfa, e non dovrebbe essere semplicemente delle immagini full-frame. Distinguere , quando possibile, la propria icona con un lieve ma accattivante trattamento visivo.

fonte: libera traduzione dalle Android Guidelines

• Italiano

Translate original post with Google Translate

Pasticcini alle icone di iOS

Le icone e le immagini sono una parte fondamentale l’esperienza degli utenti iOS.
Lungi dall’essere un’elemento puramente decorativo, le icone e le immagini nelle nostre applicazioni svolgono un ruolo essenziale nel comunicare con gli utenti.

Per ottenere i migliori risultati, possiamo arruolare un grafico professionista. Un progettista ed esperto grafico può aiutare a sviluppare uno stile visivo integrato per la vostra applicazione e applicare tale stile a tutte le icone e le immagini del caso.

Apple consiglia di utilizzare le immagini in stile universale in modo che la gente possa facilmente riconoscerle. Eviteremo quindi di concentrarsi su  aspetti secondari o poco visibili.

I tecnici Apple abbracciano la semplicità. In particolare, di consiglia di evitare di stipare un sacco di immagini diverse nella vostra icona. Provate a utilizzare un singolo oggetto che esprime l’essenza della vostra applicazione. Si inizia con una forma di base per poi aggiungere i dettagli con cautela. Se il contenuto di un’icona o la forma è eccessivamente complesso, i dettagli possono diventare confusi e può sembrare sfocato quando ridotto in piccole dimensioni.

L’ utilizzo dei colori e ombre leggere possono aiutare l’icona a esprimere meglio il suo ruolo. Non aggiungeremo quindi il colore solo per fare l’icona più colorata. Inoltre, graduienti regolari di solito funzionano meglio della colore diffusion

In generale, bisogna evitare di utilizzare il testo “greco” o linee ondulate per sottolineare il testo. Se si desidera visualizzare del testo nell’icona, ma non volete attirare l’attenzione sulle parole stesse, iniziare con un testo  poi renderlo piu’ leggibile con lo shirnk e/o raddoppiando i layer .

In generale, creare una versione stilizzata del soggetto piuttosto che utilizzare una foto, anche se a volte può essere opportuno utilizzare una foto (o uno screenshot) per un icona.

Se la vostra applicazione ha un’interfaccia utente molto riconoscibile, è consigliabile creare una rappresentazione di essa invece di utilizzare un immagine del software nell’icona dell’applicazione. La creazione di una versione migliorata dell’interfaccia utente è particolarmente importante in quanto gli utenti potrebbero confondere una versione più grande dell’icona con l’interfaccia stessa del app.

Evitare di utilizzare elementi di interfaccia iOS nel disegno. Non si vuole che gli utenti possano confondere le icone o immagini con l’interfaccia utente iOS.

Non usare le repliche di prodotti hardware di Apple nel disegno. I simboli che rappresentano i prodotti Apple sono protetti da copyright e non possono essere riprodotti in icone o immagini. In generale, è una buona idea per evitare repliche di tutti i dispositivi specifici nel disegno, perché questi disegni cambiano di frequente e le icone o immagini che si basano su di esse può apparire datato.

Non riutilizzare iOS icone delle applicazioni nella vostra interfaccia. Può essere fonte di confusione per gli utenti di vedere la stessa icona utilizzata per indicare cose leggermente diverse in luoghi diversi in tutto il sistema.

Ritrarre sostanze reali con precisione. Le icone che rappresentano gli oggetti reali dovrebbero apparire come se fossero fatti di materiali reali e con massa reale. Icone realistiche replicano con precisione le caratteristiche delle sostanze come tessuto, vetro, carta e metallo, e dovranno trasmettere l’idea del peso di un oggetto.

Utilizzare la trasparenza solo quando ha senso. La Trasparenza in un’immagine può aiutare a descrivere materiali come il vetro o la plastica, ma può essere complicato da usare in maniera convincente. Si consiglia quindi di non utilizzare la trasparenza nella vostra icona dell’applicazione.

• Italiano

1) Provide Launch Images

• Default-PortraitUpsideDown.png – upside-down portrait version.
• Default-LandscapeLeft.png – left-oriented landscape version.
• Default-LandscapeRight.png – right-oriented landscape version.
• Default-Portrait.png – generic portrait version.
• Default-Landscape.png – generic landscape version.
• Default.png – default portrait launch. Its usage is strongly discouraged, use more specific launch images instead.

@interface MyClassName : NSObject {
    BOOL canLandscape;
}

if (canLandscape) {
    ...dosomethinghere...
}

• Italiano

A “mock up” is a non-working prototype of a product under development, is used to define the design and normally use it to pass to the customer before starting the product development phase.

MockApp, is a free Osx software downloadable from this web site where it is possibile to obtain a collection of files and images that will allow you to make a presentation in PowerPoint or Keynote presentation and export directly to PDF format.

Here are some videos on Youtube that shows its use:

MockApp Trailer

MockApp Demo – Part 1

MockApp Demo – Part 2

• Italiano

Translate original post with Google Translate

Quando disegno un’applicazione per iPhone e  iPad, uno degli aspetti piu’ importanti per un App graphic designer è quello di disegnare icone, loghi, immagini di sfondo e di lancio (splash).
Rilevo, sopratutto confrontandomi con sviluppatori e creativi che c’e’ una grande confusione tra iPhone 3G, iPhone 3GS, iPod Touch 3, iPod Touch 4, iPhone 4 e iPad.
Esistono quindi delle differenze tra le dimensioni e il tipo di immagini che devo creare per un’applicazione o un progetto che possa essere ottimizzato per tutti i dispositivi sopra citati.

Cercando in rete ho trovato quindi una utile tabella per il nostri progetti iPhone /  iPad il cui “OS target” sia 3.2 o superiore:

Normalmente le icone  sono file in formato PNG con angoli a 90 gradi,  senza la trasparenza, senza livelli, e impostati a 72 PPI. iPhone OS arrotonda atomaticamente gli angoli, aggiunge un facoltativo effetto glossy e altri effetti.  Se non si vuole lasciare che l’iPhone / iPad OS applichi l’effetto gloss per le icone, gli sviluppatori dovranno aggiungere una chiave al info.plist chiamata UIPrerenderedIcon ed effettuare un controllo. La profondità di bit standard è di 24 bit + 8 bit alpha channel.

I progettisti e programmatori comprendono che le dimensioni degli elementi su schermi iPhone e  iPad non sono costanti. La differenza nelle dimensioni dello schermo e la funzionalità dello zoom sono un luogo comune, ma il formato PNG e 72 PPI è ancora il default.
Si noti che il formato PNG rigetta la Densità di pixel. La maggior parte degli editor di immagini, tra cui Adobe Photoshop, assumono che la densità dei pixel di un’immagine è di 72 se tale informazione non viene modificata.)

Disegnare icone per iPad può essere piu’ difficile. Alcuni progettisti rilasciano solo le icone standard per iPad poichè non riescono a comprendere che è meglio inserire anche alcune icone  di piccola dimensione, che sono comunque opzionali. Quindi è sempre meglio aggiungere delle piccole icone al progetto iPad,  nei formati di 64 × 64, 32x32px, e 24x24px 16x16px. I programmatori sapranno poi come includere questi file.

Si deve sapere che quando l’utente seleziona l’icona dell’applicazione principale l’applicazione inizia subito a caricarsi. E ‘importante rendere il tempo di lancio più breve possibile. Ogni app  iPhone e iPad puo’ avere una propria immagine di lancio (splash), che imita l’interfaccia utilizzando un’immagine statica. La splash page dovrebbe essere la più piccola possibile in modo da garantire un rapido caricamento del file. E’ quindi sempre sconsigliabile creare file di dimensioni vicine al megabyte.

Impostazione file Info.plist

Nel file Info.plist gli sviluppatori precisano gli orientamenti dell’applicazione assieme alle immagini di lancio correlate. Se manca, devono aggiungere queste righe:

Gli sviluppatori possono modificare precedenti convenzioni di naming , come spesso facciamo e possono usare il loro nome personalizzato per  icone e per lanciare i file di immagine.
Noi di norma siamo abituati a configurare le nostre applicazioni iPad in maniera diversa rispetto alle versioni iPhone, in modo da specificare i valori specifici del dispositivo per le chiavi Info.plist.
Ad esempio:

Esempio di icona e le impostazioni di immagine lancio in Info.plist per applicazioni universali. Piattaforma: iPhone OS 3.2 +

Note per gli sviluppatori:

Se l’applicazione supporta l’esecuzione di iPhone in iPhone OS 3.1.x o versioni precedenti, non è possibile utilizzare la chiave CFBundleIconFiles per specificare i file icona. È necessario creare le icone delle stesse dimensioni come indicato nella nostra tabella, ma ogni immagine deve essere chiamate come segue:

Icon.png – Icona per applicazioni per iPhone or iPod touch
Icon-72.png – Icona per applicazioni per iPad in un’applicazione Universale
Icon-Small.png - Risultati della ricerca e l’icona delle impostazioni su iPhone e iPod touch
Icon-Small-50.png – Risultati della ricerca in applicazioni iPad

Dalla versione 3.2 se si specifica un-Icon small.png o file Icon-Small-50.png nel bundle, il sistema preferisce quei file icona rispetto a quelle nella chiave CFBundleIconFiles e il sistema operativo preferisce il defination icon dell’applicazione nella chiave CFBundleIconFiles più di qualunque altra.

• Italiano

Translate original post with Google Translate

Leggendo un’interessantissimo articolo di Marc Edwards su Smashing Magazine ho deciso di citarne e tradurne le parti piu’ significative dato che spesso mi trovo a dover parlare con i clienti della effettiva necessità di progettare le proprie app tenendo conto che le tecnologie audiovisive sono in costante evoluzione.
L’iPhone 4 dispone di una risoluzione di gran lunga superiore (614.400 pixel) rispetto ai modelli iPhone precedenti e ha di fatto un display quadruplicato di 153.600-pixel  anche se lo schermo ha le stesse dimensioni fisiche, così quei punti in più sono utili per ulteriori dettagli – due volte il dettaglio in orizzontale, e due volte in verticale.

Lo Scaling dell’interfaccia utente (UI) per i display a  maggiore dettaglio – o piu’ spesso un aumento della dimensione display – non è un problema nuovo. Le interfacce che sono in grado di scalare sono dette: ” indipendenti dalla risoluzione” (resolution independence).

In un recente articolo, Neven Mrgan ha descritto l’ indipendenza dalla risoluzione: “RI [risoluzione indipendente] come obiettivo, e non come una tecnica. Significa avere contenuti e risorse che potranno essere significative in dimensioni diverse. “Se è un obiettivo, non una tecnica specifica, quindi quali tecniche esistono? Come Apple ha risolto il problema di Ios?

Layout Fluidi (Fluid Layout)

Mentre le applicazioni che sfruttano elementi  nativi dell’interfaccia utente di Apple richiedono molto meno lavoro quando le si progetta per la visualizzazione Retina, ciò che ci interessa altamente personalizzati, applicazioni grafiche-driven che necessitano di una buona dose di lavoro per sfruttare al massimo le Retina display.

Sebbene non sia strettamente indipendente dalla risoluzione, l’utilizzo di un layout liquido può aiutare a gestire un app per approfittare di uno schermo più grande  operando sul padding o modificando il layout dinamico. Moltissime applicazioni Mac, Windows e  per Linux utilizzano questo metodo, cosi’ come fanno alcuni siti web.

Questo è parzialmente cio’ che Apple ha gestito con la differenza di risoluzione da iPhone a iPad – molti elementi dell’interfaccia utente hanno la stessa dimensione in pixel, ma “padded” in modo da utilizzare la parte reale dello schermo. La barra di stato è un buon esempio di questo metodo. Funziona perché la densità dei pixel del 3GS iPhone e iPad sono simili (163ppi vs 132  ppi).

Layout fluido e’ utile o quando il cambiamento di densità di pixel è minore, ma non sono di aiuto quando si passa da un display iOS non-Retina ad uno Retina (163 ppi a 326 ppi). L’immagine seguente mostra cosa sarebbe successo se una applicazione per iPhone è stata semplicemente ridimensionata per soddisfare i display ad alta risoluzione di iPhone 4. Pulsanti e zone di touch sarebbero della stessa dimensione in pixel, ma la metà in termini di dimensioni fisiche a causa della maggiore densità di pixel, rendendo le cose più difficili da leggere e da toccare.

Just-in-time Resolution Independence

Un altro approccio per la gestione di differenti risoluzioni e densità dei pixel è di disegnare tutto utilizzando il codice o le immagini vettoriali (come i PDF), in fase di runtime. L’utilizzo del vettoriale Ti permette di designare o scrivere codice una sola volta, e per display a qualsiasi risoluzione, anche a scala frazionata.

Purtroppo, utilizzando immagini vettoriali si tende ad essere più avidi di risorse e mancanza di controllo livello di pixel. L’aumento delle risorse non può essere un problema per un desktop, ma è un problema rilevante per un sistema operativo mobile. La mancanza di controllo del livello di pixel è un vero e proprio problema per gli elementi più piccoli . Modificando delle dimensioni di un’icona di un solo pixel  si perde chiarezza.

Neven Mrgan sottolinea in suo famoso articolo che abbiamo gia citato  che:

“… Semplicemente non è possibile creare ottimi, icone dettagliate che possono essere arbitrariamente ridotte a dimensioni molto piccole, mantenendo la chiarezza. Piccole icone sono delle caricature: esagerano alcune caratteristiche, basta allineare le forme su una griglia. Anche se tutte le icone possono essere eseguite come vettori, la dimensione più grande non sarebbe mai scalata in basso bene “.

Anche se qui si sta parlando esclusivamente di icone, descrizione di Neven Mrgan è adatta per la maggior parte degli elementi dell’interfaccia utente. Le decisioni di immagini in scala sono un lavoro da creativo, non da meccanico. Gli elementi vettoriali non sono adatti per tutte le risoluzioni, se si da valore alla qualità del risultato.

Ahead-of-time Resolution Independence

I migliori risultati di qualità – e il metodo che Apple ha scelto per la transizione dal iPhone 3G a iPhone 4  – proviene da immagini pre-renderizzate, costruite per i dispositivi particolari, su risoluzioni specifiche: sviluppate  progetti su misura per ogni formato richiesto, se volete. E ‘più lavoro, ma le immagini in pre-rendering assicurno sempre il miglior risultato possibile.

Apple ha scelto di raddoppiare esattamente la risoluzione del iPhone 3GS  per l’iPhone 4, rendendo il fattore scala ancora più semplice (diverso dall’ approccio di Google e Microsoft – si noti che questo articolo non è rilevante per l’ultima versione di Microsoft sistema operativo mobile – dimostrando ancora una volta che controllare l’intero stack ha dei vantaggi enormi).

Attualmente, ci sono tre risoluzioni IOS:

* 320 × 480 (iPhone / iPod touch)
* 640 × 960 (4 iPhone e iPod con display a Retina)
* 768 × 1024 / 1024 × 768 (iPad)

In pochi anni, sembra altamente probabile che la line-up saranno:

* 640 × 960 (iPhone / iPod touch con display retina)
* 1536 × 2048 / 2048 × 1536 (iPad con display retina)
* Qualche tipo di periferica IOS desktop iMac dimensioni con un display Retina

Ci sono differenze significative tra la progettazione di applicazioni per iPhone  e per iPad, il layout delle app deve essere in parte o completamente rielaborato  in ogni caso – non si può semplicemente scalare per  iPad la vostra app per iPhone , e aspettarsi che tutto funzioni bene o sche abbia un usabiliyà su iPad. La differenza di dimensione dello schermo e il fattore di forma significano che ogni dispositivo dovrebbe essere trattato separatamente. La dimensione del dell’iPad permette di visualizzare più informazioni sullo schermo, mentre le applicazioni per iPhone in genere hanno bisogno di essere più profonde, con diversi livelli per poter fruire bene di tutte le informazioni.

• Italiano

Translate original post with Google Translate

Questa secondo articolo dedicato alla progettazione del layout per il retina display proviene sempre dalla lettura e traduzione dell’interessante articolo articolo di Marc Edwards su su Smashing Magazine

Costruire progetti scalabili

Costruire applicazioni per l’iPhone 4 display Retina prevede la creazione di due serie di immagini, un a 163 ppi e un altr a 326 ppi. Le immagini A 326  ppi dovra’ includere @ 2x alla fine del nome del file, per indicare che essi, sono al doppio della risoluzione.

Quando si tratta di costruire elementi di un interfaccia utente in grado di scalare facilmente con Adobe Photoshop, le bitmap sono il tuo nemico, perché “pixelizzano” o si sfocano quando se ne modifica la scala. La soluzione è quella di creare un colore a tinta unita, modelli o layers con maschere vettoriali (solo assicurarsi di avere “snap to pixel” attivo quando possibile).  A volte, il passaggio a tutti i vettori non ha vantaggi significativi.

Prima che qualcuno ne parli non si stanno suggerendo dei metodi nuovi, e sicuamente molti progettisti di icone è lavorano in questo modo da anni.

Di norma e’ meglio disegnare elementi semplici direttamente in Photoshop utilizzando il Tool col Rettangolo arrotondato. Disegnare cerchi utilizzando il Rounded Rectangle Tool con un raggio d’angolo molto ampio, perché lo strumento ellisse non può fare lo snap  di pixel.
I gruppi di layer possono avere maschere vettoriali , e si utlizzano per il compositing complesso (opzione-trascinare una maschera da un altro livello per creare una maschera di gruppo).

oggetti più complessi vengono trascinati in Adobe Illustrator per l’esatta dimensione dei pixel, e poi incollate in Photoshop come un shape layer. Bisogna fare attenzione quando si incolla in Photoshop, il risultati non si allineano sempre come dovrebbero – è spesso un mezzo  pixel fuori l’asse x, asse y o entrambi. La soluzione è lo zoom, bisogna scorrere il documento con lo strumento Mano e incollare di nuovo. Ripetere l’operazione fino a quando si allinea tutto. E’ esasperante, e il metodo funziona dopo alcuni tentativi. Un’altra opzione è quella di ingrandire fino al 200%, selezionare il percorso con la selezione diretta di utensili, e spostarla di una volta, fino a che si muoverà tutto esattamente 0.5px.

Anche gli oggetti più complessi, che richiedono più colori vengono disegnati in Illustrator per l’esatta dimensione dei pixel, e quindi incollati in Photoshop come oggetto avanzato. E ‘l’ultima risorsa, anche se – gradienti non sono dithered, e la modifica successiva risulterà più difficile.

Se avete bisogno di usare un bitmap per una texture, ci sono tre opzioni: usare un pattern layer, un pattern layer style, o costruire un layer bitmap con le dimensioni 2 × e poi trasformarlo in un oggetto avanzato. E’ preferibile usare pattern layer styles, nella maggior parte dei casi, ma con attenzione: i patterns vengono scalati con l’interpolazione bicubica quando si scala l’intero documento, in modo che diventino “softer “.  La soluzione è creare due versioni di ogni pattern (modello), quindi modificare manualmente il “pattern layer styles “per il modello corretto dopo la scalatura – un poco noioso, ma del tutto pratico.

• Italiano

Translate original post with Google Translate

I ragazzi di teehan+lax

Segnaliamo un’importantissima risorsa che permetterà a tutti i grafici e sviluppatori di costruire dei layot utilizzando le componenti grafiche che saranno utilizzate per il vostro progetto iPhone e/o iPad.

Spesso  allo sviluppatore arrivano files grafici da “montare” nell’app che sta progettando, non è raro che il developer riceva files le cui dimensioni in pixel , come anche la risoluzione, risulti non in linea con gli standard definiti da Apple.

Cercando sul web mi sono imbattuto in diversi file o indicazioni, e leggendo il blog Teenah+Lax ho strovato finalmente quello di cui avevo bisogno:
i ragazzi di teehanlax.com (li vedete simpaticamente nella foto) hanno superato loro stessi, mettendo a disposizione del pubblico dei files in formato Photoshop , liberamente scaricabili dal  blog, contenenti tulle le componenti della GUI di iPhone e iPad.

I file sono perdiodicamente aggiornati, di seguito i links a questa preziosa risorsa:

iPAd GUI in formato PSD dimensioni 768×1024 : segui  questo link
iPhone GUI formato psd per iPhone standard (480×320) e Retina Display (960×640):  segui questo link

Thanks to Teenah+lax guys