Accentsconagua
Share
Cosa starai creandoIn questo tutorial ti guiderò attraverso il mio processo di progettazione per la creazione di un design reattivo in Sketch. Per mantenere le cose al punto, parlerò di una pagina di destinazione reattiva che ho progettato per un'app di viaggio qualche tempo fa. Entriamo subito in esso!
Ogni progetto di design ha una sorta di impostazione. Per questo specifico, parlerò brevemente di contenuti e wireframe prima di passare al processo di progettazione reattivo in Sketch.
In genere è buona norma acquisire il contenuto prima di iniziare un progetto di design. Questo è esattamente il modo in cui comincio tutti i miei progetti (per quello che vale, fa parte del mio contratto - qualcosa che consiglio di mettere in pratica anche tu). Questo tutorial si concentra sul lato dell'interfaccia utente, omettendo le importanti domande sulla UX come il motivo per cui sono stati scelti determinati contenuti, gli obiettivi della pagina e così via.
Mentre discuti del contenuto con il tuo cliente o il tuo team, dovrai pensare ai contenuti su schermi sia piccoli che grandi. Suggerisco di scrivere prima i contenuti per dispositivi mobili, scrivere tutto in un documento Google. Quindi, apri il documento sul tuo telefono per determinare se è giusto o se ce n'è troppa. Se stai scorrendo pagine e pagine di contenuti scritti sul tuo telefono, sai che devi occupartene subito.
Sempre, non importa cosa, taglia in modo significativo i tuoi contenuti.
"Sbarazzati di metà delle parole su ogni pagina, poi sbarazzati della metà di ciò che è rimasto." -Steve Krug, Non farmi pensare
Una volta che sei soddisfatto del contenuto mobile, puoi aggiungere altro alla versione per tablet e desktop. Gli schermi più grandi hanno più spazio sullo schermo per gestire informazioni più dettagliate.
Passerai attraverso le revisioni, ovviamente. Non ti agitare troppo in questa fase. Il contenuto dovrebbe essere vicino alla finale ma non deve essere scritto nella pietra.
Per saperne di più su un approccio basato sul contenuto, leggi l'articolo di James Deer:
Accettare i contenuti per tutte le versioni del sito è il primo passo per impostare il tuo design. Ora sai cosa aspettarti. È assolutamente ok mantenere il contenuto allo stesso modo, così come è necessario che alcuni contenuti appaiano o scompaiano a seconda delle dimensioni dello schermo.
Il tipo più comune di contenuti sul Web è il testo scritto. Tuttavia, ci sono altre cose tra cui immagini e grafica (cioè fotografie o illustrazioni), video, citazioni, file audio (cioè podcast), giochi o persino contenuti incorporati attraverso iframe.
Non è necessario che tutti gli episodi di video e podcast siano inchiodati. Per lo meno avere una descrizione del contenuto visivo o uditivo. Questo è quello che ho fatto per questo cliente. Sapevo approssimativamente che tipo di grafica desideravo per ogni sezione per spiegare ulteriormente la proposta di valore di ogni sezione. Ma non avevo la grafica vera e propria al momento della discussione del contenuto. L'ho appena descritto.
Il prossimo passo è rappresentare visivamente il contenuto. Con questo progetto ho scelto di realizzare wireframe semplici, a bassa fedeltà. Volevo estrapolare rapidamente e visivamente il contenuto. Ho realizzato due wireframe, un mobile e un desktop perché ognuno di essi aveva requisiti di contenuto diversi. Entrambi ti danno un'idea generale della struttura visiva della pagina di destinazione.
Puoi usare qualsiasi strumento con cui ti trovi più a tuo agio per i wireframe, ma ho usato Sketch qui. Puoi anche creare reticoli a penna e carta a bassa fedeltà. Non importa. Potresti anche usare le tecniche discusse più avanti in questo tutorial per creare di risposta wireframe.
Passiamo alla progettazione dell'interfaccia utente reattiva con Sketch.
Semplificheremo le nostre vite se per prima cosa identifichiamo contenuti uguali per tutte le varianti e i contenuti che sono unici per schermi specifici.
In questo design, i seguenti elementi sono presenti su tutti gli schermi:
Elementi unici per diverse dimensioni dello schermo:
Perfezionare. Ora possiamo iniziare a creare questi elementi in modo appropriato.
Il mio pulsante di base per desktop e tablet è un rettangolo di 352px per 40px con un raggio di 5px. Lo sfondo è # 7455FF. All'interno delle proprietà di ridimensionamento, selezionare per bloccare l'oggetto ai suoi bordi sinistro e destro e impostare un'altezza fissa.
Il prossimo è il livello testo, la copia del pulsante, con un carattere Note Sans UI, grassetto e 16px. È bianco o #ffffff. La sua larghezza di allineamento è impostata su auto e non ci sono altre impostazioni impostate sul livello testo. Se lo desideri, puoi trasformare il pulsante in un simbolo, anche se non è necessario per questo specifico design perché il pulsante appare solo una volta su tutta la pagina.
Quando si combinano i due elementi in un gruppo (o un simbolo), si dovrebbe essere in grado di ridimensionare la larghezza del pulsante senza problemi, con il testo che rimane al centro indipendentemente dalla larghezza del pulsante.
Un'altra cosa che puoi fare è usare il plugin Anima per Sketch. Ti permette di creare schermi fluidi che si ridimensionano mantenendo le loro proprietà insieme come spaziatura, riempimento o altezza. È perfetto per i layout con le forme.
Possiamo usare Anima per incollare diversi elementi di intestazione mentre lo ridimensioniamo da mobile a desktop. Ci darà anche una buona indicazione di come questi elementi si comporteranno in relazione l'un l'altro in altre dimensioni dello schermo rispetto a quelli che stiamo progettando in-le dimensioni tra un telefono più grande o un tablet.
Tuttavia, per quello che stiamo facendo oggi, questo plugin non aggiunge troppo.
Questo design della pagina di destinazione richiede alcune voci grandi e belle. Nella versione desktop l'h1 è 72px mentre h2 è 32px. 72px è troppo per i dispositivi mobili. Dovremo rendere l'intestazione h1 reattiva. Non è così semplice come la tipografia fluida è nei CSS, ma è fattibile.
Dobbiamo creare uno stile per ogni intestazione h1, quindi salvarlo come stile di testo con la convenzione o sintassi di denominazione corretta. Questo ci permetterà di selezionare in seguito il necessario h1 come necessario durante la progettazione del resto della pagina. Non è perfetto e abbastanza manuale, ma così via.
Per h1 questi sono i seguenti stili: Noto Sans UI, grassetto, taglia 72 (desktop), taglia 48 (tablet) e taglia 32 (telefono).
La stessa sintassi può essere applicata anche per organizzare i simboli. Per esempio: Style-name / sub-name / specifica in stile
Quindi, per organizzare la nostra tipografia, possiamo usare la seguente sintassi per l'h1 di grandi dimensioni per i desktop: Le intestazioni / H1 / Desktop, per tablet: Le intestazioni / H1 / Tablet e per i telefoni: Le intestazioni / H1 / Telefono.
Il motivo per cui dice Headings / h1 nel menu a discesa, per ora, è perché non abbiamo aggiunto altri stili. Passiamo quindi a h2 e aggiungiamo un altro livello di gerarchia negli stili di testo.
Per h2, sto usando i seguenti stili: Noto Sans UI, grassetto, taglia 73 (desktop e tablet) e taglia 18 (telefono). Usiamo la seguente sintassi per h2 sui telefoni: Le intestazioni / H2 / Telefono. Per tablet possiamo fare due cose qui, possiamo combinarlo con il desktop e chiamarlo Intestazioni / H1 / Desktop + Tablet oppure possiamo avere due stili separati che sono semplicemente gli stessi. Sto scrivendo di questo disegno dopo che è stato terminato, quindi è un po 'prevenuto. Devo dire che separiamo il tablet dal desktop perché è una pratica di progettazione migliore.
Con gli stili tipografici in Sketch, puoi davvero ottenere informazioni dettagliate e organizzate con le loro regole di sintassi. Tuttavia, al momento della stesura di questo documento, non esiste alcuna funzionalità in Sketch o nessun plug-in che ridimensiona la tipografia per il modo in cui la tipografia fluida funziona tramite CSS. A partire da ora, è ancora un processo manuale.
A seguire, creeremo simboli da riutilizzare e rendere le nostre vite un po 'più semplici. In questo design, abbiamo un sacco di testimonianze e citazioni da utenti del passato; hanno bisogno di essere reattivi.
Per fortuna, il formato delle testimonianze sarà lo stesso per tutta la pagina, quindi dobbiamo farlo una sola volta per loro. Per prima cosa, abbiamo il nome della persona e poi la loro citazione. I due sono stili differenti, comunque. Diamo prima uno stile alla fonte. Ho chiamato lo stile del testo Testimonial / Fonte. Lo stile effettivo di questo elemento è: Noto Sans UI, grassetto, dimensione 14, altezza della linea 24. Quindi, abbiamo la testimonianza reale. Ho chiamato lo stile del testo Testimonial / Quote. Il suo stile è: Noto Serif, regular, taglia 14, altezza della linea 24.
Per creare un simbolo, selezionare entrambi gli elementi di testo e fare clic su Crea simbolo icona in alto a sinistra nella barra degli strumenti. Ho chiamato il mio simbolo testimoniale.
Ora, abbiamo bisogno di modificare il simbolo in modo che possa ridimensionarsi bene per schermi di dimensioni diverse e per quote di dimensioni diverse. Fare doppio clic sul simbolo appena creato per modificarlo.
Prima di tutto, dobbiamo rinominare gli elementi all'interno del simbolo. Per impostazione predefinita, il nome di un livello di testo viene creato dal suo contenuto testuale. Li ho ribattezzati Il nome della fonte e Citazione, rispettivamente.
Successivamente, abbiamo bisogno di regolare le impostazioni di ridimensionamento per entrambi gli elementi di testo. Avranno le stesse proprietà di ridimensionamento. Nessuno dei due avrà una larghezza o altezza fissa. Ma, entrambi ridimensioneranno dai bordi sinistro e superiore. Questo assicurerà che quando ridimensioni il simbolo, gli elementi del testo rimarranno al loro posto.
Per riutilizzare il simbolo, fai clic sul menu a discesa in alto a sinistra nella barra degli strumenti Inserire e navigare verso Testimonianze simbolo. Quindi fai clic in qualsiasi punto della tavola da disegno per posizionarlo. Per cambiare il contenuto di incolla il testo negli ingressi di override appropriati che abbiamo rinominato in precedenza. Ridimensiona se necessario.
Sto usando il termine "grafica reattiva" un po 'diversamente qui. L'idea è che la grafica cambierà a seconda delle dimensioni dello schermo. Tuttavia, dovrei comunque fare la grafica manualmente per ogni schermata. A meno che non siano fluidi, come un elemento di input o un pulsante, non possono essere creati automaticamente.
Per comprendere meglio la grafica reattiva, ecco un link a un articolo che ho scritto sulle icone reattive, ma l'idea è esattamente la stessa per tutti i tipi di grafica e immagini.
Possiamo trasformare sia le carte dell'itinerario in simboli che le carte da sotto la sezione social della pagina di destinazione. Andiamo con le social card attorno al grafico del Day 3 (è un po 'più interessante).
Ancora una volta, seleziona la carta e trasformala in un simbolo. Fare doppio clic su di esso per modificare il simbolo. Vogliamo assicurarci che ridimensiona bene sia verticalmente che orizzontalmente.
Iniziando con lo sfondo, vogliamo dargli ridimensionamento delle proprietà che rendono l'oggetto pin in alto e a sinistra. Lo stesso vale per i due livelli di testo. Tuttavia, vogliamo che l'immagine, o l'avatar, sia appuntata in alto a destra. Infine, non dimenticare di cambiare i titoli di questi elementi in qualcosa di più appropriato per quando stiamo sovrascrivendo il suo contenuto.
E voilà!
Infine, vogliamo anche occuparci dei piccoli dettagli di design. In questo disegno specifico, riuso la piccola linea viola con un punto molto. Sto trasformando questo indicatore viola in un simbolo.
Questo simbolo è composto da un cerchio che è 8px per 8px con uno sfondo # 7455FF. La larghezza della linea non ha importanza, ma il valore predefinito è 122 px. La sua altezza è 2px. Di nuovo, con lo sfondo # 7455FF.
All'interno del simbolo è necessario eseguire nuovamente il ridimensionamento. Per il cerchio, abbiamo bisogno che rimanga la stessa dimensione e nello stesso posto. Daremo una larghezza e un'altezza fisse e lo applicheremo al bordo in alto a destra. Per la linea, gli daremo anche un'altezza fissa, ma non una larghezza fissa in quanto ne abbiamo bisogno per espandere la larghezza. Lo ridicheremo anche al margine destro durante il ridimensionamento.
In questo modo, quando ridimensioniamo questo simbolo, cambierà solo la larghezza della linea.
Un'altra cosa che possiamo fare è impostare anche gli sfondi in modo che siano fluidi. Le altezze delle sezioni differiscono tra layout mobili e desktop; questo significa che dovrai spostare gli elementi di sfondo su e giù nel loro punto giusto.
Qui, l'interfaccia utente richiede un bordo bianco 16px. Ciò significa che il livello di sfondo deve essere 16px lontano dai bordi della tavola da disegno. Tutto quello che devi fare è selezionare il livello di sfondo e, usando il plugin Anima o usando le proprietà di ridimensionamento, pin tutti i bordi del livello di sfondo. Quindi, appuntalo in alto, in basso, a sinistra ea destra. Ora, quando ridimensionerai la tavola da disegno, lo sfondo seguirà l'esempio!
Ora che ci siamo occupati della maggior parte degli elementi di design che possono essere resi reattivi o fluidi o in simboli riusabili, è tempo di parlare del resto degli elementi di design in questa pagina.
In poche parole, è qui che rimboccati le maniche e fai i tuoi disegni manualmente, uno per uno. La progettazione della grafica della mappa dovrà essere eseguita a mano perché è unica. Lo stesso vale per i colori di layout e picking e per la scelta della tipografia.
Purtroppo, progettare interfacce reattive in Sketch non è ancora un gioco da ragazzi. Ma ci sono tecniche, anche plugin, che renderanno la tua vita molto più semplice come un designer che lavora in Sketch. Spero che questo tutorial ti abbia dato una buona panoramica del mio processo di progettazione. La progettazione di interfacce utente reattive non deve essere noiosa, molte anche possono essere automatizzate.
Avete suggerimenti o trucchi per progettare un'interfaccia utente reattiva da condividere con noi? Lasciateli nei commenti qui sotto!
