Share
Cosa starai creandoIn questo tutorial, ti insegnerò come progettare un'applicazione di diario Web semplice e sofisticata in Sketch, sia per dispositivi mobili che desktop. Useremo l'estetica VSCO come ispirazione e, alla fine di questo tutorial, ti sarai reso conto di molte delle funzioni più importanti di Sketch.
Oltre a queste abilità specifiche dell'applicazione, otterrete anche una comprensione più profonda sull'impostazione di caratteri tipografici e layout con l'aiuto di una scala modulare. Utilizzeremo alcune tecniche di base e intermedie in Sketch. Iniziamo!
Avrai bisogno delle seguenti risorse per seguire:
Prima di aprire Sketch e creare un nuovo documento, devo sottolineare che questo concetto è interamente teorico. Richiederebbe un'analisi di mercato molto più approfondita prima che potessimo trasformarla in un prodotto reale e utilizzabile. Sono sempre stato appassionato di storytelling online con bellissime foto, quindi ho creato questo concept per insegnarti a seguire le tendenze del web dalla prospettiva di un designer.
Quando inizio un progetto, inizio sempre con la tipografia perché credo fermamente che la tipografia sia lo strumento più importante che i designer di comunicazione hanno a loro disposizione.
Per il testo del corpo e titoli più grandi, ho scelto Merriweather, un font serif ispirato a facce di libri vecchio stile, che funziona bene per raccontare storie e viaggi. Su schermi ad alta risoluzione dà la sensazione di un vero diario stampato.
D'altra parte, per elementi di interfaccia utente comuni come pulsanti ed etichette, volevo qualcosa di moderno, quindi ho scelto Montserrat, che è un font sans-serif pulito e semplice.
Prima di tutto, vorrei scrivere un po 'di più su come mi avvicino alle mie impostazioni di layout e tipografia. Tim Brown, Type Manager per Adobe Typekit, ha creato un fantastico strumento chiamato Modular Scale. Questo strumento è fantastico: dopo aver definito la dimensione del testo ideale e aver suggerito un numero importante, dividerà e moltiplicherà questi numeri per un valore matematicamente familiare come il rapporto aureo o il quinto perfetto. In un momento, quando impostiamo la nostra gerarchia tipografica e gli elementi di base del nostro layout, farò sempre riferimento a questi numeri.
NotaOvviamente, in alcuni casi abbiamo bisogno di infrangere questa regola, ma ci fornirà un equilibrio naturale all'interno del nostro layout e della tipografia, che è piacevole alla vista.
Ho impostato la dimensione del testo ideale su 18px e definito 670px come numero importante, in quanto questa sarà la larghezza effettiva e utilizzabile del nostro layout mobile.
Dopo aver aperto Sketch, selezioniamo il Tavola da disegno (A) opzione all'interno del Inserire menu.
Per la nostra visualizzazione mobile, ti consiglio di scegliere le dimensioni dell'iPhone 6, ma se hai un modello di iPhone diverso, è meglio sceglierne uno. L'utilizzo di Sketch ha un enorme vantaggio in quanto consente di eseguire il mirroring del lavoro sul dispositivo iOS in tempo reale con Sketch Mirror, senza esportare o trasferire immagini. Lo specchio è una parte essenziale del mio flusso di lavoro di progettazione, perché con esso posso immediatamente vedere il risultato finale del mio lavoro nella mia mano.
Per attivare questa funzione, è necessario l'app Sketch Mirror dall'App Store. Quindi fare clic sul Specchio icona all'interno di Sketch (assicurati che i tuoi dispositivi siano sulla stessa rete o collegati tramite un cavo USB).
Per la vista desktop, ho scelto il Desktop HD tela, che è larga 1440 px.
Mancia: in seguito possiamo modificare l'altezza della nostra tavola da disegno modificando i numeri sul pannello dell'ispettore.
Dopo avere le tavole da disegno corrette, è ora di impostare alcune guide in modo che il layout abbia abbastanza spazio e un aspetto equilibrato. Per attivare i righelli e le guide di base, vai a Visualizza> Mostra righelli (^R) . Quindi seleziona la parte centrale del nostro canvas mobile, che sarà a 375px e metterà anche un segno sul primo e sull'ultimo 40px, in modo che funzioni con un padding orizzontale di 40px.
Per creare una linea guida clicca sul righello a 40px, a 375px e a 710px punti.
Nel caso della vista desktop, impostiamo anche una guida intermedia (720px) e una imbottitura 100px.
Nota: Se desideri creare un mockup realistico con una barra dei menu di Safari originale, puoi creare uno screenshot e incollare l'immagine ritagliata oppure puoi scaricare il modello di GUI di iPhone 6 (iOS 8) creato dal (precedente) Teehan + Lax squadra.
Mancia: È bello sapere che Sketch ha anche un modello iOS integrato, che puoi trovare sotto File> Nuovo da modello> Progettazione interfaccia utente iOS.
Per creare la nostra barra di navigazione in alto, selezioniamo il Rettangolo (R) strumento.
Mancia: Consiglio vivamente di imparare le scorciatoie più importanti, perché sono facili da usare. Nella maggior parte dei casi il tasto di scelta rapida è la prima lettera del nostro strumento, quindi in caso di Rettangolo è R, in caso di Oval è O, in caso di linea è L.
Con lo strumento Rettangolo puoi creare un rettangolo di 750 px di larghezza, 120 px di altezza, che ha a # F9F9F9 colore di sfondo.
Mancia: In termini di colori, uso sempre i numeri HSBA (tonalità, saturazione, luminosità, alfa), perché è facile modificarli e immaginare il risultato in anticipo.
Selezioniamo il Ovale (O) strumento e mentre si preme il tasto MAIUSC + ALT le chiavi, disegna un perfetto 80px cerchio. Sul lato destro, nel pannello Ispettore, fare clic su riempimenti pulsante, e sotto la quarta scheda caricare un'immagine del profilo.
Mancia: Se si preme il alt tasto e muovi il cursore, puoi vedere le distanze in pixel tra gli elementi selezionati.
Seleziona il Strumento testo (T) e posiziona un nome accanto all'immagine del profilo con il riempimento sinistro di 20 px. Imposta la dimensione del carattere su 22px e il colore del carattere su # 9E846E. È possibile impostare lettere maiuscole nel Digitare> Maiuscolo menu.
Posiziona il testo "Nuova storia" con le stesse impostazioni sul lato destro della nostra tavola da disegno con il riempimento destro di 20 pixel.
Ora creeremo la nostra prima icona, che sarà un'icona '+'.
Creiamo un rettangolo 36x6 px con il nostro strumento Rettangolo (R), che ha lo stesso colore del nostro testo. Al termine, duplicare la forma risultante.
Selezionare la seconda e sul pannello dell'ispettore (sul lato destro) ruotarla di 90 gradi.
Dopo aver posizionato perfettamente i rettangoli l'uno sull'altro, trascina il primo e trascinalo nel secondo pannello del livello. In tal modo uniamo i due livelli separati in un'icona di 36 x 36 px.
Nel caso della nostra vista desktop, abbiamo anche lo stesso rettangolo di navigazione a larghezza piena con altezza di 70 px e 80% di opacità.
La dimensione del testo del pulsante del menu è leggermente più piccola; 14px con imbottitura 40px e a #CCCCCC linea di separazione.
Nel caso della visualizzazione mobile, creeremo una barra di navigazione in fondo fissa, in cui l'utente può scegliere tra la griglia, le posizioni preferite, le pagine di ricerca e di profilo.
Proprio come con la navigazione in alto, inizieremo con una larghezza intera, 100 px di altezza, #FFFFFF rettangolo con un'opacità del 90%. Mettiamo un 1px # E6E6E6 linea nella parte superiore di questo rettangolo e dividerlo in quattro colonne uguali.
Tutte le nostre icone sono alte 50px e il loro colore è # 666666.
Mancia: puoi creare la tua icona 'Grid' disponendo nove rettangoli 14x14px con 4px padding.
Per l'immagine dell'eroe, creiamo un rettangolo a larghezza intera di 850 px e lo riempiamo con una foto, come nel caso dell'immagine del profilo. Per essere sicuro che il testo su di esso sia ancora leggibile, ho messo un livello nero sull'immagine con un'opacità del 20%.
In caso di immagine dell'eroe del desktop, raccomando 1000px per l'altezza. Inoltre, assicurati che l'immagine sia sotto la barra di navigazione.
Per il titolo e il sottotitolo, le dimensioni dei caratteri sono rispettivamente di 60px e 24px. Il font del titolo è Merriweather Bold e il carattere dei sottotitoli è Montserrat Regular.
L'ultimo elemento della nostra immagine di eroe è il pulsante "Ottieni ispirazione", in cui la dimensione del font è di 24 px con spaziatura delle lettere di 1,33 pixel. Il pulsante stesso è 338x89px con un bordo bianco largo 3 px. Mettiamo il pulsante 70 px dalla parte inferiore dell'immagine.
Per la visualizzazione desktop, raccomando una dimensione di font più piccola di 18 px.
In questo passaggio creeremo un posto speciale per la storia più popolare. Per farlo, inizia con un rettangolo pieno di immagini 670x480px, che ha un'icona speciale nell'angolo in alto a destra. Con questa icona tutti possono segnalare i loro viaggi preferiti sul sito.
Questa icona ha un cerchio bianco 80x80px con 2px di spessore interno. L'icona 'pin' è larga 12px e usiamo un numero normale Montserrat 18px. L'intera icona ha il 70% di opacità e 15px di imbottitura superiore e destra.
Nel caso della visualizzazione desktop, questa immagine è 1240x750px e l'icona 'posizione preferita' è 50x50px.
Ora possiamo creare la nostra prima carta. Come primo passo, crea un rettangolo pieno di immagini 670x522px, quindi un altro 670x435px #FFFFFF rettangolo. Posiziona il secondo rettangolo in cima al primo.
Crea un terzo rettangolo 670x744px e copri con esso i due precedenti. Posiziona questo livello sotto i precedenti. Dai un po 'di ombra a questo livello, che lo farà apparire un po'.
Il raggio di confine è essenziale nel design della nostra carta, quindi impostalo su 5px. Per vedere questo raggio su ogni livello, fai clic su questo livello di ombra e usalo come maschera.
Poiché sul cellulare non abbiamo uno stato di passaggio del mouse, utilizzeremo la visualizzazione del passaggio del mouse come una vista standard, quindi tutte le informazioni saranno immediatamente visibili.
Dopo aver selezionato ogni livello collegato a questo disegno di carte, possiamo Gruppo (⌘-G) insieme, quindi possiamo duplicarli facilmente premendo il tasto alt chiave e spostare il gruppo originale verso il basso (in alternativa possiamo duplicare con ⌘-C e ⌘-V metodo, anche.)
Mancia: Organizzare i nostri livelli in gruppi è estremamente utile in progetti più grandi come questo.
Nella vista desktop, possiamo usare le stesse carte. Per risultati più sofisticati, suggerisco di modificare leggermente i rapporti e le dimensioni dei caratteri.
Non dimenticare che abbiamo una vista a volo aperto sul desktop, così possiamo creare una versione più semplice della carta come predefinita, rivelando quella più complicata quando l'utente alza il cursore sopra la carta.
Con l'aiuto di questa sezione mappa, è possibile filtrare e cercare percorsi per località. I risultati verranno visualizzati come raccolte scritte da più autori.
Crea un rettangolo 750x850px e riempilo con una semplice schermata di Google Maps. Per la barra di ricerca posiziona un altro rettangolo nella parte superiore di questo rettangolo con l'80% di opacità.
Mancia: Per un allineamento più semplice, crea un quadrato sul lato sinistro della barra di ricerca. Dopo questo possiamo posizionare la nostra icona di ricerca nel posto giusto.
Ho scelto # B3483E come colore principale per la mia interfaccia utente Mappa. Questo colore è stato ispirato da Pantone Marsala, il colore Pantone dell'anno 2015.
Quando qualcuno cerca una posizione specifica, i risultati verranno visualizzati come piccoli quaderni di giornale. Ogni libro del diario è un rettangolo pieno di immagini 320x414px, con un accenno di ombra.
Possiamo impostare il raggio del bordo selettivo selezionando la sua forma e colpendo il accedere chiave. Se selezioniamo uno dei punti del vettore, possiamo dare loro valori separati per il raggio del bordo. Imposta il raggio del bordo superiore e inferiore destro su 12px.
Nella vista desktop, quasi tutto è identico, tranne per il fatto che posizioniamo i diari vicino alla mappa e non sotto la mappa.
La progettazione di schede di articoli di piccole dimensioni sarà simile alla creazione di quelle più grandi, tranne per il fatto che eliminiamo la descrizione e la parte di riepilogo delle storie. In questo modo possiamo visualizzare più informazioni nello stesso spazio, in modo che l'utente possa andare con più contenuti nello stesso tempo.
Nella vista desktop, oltre a ridurre la dimensione delle carte, le ordiniamo anche in una griglia a tre colonne. Credo che questo ci fornirà un modo comodo e veloce per scoprire ed esplorare nuovi contenuti.
Prima di completare il nostro progetto con il piè di pagina, è inevitabile che forniamo una sezione di invito all'azione.
Come sempre, abbiamo bisogno di un rettangolo pieno di immagini a 750x1000px. Per rendere leggibile il testo, aggiungiamo un gradiente bianco alla nostra immagine. Il nostro gradiente proviene da #FFFFFF opacità 30%, a #FFFFFF opacità 70%, quindi abbiamo solo bisogno di modificare la quantità di opacità.
Mancia: un piccolo, ma a volte ancora significativo trucco per migliorare la leggibilità del nostro testo è quello di aggiungere ombra ad esso. In questo caso, ho applicato una leggera ombreggiatura sul testo del titolo e del paragrafo.
Per l'area footer useremo una combinazione di icone social media e pulsanti di testo.
Assicurati che le nostre icone dei social media rimangano visibili su piccoli schermi mobili. Facciamo almeno 44px di altezza o larghezza.
Per la visualizzazione desktop possiamo creare un altro stile di navigazione, ma dobbiamo fare attenzione con questo e usarlo solo oltre 1440px di larghezza. È equivalente alla navigazione di fondo fissa nella visualizzazione mobile.
Abbiamo completato la nostra bellissima progettazione di applicazioni web per la rivista. Dopo aver seguito questo tutorial, spero che tu sia più sicuro nell'usare Sketch per i grandi progetti. Diamo un'occhiata a un mashup dei prodotti finali:
Sono curioso di sapere come hai trovato il processo, quindi non esitare a lasciare feedback e domande nei commenti.
Accentsconagua