I 5 migliori strumenti per il design reattivo
Vorrei iniziare dicendo questo, non includerò alcun tool di progettazione point-and-click in questa lista (si pensi ad Adobe Edge Reflow). La ragione è abbastanza semplice, credo che siano cattivi per tutti; designer, clienti, programmatori ... tutti soffrono.
Non è una questione di qualità del codice prodotto da questi programmi. Non è perché rende il design "troppo facile". È perché non importa quanto siano buoni questi programmi, limiteranno sempre le persone che li usano.
Saranno limitati, nemmeno da ciò che il programma può realizzare, ma da ciò che pensano di poter realizzare. Se ci pensano, l'utente medio probabilmente lo confronterà con strumenti come PowerPoint e / o un numero qualsiasi di programmi di progettazione di stampa, ricadendo ancora una volta nella vecchia mentalità. Qui sta il problema. Gli strumenti di pubblicazione Web visivi cercheranno sempre di applicare i vecchi processi alle nuove tecnologie.
Un flusso di lavoro veramente orientato al web è uno che abbraccia i concetti e le tecnologie sottostanti su cui è costruito il web. Certo, puoi utilizzare qualsiasi numero di strumenti visivi per creare siti web tecnicamente reattivi, ma ti mancherebbe il punto.
Non si tratta di un layout adattabile. Si tratta di rendere le informazioni accessibili a quante più persone possibile. Ci sono alcune cose che un programma come Edge Reflow non può fare. In breve, è necessario scrivere codice.
Pertanto, gli strumenti migliori per aiutarti nella progettazione reattiva sono quegli strumenti che ti aiutano a comprendere e utilizzare le tecnologie web, a pianificare accuratamente il tuo sito Web, a scrivere codice migliore in modo più efficiente ea testare / presentare i tuoi modelli reattivi ai clienti nel contesto.
Iniziamo con l'ovvio:
1) Il tuo browser
No. Non sto scherzando. Questo è letteralmente lo strumento più importante che hai, perché ti mostra esattamente come appare il tuo sito web nelle tue condizioni specifiche.
Si è discusso molto se progettare o meno nel browser è meglio che progettare in un editor di immagini come Photoshop o GIMP. Permettimi di risolvere questo per te ...
Gli utenti del tuo sito Web faranno la loro navigazione in Photoshop? Gli editor di immagini possono creare belle immagini, non emulare esperienze reali. Usa editor di immagini per modificare le immagini. Usa il tuo browser per progettare siti web.
È tempo di svezzare i nostri clienti dai mockup iper-dettagliati a cui si sono abituati. Mentre il web cambia e i nostri processi diventano più fluidi e iterativi, dobbiamo andare avanti.
Installa almeno un browser con tutti i principali motori di rendering e ottieni alcune estensioni per sviluppatori. Abituati a guardare il tuo codice sorgente nel modo in cui il tuo browser lo vede, perché sarai qui per un po '.
2) App di disegno di Google Drive
Tecnicamente, praticamente qualsiasi editor di immagini basato su vettori potrebbe fare il lavoro quando si collegano i tuoi siti web e le tue app. Io tendo a cablare prima la versione desktop del mio sito, creare una copia del file, ridimensionare la tela e andare da lì. L'uso dei vettori semplifica il ridimensionamento e il ridimensionamento rapido degli elementi mentre sei ancora in fase di pianificazione.
Preferisco l'app di disegno Google Drive Per un paio di ragioni:
Funzionalità di condivisione e collaborazione: Google condivide le informazioni meglio di chiunque altro. Sono innamorata del commento contestuale, della modifica simultanea e dell'integrazione dell'Hangout.
Guide automatiche: in ciascun documento di disegno, le guide vengono create automaticamente in base alle dimensioni di ciascun oggetto inserito nel documento. Ciò semplifica la rappresentazione di elementi di dimensioni coerenti nel documento, il che è ottimo per i progettisti ossessionati dalla griglia come me.
Poiché condivido questi wireframe con i clienti, questa coerenza dall'aspetto professionale è un grande vantaggio. Eppure, non sono costretto a quelle guide. La vedo come una buona alternativa alle app di mockup che cercano di vincolarti a una griglia.
Oh, ed è gratuito. Devo dire di più?
3) Prototipi di stile
Basato su piastrelle di stile, Prototipi di stile sono un deliverable all'interno del browser progettato per aiutarti a dare ai tuoi clienti un'idea di come appariranno la tipografia, il colore e gli elementi dell'interfaccia utente del loro sito web. Dal momento che è pensato per essere visualizzato nel browser, ci saranno meno incongruenze una volta creato il sito web.
Inoltre, direi che i prototipi di stile potrebbero aiutare i nostri clienti a separare mentalmente i concetti di UX ed estetica. E davvero, tutto ciò che aiuta i nostri clienti a capire meglio il processo di web design non può che essere una buona cosa.
4) Responsinator
Responsinator è un semplice strumento che mostra il tuo sito web in diverse dimensioni. Imita, in modo molto semplice, diverse dimensioni e contesti del dispositivo. Questo strumento non è a tuo vantaggio. Vuoi vedere come appare il tuo sito web a dimensioni più piccole? Ridimensiona la finestra del tuo browser. Ancora meglio, prendi alcuni dispositivi mobili e esegui veri test.
Questa app Web è utilizzata per mostrare ai clienti una rapida approssimazione di come sarà il loro sito Web in contesti diversi da un monitor desktop o portatile.
Ancora una volta, ci sono molti strumenti che potrebbero fare lo stesso lavoro di Responsinator e, altrettanto efficacemente, suppongo. Ho scelto questo perché presenta diverse sagome di dispositivi una dopo l'altra, per una facile lettura.
5) Adobe Edge Inspect
Ora questo è per te. Se hai un laboratorio di prova mobile (e prima puoi crearne uno, meglio è) Edge Inspect sincronizzerà tutti i tuoi dispositivi per visualizzare contemporaneamente la stessa pagina. Aggiorna la pagina su un dispositivo e li aggiorna tutti.
A differenza degli altri in questa lista, questo non è gratuito. Tuttavia, se puoi permetterti di avere abbastanza dispositivi mobili per aver bisogno di una soluzione come questa, probabilmente ne vale la pena.
Conclusione
Come sempre, il tuo bene più importante è il tuo cervello. Questi strumenti, e altri come loro, possono aiutarti solo sulla tua strada. Li ho scelti perché svolgono funzioni molto specifiche che mi aiutano nella progettazione di siti reattivi. Non limitano quello che posso fare.
I migliori strumenti sono quelli che rimangono fuori strada.
Utilizzi questi strumenti? Quali sono i tuoi 5 migliori strumenti per la progettazione reattiva? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine degli strumenti via Shutterstock.