Una guida per gli sviluppatori al web design per i non designer

Ho creato il mio primo sito Web come progetto scolastico quando avevo 14 anni. Il compito era semplice: creare un sito molto semplice che includesse testo, immagini e una tabella. Il mio solito atteggiamento nei confronti dei progetti scolastici era di dimenticarmene completamente e in seguito di trovare una soluzione dell'ultimo minuto. Ma questa volta sono impazzito.

Sin dal mio primo sito Web, ho sempre dato la priorità a rendere le cose belle. Ammettilo o no, le persone giudicano le cose in base agli sguardi. Se ciò che fai sembra buono, come se sapessi cosa stai facendo, le persone si fideranno di più. È così che vanno le cose.

Nel corso di anni di progetti secondari, ho spostato sempre più la mia attenzione sullo sviluppo delle mie capacità di progettazione piuttosto che sul perfezionamento della mia programmazione. Vedi, essere un algoritmo che scrive monstrum ti porta così lontano. Mentre persegui il sogno di avviare un progetto laterale redditizio, dovrai svolgere molti lavori diversi. Essere un designer è uno di questi. Proprio come gli atleti Cross-fit, i fondatori solisti devono essere ben arrotondati per esibirsi bene.

Un design superbo non è necessariamente quello con il maggior numero di voti dribblabili. È quello che non noterai in primo luogo. È un perfetto equilibrio tra "tua nonna potrebbe farlo" e "wow, è dannatamente bello". Il design può essere il tuo vantaggio competitivo o il chiodo nella bara.

Non si tratta di talento

Quando ero più giovane, ho giocato molto a Minecraft. Ho visto tutti questi meravigliosi edifici fatti dalle persone. Ma quando ho fatto qualcosa, sembrava una scatola. Brutto e senza stile. Come fai a fare qualcosa di carino in Minecraft, giusto?

Quindi, ho trovato un ragazzo su YouTube e ho creato una copia esatta di ciò che ha costruito. Alcune settimane dopo, avevo sviluppato il mio stile e potevo costruire da solo. Improvvisamente, le mie creazioni non sembravano merda. Cavolo, ho persino vinto un concorso di costruzione.

Il design è un'abilità e, come qualsiasi altra abilità, può essere appresa.

Scegliere lo strumento giusto per il lavoro

Durante la programmazione, puoi utilizzare Blocco note e scrivere un'app che sia buona come se fosse scritta in un IDE completo ... anche se la tua vita potrebbe essere piuttosto infelice nel farlo e probabilmente ci vorrà molto più tempo. Nel mondo del web design, MS Paint avrebbe assunto il ruolo di Blocco note e, come il Blocco note, poche persone in realtà scelgono di progettare con esso ... Spero.

Gli strumenti di progettazione più popolari per il Web sono:

  • Sketch, uno strumento unico per MacOS che, simile a React, sembra essere codificato in ogni elenco di lavori. $ 99 / anno.
  • Adobe XD, uno strumento multipiattaforma gratuito che assume il ruolo di Vue. Ha una comunità più piccola, ma è molto facile iniziare.
  • Adobe Photoshop, il coltellino svizzero per qualsiasi attività di progettazione conosciuta da tutti. Si è preso il posto di ... hai indovinato, jQuery. $ 9.99 / mo.

Non c'è quasi alcuna differenza se usi il codice Sublime o VS per scrivere app. O se usi React o Vue per il frontend. È solo una questione di preferenza. Lo stesso vale per gli strumenti di progettazione, poiché ognuno ha i suoi pro e contro.

Uso Adobe XD. Il motivo principale per me è che è multipiattaforma, quindi non sono tenuto in ostaggio dall'ecosistema Apple. È anche supportato da Adobe, quindi sarà qui per un po '. La cosa migliore per i nuovi arrivati ​​è che, da maggio 2018, Adobe XD è libero di utilizzare con solo alcune limitazioni (che è improbabile che ci si imbatti comunque).

Modifica la tua mentalità

La più grande sfida nel mondo del web design per me è stata quella di adattare la mia mentalità. Ero abituato a elaborare il design mentre codificavo il sito Web. Tutto aveva un ordine. Il flusso era da sinistra a destra e dall'alto verso il basso. Il fatto è che questo approccio ti rende un progettista peggiore.

Gli strumenti di progettazione sono caotici perché ti costringono a progettare come ogni elemento è posizionato in modo assoluto. Abbraccia questo cambiamento. Ti darà la libertà di cambiare rapidamente le cose e semplificare la sperimentazione. E questo è essenziale, perché il design è un processo continuo. Si prevede che cambierai molto le cose prima di ottenere un ottimo risultato.

