Resa dei conti con lo strumento di progettazione - Adobe XD vs. Sketch (2019)

Sketch, uno strumento di progettazione consolidato, ha goduto di una crescita fenomenale sin dalla sua introduzione nel 2010. Nel 2016, Adobe ha introdotto XD come formidabile concorrente. Dopo quasi tre anni di sviluppo, Adobe XD offre una sfida sufficiente ai designer per prendere in considerazione un cambiamento?

Il processo di progettazione dell'UX è complesso e richiede l'uso di strumenti, metodologie e framework specifici. La ricerca degli utenti, l'analisi, il wireframing, i modelli, l'iterazione, i test di usabilità e la prototipazione dell'interfaccia utente sono solo alcuni degli artefatti e dei processi con cui i progettisti lavorano durante la comunicazione con sviluppatori, parti interessate e altri membri del team.

Due strumenti di progettazione ampiamente riconosciuti su cui fanno affidamento i designer di UX sono Adobe XD e Sketch.

Sketch è diventato lo standard de facto per la grande maggioranza dei designer digitali grazie alla sua interfaccia semplice, al vasto numero di plugin, alla funzionalità completa del toolkit e agli aggiornamenti frequenti.

Mentre Sketch è diventato lo strumento preferito dai designer di UX, Adobe, nota da tempo per il suo pluripremiato software di progettazione e per i profondi legami con la comunità del design, non aveva un'opzione simile. Avevano Photoshop, Illustrator e Fireworks, ma i designer non desideravano utilizzare tre strumenti per eseguire le attività che Sketch poteva fornire in un'unica applicazione.

Nel 2016 Adobe ha introdotto XD (Experience Design). Un serio contendente per Sketch, avevano ancora molto da recuperare. All'epoca Sketch aveva sei anni, aveva un'ampia base di utenti e un intero ecosistema di plugin, il che lo rendeva un potente strumento di progettazione. La rivalità si è intensificata nei due anni successivi e Adobe XD è passato da un agile concorrente a uno strumento di progettazione molto apprezzato che ha conquistato molti designer professionisti.

Il Toptal Design Blog ha pubblicato un articolo su Sketch vs Adobe XD nel 2017 quando era ancora in versione beta. Ora, due anni dopo, Adobe XD ha visto più revisioni con un chiaro obiettivo: offrire tutto ciò di cui un designer UX ha bisogno in modo nativo e con prestazioni eccezionali.

È giunto il momento per i designer di UX di passare da Sketch ad Adobe XD?

Adobe XD vs Sketch

Esploriamo come Adobe XD si confronta con Sketch. Confronteremo le seguenti caratteristiche:

• Interfaccia utente
• Ripeti griglia
• Simboli e pannelli delle risorse
• Strumenti di progettazione reattivi
• Componenti aggiuntivi e plugin
• Prototipazione con animazione automatica
• Condivisione e commenti
• Lavorare con gli sviluppatori
• Controllo della versione e collaborazione in tempo reale

Interfaccia utente

I designer che hanno familiarità con strumenti come Photoshop non dovrebbero avere problemi ad apprendere Adobe XD o Sketch poiché condividono tutti un'interfaccia utente simile.

Una notevole differenza nell'interfaccia utente è l'assenza di una barra degli strumenti in Adobe XD. La barra degli strumenti, situata nella parte superiore dell'interfaccia utente, è una funzione utile in Sketch con collegamenti personalizzabili a funzioni e strumenti di uso comune, come il raggruppamento di oggetti. Adobe offre una funzionalità simile e ridotta chiamata toolbox , situata sul lato destro del software.

Sketch vs XD : Sketch ha il vantaggio per la sua utile barra degli strumenti.

Ripeti griglia

Una caratteristica notevole in Adobe XD è la griglia di ripetizione. Questo è uno strumento utile che consente di creare facilmente elenchi regolabili e schermate basate su griglia. Sebbene Sketch manchi di questa funzionalità, può essere più o meno replicato con i plug-in.

Sketch vs XD : Adobe XD ha il vantaggio con la griglia di ripetizione che è nativa del software.

Simboli e pannelli delle risorse

I simboli sono stati una delle prime caratteristiche che hanno contribuito in modo significativo al successo di Sketch. I simboli sono per lo schizzo come CSS (Cascading Style Sheets) per il design del sito web. Consentono ai progettisti di riutilizzare facilmente e modificare in massa le risorse, risparmiando molto tempo, aiutando a creare un sistema di progettazione già pronto e garantendo coerenza su tutti gli schermi.

Adobe ha iniziato con i simboli di base, quindi ha introdotto il pannello delle risorse che combinava simboli, caratteri e colori in un'unica posizione. La modifica di uno qualsiasi di questi elementi mostra gli aggiornamenti risultanti in tempo reale. Sketch ha queste funzionalità, ma Adobe XD ha fornito un'esperienza utente più coesa e migliorata.

Schizzo vs XD : Adobe XD ha un leggero vantaggio a causa degli elementi combinati dell'interfaccia utente all'interno del pannello delle risorse.

Strumenti di progettazione reattivi

Adobe XD fornisce un solido set di strumenti di progettazione reattiva. Una caratteristica straordinaria, la modalità automatica reattiva, indovina come dovrebbe rispondere lo schermo alle diverse dimensioni del dispositivo.

Questa è una funzione incredibilmente utile che può essere attivata e disattivata utilizzando un semplice pulsante di scorrimento. Se la modalità automatica non soddisfa il comportamento previsto, un designer può modificare manualmente le proprietà reattive.

Sketch non ha questa funzionalità integrata, ma ha molti plugin come Anima Toolkit che fanno bene il lavoro.

Sketch vs XD: Adobe XD ha il vantaggio qui. Offrono un modo integrato per vedere gli effetti reattivi sugli elementi dell'interfaccia utente.

Componenti aggiuntivi e plug-in

L'ecosistema di plugin all'interno di Sketch è probabilmente una delle sue maggiori caratteristiche. Esistono centinaia di plug-in che estendono la funzionalità di Sketch e consentono ai progettisti di utilizzare funzionalità avanzate rimanendo all'interno dell'ecosistema di Sketch.

I componenti aggiuntivi sono l'equivalente di Adobe XD dei plugin. Adobe ha avviato il suo ecosistema di componenti aggiuntivi nel 2018, quindi non è robusto come Sketch. Questo non è un problema per Adobe poiché il loro obiettivo è cercare di ridurre la necessità di componenti aggiuntivi e concentrarsi sulla creazione di funzionalità integrate nel software.

Sketch vs XD: Sketch ha il vantaggio con la sua vasta libreria di plugin.

Prototipazione con animazione automatica

Adobe ha recentemente aggiornato XD con una funzionalità incredibilmente utile per i designer UX: auto animate . Funziona realizzando transizioni intelligenti e fluide tra elementi di schermi diversi. I risultati sono impressionanti, rendendo la prototipazione un'esperienza deliziosa con cui coinvolgere potenziali clienti. Sketch non offre questa funzionalità, anche con un plug-in.

Un'altra grande funzionalità di prototipazione introdotta da Adobe è il supporto per le micro-interazioni, ad esempio, tirando un pannello dal bordo dello schermo o facendo apparire una tastiera. Adobe XD supporta anche la prototipazione di interfacce utente basate sulla voce (come Alexa o Google Home).

Sketch vs XD: Adobe XD ha qui il vantaggio con funzioni di animazione automatica che fanno risparmiare tempo e supporto per micro-interazioni che mancano a Sketch.

Condivisione e commento

I progettisti interagiscono spesso con altri membri del team, sviluppatori e parti interessate: la capacità di condividere progetti e ricevere feedback è una parte cruciale del processo di progettazione. In quanto tale, Adobe XD include funzionalità integrate per mockup e prototipi da condividere online in modo che chiunque possa aggiungere commenti generali o indicare posizioni specifiche su un layout e lasciare un feedback.

Queste funzionalità, combinate con la modalità di prototipazione dinamica di Adobe XD, possono essere testate anche su telefoni cellulari con l'app nativa Adobe XD, o anche registrate per dimostrazioni non interattive.

