Ottieni il layout del sito Web perfetto
La progettazione di un layout di un sito Web non deve essere difficile, soprattutto se conosci gli errori comuni da evitare. In questo post, seguiamo i passaggi che devi compiere per raggiungere il layout del sito Web perfetto. Tratteremo ciò che ogni nuovo costruttore di siti Web dovrebbe saper fare prima di iniziare un nuovo progetto e cosa dovrebbero prestare attenzione per evitare errori.
Questi passaggi riguardano non solo gli aspetti di progettazione ma anche suggerimenti generali sul flusso di lavoro. In questa pagina esploriamo come iniziare e i passaggi chiave nel flusso di lavoro di progettazione. Segui questo consiglio e presto sarai sulla buona strada per creare layout di siti Web professionali.
01. Definisci cosa significa successo
Prima di iniziare il lavoro, devi sapere per cosa stai progettando. Oltre alla descrizione del sito, devi sapere quali sono le aspettative per esso. Prendi ad esempio un sito di notizie. Qual è l’obiettivo? Serve per creare il maggior numero possibile di impressioni sugli annunci o per fornire la migliore esperienza di lettura? Come verranno misurati quegli obiettivi?
Le buone riprogettazioni non sono necessariamente le più appariscenti, ma quelle che migliorano le prestazioni nel tempo. Parlare con i tuoi clienti prima di iniziare il tuo design è la chiave per definire tutto questo. Devi imparare quali sono le loro preoccupazioni e i loro obiettivi.
02. Comprendi il sito attuale
Il più delle volte, la partecipazione di un designer a un progetto non è qualcosa che accade isolatamente. I clienti non ti contatteranno sempre per iniziare qualcosa da zero. Nella maggior parte dei casi dovrai comprendere il sistema attualmente in atto e, se il tuo progetto è destinato a sfidarlo, trovare opportunità per evolverlo o seguirlo così com’è.
Le opzioni sono illimitate. Comprendere ciò che è in atto dal punto di vista del design è la chiave se devi muoverti velocemente e riconoscere dove sono le opportunità di innovare, invece di dover sfidare ciò che è stato stabilito e venire fuori come qualcuno che non è in grado di comprendere i requisiti.
03. Condividi presto i progetti con i clienti
Quando si propone un concetto interattivo o un ‘aspetto grafico’ di progettazione, è necessario assicurarsi che sia tu che il cliente siate sulla stessa lunghezza d’onda il prima possibile. Evita di dedicare troppo tempo a un concetto prima di condividerlo con il cliente.
Una volta approvato il concetto iniziale, puoi rilassarti un po’ e iniziare la produzione. Ma dopo aver presentato il primo concetto, se il cliente non se ne innamora, dovresti raccogliere abbastanza feedback per portare un secondo concetto sul tavolo.
04. Affrontare prima il layout
Questo sembra molto ovvio, ma ho scoperto troppo spesso che i progettisti saltano direttamente nel loro lavoro prima di pensare al problema che stanno cercando di risolvere. Il design consiste nel risolvere i problemi e questi problemi non possono essere risolti attraverso sfumature o ombre, ma piuttosto attraverso un buon layout e una chiara gerarchia.
Pensa al contenuto, al layout e alla funzionalità. Assicurati che quei pensieri siano in linea con gli obiettivi del tuo cliente e sentiti libero di condividerli.
05. Inizia a disegnare un framework di alto livello
Quando mi viene chiesto di creare un aspetto grafico per il layout di un sito Web, la prima cosa che faccio è creare un framework di alto livello che risolva tutti i problemi di progettazione. Il framework è l’interfaccia utente che circonda il contenuto e aiuta l’utente a compiere azioni e navigare attraverso di esso. Include la navigazione e componenti come barre laterali e barre inferiori.
Se ti avvicini al tuo design da questa prospettiva, avrai una chiara comprensione di quali saranno le tue esigenze di layout durante la progettazione di sezioni oltre la homepage.
06. Aggiungi una griglia
È semplice come sembra. Prima di iniziare a progettare qualsiasi cosa è necessaria una griglia adeguata. Non ci sono scuse valide per iniziare senza una griglia e, in caso contrario, posso assicurarti che il design non sarà altrettanto bello. Una griglia ti aiuterà a strutturare il layout delle diverse sezioni; ti guiderà attraverso i requisiti specifici delle dimensioni dello schermo e ti aiuterà a creare modelli reattivi, quindi sii coerente in termini di spaziatura e molti altri problemi di progettazione.
07. Scegli la tua tipografia
L’esplorazione di caratteri e colori diversi fa parte della fase di scoperta di un progetto. In generale, consiglierei di non utilizzare più di due caratteri tipografici diversi in un sito Web, anche se dipende davvero dalla sua natura. Scegli un tipo di carattere che sia facile da leggere per grossi pezzi di testo e sii più giocoso con titoli e inviti all’azione. Cerchi ispirazione? Non aver paura di usare caratteri grandi e sii creativo e coerente quando usi la tipografia.
08. Seleziona il tuo tema colore
Durante il processo di scelta di un set di caratteri tipografici, dovresti iniziare a esplorare quali colori utilizzerai nell’interfaccia, negli sfondi e nel testo. Consiglio un set limitato di colori e toni per l’interfaccia utente generale.
È importante applicarli in modo coerente nel layout del sito Web, a seconda della funzionalità di ciascun elemento. Pensa al layout di siti come Facebook, Twitter, Quora e Vimeo. Oltre all’interfaccia utente, non dovrebbero esserci restrizioni di colore per illustrazioni o dettagli grafici, purché non interferiscano con la funzionalità dei componenti.
09. Semplifica il layout
Più semplice è la struttura del sito, più facile sarà la navigazione per gli utenti. Ogni sezione deve raccontare una storia; ha bisogno di una ragione e di un risultato finale per l’utente. Il layout dovrebbe aiutare il contenuto a evidenziare quali sono i pezzi più importanti di quella storia.
In realtà non ci dovrebbero essere troppi inviti all’azione su una pagina.
Pensa al layout più semplice che puoi immaginare per uno scopo semplice e inizia ad aggiungere componenti necessari. Alla fine sarai sorpreso di quanto sia difficile mantenerlo semplice.
10. Affina tutti i componenti
Tratta ogni componente come se potesse essere presentato a un concorso di design. Se presti attenzione ad ogni componente, l’intero sarà più della somma delle sue parti. Devo ammettere che questo consiglio non è mio. L’ho sentito in un’agenzia precedente e sono rimasto scioccato da quanto fosse chiara e vera questa affermazione.
Ogni componente deve essere progettato come se potesse essere autonomo come il miglior componente di sempre. A volte i designer lasciano alcune parti di un sito fino all’ultimo nella loro lista di cose da fare e finiscono per non mostrare loro molto rispetto.
11. Guida i clienti attraverso le tue soluzioni
Evita di fare grandi rivelazioni del tuo lavoro. Uno degli obiettivi di comunicare spesso con il cliente è evitare sorprese nel rivelare il tuo lavoro. Le volte in cui ho presentato i miei progressi, ho trovato più utile portarli in un viaggio e mostrare da dove sono partito, le considerazioni che ho avuto durante la navigazione di questa o quella sfida e dove sono finalmente atterrato, invece di mostrare la fine del viaggio senza contesto.
In questo modo scoprirai che sono d’accordo con le tue conclusioni, o ad un certo punto durante la procedura dettagliata indicheranno un difetto o una variante aggiuntiva che potresti non aver considerato. In entrambi i casi avrai una conversazione e il cliente si sentirà più investito perché fanno parte del processo.
12. Pensa in movimento
Il movimento è essenziale quando si progettano esperienze interattive. Nessun progetto può essere giudicato da solo o come un componente statico; ogni componente è definito dalla sua relazione con il sistema, e quella relazione ha bisogno che il movimento sia trasmesso correttamente. Motion può illustrare effetti dinamici sul contenuto o stati interattivi all’interno del layout. Per quel secondo scopo, ti consiglio di portare i tuoi progetti un po ‘più avanti nella prototipazione.
13. Prototipo, prototipo, prototipo
Il prototipo è il modo migliore per testare interazioni e tecnologia. Esistono molti strumenti di prototipazione che semplificano oggigiorno e non è necessario essere un guru della codifica per creare prototipi efficaci. Questo è l’ennesimo modo in cui puoi entusiasmare il tuo cliente e farcela con concetti e idee che altrimenti richiederebbero molte spiegazioni.
14. Ripensare
Abbiamo davvero più bisogno di un pulsante di ricerca? Nella maggior parte dei casi la risposta è no. In qualità di designer, modelliamo il modo in cui gli utenti navigano in Internet, sta a noi decidere quanti passi dovrà compiere una semplice azione e quanto sarà efficiente il nostro sito.
Alcune convenzioni esistono perché funzionano, ma altre perché nessuno ha trascorso abbastanza tempo a valutarle. È importante ripensare i modelli interattivi stabiliti di tutti i componenti per vedere come possiamo migliorarli.
15. Sfida te stesso
Incoraggio ogni designer a sfidare se stesso in ogni progetto. L’innovazione non è sempre un requisito per il progetto, quindi spetta a noi trovare qualcosa di fresco. Esempi di sfide diverse potrebbero includere l’uso di un nuovo sistema a griglia, la creazione di un nuovo componente o anche sfide minori come evitare le modalità di fusione o utilizzare un colore specifico.
16. Prestare attenzione ai dettagli
Questa affermazione è stata abusata di recente ma non è sempre visibile nel prodotto finale. A seconda del concetto alla base del progetto, quella “attenzione ai dettagli” può significare cose diverse.
Potrebbe essere una piccola interazione, un’animazione inaspettata o un tocco estetico come una piccola sfumatura in un pulsante o un tratto sottile attorno a un blocco nel background. Ma nel complesso questo tocco è essenziale e arriverà naturalmente se ti piace davvero quello che fai.
17. Progetta il caso migliore; preparati al peggio
Tieni presente come funzionerà il tuo layout su diversi dispositivi e dimensioni dello schermo. Come designer, il nostro compito è risolvere i problemi attraverso diversi vincoli. Con il web design, i vincoli vanno da problemi concettuali e tecnici a problemi relativi al contenuto.
Dobbiamo costruire un sito in grado di funzionare non solo nello scenario ideale, ma anche nello scenario peggiore. Ad esempio, un utente potrebbe utilizzare uno schermo molto piccolo e controllare il sito quando non contiene quasi alcun contenuto in modo che sembri rotto.
Tuttavia, allo scopo di presentare il tuo lavoro, ti consiglio vivamente di creare lo scenario migliore (che dovrebbe anche essere lo scenario più comune per la maggior parte degli utenti). Dovrai visualizzare la quantità ideale di testo e mostrare il sito all’interno della dimensione ideale del browser.
18. Non affezionarti troppo alle tue idee
C’è una linea sottile tra sapere quando difendere le tue idee e imparare a riconoscere quando il tuo team o cliente non le vede come “l’unica”. Come designer devi credere fermamente in ciò che fai, ma dovresti anche essere aperto a cambiare rapidamente le tue idee e inventare qualcos’altro. Non dimenticare che esiste più di una soluzione.
19. Osserva il design finché non lo odi
Se sei appassionato di design, sono sicuro che questo è qualcosa che stai già facendo. Ogni volta che finisco un compito di cui mi sento orgoglioso, tendo a renderlo parte della mia vita. Ne prendo degli screenshot, lo controllo su diversi dispositivi, ne faccio sfondi e persino lo stampo e lo appendo al muro.
Come risultato di questo processo, arrivo a un punto in cui finisco per odiare il mio design. Comincio a vedere tutto ciò che non va e alla fine lo cambio. Se non ti piace il tuo lavoro precedente è un segno di maturità, e significa che stai finalmente imparando dai tuoi stessi errori.
20. Sii il migliore amico del tuo sviluppatore
Gli sviluppatori sono persone creative e amano il proprio lavoro tanto quanto te. Ma non sono sempre inclusi in un progetto sin dall’inizio e spesso vengono coinvolti solo quando il concetto viene deciso e il loro ruolo creativo è stato ignorato.
Questo processo è sbagliato; alcune delle migliori idee provengono dal team di sviluppo, quindi assicurati di unirti a loro fin dall’inizio del progetto. Condividere i tuoi concetti e l’entusiasmo con loro porterà a idee migliori e una migliore esecuzione alla fine.
21. Comunicazione eccessiva
Non mi sono mai pentito di aver comunicato troppo con i miei clienti. Non esitare a dire non appena qualcosa non è chiaro o ti senti bloccato. Ricorda che è nel loro interesse assicurarsi di utilizzare il tempo insieme nel modo più efficiente. Tendo a comunicare abbastanza spesso con i miei clienti all’inizio di ogni progetto, finché entrambi non ci sentiamo a nostro agio con il flusso di lavoro e comprendiamo le aspettative di entrambe le parti.
22. Presentare le cose nel modo più chiaro possibile
È altrettanto importante produrre un ottimo lavoro come è presentarlo. Il tuo miglior design può essere ignorato o gettato via se non lo presenti correttamente. Quando si tratta di presentazioni, vuoi spiegare il tuo lavoro come se lo stessi mostrando a un bambino di quattro anni. Tieni sempre presente che ciò che ti è totalmente chiaro potrebbe non essere così chiaro per qualcuno che vede il tuo design per la prima volta.
23. Affina il tuo lavoro
Per evitare pixel sfocati, prova a impostare il giusto contrasto tra tratti e colori di sfondo o di sfondo. Oltre a qualsiasi considerazione estetica, ci sono alcune cose comuni che devono essere evitate per creare un lavoro pulito e corretto.
Alcune cose a cui dovresti prestare attenzione quando cerchi di affinare il tuo lavoro includono la fasciatura dei gradienti, i bordi sfocati, le opzioni di rendering dei caratteri (alcuni caratteri, a seconda delle loro dimensioni sono meglio visualizzati, in una modalità di rendering specifica) e tratti che si fondono male con lo sfondo.
Questi sono solo alcuni esempi base di problemi da cercare, ma in realtà l’elenco è infinito. Guarda sempre il tuo progetto nel suo insieme per vedere se tutto funziona bene e quindi analizza ogni singolo componente più attentamente.
24. Riordina i tuoi file di progettazione
Questo (insieme all’uso di una griglia) è uno dei consigli più importanti, indipendentemente dallo strumento di progettazione che stai utilizzando. Indipendentemente dalle dimensioni del progetto e dal numero di designer che ci lavorano, è necessario mantenere i file puliti. Ciò consentirà di esportare più facilmente sezioni diverse, di accelerare il processo di progettazione e di collaborare con altri designer.
25. Segui il tuo progetto nello sviluppo
Se lavori all’interno di un’agenzia probabilmente saprai quanto è facile trovarti alle prese con la progettazione di un nuovo progetto quando viene sviluppato il precedente. Contrariamente alla credenza generale, il tuo lavoro su un progetto non termina quando vengono consegnati il PSD e il foglio di stile.
Se ti interessa davvero che i tuoi progetti e le tue idee di interazione siano ben eseguiti, controlla di tanto in tanto i tuoi vecchi migliori amici e gli sviluppatori e aiutali quanto è necessario per garantire che ogni piccolo pixel sia perfetto.
26. Mostra i tuoi lavori in corso
Come parte di una comunità di designer, tutti amiamo vedere non solo i risultati finali, ma anche i lavori in corso. A volte la parte migliore di un progetto viene lasciata fuori per diversi motivi e si perde nella cartella Archivio. Condividi lo sviluppo del tuo progetto per dare un’idea di come sei arrivato al layout del tuo sito web finale.
27. Promuovi
Ora che hai terminato il tuo progetto, è tempo di mettere la parola fine e promuoverlo online. Mostrare il tuo lavoro è il modo migliore per attirare nuovi clienti e attirare l’attenzione sul tuo mestiere. In alcuni casi ho collaborato con i clienti per preparare le risorse necessarie per promuovere il lavoro svolto insieme nell’ambito del progetto. Alla fine della giornata, è una situazione vantaggiosa sia per te che per il tuo cliente. Spargere la voce attirerà anche l’attenzione sulla loro attività. Quindi urlalo!