Imparare gli strumenti

Durante la codifica, si utilizzano elementi HTML come div, span e input e si consente al browser di renderli in qualcosa di visivo. Con gli strumenti di progettazione, hai il potere di saltare l'intermediario e utilizzare direttamente elementi visivi come forme e testo.

Ho scelto i 4 strumenti di progettazione più utilizzati in modo da poter dedicare meno tempo all'apprendimento e alla progettazione. In questo modo, puoi iniziare a praticare il prima possibile. Di seguito, ti mostrerò come funzionano e come usarli.

Strumento rettangolo

I rettangoli sono la forma più universale. Ti ritroverai ad usarli sempre. Pensalo come un div. È utile per tutti i tipi di cose, dalla creazione di input di testo ai contenitori.

Strumento testo (etichetta)

Lo strumento di testo, come suggerisce il titolo, consente di creare testo. Non è così semplice, perché lo strumento di testo ha due stati: uno per il testo a riga singola e l'altro per più paragrafi. Fortunatamente, sono estremamente facili da imparare a usare correttamente.

Il primo stato è un contenitore di testo a riga singola che regola le sue dimensioni in base alle dimensioni del testo. È simile a un con l'eccezione che non andrà a capo se non fai un'interruzione di riga. Il vantaggio di questo stato è che regola automaticamente la dimensione della casella di testo in base all'altezza della linea e alla dimensione del carattere.

Per crearlo basta fare clic con lo strumento Testo selezionato e scrivere. Come regola generale, utilizza questo stato per tutto ciò che non ha bisogno di una larghezza specifica ed è una linea singola. Ad esempio, titoli ed etichette a riga singola.

Strumento di testo (paragrafo)

Il secondo stato è un contenitore di testo con una dimensione specifica che si comporta come un

con una larghezza specifica o

all'interno di una colonna della griglia. Il vantaggio di questo stato è che puoi controllare le dimensioni della casella di testo. Per creare un paragrafo, fai clic con lo strumento di testo selezionato e tieni premuto per creare una selezione. Come regola generale, utilizzare questo stato per paragrafi e titoli su più di una riga.

Seleziona strumento

Sposta, ridimensiona, duplica. Questo è lo strumento per quello. Quelle linee rosa mostrano la distanza dagli elementi circostanti. Le linee blu consentono di allineare correttamente gli elementi.

Strumento linea

A volte una linea è utile per separare parti del design. Ecco perché lo strumento linea è qui. Invece potresti tecnicamente usare gli strumenti rettangolari, ma ehi, quindi il div potrebbe essere usato per qualsiasi cosa.

Suggerimenti e tecniche di progettazione

disposizione

Nello sviluppo Web, un layout viene comunemente descritto come intestazione, menu, contenuto e piè di pagina. Fa parte di esso, ma un layout è più di questo. È letteralmente il modo in cui tutti gli elementi sono disposti.

Ad esempio, quando stavo progettando le informazioni sul progetto per Sidemail, ho distribuito uniformemente gli elementi all'interno di una scheda, rendendola più completa e più pulita.

Colori

Per aiutarti a trovare il colore perfetto per il tuo prossimo progetto, tieni a mente la psicologia dei colori (colorpsychology.org). Paletton è uno strumento utile per trovare la combinazione di colori perfetta in base al colore primario.

Usa sfumature di colori primari e colori di testo per creare una gerarchia visiva. Prova sfumature più scure o più chiare per il testo quando usi uno sfondo colorato.

Tipografia

Il carattere tipografico influenza in gran parte il marchio del tuo progetto, quindi scegli con saggezza. I caratteri tipografici premium tendono ad avere un aspetto migliore rispetto a quelli di Google Fonts, ma quando hai appena iniziato, non acquistarne uno. Anche su Google Fonts, ci sono alcune gemme nascoste.

Un trucco che uso molto spesso per rompere visivamente il testo è quello di rendere le etichette maiuscole con una spaziatura delle lettere più grande. Il testo in maiuscolo è simmetrico e ha un bell'aspetto dal punto di vista visivo, ma non abusarlo perché è molto più difficile da leggere.

Progettare una homepage (o una landing page)

Cerco sempre di evitare la tentazione di progettare elementi di tendenza e quindi inserire il mio messaggio. Piuttosto, traggo vantaggi (non funzionalità), li inserisco in una storia e la racconto da una pagina visivamente accattivante.

