Benvenuto! Sono Sparsh Malhotra e oggi sono entusiasta di condividere con voi un argomento che mi sta molto a cuore: il design dell'interfaccia utente. In qualità di sviluppatore frontend, sono sempre stato interessato a creare interfacce utente straordinarie, ma siamo onesti: non è stato sempre facile.

Desideravo poter rendere le mie idee fantastiche senza fare affidamento su un designer, ma ogni volta che provavo a progettare qualcosa da solo, mi sentivo frustrato e mi arrendevo. Puoi collegare? Se è così, non sei solo.

Ecco perché sono qui per dirti che progettare bellissime interfacce utente non deve essere una tale lotta. Puoi sfruttare il tuo punto di vista unico come sviluppatore su come i consumatori interagiscono con il software per creare interfacce utente migliori. E seguendo le ultime tendenze e tecniche di progettazione dell'interfaccia utente, puoi essere meno dipendente dal progettista effettivo del team.

In questa serie, "How to UI in 2023", parlerò delle strategie e dei consigli che ho raccolto che mi hanno permesso di progettare bellissime interfacce utente che gli utenti adorano. Ti fornirò suggerimenti ed esempi utili per iniziare su qualsiasi cosa, dalle tavolozze dei colori alla tipografia, al design del layout e altro ancora.

Quindi, che tu sia uno sviluppatore esperto o che abbia appena iniziato, preparati a portare le tue capacità di progettazione dell'interfaccia utente a un livello superiore. Sei pronto a intraprendere questo viaggio con me? Grande! Andiamo!

PARTE 1 — Partiamo da zero

Il primo passo è importante: scegliere le funzionalità rispetto al layout

Cosa progetti per prima cosa quando inizi a progettare una nuova applicazione? Se è la barra di navigazione nella parte superiore della pagina, stai commettendo un errore.

Progettazione della shell dell'app, che include la determinazione del layout della pagina, ad esempio dove posizionare gli elementi di navigazione, se avere una barra di navigazione superiore o una barra laterale, se utilizzare un contenitore o una larghezza intera per il contenuto della pagina e dove posizionare il logo, non è il miglior punto di partenza. Questo approccio può portare a rimanere bloccati nel processo di progettazione e trascurare altri aspetti essenziali del progetto.

Un'applicazione è essenzialmente un gruppo di funzionalità.

Senza avere un'idea chiara delle funzionalità dell'app e di come funzionano insieme, è difficile prendere decisioni informate sugli elementi di design che funzioneranno meglio. Pertanto, è essenziale concentrarsi prima sulle funzionalità dell'app e raccogliere informazioni su come interagiranno prima di prendere qualsiasi decisione sul design dell'app.

I dettagli possono aspettare

Nelle prime fasi della progettazione delle funzionalità, è facile impantanarsi con dettagli minori come caratteri tipografici e ombre. Mentre questi elementi contano, è più importante concentrarsi sullo scopo più ampio della funzionalità e su come si inserisce nel design generale. Solo una volta che gli elementi fondamentali sono a posto dovresti iniziare a perfezionare i dettagli per assicurarti che siano in linea con gli obiettivi di progettazione più ampi. Assegnando prima la priorità agli aspetti fondamentali, è possibile creare un design più coerente ed efficace, che soddisfi meglio le esigenze dell'utente.

I progetti a bassa fedeltà consentono un processo di progettazione rapido, consentendo di passare rapidamente alla realizzazione del prodotto finale. Usa schizzi e wireframe per l'ideazione, quindi perfeziona il design scelto in formati di fedeltà superiore. Dando la priorità alla velocità e utilizzando prototipi a bassa fedeltà per esplorare le idee, puoi sviluppare rapidamente un progetto finale più efficace.

Scegli la tua voce di design

I design sono come le personalità: comunicano determinate caratteristiche e valori. Un sito bancario può mirare a un aspetto professionale e sicuro, mentre una startup alla moda può puntare a un'atmosfera giocosa e divertente. È importante scegliere una personalità di design che sia in linea con la messaggistica del marchio e il pubblico di destinazione.

Anche se può sembrare astratto, attribuire una personalità a un progetto si basa in realtà su fattori solidi e concreti:-

Scelta del carattere

La tipografia gioca un ruolo enorme nel determinare come si sente un design.

• Se vuoi un look elegante o classico, potresti voler incorporare un carattere serif nel tuo design:

• Per un aspetto giocoso, potresti usare un sans serif arrotondato:

• Se stai cercando un aspetto più semplice o vuoi fare affidamento su altri elementi per fornire la personalità, un sans serif neutro funziona alla grande:

I designer non hanno bisogno di essere esperti nella psicologia del colore per usarlo efficacemente. Prestare attenzione a come ti fanno sentire i colori e selezionare quelli che si allineano con la personalità e il messaggio del design può creare un forte impatto visivo.

• Il blu è sicuro e familiare: nessuno si lamenta mai del blu:

• L'oro potrebbe dire "costoso" e "sofisticato"
• Il rosa è un po' più divertente e non così serio

Arrotondare gli angoli in un design potrebbe sembrare un dettaglio minore, ma può influire in modo significativo sulla sensazione generale e sull'estetica.

• Un piccolo raggio di confine è abbastanza neutro e da solo non comunica molto di una personalità
• Un ampio raggio del bordo inizia a sembrare più giocoso
• Nessun raggio di confine sembra molto più serio o formale

Utilizza sistemi di progettazione predefiniti

È facile cadere nella trappola di pensare che avere infinite opzioni per colori, caratteri e altri elementi di design sia una buona cosa. Dopotutto, avere più scelte significa più possibilità di creare qualcosa di veramente unico, giusto? Beh, non esattamente.

In realtà, avere troppe opzioni può effettivamente ostacolare il processo di progettazione. Quando hai così tante decisioni da prendere, ognuna sembra più scoraggiante dell'ultima. Ti ritrovi a tormentarti anche per i più piccoli dettagli, come se utilizzare una dimensione del carattere di 12px o 13px o se un'ombreggiatura di una scatola debba avere un'opacità del 10% o del 15%. Con così tante possibilità, è facile sentirsi sopraffatti e rimanere bloccati in uno stato di indecisione.

• Definire i sistemi in anticipo

Non cercare il selettore di colori ogni volta che devi scegliere una nuova tonalità di viola: scegli tra un set di 8-10 sfumature scelte in anticipo.

Allo stesso modo, non modificare la dimensione di un carattere un pixel alla volta finché non sembra perfetto. Definisci in anticipo una scala di tipo restrittiva e utilizzala per prendere decisioni future sulla dimensione del carattere.

• Progettare eliminando

Inizia indovinando quale dimensione funzionerebbe meglio, forse 16px. Quindi, confrontalo con le opzioni su entrambi i lati, come 12px e 24px. In genere, due delle tre opzioni appariranno nettamente inferiori. Se le opzioni inferiori sono quelle alle estremità esterne, allora l'opzione centrale è probabilmente la scelta migliore.

Questo metodo è efficace per qualsiasi elemento di progettazione che abbia un sistema definito di opzioni. Limitando le tue scelte a quelle che presentano differenze evidenti, selezionare quella migliore è un compito semplice.