Immaginarsi: progettazione dell'interfaccia del mio sito portfolio

Strumenti

Design

Photoshop

adobe-illustrator adobe-photoshop

Palette

Coolors

Per la fase iniziale del progetto ho dedicato del tempo alla ricerca di ispirazione visiva, esplorando il sito degli Awwwards, una piattaforma che raccoglie interfacce web innovative e creative provenienti da vari settori. Tra i diversi progetti visualizzati, il sito morrisonkids.org ha attirato particolarmente la mia attenzione: mi ha colpita per l’uso di colori vibranti, le forme dinamiche e decorative, e per la capacità di mantenere una buona leggibilità e chiarezza dei contenuti

L’elemento che più mi affascinava del sito era l’uso dei mandala e delle forme decorative, che riuscivano a trasmettere personalità senza compromettere la struttura informativa. Anche se stavo progettando un portfolio personale, ho iniziato a cercare riferimenti nel mondo delle landing page per insegnanti di yoga, un settore in cui spesso ricorrono grafiche simili. Su Behance ho trovato un prototipo che mi ha ispirata nella scelta della palette, del font e nell’atmosfera visiva generale del sito: rilassante, esoterico e al tempo stesso professionale.

Per il logo, ho deciso di reinterpretare alcune delle forme presenti nel sito di Morrison Kids utilizzando Adobe Illustrator e Photoshop. In particolare, ho preso spunto dal mandala usato come sfondo nella loro hero section. A partire da quella base, ho isolato alcuni petali decorativi che erano presenti nel logo e li ho combinati, sovrapponendoli al mandala centrale, fino a ottenere una composizione originale che sintetizzasse gli elementi visivi raccolti durante la fase di ricerca.

Una volta definita la direzione stilistica, ho realizzato diverse versioni del sito tramite mockup. La mia versione preferita rompeva volutamente le regole canoniche di visualizzazione delle interfacce web, privilegiando l’aspetto espressivo. Tuttavia, per esigenze di usabilità e coerenza, ho dovuto abbandonarla.

Alla fine, ho deciso di sviluppare una versione dell’interfaccia che richiamasse lo stile del mockup per insegnanti di yoga trovato su Behance, mantenendone l’atmosfera armoniosa e curata. Tuttavia, ho voluto assicurarmi che il design rispettasse le best practices legate all’usabilità e allo sviluppo responsive. Ho semplificato alcuni elementi per facilitare l’adattamento su dispositivi mobili e garantire una navigazione fluida e accessibile, evitando soluzioni troppo complesse che avrebbero potuto compromettere la funzionalità e l’efficienza del sito.