Sviluppo di un design system per sito e app: regole uniformi da €1.990
Colori, font, pulsanti, form e schermate tipo diventano un insieme di regole, e le nuove pagine hanno tutte lo stesso aspetto. Il design system del prodotto parte da €1.990.
Branding e identità visivaTempi: 2–4 settimane
Che aspetto ha un design system del prodotto
Il design system serve ai prodotti con sito e app e ai team in cui lavorano più designer e sviluppatori. È particolarmente utile quando la piattaforma cresce a pezzi e ogni nuova schermata rischia di avere un aspetto a sé. Per un piccolo progetto spesso basta un'identità visiva, e te lo diciamo apertamente. Vedi anche: piattaforma chiavi in mano.
- Per prodotti con sito e app. Sito e app sembrano un unico prodotto, non due progetti diversi.
- Per team in crescita. Le regole sono scritte, non vivono nella testa del designer. Per un nuovo arrivato è più facile inserirsi e ci sono meno discussioni sui dettagli.
Visualizzazione indicativa: immagini e testi sono scelti a titolo di esempio. Nel vostro progetto funzionalità, design e architettura saranno diversi, su misura per le vostre esigenze.
Design system del prodotto — da €1 990
Regole di aspetto comuni per sito e app: colori, font, pulsanti, moduli e schermate tipo. Le nuove pagine si compongono da elementi già pronti e hanno tutte lo stesso aspetto.
Il prezzo lo mostriamo subito. Consegniamo il risultato in una forma comprensibile a qualsiasi team, quindi non sei legato a noi. Il design system è collegato al nostro sviluppo ma non lo richiede: file e regole restano a te. Le licenze di font e set di icone a pagamento, se li scegli, si pagano direttamente al titolare dei diritti. Vedi anche: brand chiavi in mano.
Adatto a: prodotti con sito e app · team in cui lavorano più designer e sviluppatori · aziende che sviluppano la piattaforma per fasi
Cosa include il design system del prodotto a €1.990
Un unico prezzo per tutto l’elenco: senza extra a ore o per singole voci.
Il design system del prodotto parte da €1.990, tempi 2–4 settimane. Il lavoro comprende audit dell'aspetto attuale, colori e font, set di elementi, schermate tipo, documentazione e consegna allo sviluppatore. Il totale dipende dal numero di schermate e dallo stato del design attuale, la cifra precisa la comunichiamo dopo l'analisi. Vedi anche: pannello di amministrazione.
- Colori, font e set di elementi. Palette, font, dimensioni e spaziature, e poi pulsanti, campi, card, tabelle e messaggi di errore.
- Schermate tipo e documentazione. Esempi di pagine principali, form e area riservata e una breve descrizione di come usare gli elementi. Versioni scura e chiara, se servono.
- Audit dell'aspetto attualeGuardiamo cosa c'è già e troviamo le incoerenze: pulsanti, tonalità, spaziature diversi.
- Colori, font e spaziatureUna palette, dei font e una scala di dimensioni uniche. Le nuove schermate non si discostano dalle altre.
- Set di componentiPulsanti, campi, schede, tabelle, messaggi di errore. Lo sviluppatore compone le schermate con elementi già pronti.
- Schermate tipoEsempi di pagine principali, moduli e area personale. Mostrano come funzionano insieme gli elementi.
- Versioni scura e chiaraProgettiamo entrambi i temi con le stesse regole, e il contrasto è verificato per ciascuno.
- DocumentazioneUna breve descrizione di come usare ogni elemento. Un nuovo collaboratore si orienta da solo.
- Consegna allo sviluppatoreFile e istruzioni per il passaggio al codice, così non si deve rifare nulla da capo.
Visualizzazione indicativa: immagini e testi sono scelti a titolo di esempio. Nel vostro progetto funzionalità, design e architettura saranno diversi, su misura per le vostre esigenze.
Si può aggiungere al progetto
Su richiesta, subito o più avanti. Il prezzo è fissato prima dell’inizio dei lavori.
Il sistema si può realizzare in versione chiara e scura e preparare per interfacce in più lingue, compresi testi lunghi e lingue con scrittura da destra a sinistra. Lavoriamo con clienti di Europa, USA, Emirati, Kazakistan e altri Paesi. Per un prodotto internazionale questo riduce le rifacimenti quando si aggiunge una lingua.
Identità visivaLogo, biglietto da visita, presentazione e template per i social sono realizzati nello stesso stile del tuo prodotto.€1 290Scopri di più
Dal logo costruiamo un set coerente: palette, font, biglietto da visita, modelli per i social e regole d’uso. Serve quando i materiali li realizzano persone diverse e hanno un aspetto diverso.
Tempi: 2–3 settimane
Pannello di amministrazioneCostruiamo un'area interna con gli elementi già pronti del tuo sistema. È uno sviluppo a parte, con un'architettura.da €9 900Scopri di più
Costruiamo un pannello di controllo sulla base del sistema. Serve quando il prodotto ha bisogno di un'area per il team.
Tempi: da 4 settimane
Schermate aggiuntiveDisegniamo altri esempi di schermate oltre al set concordato, per facilitare agli sviluppatori la realizzazione del prodotto.a preventivoScopri di più
Altri esempi di schermate oltre al set concordato. Portata e prezzo si concordano prima dell'inizio dei lavori. Nessuna tariffa oraria.
Tempi: in base al lavoro
Icone e illustrazioniDisegniamo icone e illustrazioni in un unico stile, perché il prodotto appaia coerente e resti impresso agli utenti.+ €590Scopri di più
Completiamo il set di icone e illustrazioni. Serve quando quelle standard non bastano.
Tempi: 1 settimana
Da pagare a parte, non a noi: le licenze di font e set di icone a pagamento, se ne scegli, direttamente al titolare dei diritti. Tutti i componenti aggiuntivi →
Come si crea un design system
Le fasi cambiano da sole, oppure cliccate su una qualsiasi per leggere i dettagli.
Prima guardiamo cosa c'è già e individuiamo le incongruenze: pulsanti, font e spaziature diversi su pagine diverse. Poi costruiamo palette, elementi e schermate tipo, li concordiamo con te e redigiamo la documentazione. Alla fine consegniamo file e istruzioni allo sviluppatore. Il passaggio al codice lo fa il tuo team o un progetto a parte.
- Cosa serve da parte tua. Accesso al sito o all'app attuali, i materiali di brand se esistono e una persona che approvi la direzione.
Se non hai ancora un'identità visiva, conviene farla prima del sistema o insieme. Poi le schermate si possono realizzare in una web app, in un'area riservata o in una piattaforma, e per l'app sul telefono si prepara il design dell'interfaccia. Vedi anche: identità visiva, design di un'app mobile, web app e aree riservate.
1. Brief
Un breve questionario di 15 minuti: che attività è, per chi, cosa vi serve e entro quando. A voce, per iscritto o in videochiamata.
- Chiediamo solo ciò che influisce sul risultato e sul prezzo
- I materiali (logo, foto, testi) si possono inviare anche dopo
- Rispondiamo lo stesso giorno lavorativo: cosa proponiamo, quanto costa e quanto tempo serve
2. Preventivo e contratto
Fissiamo cosa è incluso, il prezzo, i tempi e il piano dei pagamenti. L’importo non aumenta senza il vostro consenso scritto.
- Un contratto tra la nostra azienda e la vostra, oppure con voi personalmente
- Contiene: l’elenco dettagliato di ciò che è incluso (come in questa pagina), i tempi, le fasi di pagamento, le correzioni in garanzia
- Il codice, il dominio e gli account dei servizi sono vostri: è scritto nel contratto
- Firma online: un PDF con firma elettronica, senza carta e senza corrieri
3. Pagamento
Fatturiamo alla vostra azienda. Pagamento con bonifico bancario o con carta.
- Nessun costo nascosto: dominio e abbonamenti ai servizi li pagate direttamente a loro, senza ricarichi da parte nostra
- Ogni pagamento è legato a una fase: pagate ciò che vedete già
- Documenti di chiusura: fattura e verbale di accettazione
4. Lavoro sull’anteprima
A ogni fase ricevete un link all’anteprima: vedete cosa è pronto e lasciate subito le vostre correzioni.
- Prima la mappa del prodotto e la struttura, poi il design, poi lo sviluppo
- Raccogliamo le correzioni in un unico posto: niente si perde nella corrispondenza
- Le domande per voi arrivano in elenco, con le opzioni di risposta: rispondete quando vi è comodo
5. Verifica e collaudo
Prima del lancio controlliamo tutto noi, poi voi accettate il lavoro in base all’elenco del contratto.
- Telefoni e computer, velocità di caricamento, moduli ed e-mail, pagamenti in modalità di prova
- Pagine legali e banner dei cookie al loro posto
- Passate in rassegna l’elenco di ciò che è incluso e firmate il verbale di accettazione
6. Lancio e consegna
Pubblichiamo sul vostro dominio e vi consegniamo tutto: accessi, istruzioni, file sorgente.
- Dominio, e-mail sul dominio, analitica e Search Console
- Gli accessi a tutti gli account sono a vostro nome; noi restiamo solo su invito
- Una breve guida: come modificare da soli testi, foto e prezzi
- Poi, se volete: assistenza, promozione, nuovi moduli
Domande frequenti
Quanto costa un design system del prodotto?
Da €1.990. Il prezzo dipende dal numero di schermate e dallo stato del design attuale. La cifra precisa la comunichiamo dopo una breve analisi.
Come si paga il lavoro?
Se il totale è inferiore a €2.000, pagamento del 100% all'avvio. Da €2.000 vale lo schema 50% all'avvio, 25% dopo la mappa del prodotto e il design e 25% dopo il collaudo.
Un design system serve a un piccolo progetto?
Spesso basta un'identità visiva. Ti diciamo se conviene farlo più avanti.
Che differenza c'è tra design system e identità visiva?
L'identità visiva definisce il riconoscimento del brand: logo, colori, font, supporti. Il design system descrive come costruire le interfacce: pulsanti, form, schermate e stati.
È collegato al vostro sviluppo?
Sì, ma consegniamo il risultato in una forma comprensibile a qualsiasi team. Non sei obbligato a ordinare lo sviluppo da noi.
Include il passaggio delle schermate al codice?
No. Consegniamo file e istruzioni, e il passaggio al codice lo fa il tuo team o un progetto a parte.
Si può fare il sistema per un sito già pronto?
Sì. Partiamo dall'audit dell'aspetto attuale, ricaviamo le regole da ciò che c'è già e togliamo le incongruenze.
Chi aggiorna il sistema dopo la consegna?
Tu o il tuo team, in base alla documentazione. Se servono nuove schermate o elementi, è un lavoro a parte con preventivo.
Si abbina bene a questo servizio
Ciò che si ordina di solito insieme a questo: cliccate per aprire la pagina del servizio con un esempio.