Dopo aver stabilito ciò che voglio dire, di solito cerco ispirazione. Una grande risorsa per questo è land-book.com, una vasta directory di landing page di grande impatto su cui le persone possono votare. Un'altra grande pagina ispirata al design è interfaces.pro dove puoi filtrare per categorie come prezzi, 404 o su di noi. Sfoglia solo fino a trovare abbastanza siti che mi piacciono e corrispondono al mio stile desiderato.

La parte difficile è mettere tutto insieme. Sfortunatamente, non ci sono scorciatoie. Devi solo iterare molto finché non ottieni un risultato di cui sei soddisfatto.

Potresti trovarti a chiederti se è normale che un design di cui sei stato completamente soddisfatto una settimana fa improvvisamente non si senta abbastanza buono o addirittura brutto oggi. La risposta è che è perfettamente normale e in realtà è una buona cosa. È essenzialmente perché cresci, impari e migliora. La sfida di ieri non è così impegnativa oggi. Tienilo a mente in modo da non rimanere bloccato in una corsa di topi.

Takeaways:

  • Il carattere unico fa la differenza
  • La grafica è molto importante, prova ad usare almeno alcune illustrazioni o immagini
  • Ottieni la giusta importanza visiva usando più sfumature di colori. Il testo e i colori primari non sono sufficienti.
  • Non utilizzare contenitori troppo larghi: circa 1100 px è abbastanza largo
  • Abbraccia lo spazio negativo
  • Parla di vantaggi, non di funzionalità
  • Cerca l'ispirazione se rimani bloccato

Progettazione di un'app Web (o di una dashboard)

Come per la progettazione di una landing page, non passare direttamente alla progettazione. Questa volta, non stai cercando di raccontare una storia. Invece, l'obiettivo è la facilità d'uso. Prendi carta e penna e fai un piano su come dovrebbe funzionare la tua app, cosa dovrebbe dipendere da cosa e come navigare facilmente.

Fai degli schizzi o dei telai se necessario. Esegui un'ispezione adeguata della progettazione della concorrenza per vedere di persona ciò che manca e che può essere fatto meglio o eventualmente trasformato in un vantaggio competitivo. A volte, è meglio fare una pausa prima di fare progetti su carta e progettazione.

Il miglior consiglio che posso dare che non è specifico del caso specifico è quello di scegliere un layout di pagina adeguato. In generale, tutte le app Web utilizzano due diversi layout di pagina in base allo scopo dell'app: contenitore a larghezza fissa o contenitore fluido che riempie l'intero schermo.

Contenitore fisso

Preferisco il contenitore fisso, perché è molto più facile concentrarsi su un'area ristretta poiché impedisce movimenti oculari inutili. Le app per container fissi tendono anche ad essere più pulite e meno schiaccianti per i nuovi utenti. Tuttavia, a causa della larghezza ridotta, le app per container fissi sono più difficili da progettare.

Esempi: Twitter, Buffer, DigitalOcean, Netlify, GitHub

Contenitore fluido

Le app per contenitori fluidi sono perfette per le app di chat, le app per fogli di calcolo e altre app in cui è essenziale disporre di più elementi sullo schermo. Ma tieni presente che un sacco di dati su uno schermo può diventare travolgente.

Esempi: Slack, Intercom, Hotjar, Fogli Google, Trello, Spotify

È importante scegliere il contenitore giusto, perché tutto il layout della pagina dipenderà da esso e modificarlo in seguito richiede molto lavoro. Ogni progetto è unico e richiede soluzioni uniche, quindi non abbiate paura di sperimentare!

Takeaways:

  • Mantienilo semplice
  • Usa un carattere leggibile
  • Utilizzare la gerarchia visiva quando si visualizzano molti dati
  • Approfitta delle scarse scelte progettuali della concorrenza

Avvolgendo

Ricorda, il design può essere il tuo vantaggio competitivo, quindi usalo e crea qualcosa di fantastico.

Inizia il tuo viaggio di progettazione ottenendo un modello Adobe XD che ho creato per la landing page del mio ultimo progetto. Basta iscriversi alla mia nuova mailing list e arriverà nella tua casella di posta.

Inoltre, sarai il primo a ricevere una notifica sul mio prossimo post in cui condividerò 69 giorni di progressi che ho fatto su Sidemail, un progetto SaaS su cui sto lavorando. Includerà elementi come il numero di abbonati, le visite al sito, le spese e le bozze di progettazione. Va da sé, ma garantisco assolutamente nessuno spam. Non ho nemmeno tempo per quella merda.

I miei DM di Twitter sono aperti, quindi se rimani bloccato mentre realizzi i tuoi progetti o hai altre domande, sentiti libero di rispondermi.