UX/UI Developer: guida completa

UX/UI Developer: guida completa

Nel mondo della progettazione e dello sviluppo di applicazioni e siti web, si delineano nuove figure professionali che devono avere diversi aspetti tecnici alla loro base. UX indica la user experience, ovvero l’interazione con i componenti grafici, mentre UI indica la user interface, ovvero come si presenta graficamente un sito, applicazione web o app mobile, spesso queste figure sono unite e si indicano come ux ui front end.

Oggi nel mondo dello sviluppo di applicazioni e siti web esiste una distinzione tra chi progetta le interfacce grafiche(ux/ui designer) e chi deve implementarle(ux/ui front end developer).

Una persona che implementa l’interazione con l’interfaccia grafica si chiama UX Developer, chi implementa l’interfaccia grafica si chiama UI Developer. Queste due figure sono spesso la stessa persona e nelle offerte di lavoro vedrai la dicitura “UX/UI front end developer”.

Cos’è un UX/UI Developer?

Quindi un UX/UI Developer è quella persona che implementa un interfaccia grafica e le sue interazioni tramite del codice, spesso come front end developer, ovvero userà del codice html5, css3 e javascript(usando framework come Bootstrap, JQuery etc…) per realizzare l’interfaccia grafica richiesta.

UX Developer: front end ux developer

Lo UX(user experience) Developer è la persona che si occupa di implementare l’interazione con l’interfaccia grafica, come ad esempio un bottone. Implementa l’interazione usando Javascript e alcuni framework come JQuery. Quindi un UX developer appartiene alla categoria dei front end developer.

UI Developer: front end ui developer

UI(user interface) Developer è la persona che implementa l’interfaccia grafica usando editor grafici o codice come l’html o altri linguaggi. Come per lo UX Developer, lo UI Developer appartiene alla categoria dei front end developer.

Tra i Framework noti vi sono BootStrap, dojo, Material Design e molti altri: le 10 interfacce web per lo sviluppo front end.

Come lavora un UX/UI Developer?

Chi si occupa di UX/UI development, lavora a stretto contatto con il designer, in questo modo capisce ed ha un feedback su come sta progettando la user interface e la user experience.

Spesso lo UX/UI developer ha degli schemi grafici o flowchart che indicano come devono essere le interfacce grafiche e l’interazione che gli utenti dovranno avere con l’applicazione web, sito web o app mobile.

Quali strumenti usa un UX/UI Developer?

Gli strumenti di un UX UI Developer dipendono se sviluppa applicazioni web, siti web o applicazioni mobile.

Strumenti per applicazioni e siti web

Per applicazioni e siti web utilizzerà:

  • Browser web(Chrome, Edge, Opera, Safari, Firefox).
  • Editor di codice come Atom, Notepad++, Gedit, Visual Studio
  • Connessione FTP
  • Strumenti di debug del codice(es: console dei vari browser)
  • GitHub

Strumenti per applicazioni mobile

Nel caso di sviluppo di applicazioni mobile, lo UX/UI Developer userà:

  • Smartphone Android o iOS.
  • Ambiente di sviluppo XCode, Android Studio, Visual Studio.
  • Emulatore di smartphone.
  • Strumenti di debug del codice.
  • GitHub

Quali linguaggi di programmazione usa un UX UI Developer?

In questo caso lo sviluppatore dovrà usare diversi strumenti per implementare la user experience(UX) e l’interfaccia utente(UI).

Per la ux(user experience) userà:

Per la UI(user interface):

Altri Framework sono disponibili qui, le 10 interfacce web per lo sviluppo front end.

Come trovare lavoro per un UX/UI Developer?

Se hai acquisito le basi per lo sviluppo e l’implementazione delle interfacce grafiche, puoi trovare lavoro in Italia e all’estero nei seguenti siti web:

Ti consiglio di seguire i siti web elencati per rimanere aggiornato con le ultime tecnologie richieste dal mercato, inoltre puoi farti un idea dello stipendio medio di un ui/ux developer.

UI Developer: esempio

L’ui developer deve occuparsi di implementare l’interfaccia grafica sulla base delle disposizioni fornite dallo ux/ui designer.

Supponiamo che il designer ti abbia fornito uno schema di una pagina a 2 colonne.

UI Developer: esempio

Adesso il compito dello UI Developer sarà di tradurre il mockup in una versione concreta tramite codice html:

<!doctype html>
<html>
<head>
<title>Pagina commissionata</title>
</head>
<body>
<div class="container">
<div id="colonna1"></div>
<div id="colonna2"></div>
</div>
<style>
#colonna1{ display: inline-block; width: 50%; height: 400px; float: left; }
#colonna2{ display: inline-block; width: 50%; height: 400px; float: left; }
</style>
</body>
</html>

Salva la pagina come esempio.html e aprila, vedrai il risultato.

UX Developer: esempio

Suppponiamo che ti hanno commissionato lo sviluppo di una pagina web in cui alla pressione di un bottone appare un alert, quindi avrai pagina e bottone come elementi da gestire.

In questo caso crea pagina.html.

<!doctype html>
<html>
<head>
<title>Pagina commissionata</title>
</head>
<body>
<!-- BOTTONE DI CUI GESTIRE L'INTERAZIONE -->
<button id="bottone">Ciao</button>
</body>
</html>

Come vedi nella pagina web esiste un bottone che dovrai gestire(user experience), quindi dovrai implementare il seguente codice in javascript:

<button id="bottone">Ciao</button>
<script>
$("#bottone").click(function(){ alert("Mi hai premuto"); });
</script>

Come vedi dall’esempio, diventa difficile in questa fase separare UX e UI developer, poichè sarà più facile per la stessa persona gestire il tutto, ecco il codice completo:

<!doctype html>
<html>
<head>
<title>Pagina commissionata</title>
</head>
<body>
<!-- BOTTONE DI CUI GESTIRE L'INTERAZIONE -->
<button id="bottone">Ciao</button>
<script>
$("#bottone").click(function(){ alert("Mi hai premuto"); });
</script>
</body>
</html>

Quali difficoltà affronta un UX/UI Developer

Per diventare un UX/UI developer è necessario fare molta pratica ed acquisire una buona padronanza con i framework che sono stati presentati in questo articolo(jquery, bootstrap, angular, react, vue etc…).

Quando lavorerete in contatto con designer, vi sarà chiesto di sviluppare dei componenti che non troverete nativamente e che saranno difficile da realizzare lato codice, ovviamente con le giuste basi, sarete in grado di affrontare ogni sfida.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *