Come iniziare con UXPin
Mentre ci spostiamo nel regno del design mobile, del design delle applicazioni e del design reattivo, ci siamo concentrati sempre di più su UX (User Experience) e wireframing, prototipazione interattiva e prototipi. Ci sono un sacco di strumenti là fuori rivolti a questa nicchia e gestiscono l'intera gamma da complessi ricchi di funzionalità, ricchi a poco e poco utili. Uno degli strumenti che ha attirato la mia attenzione è UXPin semplicemente perché è stato sviluppato dai designer per i designer.
Prima di andare avanti … un avvertimento. Se la tua è un'organizzazione che preferisce possedere il software, allora UXPin non fa per te. Tutto il lavoro svolto in questa app viene eseguito nel browser e i progetti salvati vengono salvati nel tuo account.
Per iniziare con UXPin, avvia un browser e vai a UXPin. Da qui puoi registrarti per una prova gratuita o organizzare un piano mensile in base alle tue esigenze. La procedura di iscrizione è abbastanza semplice e una volta impostati il nome utente e la password, sei pronto per iniziare.
Come avviare un progetto in UXPin
Quando accedi, arrivi al Dashboard e da qui puoi decidere di creare un nuovo wireframe, un nuovo progetto mobile o un progetto Responsive Web Design. Ci sono anche plug-in per UXPin che ti permetteranno di portare i tuoi progetti Photoshop o Sketch. Per questo Come ho intenzione di creare un banner con del testo e aggiungere un pulsante di posta elettronica al banner. Per fare ciò ho selezionato Crea un nuovo wireframe.
Come utilizzare l'interfaccia UXPin
La superficie di progettazione è suddivisa in quattro aree. Nell'area nera a sinistra sono presenti una serie di strumenti che consentono di tornare alla dashboard, aprire gli elementi che verranno utilizzati, aprire il pannello Smart Elements, cercare elementi, aggiungere note alla pagina e aggiungere membri del team. In basso c'è un pulsante che apre un breve tutorial, un altro che ti consente di accedere al tuo account e un altro che accede alle FAQ, facciamo domande e fornisci anche feedback.
Nell'area blu nella parte superiore sono presenti una serie di strumenti e proprietà. I pulsanti più scuri sul lato destro ti consentono di iterare il tuo design, regolare le impostazioni del progetto, condividere la pagina e fare una simulazione all'interno del browser della pagina.
Il pannello Elementi è il punto in cui puoi afferrare i bit e i pezzi per Design Surface, assegnare un nome al progetto e aggiungere o rimuovere pagine.
La libreria Elements è una piacevole sorpresa per i progettisti di UX. Questo pop down ti consente di scegliere tra 30 librerie che vanno da iOS a Android Lolipop. Avrai anche accesso agli elementi Bootstrap e Foundation insieme alle icone Font Awesome, alle icone Gesture per cellulari e ad una collezione di widget sociali.
04 di 09Come aggiungere un elemento a una pagina UXPin
Per iniziare ho trascinato l'elemento Box sulla superficie del disegno e, quando rilascio il mouse, il file Pannello Proprietà si apre. Il pulsante Proprietà ti consente di assegnare un nome all'elemento e di impostare l'altezza della larghezza dell'elemento e i valori di posizione. Puoi anche aggiungere padding all'elemento, arrotondare gli angoli e regolarne l'opacità. Facendo clic sul pulsante Colore sfondo si apre un selettore di colori RGBA.
Puoi anche assegnare un font, un bordo e un motivo all'elemento selezionato. Il Lightning Bolt ti dà la possibilità di aggiungere interattività a un elemento selezionato.
05 di 09Come aggiungere e formattare il testo in UXPin
Per aggiungere del testo, trascina l'elemento di testo sulla superficie del disegno e inserisci il testo. Fare clic sulla proprietà di testo pulsante per aprire le proprietà del carattere e formattare il testo. Se hai bisogno di un blocco di testo fittizio, aggiungi un elemento di testo e fai clic su GENERARE LOREM IPSUM pulsante nelle proprietà del carattere.
06 di 09Come aggiungere un'immagine a una pagina UXPin
Ci sono un paio di modi per portare a termine questo compito. Puoi usare il Strumento immagine nella barra degli strumenti, aggiungi un elemento Immagine dalla Libreria o trascina semplicemente un'immagine dal desktop sull'elemento sulla superficie del disegno come mostrato sopra.
07 di 09Come aggiungere un pulsante a una pagina UXPin
Sebbene ci sia un elemento Button, inserendo " Pulsante " nel Ricerca area, come mostrato sopra, apre tutti i pulsanti trovati in tutte le librerie. Trascina quello che lavora per te sulla superficie del progetto e usa le Proprietà per cambiare il colore, il carattere e anche il raggio del bordo. Per cambiare il testo all'interno del pulsante, fai clic una volta sul testo e inserisci il nuovo testo.
08 di 09Come aggiungere interattività a una pagina UXPin
Questo non è così complicato come potrebbe sembrare. Per l'input dell'email, ho aggiunto un elemento di input, ridimensionato, inserito il testo e formattato il testo. Con l'elemento Input selezionato fare clic sul pulsante Proprietà e, quando il Proprietà dell'elemento apparire clicca il Visibilità pulsante - il bulbo oculare - nell'angolo in alto a destra del pannello.
Seleziona il pulsante e fai clic su Pulsante interazioni - il fulmine - nelle proprietà. Quando si apre il pannello Interazioni, selezionare Nuova interazione. Seleziona Fai clic su Trigger pop-down. Nell'area Azione selezionare Mostra elemento. Ti verrà chiesto quale elemento mostrare. Fare clic una volta sul gunsite e fare clic sull'elemento Input. Con l'elemento identificato, è ora possibile determinare se animare o meno l'elemento. In questo caso ho deciso di mostrare la casella di input con facilità e sono andato con il valore di durata predefinito di 300 ms.
Voglio anche che il pulsante si muova di circa 65 pixel a destra quando viene cliccato. Ho selezionato il pulsante, ho aperto il pannello Interazioni e selezionato Nuova interazione. Ho usato queste impostazioni:
- grilletto: Clicca
- Azione: Sposta
- Muovi la direzione: 65 px sull'asse x
- Animazione: Lineare
- Durata: 300 ms
Per rimuovere un'interazione seleziona l'elemento e apri il pannello Interazioni. Seleziona l'interazione nel pannello e fai clic sul cestino per eliminarlo.
09 di 09Come testare la tua pagina in UXPin
A causa del fatto che stai lavorando nel browser, il test è estremamente semplice. Clicca il Simula design pulsante. La pagina si aprirà nel browser e potrai testare la strada. Ci sarà anche un pannello aggiunto sul lato sinistro della pagina che consente Commenti, una Mappa del sito se ci sono più pagine, Test di usabilità, Condivisione in diretta, Modifica e un ritorno alla Dashboard.
Nella parte inferiore della pagina c'è un altro pannello di piccole dimensioni che consente di mostrare gli elementi interattivi, mostrare o nascondere i commenti e condividere il collegamento del progetto con gli altri.
