Sei un designer, alle prime armi (oppure hai già un pò di esperienza) e hai bisogno di disegnare il tuo sito portfolio ma non sai da dove iniziare?

Hai assolutamente bisogno di un sito personale perché i tuoi profili su Dribbble o Behance non ti bastano?

Ci sta. 

Va bene mostrare i propri lavori su quelle piattaforme ma ricordati che il sito portfolio è la massima espressione di quello che fai proprio perché ti permette di comunicare quello che sei a modo tuo.

Che cosa devo inserire in un sito portfolio?

I tuoi lavori ok….e poi?

Il sito portfolio è una sorta di cv online ma molto più completo e..meno noioso.

Fondamentale inserire le tue skill!

Chi guarda il tuo sito portfolio deve capire quale è la tua expertise.

Che tu sia un graphic designer, ux/ui designer, uno sviluppatore, video maker o motion designer non importa.

È importantissimo che chi guarda il tuo sito capisca subito di che cosa ti occupi e a quale livello.

Chi guarderà il vostro sito portfolio?

Sicuramente i recruiter e le aziende che sono interessate alla tua figura professionale..ma non solo.

Sei sei un designer freelance, il sito portfolio è un ottimo modo per mostrare ai tuoi clienti o committenti quello che fai.

Tutto interessante ma da dove partire?

Il mio consiglio è progettarsi il proprio sito portfolio perché utilizzare dei template già fatti sminuirebbe la tua creatività e farebbe sembrare il tuo sito troppo simile agli altri.

Per questo ho realizzato un tutorial per creare un sito portfolio con Figma.

Dopo aver visto questo video sarai in grado di realizzare un sito portfolio in modo autonomo.

Non importa se non hai esperienza con Figma.

Ti insegno tutto nel video, le uniche cose che ti servono sono un computer e voglia di imparare

The post Creare un sito portfolio con Figma first appeared on Webdesignerd.

In questo tutorial vedremo come progettare una landing page per il black friday con Figma.

Realizzeremo questa landing page semplice ma con degli effetti molto cool.

Per prima cosa scarica il file per poter iniziare.

Troverai le cuffie già scontornate ed altri assets utili per il tutorial.

Ecco il video tutorial

Iscriviti al canale se vuoi imparare ad utilizzare Figma e Adobe Xd come un PRO.

psssss…ti piaciuta questa animazione? che ne dici di imparare a creare un’animazione allo scroll con Figma??? clicca qui

The post Black Friday landing page con Figma first appeared on Webdesignerd.

È possibile realizzare animazioni allo scroll con Figma?

Come si realizza un’animazione allo scroll con Figma

In questo tutorial realizzeremo insieme un’animazione allo scroll con Figma.

Questo è quello che sarai in grado di realizzare alla fine del video tutorial.

Per prima cosa scarica il template per realizzare l’animazione

Una volta aperto il file troverai un file di Figma con un template che ho realizzato personalmente per poter imparare questa incredibile tecnica.

Nella prima parte del video ci dedicheremo all’impostazione dei frame.

Nella seconda parte realizzeremo insieme le animazioni che vedi nell’anteprima del video.

Ecco il video.

Iscriviti al canale se vuoi imparare ad utilizzare Figma e Adobe Xd come un PRO.

psssss…ti piaciuta questa animazione? che ne dici di imparare a creare un’animazione su un testo con Figma??? clicca qui

The post Creare animazioni alla scroll con Figma first appeared on Webdesignerd.

Conosci l’hamburger button?

È quel componente che si usa nel mobile (come l’input stepper ricordi?) ed è rappresentato da 3 line verticali.

Si chiama hamburger proprio per la sue sembianze simili ad un hamburger.

Questa è la definizione tratta da Wikipedia:

“Il pulsante hamburger, così chiamato per la sua somiglianza involontaria con un hamburger, è in genere un pulsante posizionato in un angolo superiore di un’interfaccia utente grafica.”

Progetteremo l’hamburger button realizzando 3 linee orizzontali e successivamente disegneremo il suo stato di chiusura ovvero la X.

Creeremo componenti e varianti per realizzare l’interazione di apertura e di chiusura.

