Contenuto
- Una metodologia reattiva
- Come mantengo prima i contenuti?
- Perché?
- 01. Definisci i tuoi obiettivi di business e utente
- 02. Fai riferimento a loro ogni volta che ne hai la possibilità
- 03. Non aver paura di respingere
- 04. Spingi anche la tua squadra
- 05. Definisci in anticipo tutte le tue esigenze di contenuto
- Come si astraggono i contenuti dalla presentazione?
- Dobbiamo smetterla di pensare ai contenuti in termini di layout
- Forza i tuoi clienti a pianificare i loro contenuti indipendentemente dal design
- Finalizza i tuoi contenuti prima della progettazione
- Usa contenuti reali, ogni volta
- Quindi come funzionano i wireframe per i progetti di responsive design?
- Schizzi
- Framework nel browser
- Annotazioni
- Usa contenuti reali in wireframe
- Come si progetta prima per schermi piccoli?
- Disegni astratti dai dispositivi all'inizio
- Usa le tessere stile
- Crea l'armonia dell'interfaccia
- Visualizza tutto nel browser
- Trova un equilibrio con programmi statici
- Conclusione
Sia chiaro: il design è la soluzione solo se si concentra sulle questioni più profonde a portata di mano, sul perché dietro a tutto. Un processo solido dovrebbe sempre guidare il nostro lavoro, ma dobbiamo abbracciare qualcosa di più flessibile. Il nostro mezzo si è finalmente dimostrato fluido, quindi non dovrebbe essere il nostro processo? Pensa alla progettazione del sistema: devi vedere sia l'intera immagine che i piccoli dettagli. Impossibile? Lontano da esso!
Frank Chimero lo mette magnificamente nel suo libro The Shape of Design: “C'è una parte in cui l'artista fa un passo indietro dal cavalletto per ottenere una nuova prospettiva sul lavoro. La pittura è in parti uguali vicino e lontano: quando è vicino, l'artista lavora duramente per lasciare il segno; quando lontano, valuta il lavoro per analizzarne le qualità. Fa un passo indietro per lasciare che il lavoro gli parli. "
Dobbiamo lasciare che il nostro lavoro, il nostro mezzo, ci parli. Con l'avvento del responsive design, stiamo finalmente abbracciando il nostro mezzo per come doveva essere: fluido. È un momento fantastico per fare un passo indietro e valutare il lavoro, analizzare e abbracciare un nuovo modo di fare le cose, un nuovo processo. Sono finiti i giorni dei modelli statici e dei web designer che non capiscono il codice. È tempo per un processo reattivo.
Una metodologia reattiva
Riveleremo il grande segreto per un processo solido proprio all'inizio di questo articolo. Perché siamo pazzi così. Pronto? Un processo reattivo è un processo responsabile. Vago? Può essere. Sciocco? No. Come il movimento degli standard web prima di esso, il responsive design sta spingendo il web in avanti con metodi orientati al futuro.
Come ogni processo di progettazione, dovrebbe concentrarsi sul "perché" alla base di tutto. Allora perché esistono siti web? Per fornire contenuti. Potrebbe essere basato su attività, sociale, informativo ... non importa. Tutto si riduce a questo: inizia con il perché, i contenuti ben strutturati e le interazioni che contano.
Ecco le domande che sentiamo più spesso sul nostro processo di responsive design.
Come mantengo prima i contenuti?
Siamo tutti così ottimisti all'inizio di un progetto. "Prima i contenuti!" noi diciamo. "Obiettivi dell'utente! Ricorda cosa è importante! " È vero. Ma cosa vuol dire? Come si implementa un processo content-first?
Anche se lo sai (o pensi di sapere), è facile dimenticarlo man mano che un progetto avanza. I progetti a lungo termine hanno la tendenza a trascinarsi avanti e avanti (e avanti ... e avanti ...). Smettiamo di pensare al perché e iniziamo a concentrarci sul come. Ci illudiamo che i nostri progetti possano essere suddivisi in fasi separate di "scoperta" e "sviluppo" che possono esistere indipendentemente.
La verità è che dobbiamo continuare a chiederci perché, tutto il tempo. Non importa quanto pensi di sapere, non importa quanta pianificazione hai fatto: ogni volta che prendi una decisione, ogni volta che progetti un pulsante o scrivi un titolo, devi chiedere ...
Perché?
Perché lo sto facendo? Per chi è? Quale obiettivo aziendale aiuterà il mio cliente a raggiungere? Quale bisogno aiuterà i miei utenti a soddisfare? Non limitarti a conservare prima i contenuti. Tieni il motivo per primo.
Questo lo fa sembrare facile. Ma per farlo bene, dovrai spingere. Spingi i tuoi clienti e il tuo team a definire prima i loro perché. No Lorem Ipsum, no "ci arriveremo più tardi". Fai i tuoi compiti! Tutti i tuoi come devono iniziare con un solido perché. In Yellow Pencil, questo ha comportato grandi cambiamenti nel modo in cui presentiamo, stimiamo, budget e pianifichiamo i progetti. Abbiamo dovuto spingere per il budget e il tempo per fare ricerca, strategia e pianificazione solide. Potresti farlo anche tu. Ma una volta che i tuoi clienti e i tuoi team vedranno gli enormi vantaggi di definire in anticipo le esigenze dei contenuti, non guarderanno mai indietro.
Ed è nostro compito istruirli. (Leggi l'eccellente libro di Mike Monteiro Design is a Job se vuoi saperne di più su come trattare con i clienti.) I clienti possono avere difficoltà a comprendere il valore di fare tutta quella ricerca e lavorare in anticipo. E perché dovrebbero? Alla fine non ottengono nulla "finito" e troppo spesso ricevono solo una fattura e un grosso documento di Word.
Non è colpa loro, è colpa nostra. È nostra responsabilità fare un lavoro migliore per dimostrare quel valore. In ogni fase del processo, dobbiamo riportare tutto all'importantissimo perché.
Questo è particolarmente importante per il responsive design. Un sito web reattivo non richiede molto più impegno di sviluppo, ma significa molta più pianificazione. In realtà, però, è una pianificazione che avremmo dovuto fare fin dall'inizio. Assisti all'attuale ciclo di riprogettazione ogni tre anni. Vuoi continuare a farlo? Di sicuro no.
Quindi ecco tre passaggi per mantenere i contenuti prima nel processo del tuo progetto.
01. Definisci i tuoi obiettivi di business e utente
Stabilisci un elenco prioritario di obiettivi aziendali e utente per il tuo progetto. Cosa vogliono o fare di più i tuoi utenti? Fai la tua ricerca. Fai inferenze informate, non ipotesi selvagge. Fai in modo che tutti i tuoi stakeholder siano d'accordo.
02. Fai riferimento a loro ogni volta che ne hai la possibilità
Ogni volta che prendi una decisione, ogni volta che qualcuno propone una nuova funzionalità o un nuovo elemento di design, o una pagina di contenuto, convincilo a mappare la richiesta a un obiettivo aziendale e utente. Quale reale esigenza soddisferà questa caratteristica? Qual è il vero motivo? (Suggerimento: "Perché voglio" o "Mi piace molto il blu" o "Tutti sono su Facebook" non contano.)
03. Non aver paura di respingere
Questo può essere difficile. Le relazioni con i clienti possono essere delicate e si può essere tentati di rinunciare alla battaglia per vincere la guerra. Ma ricorda, siamo tutti in questo insieme! Non è business vs utente; noi contro loro.
Soddisfare le esigenze degli utenti è il modo migliore per soddisfare le esigenze aziendali. Perché senza i nostri utenti non abbiamo un'attività! I clienti (buoni clienti) non ti stanno assumendo per dire "sì" a tutto. Quindi, se il tuo cliente chiede qualcosa che non soddisferà i suoi obiettivi o le esigenze dei suoi utenti, non aver paura di sfidarli. Non si tratta di ego. Si tratta di creare la migliore soluzione possibile.
04. Spingi anche la tua squadra
Questa può anche essere una sfida quando si lavora all'interno di un team creativo. La separazione dei ruoli - design visivo, esperienza utente, architettura dell'informazione, strategia dei contenuti, produzione di contenuti - può portare a problemi di comunicazione. Ci diamo da fare, siamo sopraffatti dalle e-mail. È difficile rimanere con un progetto dall'inizio alla fine, soprattutto una volta che il "tuo" lavoro è finito.
Il rapporto del tuo team è importante almeno quanto il tuo rapporto con il cliente. Dobbiamo ricordare a noi stessi il perché, proprio come facciamo con i nostri clienti. La collaborazione è fondamentale. Non puoi semplicemente "consegnare" un piano di contenuti, wireframe o progetti. Per quanto possibile, dobbiamo lavorare mano nella mano. È facile "finire" un risultato finale e passare a qualcos'altro. È molto più difficile rimanere con un progetto quando il gioco si fa duro.
Un approccio a cascata al lavoro creativo semplicemente non funziona. Il lavoro agile e collaborativo tra i membri del team porta a risultati migliori.
05. Definisci in anticipo tutte le tue esigenze di contenuto
Ecco il punto: la pianificazione dei siti web reattivi richiede più tempo. Non stiamo più pianificando solo un singolo contesto. Stiamo pianificando tutti i contesti che conosciamo ora e alcuni che ancora non esistono.
Ma ci vuole molto meno tempo per pianificare tutte quelle complessità in anticipo che per tornare indietro e aggiornare caratteristiche e funzioni di cui non avevi tenuto conto. Quindi dedica tempo / impegno / budget. Forza i tuoi clienti e il tuo team a definire (e impegnarsi a!) Tutti i loro contenuti prima di entrare nel design. Usa le tabelle delle pagine. Usa contenuti strutturati. Rendi i tuoi contenuti a prova di futuro ora! O piangere più tardi.
Come si astraggono i contenuti dalla presentazione?
Lo si sente molto in giro per Internet. Ma aspetta, cosa? E aspetta - perché?
Perché la presentazione può (e cambierà). Il modo in cui abbiamo progettato i siti Web 15 anni fa è quasi irriconoscibile da come li presentiamo ora. Ma sai cosa non è cambiato? Parole. Li usiamo ancora. Internet esiste principalmente per i contenuti (basati su testo). Lo usiamo ancora per risolvere problemi di informazione; per portare a termine compiti. Ma se il tuo contenuto dipende da un mezzo di presentazione (pagine introduttive in Flash, qualcuno?), C'è una reale probabilità che non sarà utilizzabile in pochi anni. E questo fa schifo.
Dobbiamo smetterla di pensare ai contenuti in termini di layout
Noi (come industria) abbiamo addestrato i nostri clienti a pensare ai contenuti in termini di layout. "Mettilo nella barra laterale", diciamo. "Dovrebbe andare a piè di pagina." Fermare! Smettila. Fermare. Non si tratta di posizione. Si tratta di priorità. Qual è il contenuto più importante per i tuoi utenti? Perché indovina un po ': il layout cambia a seconda dei contesti. Non ci sarà (probabilmente) una barra laterale sul design del tuo piccolo schermo.
Il gigantesco super menu che vuole il tuo cliente? Non volerò su un iPhone.
Forza i tuoi clienti a pianificare i loro contenuti indipendentemente dal design
Ok, non devi forzarli. Incoraggiarli. Incoraggia fortemente. Le tabelle delle pagine sono ottime per questo. Se non l'hai già letto, passa immediatamente a Content Strategy for the Web di Kristina Halvorson e Melissa Rach per ulteriori informazioni su come crearli. Organizzali in ordine di priorità. Non fare riferimento alla posizione o al layout. Ciò aiuterà i tuoi clienti a pensare ai loro contenuti in modo più produttivo e muoverà anche il processo di creazione del contenuto, prima dei wireframe o della progettazione finalizzati.
Finalizza i tuoi contenuti prima della progettazione
Ok, non è sempre possibile. Ma maggiore è l'incertezza che puoi eliminare prima di iniziare a progettare, meno dovrai tornare indietro e cambiare le cose in seguito.
Usa contenuti reali, ogni volta
Se possibile, utilizza contenuti edge case: mostra ai tuoi clienti le pagine, le immagini ei menu più complicati. Ciò eviterà sorprese nelle fasi successive del processo, quando vedranno il loro contenuto più disordinato nel prodotto finito.
I wireframe funzionali all'interno del browser fanno la differenza. Consenti ai tuoi clienti di osservare i loro contenuti muoversi e cambiare su una gamma di dimensioni dello schermo. Fallo notare mentre presenti i tuoi wireframe (stai facendo presentazioni di persona, giusto?) Dimostra loro come la priorità delle loro informazioni rimane la stessa su tutte le dimensioni dello schermo, mentre il layout cambia.
Quindi come funzionano i wireframe per i progetti di responsive design?
Crediamo fermamente che il design dell'interazione per RWD debba entrare nel browser rapidamente e spesso. È praticamente impossibile creare un documento statico che descriva tutto. Certo, potremmo creare un documento che dimostri tre, quattro o cinque punti di interruzione, ma questa è solo una frazione della storia. E tutti i momenti tra i punti di interruzione? Ciò accade nel browser.
Schizzi
Tuttavia, è bene essere in grado di abbozzare rapidamente le tue idee in modo collaborativo. Non è necessario che ciò accada in nessun mezzo particolare, ma c'è solo qualcosa nella matita su carta. Il punto qui è ottenere idee rapidamente e in modo iterativo. Ci piace fare sketchboard quando possibile, e c'è anche un'app per questo: UI Sketcher.
Framework nel browser
Ecco il vero biglietto per noi. Ci piace riutilizzare modelli e sistemi durante la dimostrazione di RWD nel browser. Ovviamente, potremmo creare il nostro sistema da zero ogni volta, ma questo non aiuta né noi né i nostri clienti.
Ci piace anche utilizzare framework di prototipazione rapida e reattiva come Bootstrap di Twitter o Zurb’s Foundation. Siamo personalmente propensi a Foundation perché si adatta al nostro flusso di lavoro. Sarebbe fantastico se uno dei due adottasse un approccio con uno schermo piccolo e una larghezza di banda ridotta, ma è così che procediamo.
Annotazioni
Le annotazioni per i wireframe RWD sono essenziali ma, troviamo, spesso vengono trascurate. Dillo ad alta voce: documentazione, documentazione, documentazione! Abbiamo visto alcuni esempi di questo da amici e pensiamo che la giuria sia ancora fuori sul modo "migliore" per annotare correttamente i wireframe reattivi nel browser. Come accennato in precedenza, utilizziamo regolarmente Foundation di Zurb e ci piace utilizzare il suo componente aggiuntivo Reveal per visualizzare le nostre annotazioni. Queste annotazioni vengono visualizzate solo per schermi più grandi e idealmente possono essere attivate e disattivate.
Usa contenuti reali in wireframe
Si è discusso molto su Lorem Ipsum in wireframe e modelli di design, ma se non hai contenuti reali nei tuoi wireframe, stai sbagliando. Il contenuto informa le decisioni di interazione e ti dice quando un progetto si interromperà. Come può Lorem Ipsum farlo?
Come si progetta prima per schermi piccoli?
Per anni abbiamo progettato con una risoluzione specifica in mente. Era un'impostazione predefinita. Che si tratti di disegnare su taccuini, wireframing in OmniGraffle, lavorare in Photoshop o progettare nel browser, sapevamo quali sarebbero state le dimensioni della nostra tela. Quei giorni sono andati. Crediamo fermamente nel progettare prima per il piccolo schermo e nel migliorare progressivamente. Quindi come fa un designer a cambiare il proprio flusso di lavoro da una dimensione della tela fissa a una fluida?
Disegni astratti dai dispositivi all'inizio
A meno che non stiamo progettando per un dispositivo specifico, è essenziale smettere di pensare ai dispositivi e iniziare a pensare alle esperienze. Tutte le seguenti tecniche aiutano i progettisti a creare le loro esperienze pur essendo in grado di rimanere indipendenti dal dispositivo (fino a un certo punto).
Usa le tessere stile
Usa le tessere stile per stabilire la direzione e iterare rapidamente. Style Tiles consente a un designer di definire la direzione di un sistema di design senza essere troppo specifico. Il loro creatore, Samantha Warren, li descrive in questo modo:
“Le Style Tiles servono quando un moodboard è troppo vago e una composizione è troppo letterale. I riquadri stile stabiliscono una connessione diretta con gli elementi dell'interfaccia effettivi senza definire il layout. "
Crea l'armonia dell'interfaccia
Immagina una tela con tutti gli elementi visivi e interattivi messi insieme. Non per vedere un particolare layout dell'interfaccia utente, ma per vedere come funzionano tutti gli elementi insieme. Questa è una tela di armonia dell'interfaccia. Una tela di armonia dell'interfaccia consente a un designer di tenere insieme le idee, ma non di concentrarsi su una dimensione dello schermo. Inoltre, è un ottimo modo per comunicare e documentare in modo efficiente gli elementi progettati piuttosto che produrre una guida di stile completa.
Se sei interessato a leggere ulteriormente, puoi trovare due ottimi articoli sul tema dell'armonia dell'interfaccia qui e qui.
Visualizza tutto nel browser
Tutto deve essere riunito nel browser. È qui che il design dell'interfaccia utente prende vita. Vedere come il contenuto reale interagisce con gli elementi visivi è fondamentale. Non c'è modo di farlo correttamente in un ambiente statico. Devi vedere come risponderà nel mezzo nativo.
Trova un equilibrio con programmi statici
C'è un flusso tra il browser e programmi statici come Photoshop. Ci dovrebbe essere un equilibrio che permetta di creare il sistema di progettazione in modo fluido e naturale. Certo, questo accadrà in Photoshop, ma un designer che progetta in modo reattivo deve imparare a pensare in modo creativo anche nel browser.
Conclusione
Ancora una volta, con il sentimento: inizia dal perché, con contenuti ben strutturati e interazioni che contano. Concentrati prima sullo schermo piccolo e sulla larghezza di banda ridotta e migliora progressivamente i tuoi concetti reattivi. Il nostro mezzo sta diventando maggiorenne. Abbiamo la possibilità di fare le cose per bene e cambiare il mondo, un progetto web alla volta.
Scopri i 20 migliori strumenti di wireframing per i progettisti
Steve Fisher coordina la ricerca, l'analisi, la progettazione e la strategia presso Yellow Pencil in Canada e parla su argomenti come RWD, UX e open source. Alaine Mackenzie è una content strategist presso Yellow Pencil.
