Tutorial di schizzo

Una guida rapida agli utensili elettrici UX

È così facile che ti chiederai perché hai mai progettato in altro modo.

UX Power Tools è il sistema di progettazione Sketch più avanzato mai realizzato. È come Bootstrap per i designer. Tutto il duro lavoro è già stato fatto per te, quindi ti concentri sulla parte divertente: la progettazione.

Stili, simboli e tecniche speciali ti renderanno un designer più efficiente e ti aiuteranno a realizzare progetti più coerenti.

La presente Guida rapida ha lo scopo di mostrarti le basi della personalizzazione e del ridimensionamento del sistema in base al tuo marchio e al tuo processo di progettazione.

Contenuto della Guida rapida

1. Introduzione: solo un'introduzione!
2. Installazione: prima di aprire i file
3. Colori: personalizzazione e aggiunta di colori
4. Tipografia: modifica del carattere e dei colori dei caratteri
5. Simboli: introduzione ai simboli
6. Icone: scambio di icone e aggiunta di nuove
7. Campi: personalizzazione dei campi di input
8. Pulsanti: personalizzazione dei pulsanti
9. Altre personalizzazioni: ombre, ombre e altro!
10. Riepilogo: respira un po '!
11. Aiuto: più aiuto + servizi personalizzati

1. Introduzione

Sono un progettista di prodotti a tempo pieno per un'agenzia digitale e aiuto a girare da 12 a 20 sistemi di progettazione e framework all'anno per nuovi progetti di clienti. Ho creato UX Power Tools per necessità in modo da poter essere più efficiente e ha aumentato la mia produttività di quasi 10 volte.

Dopo aver appreso le basi del sistema e avere le cose sotto mano, progetterai in modo più accurato, più coerente e più efficiente. Migliaia di designer dilettanti e professionisti in tutto il mondo in aziende grandi e piccole utilizzano UX Power Tools per accelerare i flussi di lavoro.

Questa guida di avvio rapido funziona sia per il sistema Web che per il sistema mobile, quindi devi solo impararla una volta!

Facciamolotttttt!

23:28 EST - Qui stiamo progettando UX Power Tools. Sinistra, Christian. Giusto, Jon (io). Un po 'di sonno, un po' di birra e un sacco di pennarelli per la lavagna. Non lasciarti ingannare dalla maglietta di New York. Viviamo a Indianapolis, nell'Indiana.

2. Installazione

Installa il font Open Sans

È disponibile gratuitamente da Google e include anche il pacchetto stesso. È indicato nel file Leggimi e anche Sketch lo avviserà. A questo punto stiamo solo assillando! Ad ogni modo, puoi cambiarlo in un secondo momento, ma è bene assicurarsi che sia installato per iniziare in modo da non gettare via i tuoi simboli.

Modifica le impostazioni di spostamento

Il sistema è tutto basato su una griglia di 8 pixel, quindi puoi risparmiare un sacco di mal di testa modificando le impostazioni di spostamento da 10px a 8px.

...

Tutto installato? Meraviglioso!

3. Colori

Questo è il modo migliore per iniziare, quindi abbiamo giustamente chiamato la pagina "Inizia qui". È piuttosto difficile rovinare tutto, gente :)

Ci sono alcuni tutorial in questa pagina che sei invitato a seguire, ma questa Guida rapida ti guiderà attraverso lo stesso processo in modo più dettagliato.

Style Stacks ™

UX Power Tools utilizza un piccolo trucco di efficienza chiamato Style Stacks ™ (in attesa di brevetto) per rendere super semplice l'aggiornamento in blocco di molti stili di layer contemporaneamente. Quei blocchi di colore che vedi nella tavola da disegno "Imposta colori e caratteri qui" sono in realtà pile di rettangoli, ognuno con uno stile di livello diverso applicato ad esso. Questo ci consente di aggiornare rapidamente tutti quegli stili di livello contemporaneamente. Conveniente!