Come avrete notato navigando sui siti web o le applicazioni mobile, ci sono infiniti modo di rappresentare l’animazione di apertura e di chiusura dell’hamburger button.

Per il tutorial ho pensato a 3 soluzioni per l’animazione di chiusura.

Questo è quello che sarai in grado di realizzare dopo aver visto il video tutorial.

Ricordati di iscriverti al mio canale se vuoi imparare ad utilizzare Adobe Xd e Figma in modo professionale.

The post Hamburger menù animation in Figma first appeared on Webdesignerd.

In questo video tutorial realizzeremo 3 bottoni con 3 differenti animazioni all’hover.

Faremo un design molto semplice ma efficace e trasformeremo i nostri bottoni in componenti.

Prenderemo ispirazione da Codepen che è una risorsa molto importante per i webdesigner.

A proposito..sai quali sono le risorse che ogni webdesigner dovrebbe conoscere? No? dai un’occhiata a questo video. Ti svelerò quali sono quelle indispensabili (e gratuite).

Ma torniamo al nostro tutorial.

Che cosa è l’hover?

Come saprete l’Hover è un interazione che avviene solo su ambienti desktop ed è lo stato di un componente al passaggio del mouse.

Quando il cursore del mouse passa sopra un link, un immagine o un pulsante che dovrà fare qualcosa (per esempio un cambio di pagina o l’aggiunta di un prodotto nel carrello), quest’ultimo cambierà stato proprio per comunicarci che sta per succedere qualcosa.

Fa tutto parte dell’interaction design ed è fondamentale che un interfaccia web o mobile “parli” con noi nel momento in cui ci aspettiamo qualcosa.

Se vogliamo che il nostro progetto abbia una buona UX è fondamentale occuparsi di questi dettagli, non dobbiamo limitarci unicamente al design statico.

Molto spesso capita che i pulsanti cambino lievemente la tonalità di colore rendendosi più o meno luminosi o brillanti rispetto al colore di partenza.

Efficace ma poco accattivante.

Nel video vi farò vedere come creare un’animazione all’interno del bottone e per farlo impiegherai solamente 5 minuti.

Creeremo 3 effetti chiamati “close“, “fill-up” e “slide“

Ma come si creano con Adobe Xd?

Guarda il video tutorial ed iscriviti al canale di Webdesignerd se vuoi imparare ad utilizzare Adobe Xd in modo professionale.

Vuoi imparare a disegnare un sito web da zero?

Guarda il video corso gratuito che ho realizzato per te! -> Video corso di Web Design con Adobe Xd

The post Creare l’effetto hover con Adobe Xd first appeared on Webdesignerd.

Cosa sono le Lottie Animation?

Lottie è un formato di file di animazione basato su JSON.

Con le Lottie animation è possibile inserire animazioni nei vostri progetti web o nei vostri prototipi con Adobe Xd. 

Sono piccoli file che funzionano su qualsiasi dispositivo e possono scalare senza perdita di qualità, come un file vettoriale.

Le Lottie Animation sono animazioni molto interattive e leggere.

In questi link trovate i file che ho usato nel tutorial.

Uomo spaziale –> https://lottiefiles.com/29522-space-tour

Scimmia –> https://lottiefiles.com/62099-space-soldier-to-the-moon

Dj –> https://lottiefiles.com/87952-spaceman-dj

Come si inseriscono le Lottie animation in Adobe Xd?

Guarda il video tutorial

Vuoi imparare a disegnare un sito web da zero?

Guarda il video corso gratuito che ho realizzato per te! -> Video corso di Web Design con Adobe Xd

The post Inserire animazioni Lottie in Adobe Xd first appeared on Webdesignerd.

Prima di iniziare il tutorial scarica gli assets a questo link https://www.dropbox.com/sh/m19dkx8r4c…

Cosa faremo in questo tutorial?

Realizzeremo dei selettori che una volta cliccati faranno scorrere tramite uno slider orizzontale le cuffie selezionate.

Iscriviti al canale e resta aggiornato se vuoi imparare ad utilizzare Adobe Xd in modo professionale.

The post Slider animation con Adobe Xd first appeared on Webdesignerd.