ds_banner_alt

GoodBarber
Sistema di design

Il sistema di design delle app GoodBarber

Perché queste linee guida di design?

GoodBarber è un app builder no-code lanciato nel 2011. Permette a chiunque di creare la propria app nativa o Progressive Web App senza competenze di programmazione. È uno strumento potente per chi vuole creare un'app ma non ha le competenze tecniche per farlo. Fin dall'inizio, la nostra missione è stata fornire la tecnologia e le risorse per trasformare i design delle app in realtà sorprendenti. Ci impegniamo a continuare a fornire le migliori soluzioni per la creazione di app bellissime.

Quando GoodBarber è stato lanciato, il campo del design dell'esperienza utente (UX) non era così ampiamente compreso o adottato come lo è oggi. In passato, prima dell'esistenza dei sistemi di design, la creazione di app per dispositivi mobili era spesso un processo difficile per designer e sviluppatori. Senza una serie di linee guida e buone pratiche coerenti da seguire, era difficile garantire che l'app fosse visivamente coerente e facile da usare nelle diverse schermate. I progettisti e gli sviluppatori si sono trovati di fronte a una grande inefficienza nella creazione di nuove funzionalità, poiché spesso dovevano ricominciare da zero ogni volta. Ciò comportava un notevole spreco di tempo e risorse. Inoltre, anche la collaborazione e la comunicazione erano difficili, poiché non esisteva un linguaggio o un insieme di standard condivisi tra i membri del team..

Da allora, i metodi e gli strumenti di design si sono evoluti notevolmente. I sistemi di design hanno aiutato a superare queste sfide fornendo una serie di linee guida e di best practice che designer e sviluppatori possono seguire. Con l'evoluzione della piattaforma di GoodBarber, ci siamo resi conto della necessità di ripensare il design dei nostri modelli nella loro interezza per ottenere una coerenza visiva tra le piattaforme eaccelerare il processo di sviluppo. Lo abbiamo fatto creando il GoodBarber Design System, un insieme di linee guida e best practice per garantire coerenza, efficienza, collaborazione, scalabilità, branding e accessibilità nel processo di design.

Pubblicando il GoodBarber Design System al pubblico, condividiamo con chiunque i nostri principi di design, sviluppati e perfezionati nel corso degli anni. Questo può aiutare anche gli utenti più esperti a ottenere coerenza, efficienza e scalabilità durante la creazione di plugin personalizzati o la personalizzazione avanzata della propria app.

Per il team di GoodBarber, il GoodBarber Design System semplifica il processo di sviluppo dell'app, garantisce un'ottima qualità del prodotto, un'esperienza utente coerente, e migliora la qualità complessiva delle app create con la nostra tecnologia.

strong>Gli sviluppatori hanno accesso alle specifiche tecniche delle pagine e dei componenti: le loro dimensioni, il loro posizionamento, i loro comportamenti e le loro proprietà.

I designer possono basarsi su un insieme di regole di spaziatura, dimensioni dei caratteri, rapporti di immagine o distribuzione dei colori per la creazione di nuove pagine.

Obiettivi

ds_objectives_principles_alt

Semplifica la creazione e la produzione di modelli implementando i principi di costruzione.

ds_objectives_consistency_alt

Mantieni la coerenza visiva tra le pagine dell'app su diverse piattaforme.

ds_objectives_smoothux_alt

Garantisci un'esperienza d'uso fluida e ottimale

In cosa consiste un buon design?

Buona gestione dello spazio

Nel design, lo spazio "bianco", noto anche come spazio negativo, si riferisce allo spazio vuoto tra gli elementi di una pagina. Spesso viene considerato uno spazio sprecato, mentre in realtà svolge un ruolo importante nella creazione di un design pulito e ordinato. Aiuta a separare ed evidenziare i diversi elementi, rendendoli più facili da leggere e da capire. Inoltre, lo spazio "bianco" può anche creare un senso di gerarchia, guidando l'occhio dell'utente verso le informazioni più importanti della pagina.

Trovare gli stessi spazi tra gli elementi è anche un modo semplice per garantire la coerenza visiva tra le pagine. Usare una griglia per garantire l'allineamento del testo è una tecnica comune nel design grafico e nella tipografia. Ci affideremo quindi a una griglia per garantire l'allineamento, che è essenziale per una lettura fluida. I valori di spaziatura ricorrentigarantiscono anche la coerenza tra le diverse sezioni su tutti i dispositivi.

Gerarchia chiara

Un buon contrasto between the different text levels is essential for creating a visually organized and easy-to-read layout. The use of different text sizes and styles, such as headings and body text, helps to create a hierarchy of information and guide the user's eye through the layout.

Nel nostro sistema di design usiamo il rapporto aureo per stabilire il rapporto di dimensioni tra titoli e testo. Il rapporto aureo, noto anche come "proporzione divina", è un rapporto matematico che viene spesso usato nel design per creare progetti visivamente piacevoli e armoniosi. Usando il rapporto aureo per stabilire le dimensioni tra titoli e testo, siamo in grado di creare un contrasto esteticamente piacevole e funzionale.

Inoltre, usiamo anche altre tecniche tipografiche come il peso, il colore e la spaziatura per creare un contrasto tra i diversi livelli di testo; in questo modo possiamo assicurarci che i titoli si distinguano dal testo del corpo e guidino l'attenzione dell'utente. Usando queste tecniche, siamo in grado di creare un layout visivamente organizzato e di facile lettura che guida l'utente attraverso i contenuti in modo chiaro e fluido.

Buona gestione dei caratteri e dei colori

Un design che usa troppi caratteri e colori può dare un'immagine sbagliata creando confusione. Limitare questi elementi è una buona pratica che aiuta a rendere il contenuto più chiaro.

Nel nostro back office, prima di qualsiasi altra azione, l'utente è invitato a selezionare un tema che potrà poi personalizzare per creare l'identità visiva della sua app. Questo permette un certo framing: infatti, i temi proposti sono costituiti da un numero limitato di caratteri, selezionati per formare delle belle combinazioni Testa/Corpo.

Le tavolozze di colori sono limitate ai 4 colori primari e la loro buona distribuzione contribuisce alla gerarchizzazione delle informazioni (ad esempio: un colore primario per il marchio e i pulsanti, uno o due colori secondari per i pulsanti meno importanti, i link, ecc.)

Questo framework permette di applicare un design predefinito efficiente alle app, ma GoodBarber consente agli utenti avanzati di personalizzare il prodotto in modo più dettagliato, superando le raccomandazioni di base.

Il sistema di design GoodBarber

Il GoodBarber Design System è una soluzione completa che funge da struttura, toolbox e carta grafica per designer e sviluppatori. È una raccolta di linee guida in evoluzione che forniscono un linguaggio di design coerente e coeso in tutta la piattaforma, su cui progettisti e sviluppatori possono fare affidamento per garantire coerenza, efficienza e scalabilità nel loro lavoro. Si tratta di una guida che aiuta a stabilire una comprensione comune dei principi e dei modelli di design, oltre a consentire flessibilità e personalizzazione quando necessario. Nel complesso, il sistema di design GoodBarber è uno strumento potente che aiuta a semplificare il processo di sviluppo delle app e a creare app che siano belle e funzionali.

Basi

Il nostro sistema di design include linee guida per la costruzione di modelli coerenti, efficienti e facili da usare.

Componenti

I componenti del nostro sistema di design sono blocchi che possono essere usati per creare un design compatto e coerente in tutta l'app.

Risorse

Our design system includes a library of prototypes and technical specifications for the different screen of the product. These specifications are for internal use by our designers and developers.