È ora che i progettisti passino dalla progettazione basata su immagini a quella basata su codice

Perché passare dalla progettazione basata su immagini a quella basata su codice?

C'è stato un grosso problema dagli albori del design del prodotto digitale. I designer sono separati dal processo di sviluppo del prodotto e sono costretti a lavorare solo con il software.

I progettisti utilizzano grafica raster o strumenti di progettazione vettoriale per disegnare immagini mentre vengono isolate dal resto dell'organizzazione. Il processo nella maggior parte dei casi rimane identico anche se funzionano con software diversi come Photoshop, Gimp, Sketch o Fireworks. Una serie di immagini statiche viene inviata agli ingegneri come intento reso dai progettisti.

È estremamente noioso mostrare diversi stati dell'interfaccia attraverso schede artistiche statiche. Quindi tutto non è dettagliato dai progettisti. E alla fine, l'intera interfaccia utente è costruita dagli ingegneri con l'aiuto di una serie di immagini statiche incomplete. Spesso in una lunga comunicazione avanti e indietro, tutti gli stati interattivi vengono solitamente risolti.

L'esperienza non è rappresentata accuratamente con progetti statici e quindi i test sono solitamente noiosi per gli utenti. È a causa di questi processi inefficienti che un'organizzazione porta a prodotti senza successo e team frustrati.

Grazie all'evoluzione della tecnologia oggi abbiamo un modo migliore di progettare le cose. Gli strumenti di progettazione basati su immagini vengono rapidamente sostituiti dal paradigma degli strumenti di progettazione basati su codice. Le rappresentazioni statiche del progetto tratte da strumenti di progettazione vettoriale o raster vengono sostituite con progetti renderizzati in cui i progettisti lo intendono direttamente nel codice senza sapere effettivamente come codificare.

Un nuovo flusso di lavoro è fornito dal nuovo set di strumenti in cui:

• Designer e ingegneri stabiliscono entrambi un'unica fonte di verità
• Senza alcuna esperienza di codifica, offre ai progettisti tutta la potenza della codifica
• Il duo di designer e ingegneri è connesso attraverso un unico processo creativo collaborativo che crea una spettacolare evoluzione del flusso di lavoro

Design basato su immagini a Code-based con UXPin

La prima e fondamentale domanda qui è cosa non è buono o inefficiente con la progettazione basata su immagini prima di effettuare la transizione dalla progettazione basata su immagini a quella basata su codice. Potresti essere ben consapevole del fatto che esistono due paradigmi di strumenti di progettazione, ovvero strumenti di progettazione basati su codice e basati su immagini.

Uno strumento di progettazione basato su immagini è un approccio utilizzato da molti decenni ed è considerevolmente vecchio. I progettisti devono creare grafica vettoriale o raster quando disegnano qualcosa che è l'idea di questo approccio agli strumenti.

Con questo approccio, i progettisti hanno la massima flessibilità. Dalle illustrazioni avanzate alle icone semplici, tutto può essere disegnato in modo efficace in questo modo, incluso il più bel livello di dettagli. Anche se quando si tratta di sviluppo di prodotti digitali professionali di solito si rompe. Ecco il motivo per cui accade.

1. Mancanza di interoperabilità: l'interfaccia effettiva di un prodotto, ad eccezione di fotografie, illustrazioni e icone, non viene mai realizzata con questi elementi grafici. I progettisti lavorano al di fuori dei vincoli impostati nel codice quando lavorano sulla progettazione dell'interfaccia in strumenti di progettazione basati su immagini. Per questo motivo, possono creare cose che sono costose da codificare e quelle che sono difficili in un modo sconosciuto.

2. Mancanza di precisione: oltre a creare meravigliosi design dettagliati, i risultati più imprecisi durante il processo di sviluppo sono spesso con strumenti basati su immagini. Il lavoro del designer è reso con un processo completamente diverso.

Pertanto, c'è una differenza nel codice di sfumature, testo e colore scelto da un designer e quello da un ingegnere anche con l'applicazione delle stesse specifiche. Le squadre sono interessate da un massiccio disallineamento a causa di questo.

3. Progettazione statica: il focus del flusso di lavoro sullo strumento di progettazione basato su immagini è la creazione di tavole da disegno statiche per tutti gli stati dell'interfaccia che sono eventualmente collegati tra loro. Per i progetti professionali, questo è un approccio di intrusione. Nella finestra statica, il più semplice dei pattern diventa come un menu a discesa ingestibile.

Ciò accade a causa della mancanza di capacità di preservare i componenti interattivi per la riutilizzabilità ea causa di una quantità considerevolmente grande di tavole da disegno. Inoltre, questi strumenti consentono solo un'interazione di base senza la possibilità di impostare variabili per contenuto, stati degli elementi, logica condizionale e altro.

4. Debole collaborazione nella progettazione e ingegneria: il processo di ingegneria è completamente diverso da questo strumento e non può essere unito. L'output di entrambi i mondi è disconnesso dalla sua stessa natura.

Le tecnologie utilizzate dagli utenti sono il prodotto finale del lavoro degli sviluppatori, mentre ulteriori livelli di astrazione che sono lontani dall'esperienza dell'utente finale vengono introdotti dal design basato sull'immagine.

Designer e ingegneri sono disconnessi e frustrati l'uno con l'altro a causa dei componenti interattivi riutilizzabili, della mancanza di interazioni reali e della possibilità di importare connessioni dal codice.

Unicità nel design basato su codice

È importante sapere cosa c'è di speciale in questo design poiché stiamo enfatizzando la transizione dal design basato su immagini a quello basato su codice. Quando un utente disegna qualcosa utilizzando uno strumento di progettazione basato su codice, crea CSS/HTML/JS rilevanti e attiva il browser. Questo rende il motore per mostrare i risultati visivamente.

Di seguito sono riportati i vantaggi per i progettisti dopo il passaggio dalla progettazione basata su immagini a quella basata su codice.

1. Fedeltà: c'è una corrispondenza del cento per cento tra l'intento di un designer e un risultato codificabile quando si utilizza un design basato sul codice. Per rendere tutti i progetti di design, la tecnologia utilizzata nella progettazione basata su codice è la stessa di quella dello sviluppo web.

2. Elimina la differenza di vincolo tra designer e sviluppatori: le cose che sono difficili da progettare e sono impossibili da ricreare nel codice possono essere create dai designer in strumenti basati su immagini. Questi stessi identici vincoli sono applicabili sia ai progettisti che agli sviluppatori negli strumenti basati sul codice. Quindi garantisce che sia i progettisti che gli sviluppatori rimangano sincronizzati.

3. Sostituzione delle tavole artistiche con componenti interattivi: invece delle tavole artistiche collegate, lo strumento di progettazione basato su codice utilizza le interazioni più avanzate sui componenti. Questo approccio consente direttamente ai designer di creare sistemi di progettazione interattivi altamente riutilizzabili e imita anche lo sviluppo.

4. Interazioni realistiche e potenti: con il passaggio da progetti basati su immagini a progetti basati su codice, gli oggetti possono interagire tra loro, spostarsi sullo schermo e creare schemi complessi. Non è necessario sapere come codificare, cosa più importante per la collaborazione con gli ingegneri e per i test con gli utenti.

5. Crea la collaborazione più forte di sempre: un approccio completamente nuovo e rivoluzionario alla collaborazione di progettazione e ingegneria si ottiene attraverso il paradigma basato sul codice.

Articolo correlato

Differenza tra Web Designer e Web Developer