Come personalizzare i colori

Passo 1
Fare clic e trascinare per selezionare il blocco di colore. Mi piace iniziare con il colore del mio marchio principale, quindi selezionerò "Principale". Non fare semplicemente clic sul blocco. Ci sono più rettangoli in questa pila e devi selezionarli tutti.

Ho bloccato tutte le etichette, quindi non devi preoccuparti di selezionare accidentalmente il testo!

Passo 2
Vedi come l'Ispettore mostra Riempimenti, Bordi e Ombre interne? Questo perché ci sono rettangoli in questa pila di stili che hanno uno o più di questi attributi. Scegli un colore e aggiorna ciascuno di questi valori di colore. Mi piace andare dal basso verso l'alto perché quel selettore di colori può interferire:

Non vedrai il cambiamento di colore quando cambi le Ombre e il Bordo Interni perché stanno cambiando sotto il rettangolo più in alto. Ma non preoccuparti, stanno ancora cambiando!

Passaggio 3
Sincronizza le tue modifiche. Lo schizzo è super fantasioso e nonostante questi attributi si applichino a più stili di livello diversi, sincronizza queste modifiche con ciascun stile di livello (riempimento, bordo, bordo sinistro, bordo inferiore, ecc.):

AGGIORNAMENTO SKETCH (31/08/2018):
L'aggiornamento e la sincronizzazione degli stili è stato spostato nel menu a discesa degli stili. Basta fare clic su "Aggiorna stile livello" per salvare i cambiamenti di colore :)

Un modo rapido per vedere se tutto ha funzionato è controllare la pagina Componenti (se stai usando il sistema web) o la pagina Guida allo stile (se stai usando il sistema mobile). Dovresti vedere il tuo colore piuttosto nuovo:

Ehi guarda, il nostro colore! Gli stili di livello Tavolozza / Interfaccia utente / Riempimento sono più frequentemente utilizzati in tutto il sistema, ma vedrai anche gli stili di bordo aggiornati se apri il menu a discesa degli stili di livello in Impostazioni. Questi stili sono utili nella pagina dei simboli. Ci arriveremo più tardi.

Continua a farlo per le altre pile di stile sulla tavola da disegno per riempire i colori del tuo marchio. Ecco una rapida panoramica di come UXPT utilizza il colore:

  • Principale: il colore del tuo marchio principale
  • Secondario: il colore del marchio secondario (se ne hai uno)
  • Attivo: questo è ciò che uso per caselle di controllo, radio e altri stati attivi. Tendo a usare il colore del marchio principale per questo, ma non è necessario.
  • Accento 1: il tuo colore "successo"
  • Accento 2: il tuo colore di "avvertimento"
  • Accento 3: il tuo colore "errore"
  • Nero: la tua base nera. Consiglio di usare un nero colorato (vedi FAQ)
  • Bianco: la tua base bianca. Di solito uso solo #FFFFFF, ma anche il beige è bello.

FAQ

Perché i miei colori del testo non sono stati aggiornati quando ho sincronizzato i miei cambi di colore?
Gli stili di testo e gli stili di livello sono diversi. Stiamo solo aggiornando gli stili di livello in questo passaggio. Non preoccuparti, arriveremo agli stili di testo nella sezione successiva.

Non vedo il cambiamento di colore su altre pagine!
Assicurati di trascinare per selezionare l'intero Stack di stile e non fare semplicemente clic sul rettangolo in alto. E non dimenticare di sincronizzare!