Sketch può utilizzare la condivisione e i commenti utilizzando strumenti di collaborazione come Zeplin o integrazioni con strumenti di terze parti come Invision.

Sketch vs XD: Adobe ha un leggero vantaggio qui con la condivisione e i commenti online integrati.

Specifiche di progettazione

Nel corso di un progetto di design, i designer UX spesso hanno bisogno di condividere le specifiche di progettazione con gli sviluppatori. Adobe ha incluso questa funzionalità in XD, mentre gli utenti di Sketch dovranno utilizzare integrazioni come Zeplin o InVision.

Sketch vs XD: Adobe ha un vantaggio rispetto a Sketch perché le specifiche di progettazione sono integrate e non richiedono l'integrazione di terze parti.

Controllo della versione e collaborazione in tempo reale

Due importanti funzionalità su cui fanno affidamento designer e sviluppatori sono il controllo della versione e la collaborazione in tempo reale. I grandi team di progettazione che lavorano insieme allo stesso progetto devono essere in grado di vedere quando sono state apportate modifiche e accedere a una cronologia di tali modifiche.

Adobe ha affrontato la collaborazione con l'introduzione di documenti cloud . Ciò offre a tutti i membri del team, inclusi gli sviluppatori, un posto centrale in cui lavorare. Secondo Adobe, il passaggio successivo per la funzionalità dei documenti cloud sarà il controllo della versione.

Sketch offre il controllo della versione e la collaborazione in tempo reale con i plug-in, ma queste funzionalità non sono integrate nel prodotto.

Sketch vs XD: Sketch vince questo. Hanno il controllo della versione, anche se con plugin; questo non è attualmente offerto in XD.

Riepilogo delle funzionalità: Adobe XD e Sketch

Esistono somiglianze e differenze tra la versione attuale di Adobe XD e Sketch. Ecco un confronto di ogni prodotto:

È ora di cambiare gli strumenti di progettazione UX?

Confrontando le funzionalità, Sketch e XD sono vicini. Sketch manca di alcune funzionalità come l'animazione automatica, il design reattivo automatico e la griglia di ripetizione che sono tutte native di XD.

L'unica cosa importante che manca ancora ad Adobe XD è il controllo della versione, che Sketch ha grazie ai plugin. Aspettati che questo arrivi in ​​XD non appena Adobe continuerà a sviluppare il set di funzionalità dei documenti cloud.

È più facile passare da Sketch (e Photoshop o Illustrator) a XD rispetto al contrario, poiché XD può aprire file di Sketch con un'eccellente fedeltà. Potresti riscontrare alcuni problemi se dipendi da plug-in solo per Sketch come Abstract o InVision Craft.

In alcuni scenari, la scelta è ovvia: per gli utenti Windows, Sketch non è disponibile e per gli abbonati ad Adobe Creative Cloud, XD è incluso gratuitamente con prototipi condivisi illimitati. Ciò non è accaduto per caso.

Ma Sketch sta combattendo. La società ha recentemente chiuso $ 20 milioni di finanziamenti e promette funzionalità importanti come la collaborazione in team, il trasferimento nativo e una versione web dell'app nel 2019.

Se il controllo della versione non è un problema critico, non è mai stato un momento migliore per considerare l'utilizzo di Adobe XD. L'impegno di Adobe nei confronti della comunità di progettazione dell'esperienza utente è evidente con funzionalità come la modalità di risposta automatica, la griglia ripetuta e la prototipazione integrata. Nonostante il loro inizio in ritardo, Adobe ha dimostrato di poter rappresentare una sfida formidabile per Sketch.

Ulteriori letture sul blog di Toptal Design:

• Adobe XD vs. Sketch: quale strumento UX è giusto per te?
• Atomic Design and Sketch: una guida per migliorare il flusso di lavoro
• Progetta con precisione: una recensione di Adobe XD
• Cose che potresti non sapere sulla tipografia in Sketch
• Familiarizzare con lo sviluppo di plug-in di Sketch