Ci sono molte aree legate al design nel settore IT. I più comuni sono i designer, nascosti dietro gli acronimi UX e UI. Bene, alcune persone riescono persino a includere sviluppatori front-end come designer. Proviamo a capire chi sono i designer nel mondo IT, qual è la differenza tra UI e UX e quale rapporto hanno gli ingegneri front-end con la progettazione.
Designer
Lo sviluppo dell'interfaccia di applicazioni, siti Web o giochi è un processo piuttosto complesso e richiede l'applicazione di conoscenze provenienti da diversi campi: ingegneria, psicologia e design. I progettisti dell'interfaccia utente (in inglese - User Interface o UI) si concentrano sul modo in cui viene visualizzata la funzionalità del sito (ricerca, schede, menu) e sui dettagli dell'interazione tra il client e l'interfaccia. L'obiettivo di un progettista dell'interfaccia utente è il design di un prodotto moderno esteticamente accettabile . UX sta per User Experience, che significa “esperienza utente”. Un progettista UX è più concentrato sull'usabilità e sulla comprensione dell'interfaccia da parte del potenziale utente. Uno specialista di questo tipo condurrà spesso ricerche e sondaggi che costituiranno la base per la creazione di un concetto di design e testerà anche i concetti durante e dopo lo sviluppo. In genere si concentra sulla struttura, sul contenuto, sulla navigazione e sul modo in cui l'utente interagisce con questi elementi.
Produce mappe del sito, prototipi, che costituiscono la struttura di base durante la creazione di software. L’obiettivo del lavoro di un progettista UX è che l’utente ottenga in modo rapido e indolore dal sito ciò per cui è venuto qui . Tuttavia oggi è molto comune vedere queste due specializzazioni scritte con una barra. Cioè, i compiti di entrambe le direzioni vengono eseguiti da uno specialista. Un progettista UX/UI progetta l'interazione dell'utente con l'interfaccia, decide esattamente cosa deve fare ed è responsabile dell'aspetto finale di questa interfaccia.
Cosa deve sapere un progettista UX/UI
Redattore grafico . Gli strumenti più popolari sul mercato sono Adobe Photoshop, Adobe Illustrator, nonché Sketch, Figma. Scegli un editor adatto a te e prova prima a disegnare screenshot di un sito Web o di un'applicazione, modernizzandoli un po '.
Strumenti di prototipazione (Mockplus, Axure) . Uno strumento di prototipazione è il collegamento tra un'idea e la sua implementazione. Non importa quale strumento usi. Puoi provarne diversi e decidere quello che si adatta al tuo stile e alle tue preferenze.
Psicologia dell'utente. Già in fase di progettazione, dovresti pensare se sarà conveniente per te o per qualcun altro utilizzare questa interfaccia. Mettiti nei panni del cliente, costruisci una forte connessione con lui e sii attento alle sue esigenze. Dopotutto, un prodotto avrà successo se c’è domanda.
Avrai anche bisogno della conoscenza della teoria dei colori . Sappiamo alcune cose fin dall'infanzia, soprattutto chi ha frequentato la scuola d'arte. Tuttavia, ci sono alcune specificità riguardo al lavoro dei designer. Le conoscenze di base possono essere ottenute da libri o articoli su Internet.
A seconda delle specifiche del lavoro, potrebbe essere necessaria una conoscenza di HTML e CSS o (alcuni) linguaggi di programmazione (i collegamenti alle risorse possono essere trovati di seguito, nella sezione "Cosa dovrebbe sapere uno sviluppatore front-end").
Sviluppatore Front End
Il compito principale di uno sviluppatore front-end è sviluppare la parte client dell'interfaccia. Cioè, un tale specialista “rivitalizza” ciò che i progettisti hanno progettato. È responsabile del funzionamento e del funzionamento dell'interfaccia e meno del contenuto visivo. Uno sviluppatore front-end spesso ha bisogno di trovare una buona soluzione per l'interfaccia utente durante la fase di sviluppo, quindi collabora spesso con un progettista UX/UI. Il codice scritto dallo sviluppatore front-end viene eseguito nel browser dell'utente (come si suol dire, "lato client"). Inoltre, uno dei compiti più importanti è garantire che il sito o l'applicazione web abbiano lo stesso aspetto su tutte le piattaforme e tutti i browser.
Cosa dovrebbe sapere uno sviluppatore front-end
Di norma il front-end si basa su tre pilastri: il linguaggio di markup della pagina HTML, i fogli di stile CSS e il linguaggio di programmazione JavaScript. Inoltre, lo sviluppatore front-end deve comprendere i principi di funzionamento del protocollo HTTP, dei server e dei browser e le caratteristiche di visualizzazione dell'interfaccia su vari dispositivi attualmente sul mercato. Strumenti e metodi per creare interfacce web sono in continua evoluzione e cambiamento, quindi lo sviluppatore deve monitorarlo costantemente.
HTML e CSS (layout)
Questo è il layout, gli stessi mattoni da cui è costruito il sito. Il linguaggio di markup HTML determina l'organizzazione del sito, il contenuto e tutte le interazioni tra di essi. Ti consente di designare la parte superiore della pagina, la parte inferiore, i blocchi laterali con contenuti, intestazioni, visualizzazione di testo ed elementi multimediali. I fogli di stile CSS vengono utilizzati per decorare gli elementi HTML. Determinano esattamente come viene visualizzato ciascun elemento grafico che si trova sulla pagina. Utilizzando le ultime versioni di HTML5 e CSS3, puoi inserire componenti video e audio nella pagina, creare immagini e animazioni 2D e persino scrivere semplici giochi. Non è necessario cercare di ricordare tutti i tag e gli stili contemporaneamente. Sarà utile apprendere le nozioni di base e metterle subito in pratica. Un ottimo sito dove puoi imparare le basi di HTML e CSS è W3School. Ma solo se hai almeno una conoscenza base dell'inglese.
Inoltre, lo sviluppatore front-end deve comprendere lo sviluppo multibrowser e multipiattaforma, il layout adattivo e reattivo.
Bootstrap
È un framework per HTML, CSS e JavaScript. Cioè, alcuni modelli dai quali, come da un costruttore, puoi assemblare siti molto più velocemente che senza di essi. Ma, ovviamente, devi personalizzarlo in base alle tue esigenze. Se conosci l'inglese, ti consigliamo il sito getbootstrap e lo stesso w3schools .
JavaScript
Javascript è il nucleo dello sviluppo front-end. Questo è il primo e più diffuso linguaggio di programmazione dell'interfaccia. Può aggiungere molte funzionalità al sito. A livello base, questo linguaggio ti consente di aggiungere elementi interattivi a una pagina. Viene utilizzato per creare mappe che si aggiornano in tempo reale, giochi e film online interattivi. Nei nostri corsi JavaRush senior impariamo un po' di JavaScript. Puoi anche studiarlo nella stessa W3School o leggerlo in russo sul sito javascript.ru .
jQuery
jQuery è una libreria Javascript che contiene plugin ed estensioni in grado di rendere lo sviluppo ancora più semplice e veloce. Invece di scrivere codice da zero, le librerie consentono di aggiungere componenti già pronti, che possono poi essere personalizzati per un progetto specifico. È possibile utilizzare le funzioni di compilazione automatica dei moduli di ricerca, riorganizzazione e ridimensionamento della griglia e impostazione dei timer per il conto alla rovescia. Corso pratico su jQuery presso w3school
Framework Javascript
Esistono diversi tipi di framework, ma puoi sceglierne uno conveniente per te da utilizzare. I più famosi sono Angular, Backbone, Ember e React. Rappresentano una struttura già pronta per il codice. Aiutano ad accelerare lo sviluppo. E in combinazione con le librerie possono ridurre al minimo lo sviluppo di un sito Web o di un'applicazione da zero. Revisione dei 5 framework e librerie JavaScript più popolari del 2017
Sistema di controllo della versione Git
I sistemi di controllo della versione possono tenere traccia delle modifiche apportate al codice nel tempo. Consentono inoltre di tornare a una versione precedente del progetto. Git è il sistema di controllo della versione più utilizzato. Sapere come lavorare con Git è un'abilità importante per ogni sviluppatore. Tutorial su Git in russo
Brevi conclusioni
UI sta per User Interface, che significa “interfaccia utente”. Cioè, il progettista dell'interfaccia utente è il principale responsabile del modo in cui il prodotto viene presentato all'utente. Sviluppa pulsanti, icone, seleziona i caratteri e prepara un layout. UX sta per Esperienza utente. Quindi un designer UX progetta il design di un sito Web, un'applicazione - o qualsiasi cosa - in modo che l'utente sia a suo agio e comprenda cosa è cosa e possa ottenere ciò di cui ha bisogno dal sito con il minimo sforzo. Molto spesso, entrambi i tipi di lavoro vengono eseguiti da un'unica orchestra: un progettista UI/UX. Lo sviluppatore front-end ravviva il lavoro dei designer introducendovi delle dinamiche: i pulsanti iniziano a essere premuti e l'immagine inizia a cambiare. Deve conoscere linguaggi di programmazione, conditi con framework, preprocessori e librerie.
GO TO FULL VERSION