Design VS Code: perché dovrebbero andare di pari passo?

I designer dovrebbero concentrarsi solo sull'arte del branding visivo di un sito web? Gli sviluppatori dovrebbero solo sapere come codificare? Qual è il significato dello sviluppo front-end in Drupal? Troviamo le risposte a tutte le tue domande in questo articolo.

Quando approfondiamo questo enigma tra design e codice, ci viene in mente che entrambi sono, in effetti, complementari l'uno all'altro. Ma la domanda è perché? Perché i progettisti di UI/UX devono imparare il codice e i suoi fondamenti e lo stesso vale per gli sviluppatori anche in termini di design.

Entrambi i domini implicano la creatività, la comprensione degli utenti e il loro comportamento. Essere un designer senza conoscere le abilità di codifica di base e la struttura del codice è come preparare una torta mezza sfornata, che dopo essere stata mangiata potrebbe portarti a fare baldoria in bagno.

Ma prima di tutto, veniamo alle basi con un esempio.

Progettazione vs codifica: la somiglianza con una differenza

Per uno scrittore, bisogna immaginare e concludere i propri pensieri prima di metterli per iscritto. Nessuno prende semplicemente un diario o va su un blog o una piattaforma di social media e inizia a scrivere subito. Ecco perché l'intera procedura è chiamata composizione. E sì, scrivere un'email in Gmail si chiama anche "componi". Ora, perché stiamo parlando di scrittori, composizioni e tutto il resto. Andiamo al sodo. In questo caso, l'immaginazione è il tuo design e scrivere i tuoi pensieri è lo sviluppo. Spero che tu abbia un'immagine migliore ora; passiamo a un altro lato di questo argomento.

I designer dovrebbero imparare a programmare e gli sviluppatori dovrebbero imparare a conoscere UI/UX?

Durante gli sprint del codice di progettazione, potresti imbatterti in situazioni in cui tutti i progetti creati non sono fattibili. Alla fine, il prodotto finale finisce per essere una versione ottimizzata del design originale. Le discussioni accadono, il cliente cambia i requisiti, ma il problema rimane coerente. Queste situazioni possono essere evitate se i team di progettazione e sviluppo lavorassero insieme contemporaneamente fin dall'inizio. In questo modo, il lavoro viene svolto in modo più efficiente perché ricevono feedback continui gli uni dagli altri su cosa è fattibile o cosa no.

Comprendere entrambi i domini non è così difficile come potresti pensare. In entrambi, ci vuole immaginazione, processo di pensiero e pratica. E sì, per non parlare delle competenze fondamentali sono il design e il codice, che è una scelta da imparare ma non obbligatoria se ne conosci uno.

Un designer deve conoscere la fattibilità, le possibilità e le sfide di un progetto e puoi conoscerlo solo quando sai come ottenerlo attraverso il codice. Lo stesso vale anche per gli sviluppatori. Quando gli sviluppatori comprendono i diversi scenari che gli utenti possono attraversare, la loro esperienza utente, la risoluzione dei problemi, la soluzione, ecc., Può rendere le cose molto più semplificate ed efficienti.

Ecco i motivi per cui un individuo dovrebbe apprendere le basi di una delle abilità (codice o design) oltre alle loro competenze di base

1. Maggiore controllo sull'aspetto del prodotto: ciò significa sostanzialmente che quando uno sviluppatore sa come funziona l'analisi del design e quale processo di progettazione è coinvolto, può adattare quelle idee di design e avere un maggiore controllo sul prodotto finale e quindi con conseguente consegna più rapida del prodotto.
2. Comprendere gli utenti e applicarli al design: quando uno sviluppatore comprende il prodotto dal punto di vista di un utente, gli dà un enorme potere per costruire qualcosa di cui gli utenti hanno veramente bisogno e desiderano. Ad esempio, capirà come reagiranno gli utenti a caratteri tipografici diversi, stili di pulsanti diversi, combinazioni di colori, ecc.
3. Adattamento alla progettazione: è ugualmente importante per i progettisti che sanno programmare. Quando sa come sarà strutturato il prodotto progettato durante lo sviluppo, può idealmente migliorare il design e renderlo più efficiente, riducendo così il tempo e lo sforzo degli sviluppatori.

Elaborare le conseguenze dell'avere solo competenze di base con Esempi

Per una migliore comprensione del motivo per cui progettazione e codifica dovrebbero andare di pari passo, tuffiamoci in alcuni esempi.

Quanto sopra è un classico esempio dell'uso della struttura non sequenziale. Qui la struttura viene riordinata mentre viene sviluppata per il mobile. Questa non è solo una cattiva pratica; è anche dispendioso in termini di tempo e ingombrante. Tuttavia, se un progettista conoscesse la struttura del codice in fase di sviluppo, potrebbe essere facilmente e possibilmente evitata.

Considera questo esempio sopra di una sovrapposizione pop-up con una pergamena. Una sovrapposizione pop-up è progettata in modo tale da deviare l'attenzione dell'utente su un singolo soggetto e viene utilizzata solo come punto focale quando è necessario visualizzare determinate informazioni. Qui, l'overlay pop-up ha una pergamena in background che potrebbe distrarre l'utente e potrebbe non rivelarsi inefficace

Uno sviluppatore si concentra sempre sul completamento dell'attività in modo più efficiente e più veloce, e nel processo perde alcuni aspetti del design, che potrebbe ritenere non necessario o che potrebbe essere fatto modificando un po' il design. L'esempio sopra riportato mostra lo scenario esatto in cui uno sviluppatore fa il proprio lavoro ma finisce per compromettere il design. Quindi, se lo sviluppatore avesse avuto un'esposizione all'interfaccia utente/UX di base, questo problema avrebbe potuto essere evitato facilmente.

Come altro esempio, prendiamo gli screenshot di cui sopra che provengono da un'applicazione per risparmiare denaro. L'attività stessa non ha alcun campo di input per una firma digitale. Inoltre, al momento dell'invio del modulo, il messaggio di errore non fornisce all'utente alcuna guida o suggerimento su come ottenere una firma digitale valida. Se uno sviluppatore conoscesse le basi di UI/UX, avrebbe potuto guidare facilmente l'utente nel processo successivo o avrebbe potuto visualizzare il messaggio in modo più semplice con un riferimento appropriato al campo o ai suggerimenti.

Dove iniziare?

Iniziare è sempre una buona idea. Per i designer, le basi da imparare sono HTML, CSS e un po' di JS/jQuery. Ci sono molte piattaforme di apprendimento online e siti Web con strumenti IDE live per esercitarti e imparare.

HTML: la struttura di base di qualsiasi design viene prima di tutto ed è il codice di qualsiasi prodotto.
JS/jQuery: con questi è possibile ottenere slider, pop-up, menu a discesa e molto altro
Sandbox: strumento live per giocare con il tuo codice
CSS/SCSS : lo styling della struttura è un processo creativo e puoi ottenerlo tramite CSS/SCSS
W3Schools: una semplice piattaforma di apprendimento online e una buona per iniziare
Codrops (Tympanus): una vasta libreria con la mente del design e dello sviluppatore sulla stessa piattaforma

Per gli sviluppatori, puoi iniziare seguendo le migliori pratiche su UI/UX con -
Behance: stack di design completo per portfolio professionale e ispirazione
Dribbble: idee progettuali da pubblicare e da cui trarre ispirazione
Muzli: blog, ispirazioni, idee
Mezzo: blog su qualsiasi campo (quasi), best practice e tutorial
Awwwards: siti Web nominati per il miglior design e vincitori da cui trarre ispirazione
XD/Figma/Sketch: strumenti per progettare mockup, wireframe per UI/UX

Per i designer

Per gli sviluppatori

Sviluppo front-end in Drupal

Drupal 8 come CMS è un framework di gestione dei contenuti molto intuitivo per i designer di UI/UX perché ha molto da offrire fin da subito, il più significativo è la varietà di temi disponibili e design reattivi. Naturalmente, ci sono molte altre funzionalità a cui posso pensare in questo momento, ma conserviamole per un altro giorno.

Mentre i designer UX applicano le loro capacità creative e si concentrano sulla presentazione visiva di un sito Web Drupal, gli sviluppatori Drupal front-end colmano il divario tra i designer UX e gli sviluppatori Drupal back-end. Sono loro che implementano i componenti visivi forniti dal designer in un sito web Drupal. Sebbene sia il designer UX che lo sviluppatore Drupal front-end pensino in termini di esperienza utente e risoluzione dei problemi relativi all'UX, adottano approcci diversi per risolverli. Quest'ultimo, però, trova sempre una risoluzione tramite codice.
Gli sviluppatori Drupal front-end sono responsabili della fornitura di bellissimi siti Web Drupal lavorando e personalizzando i temi Drupal. Dovrebbero essere in grado di risolvere i problemi di front-end per i quali dovrebbero essere dotati della conoscenza di PHP, CSS, jQuery, CSS, HTML e, soprattutto, della progettazione di siti Web mobile-first.

Con la crescente popolarità dei siti Web Drupal senza testa e dell'architettura disaccoppiata, gli sviluppatori Drupal front-end che hanno una comprensione dei framework di sviluppo frontend come Angular, ReactJS, Vue.js, hanno sempre un vantaggio competitivo.
Quindi, tutto sommato, per essere in grado di eccellere nello sviluppo di Front-end Drupal è necessario uscire dalla propria zona di comfort e imparare come creare e implementare al meglio esperienze digitali moderne dotate delle ultime tecnologie.