Da Figma a sito web o app
I suoi design Figma realizzati come codice pulito e responsive: HTML e CSS, React, Next.js o un tema CMS.
Caratteristiche principali
- Pagine o componenti realizzati
- Codice in un repository di sua proprietà
- Risultati dei test responsive e sui browser
- Readme con note di configurazione e deployment
- Qui non si paga nullaRicevi prima un preventivo scritto. Nessun pagamento, nessun impegno.
- Venduto e consegnato da GRADAXUn contratto e un team, chiunque svolga il lavoro.
- I suoi dati restano nell'UENulla viene spostato fuori dall'Unione per essere elaborato.
Informazioni su questo servizio
Ha design finiti e deve farli realizzare esattamente. Trasformiamo i file Figma in codice front-end responsive che corrisponde al design a ogni breakpoint, usando lo stack che sceglie: HTML e CSS puri, React, Next.js o un tema WordPress o Shopify. I componenti sono costruiti per essere riutilizzati e le lacune nel design vengono segnalate prima di tirare a indovinare.
Dove i progetti tacciono
I file Figma mostrano come appare una pagina a determinate larghezze fisse, di solito desktop e mobile. Raramente mostrano cosa succede nel mezzo, cosa fa un pulsante al passaggio del mouse, come appare una scheda con un titolo molto lungo, cosa compare quando un modulo ha un errore o mentre il contenuto si carica. Sono proprio queste lacune a far divergere lo sviluppo dal design.
Esaminiamo il file prima di sviluppare e annotiamo ogni lacuna che troviamo. Alcune le risolviamo con impostazioni predefinite sensate che seguono la logica del design. Altre le chiediamo, perché indovinare male e ricostruire costa più di una breve domanda. Il risultato è uno sviluppo che corrisponde al design dove è esplicito e ne rispetta l'intento dove non lo è.
Prima i componenti, poi le pagine
I buoni file di design sono costruiti da componenti: pulsanti, schede, navigazione, campi modulo. Anche il buon codice dovrebbe esserlo. Sviluppare pagina per pagina, copiando e ritoccando gli elementi man mano, produce un sito in cui ogni pulsante è leggermente diverso e una modifica al design significa intervenire in decine di punti.
Costruiamo prima i componenti condivisi, corrispondenti ai componenti in Figma, poi assembliamo le pagine a partire da essi. Una modifica allo stile del pulsante aggiorna ogni pulsante. Le nuove pagine si costruiscono da parti esistenti. Il markup è semantico e accessibile, le immagini sono ottimizzate e i font si caricano in modo efficiente, perché una pagina perfetta al pixel che impiega sei secondi a caricarsi su un telefono non è un buon lavoro.
Specifiche
- Categoria
- Automazione & Dati
- Prezzo
- Da 290 € a 1050 €
- Dimensioni
- Piccolo (Landing page), Medio (Sviluppo multipagina), Grande (Sviluppo con CMS)
- Tempi di consegna
- Da 3 giorni a 5 settimane
- Fatturato
- Una tantum
- Cosa ottiene
- 4 voci, tutte incluse nel prezzo
- Cosa ci serve da lei
- File Figma con accesso in visualizzazione e Dev Mode, Lo stack che preferisce e dove sarà ospitato, Design per mobile, o il permesso di adattarli in modo sensato
- Acquistato più spesso da
- SaaS, Agenzie e studi, Startup, E-commerce
- Venduto e consegnato da
- GRADAX, un contratto e un unico team
- Dove vengono trattati i tuoi dati
- Unione Europea
Cosa ottiene
Tutto ciò che segue è incluso nel prezzo. Nulla qui è un upgrade.
- Pagine o componenti realizzati
- Codice in un repository di sua proprietà
- Risultati dei test responsive e sui browser
- Readme con note di configurazione e deployment
Cosa cambia
- Pagine che corrispondono al design Figma su desktop, tablet e mobile
- Componenti riutilizzabili che rispecchiano i componenti del file di design
- Markup accessibile: HTML semantico, navigazione da tastiera, testo alternativo
- Pagine dal caricamento rapido, con immagini ottimizzate e font caricati in modo efficiente
Confronta le dimensioni
Il prezzo standard per ogni dimensione. Gli extra sono prezzati accanto, non nascosti dietro una call.
| Incluso | Landing page290 €3-5 giorni lavorativi | Sviluppo multipagina500 €Da 2 a 3 settimane | Sviluppo con CMS1050 €Da 3 a 5 settimane |
|---|---|---|---|
| Una pagina, responsive | Incluso | Incluso | Incluso |
| HTML e CSS o un framework | Incluso | Incluso | Incluso |
| Moduli collegati | Incluso | Incluso | Incluso |
| Test sui browser | Incluso | Incluso | Incluso |
| Tutto ciò che è incluso in Landing page, fino a sei template | Non incluso | Incluso | Incluso |
| Libreria di componenti | Non incluso | Incluso | Incluso |
| Animazioni e interazioni dal design | Non incluso | Incluso | Incluso |
| Verifica di accessibilità | Non incluso | Incluso | Incluso |
| Tutto ciò che è incluso in Sviluppo multipagina, fino a dodici template | Non incluso | Non incluso | Incluso |
| CMS collegato: WordPress, Shopify, Sanity o simili | Non incluso | Non incluso | Incluso |
| Inserimento dei contenuti per le pagine di lancio | Non incluso | Non incluso | Incluso |
| Deployment e 14 giorni di correzioni | Non incluso | Non incluso | Incluso |
| Aggiungi al preventivo |
Aggiunga ciò che le serve
Choose the size
Aggiunga ciò che le serve
Il suo totale€500
Il prezzo standard, più ciò che aggiunge. Confermato per iscritto prima che qualsiasi cosa inizi; nulla viene addebitato finché lei non accetta.
Come funziona
Verifica
Design verificato per stati mancanti e breakpoint prima di sviluppare.
Componenti
Prima le parti condivise: pulsanti, card, navigazione, form.
Pagine
Pagine assemblate dai componenti e allineate al design.
Test
Verificate su browser e dispositivi, poi consegnate.
Domande
Può realizzare da un design che non ha una versione mobile?
Sì. Adattiamo in modo sensato e le mostriamo le schermate mobile principali prima di realizzarle tutte.
Sarà pixel-perfect?
Corrisponderà fedelmente al design alle larghezze per cui è stato progettato. Tra quelle larghezze, i layout si adattano come previsto dal design; segnaliamo qualsiasi ambiguità.
Usate strumenti automatici di design-to-code?
Scriviamo il codice a mano. Le esportazioni automatiche tendono a produrre codice gonfio e difficile da mantenere, costoso da modificare in seguito.
Ricerche correlate
Lavori correlati
Una tantumRealizzazione sito WebflowUn sito Webflow dal design personalizzato con un CMS che il suo team può modificare e interazioni che restano veloci.from 420 €
ScopedSprint di progettazione UISchermate progettate e prototipate in due settimane, pronte da sviluppare.from 1800 €su perimetro
Una tantumApplicazione web full-stackUn'applicazione web personalizzata con database, login e area admin propri, sviluppata e messa online.from 420 €
Una tantumSviluppo app AndroidApp Android native in Kotlin, sviluppate secondo le linee guida di Google e pubblicate su Google Play.from 420 €
Una tantumSviluppo app iOSUn'app iPhone nativa in Swift, sviluppata secondo le linee guida di Apple e portata attraverso la revisione dell'App Store.from 830 €
Una tantumRealizzazione template email HTMLEmail HTML scritte a mano che si visualizzano correttamente in Outlook, Gmail, Apple Mail e in dark mode.from 290 €
Nessun pacchetto è adatto?
Alcuni lavori hanno una forma propria. Li analizziamo prima e ne definiamo il preventivo per iscritto; la chiamata di analisi è gratuita.