Che cosa significa "Goccia di colore per il nero"?
Raramente uso il nero puro (# 000000) quando disegno. Invece, mi piace usare il nero che è colorato verso il colore del mio marchio principale. Questo rettangolo a goccia di colore è il tuo colore principale con sopra un rettangolo nero puro all'80%. È un buon punto di partenza per colorare la goccia per un colore nero colorato.

Perché solo 8 colori?
Mantienilo semplice. Suggerisco di usare il colore molto deliberatamente nell'interfaccia utente, quindi trovo che raramente ci sia bisogno di più colori di così. Questa non è una regola difficile, ma funziona per me! Sentiti libero di aggiungere altro. Il che ci porta comodamente a ...

Come aggiungere più colori

A volte vuoi un colore terziario o altri accenti da usare durante i tuoi progetti. L'aggiunta di un nuovo colore è semplice:

  1. Trascina per selezionare una pila di stili di colore esistente come abbiamo fatto prima.
  2. Copia il contenuto dello stack con Command + C.
  3. Incolla questa copia della pila da qualche parte sulla tavola da disegno a colori.
  4. Aggiorna i colori come abbiamo fatto prima, ma non sincronizzarli ancora.
  5. Raggruppa questa pila di stili (ciò renderà più semplice scorrere tutti gli oggetti nella pila). Ora vai nel gruppo di stack di stile e seleziona il rettangolo superiore. Vai al menu a discesa degli stili di livello in Impostazioni e scorri fino in fondo. Seleziona "Crea nuovo stile condiviso". Dagli un nuovo nome.
  6. Ripeti il ​​passaggio 5 fino a quando non hai creato nuovi stili di livello per ogni rettangolo nel nuovo gruppo di pile di stili. Al termine, puoi separarlo in modo che siano facili da trascinare in un secondo momento.
  7. Fatto! Creeremo simboli di colore per questi più avanti nella Sezione 5: Simboli.
Guarda quel bel blu che ho appena aggiunto. Non dimenticare di copiare e incollare l'intero stack di stile.

4. Tipografia

La tipografia dà voce alla tua app, quindi in questa sezione imparerai come personalizzare il carattere.

Convenientemente, possiamo fare tutto dalla stessa pagina ("Inizia qui") dove abbiamo personalizzato i nostri colori:

Cominciando dall'inizio. Questo non è un bug:

Proprio come con i nostri colori, utilizziamo pile di stili per aiutarci a cambiare rapidamente più stili di testo contemporaneamente. Quindi, anche se sembra che tu stia cambiando solo 18 stili di testo in nero, in alcuni casi stai effettivamente cambiando 72 stili di testo con trasparenze e allineamenti diversi:

Le ultime due righe sembrano duplicate, ma una di esse ha 18 stili allineati al centro e una ha 18 stili allineati a sinistra.

Il motivo per cui le cose potrebbero apparire leggermente disallineate nella schermata precedente è perché alcuni stili di testo sono allineati al centro e alcuni stili di testo sono allineati a sinistra. A volte ci sono piccole variazioni nella spaziatura delle lettere, quindi potrebbero non allinearsi perfettamente. Ciò non ha alcun effetto negativo sul sistema. È solo una stranezza cosmetica.

Come personalizzare il carattere

Passo 1
Trascina per selezionare tutto il testo sulla tavola da disegno "Inizia qui":

Potrebbe rimanere in ritardo per un secondo perché stai selezionando così tanti livelli. Nessun problema!

Passo 2
Scegli un nuovo carattere tipografico nel pannello Impostazioni. Fai attenzione a scorrere i caratteri nel menu a discesa. Se incontri un carattere che non ha una variazione in grassetto, eliminerà il peso del carattere "Grassetto" per gli stili di testo che terminano in "... 2" e non vedrai il testo in grassetto in tutto il testo della tavola da disegno stili mentre continui a scorrere i caratteri.

Gli stili di testo potrebbero apparire disallineati, ma è sufficiente trascinare per selezionare una colonna di testo, quindi premere il pulsante Allinea a sinistra.

Passaggio 3
Sincronizza le tue modifiche e il gioco è fatto! Se hai fatto bene, vedrai il tuo aggiornamento del font su tutto il file:

AGGIORNAMENTO SKETCH (31/08/2018):
L'aggiornamento e la sincronizzazione degli stili è stato spostato nel menu a discesa degli stili. Basta fare clic su "Aggiorna stile livello" per salvare i cambiamenti di colore :)

FAQ

Quali sono gli stili di testo "... 2"?
Sono la versione in grassetto delle loro controparti. Usiamo un numero in modo che sia aperto a qualsiasi cosa tu voglia. A volte semi-grassetto, medio o nero verrebbero utilizzati per questo stile.
Come posso cambiare rapidamente gli stili di testo in grassetto per renderli più / meno audaci?
Nell'elenco dei livelli, cerca "2" (inserisci uno spazio prima del 2), seleziona tutti i livelli di testo, quindi modifica il peso del carattere nel pannello Impostazioni. Sync!
Che cos'è questa convenzione di denominazione "Small, Caption, Body ..."?
Questi nomi sono puramente da ricordare. Ciò significa che non è necessario utilizzare "Corpo" per il testo del corpo. Quando abbiamo costruito il sistema, i nomi tradizionali delle dimensioni "XS, S, M, L, XL, XXL" erano difficili da ricordare, quindi abbiamo optato per dare loro i nomi. Sentiti libero di cambiarli se vuoi!
Che cosa significa Normale, Secondario e Disabilitato negli stili di testo?
Quelle sono diverse sfumature di quel colore di stile del testo. Normale è opaco al 100%, Secondario è opaco al 50% e Disabilitato è opaco al 25%. I lucidi sono preferiti perché se li usi sopra un colore, saranno colorati verso quel colore. Esempio: il testo bianco trasparente al 50% su uno sfondo rosso apparirà leggermente rosa. Oltre il blu, sarà azzurro.
Ho aggiornato il mio carattere e ora i componenti sono a capo!
Non ti preoccupare! La maggior parte dei componenti nel sistema ha simboli di testo allineati a sinistra, quindi tutto ciò che devi fare è ampliare leggermente il componente. Non appena il testo non si sposta più su una nuova riga, il componente avrà persino un'imbottitura su entrambi i lati.
Ho aggiornato il mio carattere e ora i SIMBOLI DI TESTO sono avvolgenti!
Questo in realtà non rompe nulla! È solo un effetto collaterale cosmetico di alcuni caratteri tipografici con crenatura più ampia. Non allargare i simboli di testo. Se ti dà davvero fastidio, basta cambiare il valore all'interno dei simboli di testo in qualcosa di più breve come "..." o "abc".
Ho aggiornato il mio carattere e ora il testo non è centrato verticalmente nei simboli!
Abbiamo dovuto diventare un po 'intelligenti con il modo in cui sono stati creati i simboli di testo (sezione successiva) in modo che l'aggiornamento del carattere sia il più semplice e indolore possibile. A volte quando si aggiorna il carattere, i livelli di testo nei simboli di testo associati si spostano verso l'alto o verso il basso all'interno della tavola da disegno del simbolo, eliminando l'allineamento verticale. Basta riallineare il testo al centro delle tavole da disegno dei simboli e tutto dovrebbe tornare alla normalità.

Modifica dei colori del testo

Passo 1
Trascina per selezionare una colonna di stili di testo, quindi scegli il tuo nuovo colore:

Passo 2
Sincronizza le tue modifiche!

Passaggio 3
Continua a farlo per tutte le altre colonne di stili di testo. Di solito ho solo una goccia di colore dai rettangoli sopra ogni colonna.

Passaggio 4
Fatto!

simboli

Ogni singolo livello in UX Power Tools è legato a uno stile di livello, a uno stile di testo o a un simbolo. Proprio come nei CSS, tutto è centralizzato, quindi se dovessimo mai avere bisogno di aggiornare il nostro sistema, è facile sincronizzarli in tutto il nostro design.

Per questo motivo, i simboli sono il punto cruciale dell'intero file. I simboli vengono creati utilizzando gli stili di livello e gli stili di testo che abbiamo appena definito e con altri simboli nidificati in modo da apportare modifiche senza sforzo.

L'intero sistema è costruito usando QUATTRO categorie di simboli:

1. Simboli di testo
Sketch consente di sovrascrivere il valore di testo di un simbolo, ma non consente di sovrascrivere gli stili di testo utilizzati all'interno di quel simbolo. Quindi i simboli di testo sono una soluzione intelligente per questa limitazione. Dato che possiamo sostituire e scambiare simboli nidificati, abbiamo creato simboli da ciascuno dei nostri stili di testo per consentirci di modificare lo stile del nostro testo. Esempio: voglio usare il testo scuro su un pulsante con uno sfondo chiaro e il testo chiaro su un pulsante con uno sfondo scuro. I simboli di testo nidificati ci consentono di farlo! Guardali in azione di seguito:
2. Simboli di colore di riempimento e bordo (alias "Mixins")
L'override dei simboli sarà il tuo migliore amico in UX Power Tools e i simboli Fill / Border cambieranno la tua vita. Proprio come i simboli di testo ci consentono di sovrascrivere lo stile del testo di un simbolo, i simboli di colore ci consentono di ignorare riempimenti e bordi. Ogni volta che pensi di utilizzare o creare un simbolo che potrebbe cambiare colore, è meglio usare un simbolo di colore nidificato. Guardali in azione di seguito:
3. Simboli del contenitore
I contenitori danno forma a elementi come pulsanti, badge e scaglie. Sono costruiti utilizzando simboli di colore, simboli di stato e maschere. Cambia la forma di un componente o lo stato di un campo di testo sovrascrivendo il suo contenitore. Guardali in azione di seguito:
Cambia la forma di un pulsante cambiando l'override del contenitore.Aggiungi uno stato hover a un campo cambiando il contenitore in Mostra altri stati dei campi di testo selezionando il tipo di contenitore
4. Simboli di stato
I simboli di stato ti aiutano ad aggiungere un senso di interazione a componenti come pulsanti, chip e badge. Sono sempre nidificati all'interno di un altro simbolo in cima a un riempimento di colore perché utilizzano i metodi di fusione per schiarire, scurire o desaturare il colore del componente. Qualsiasi componente che utilizza un simbolo contenitore "erediterà" automaticamente gli stati poiché sono nidificati all'interno del simbolo contenitore stesso. Nota: gli stati sono puramente estetici per mostrare agli sviluppatori come dovrebbe apparire uno stato hover / premuto / focus. Poiché stiamo utilizzando i metodi di fusione, gli sviluppatori non potranno utilizzare Zeplin o InVision Inspect per questi stati. Invece, consiglio di usare le funzioni lighten () e darken () in LESS o Sass per ottenere questi risultati nel codice.

FAQ

Come faccio ad aggiungere nuovi riempimenti in modo che siano disponibili nei menu a discesa?
Duplica una delle tavole da disegno Mixin / Fill nella pagina Simboli, scegli un nuovo colore per il rettangolo, quindi aggiungi uno stile di livello per il tuo nuovo colore. L'aggiunta dello stile di livello è facoltativa, ma ti consigliamo di utilizzare sempre gli stili di livello, quindi è veloce aggiornarlo in seguito se finisci per utilizzarlo in più punti. Attenzione: non modificare le dimensioni di questa tavola da disegno. Deve avere le stesse dimensioni di tutte le altre tavole da disegno Mixin / Fill per poter apparire nel menu a discesa del pannello Impostazioni.

Icone

Le icone sono probabilmente la parte più noiosa del kit, ma alla fine ti faranno risparmiare un sacco di tempo. Usando questa tecnica, creiamo le maschere delle icone, quindi mettiamo sopra un simbolo Mixin / Fill.

Poiché Sketch ci consente di sovrascrivere i simboli, possiamo scambiare il colore di questa icona con qualsiasi colore che abbiamo aggiunto come simbolo!

Come scambiare un'icona

Lo scambio di icone è semplicissimo grazie al pannello di override di Inspector:

Puoi cambiarne il colore usando il menu a discesa sotto l'icona.

Come aggiungere un'icona

  1. Duplica un'icona esistente, quindi elimina il livello maschera.
  2. Incolla la tua nuova icona e assicurati di creare un singolo percorso. Puoi farlo con Livello → Combina → Unione o Livello → Combina → Differenza.
  3. Rimuovi tutti i riempimenti sul percorso dell'icona. Nessun riempimento!
  4. Inserisci il percorso dell'icona sotto il livello "↳ Colore".
  5. Trasforma l'icona in una maschera (premi Ctrl + Comando + M).
  6. Fatto!

FAQ

Questo richiede un'eternità.
All'inizio non è ottimizzato, ma nel lungo periodo guadagnerai tutto quel tempo. Promettere.
C'è un modo più veloce?
Non che io sappia. Se qualcuno vuole creare un set di icone di maschere, questo renderà sicuramente questo processo molto più veloce!
Questo metodo icona è supportato in Zeplin, InVision, [strumento di sviluppo dev]?
Di solito invio al mio team di sviluppatori il carattere icona reale e / o lo sprite SVG, quindi non me ne preoccupo troppo. Detto questo, Zeplin fa un ottimo lavoro leggendo le sostituzioni di colore e di solito consente di esportare gli SVG bene.
La mia icona non viene visualizzata nel menu a discesa Ignora icona!
Assicurati che la tavola da disegno dell'icona abbia le stesse dimensioni di tutte le altre tavole da disegno dell'icona. In caso contrario, non verrà visualizzato.

campi

I campi (o input ... qualunque cosa tu voglia) sono composti da due pezzi principali: un contenitore e del testo. Sia il contenitore che il testo sono simboli in modo che possiamo facilmente sostituirli per adattarli a varie situazioni.

Come tutti i simboli nel sistema, i campi di testo sono completamente ridimensionabili. Se il testo non si adatta, basta renderlo più largo o più alto.

Personalizzazione dei campi

Se si desidera modificare la forma o lo stile di un campo di testo, la maggior parte del lavoro dovrebbe essere eseguita sui simboli Mixin / Contenitore / Campo:

  • Campi senza bordi: rimuovere il livello "Bordo".
  • Campi con un'ombra: aggiungi un'ombra al livello "Maschera".
  • Campi angolari: imposta il raggio del bordo dei simboli Mixin / Bordo e la maschera Contenitore / Campo su zero.
  • Campi di progettazione materiale: crea campi angolari, quindi modifica il livello "Bordo" in Mixin / Bordo / Attivo inferiore. Dovrai creare un altro simbolo di miscelazione del bordo inferiore per lo stato predefinito.

FAQ

Cos'è l'icona "Resizer"?
Questo è quando stai cercando di rappresentare un'area di testo. Sentiti libero di cancellarlo se non pensi di averne bisogno.
Posso cancellare il simbolo "Cursore"?
Sicuro! Lo trovo utile di volta in volta, ma dipende da te.

pulsanti

I pulsanti sono molto simili ai campi in quanto sono costruiti usando altri simboli. Il simbolo del testo annidato nel pulsante è impostato per ridimensionare, il che assicura che venga sempre mantenuta un'imbottitura sinistra / destra perfetta.

Il trucco migliore per garantire un'imbottitura perfetta è 1px Nudge ™. Basta ridimensionare il pulsante fino a quando il testo inizia a finire, quindi allargalo di 1 pixel:

Imbottitura perfetta!

UX Power Tools ha anche un pulsante centrato nel caso in cui desideri utilizzarlo nella parte inferiore di un modale (o qualcosa di simile):

Pulsanti di personalizzazione

Se vuoi cambiare la forma o lo stile di un pulsante, la maggior parte del lavoro dovrebbe essere fatto sui simboli Mixin / Button:

Abbiamo fatto la maggior parte del lavoro per darti un sacco di forme di pulsanti tra cui scegliere, ma se vuoi che la forma del tuo pulsante predefinita sia più rotonda o più dura, cambia la maschera di Mixin / Button / Fill.

FAQ

Come faccio ad aggiungere un'ombra al mio pulsante?
Seleziona il livello Maschera in un contenitore Mixin / Button nella pagina Simboli e aggiungi un'ombra. Non dimenticare di fare tutti i contenitori dei pulsanti.

Altre personalizzazioni

Nella pagina " Inizia qui", c'è una scheda per " Regola altre cose qui!" Qui puoi regolare cose come ombre e ombre.

Personalizzazione di Solid Scrims

Quando personalizzi i tuoi colori nella pagina “Inizia qui”, le sfumature di nero e colore cambieranno automaticamente per te. Sentiti libero di giocare con i livelli di trasparenza fino a trovare qualcosa che ti piace. Li ho messi su alcuni sfondi di immagini per aiutarti a misurare la leggibilità.

Personalizzazione del gradiente Scrim

Dovrai aggiornare manualmente la sfumatura del gradiente. Esatto, uno scrim realizzato a mano. Mi piace fare una sfumatura sfumata dal 50% della mia base nera, allo 0% della mia base nera.

Ombre personalizzate

Ci sono 6 livelli d'ombra tra cui scegliere. Sta a te decidere quando e dove utilizzarli, ma Material Design ha alcune idee interessanti sull'utilizzo delle ombre in quanto riguarda il "materiale digitale".

Sostengo sempre l'uso del colore nero di base per le tue ombre anziché per il nero puro: # 000000 (Sono stato ispirato dall'articolo di Ian Storm Taylor del 2012. Questo darà alla tua app un aspetto più morbido e le ombre non sembreranno così dure. tutto in una volta è veloce:

  1. Seleziona il colore nero di base e copia il valore esadecimale.
  2. Evidenzia tutti e 6 i blocchi d'ombra.
  3. Apri il selettore colore ombra e incolla il valore esadecimale.
  4. Premi invio.
  5. Sincronizzazione e fatto!
Non ho dovuto sincronizzarmi qui perché stavo già usando il mio colore nero di base.

Riepilogo

Congratulazioni per aver ottenuto il sistema di progettazione più veloce disponibile per Sketch! So che tutto sembra abbastanza travolgente, ma devi solo personalizzare tutto quello che vuoi. Onestamente, pensiamo che sembri abbastanza buono fuori dagli schemi. Scambia alcuni colori e sei a posto.

Chi dovrebbe usarlo?

  • UX Designers
  • Progettisti dell'interfaccia utente
  • Product Manager (per un wireframing più accurato)
  • Sviluppatori (che non vogliono scherzare con il design)
  • Amministratori delegati intraprendenti (perché perché no?)

Non hai ancora il sistema?

Visita il nostro sito per saperne di più sui nostri due sistemi di progettazione (web e mobile), scarica una demo o prendili entrambi di seguito. Ogni sistema viene fornito con un omaggio di oltre 70 tipi di grafici univoci (in temi scuri e chiari) in modo che la prossima volta bossman chieda un "cruscotto sexy come quelli che vedo su Dribbble", non alzerai completamente gli occhi dal tuo testa

Ancora bisogno di aiuto?

  • Saluta via e-mail: hello@uxpower.tools
  • ... o Twitter
  • ... o Facebook
  • ... o LinkedIn

Desideri un sistema di progettazione personalizzato?

Se tutto ciò sembra troppo complicato o se stai migrando da un'altra app (Illustrator, Photoshop, Axure, Adobe XD, ecc ...), lascia che ti aiutiamo! Mandaci una email e ti aiuteremo a far funzionare la tua squadra in pochissimo tempo.