Design e sviluppo frontend

PIATTAFORMA web CHE CERTIFICA LE AZIENDE DEL SETTORE CASA

Richiesta

Il design, la progettazione e lo sviluppo del frontend implica come risultato finale la creazione di codice HTML, CSS e JS  che costituisce l’interfaccia utente. La richiesta del cliente è stata quella di disegnare, progettare e sviluppare tutto il frontend di questa applicazione web: partendo dal design immagine coordinata precedentemente creata, e successivamente alle icone e alla grafica per il front-end. Per poi passare alla homepage, alla scheda azienda, e in un secondo momento alle pagine e liste di ricerca delle aziende, commenti e recensioni utenti, fino ad arrivare ad elementi più particolari quali bottom toolbar, design di popup, badge e sigilli di garanzia sempre partendo da un approccio mobile first.

design idea

Prima di procedere allo sviluppo del frontend occorre porre molto tempo e attenzione al design del frontend. Durante la progettazione del design ho cercato di dare molto bianco al tutto e di renderlo il più possibile moderno, pulito e facile da usare. Ho estrapolato i colori principali dall’identity e le tonalità di grigio e blu giocano un ruolo importante.

Per le icone è stato creato un set che fosse in armonia con tutto, e desse un carattere chiaro e moderno alle varie funzionalità della piattaforma. Viene utilizzato molto il simbolo del check (design immagine coordinata), sia per definire le aree di lavoro, che sugli elenchi puntati e checkbox, per simbolo sicurezza con lucchetto, e per tutti i badge.

Il font usato è quello originale con cui è fatto il logo e tutta l’immagine coordinata. Tutto il sito al momento presenta solo questo font in 2-3 varianti il che non è male per comprimere il tempo di caricamento del sito anche in ottica seo.

design frontend web app

Attività

Progettazione, design e sviluppo frontend. Set di icone su misura ed elementi grafici per piattaforma web.

Località

Mendrisio, Ticino – Svizzera.

Sito web

bautrust.ch

WEB
colors
DA291C 275CA8 A8B7C5
sviluppo frontend design

set di icone su misura

Per lo sviluppo del frontend è stato creato un set di molte icone su misura per ogni funzionalità. Il set successivamente è stato trasformato in un font da caricare velocemente dal frontend, mantenesse sempre un supporto retina-ready e che fosse agevolmente stilizzabile.

sviluppo front end design

frontend design scheda azienda

La scheda azienda rappresenta la carta d’identità della azienda sulla piattaforma e deve esprimere i punti di forza, i lavori effettuati, le recensioni e i dati principali relativi all’azienda.

front-end design
frontend design
design frontend app comments
design frontend app mobile first

frontend design trova azienda

La lista delle aziende deve essere facile da utilizzare, fornire due tipi di visualizzazione (a colonne o righe) e riassumere la scheda dell’azienda.

design front-end search list
application frontend design
application frontend design mobile first

frontend design popup

I popup dovranno invogliare l’interazione con l’utente e saranno responsive e con specifiche diverse da desktop e da mobile.

design frontend popup app web
design frontend popup applicazione web

frontend design: elementi aggiuntivi

Oltre alle varie pagine sono stati progettati anche la toolbar (da mobile e desktop) e un set di badge e riconoscimenti su misura.

frontend design badge css html

Necessiti di un front-end e studio ux per le tue applicazioni?

Il design del frontend e lo studio dell’usabilità utente in base alla logica dell’applicazione sono elementi fondamentali peer lo sviluppo di app! Compilate oggi stesso il modulo di richiesta di design per ricevere un’offerta in base alle vostre esigenze!

2012 – 2022 © Copyright – Tutti i marchi e loghi riportati nel presente sito web sono registrati dai rispettivi proprietari e sotto copyright. Le immagini e i testi qui presenti NON sono riproducibili, neanche parzialmente – startup design pro – P.IVA : 03269260125 -Sviluppo immagine coordinata, Logo Designer con sede a Milano (ITALIA) di Davide Campagna – Web // Graphic Designer | Privacy policy / Cookie Law