Il set di strumenti del designer: flussi di lavoro, software e siti web

Proprio come gli sviluppatori di software, gli autori di contenuti, gli addetti al marketing e così via, i progettisti devono disporre di un buon set di strumenti per aiutarli ad affrontare il lavoro quotidiano. Quello che abbiamo cercato di fare qui è delineare tali strumenti, flussi di lavoro e il modo in cui puoi combinarli per accelerare il tuo lavoro e ridurre la possibilità di errori ed errori.

Raccogliere informazioni

Quando arriva un nuovo progetto, le prime ore riguardano principalmente la raccolta di informazioni su di esso: quali problemi deve affrontare il cliente, quali sono i suoi obiettivi, cosa gli piace e così via. Durante questo passaggio cruciale, il progettista dovrebbe cercare di quanti più dati utili possibile, che verranno successivamente utilizzati per prendere decisioni consapevoli.

Evernote

Evernote è un software straordinario, non è solo un'app per prendere appunti. Può memorizzare file, combinarli in raccolte, tag, gruppi ecc. Attraverso la sua potente ricerca è possibile fare riferimento a progetti precedenti e così via. Ovviamente, il lato più potente è come lo usi. Hanno una linea guida approssimativa per alcuni approcci organizzativi.

Email, Slack, Zoom ...

Il prossimo è un altro ovvio, ma c'è un motivo per cui l'abbiamo aggiunto: posticipare una chiamata, un messaggio o una riunione video potrebbe essere un grande ritardo per un progetto. Spesso, la possibilità di condividere uno schermo e esaminare mockup, wireframe, concetti e design è un salvavita. Non dimenticarlo mai

Trova l'ispirazione

Una volta che ci sono abbastanza informazioni, il passo successivo è raccogliere l'ispirazione: come dovrebbe apparire un'app / un sito web, qual è lo stile, qual è l'obiettivo, ecc. Ci sono idee interessanti per utilizzare la nuova tecnologia o diversi tipi di media ? Tutti i designer cercano ispirazione a destra ea manca: siti web, libri, riviste, qualsiasi cosa.

Dribbble, Behance e siti web simili

Proprio per questo motivo (e per i designer che si vantano) esistono siti web come Dribbble. Lì, noi designer possiamo cercare idee e approcci che risolvono i problemi che stiamo affrontando. A volte, l'obiettivo è creare "una pagina di vendita generica per il servizio A". Quella pagina di vendita avrebbe letteralmente un paio di paragrafi con una foto d'archivio. Totalmente un obiettivo poco interessante, ma è realistico. Bene, la combinazione di colori, tipografia, spaziatura, ecc. Può essere un po 'più unica. Forse prova anche diversi layout! E l'idea può venire da una pagina di destinazione casuale pubblicata 3-4 anni fa. La pagina Discovery di 99Design è anche un buon posto dove guardare!

Awwwards

Mettiamo siti come Awwwards in una categoria separata poiché in realtà mostrano qualcosa che è stato costruito e può essere visto funzionare. E per di più, si concentra maggiormente sul modo artistico, non tanto su "qualsiasi lavoro di design". La maggior parte delle volte, i siti sono così pesanti che diventano utilizzabili solo su macchine di fascia alta, ma potresti comunque trarne ispirazione.

Tavolozza dei colori / marchio

Per una build nuova di zecca, dove non ci sono colori predefiniti, uno dei passaggi per iniziare a lavorare sarebbe scegliere qualcosa che si adatti al nuovo sito. Ci sono due modi per accedervi: scegli uno schema di colori esistente o imposta il colore primario / secondario e aggira l'intero schema basato su di essi.

ColorHunt

Siti web come Color Hunt forniscono una raccolta di tavolozze di colori creata dalla comunità. Puoi scegliere e utilizzare direttamente quelli o scegliere i colori principali con cui iniziare. Non così carino ma anche simile è Color Lovers.

BrandColors

BrandColors ha un obiettivo leggermente diverso: fornisce un elenco dei principali marchi e delle loro combinazioni di colori. Potresti trovare alcune fantastiche sfumature e combinazioni lì che possono ispirare la tua costruzione. I colori non sono protetti da copyright, ma il nostro consiglio è di giocarci un po 'invece di copiare e incollare tutti i colori da luoghi come Amazon, ad esempio.

Beni premium e gratuiti

Non sempre c'è abbastanza tempo per lavorare su ogni singolo componente del sito. A volte, è meglio prendere un pacchetto di icone, un'illustrazione o una foto d'archivio realizzata da un altro designer / fotografo e usarla direttamente.

• Font-Awesome - Una vasta collezione di icone sotto forma di glifi di font
• Envato Elements: vasta selezione di risorse di alta qualità a un buon prezzo.
• Unsplash - Vasta raccolta di foto di alta qualità gratuite
• Generatori SVG come squircley, getwaves, blobmaker
• Adobe Fonts (a pagamento) e Google Fonts (gratuito)

Il miglior consiglio qui è quello di trovare alcuni siti come questi sopra e averli vicini, in modo da ridurre il più possibile il tempo e lo sforzo che devi fare per cercare e trovare la migliore grafica per il lavoro.

I principali strumenti di progettazione

Con il lavoro iniziale fuori mano, si tratta di costruire effettivamente il design. Poiché tutti i software progressivi per i progettisti dispongono di tutti gli strumenti necessari per creare progetti web / app, tralasceremo gli strumenti di wireframing.

Figma

La nostra scelta principale per il lavoro di progettazione in DevriX è Figma. Fornisce ottime capacità di collaborazione e app basate su browser a cui possono accedere tutti i membri del team, Linux, Mac o Windows. In precedenza abbiamo utilizzato Adobe XD, ma i membri basati su Linux non potevano utilizzarlo e Sketch è bloccato solo su Mac.

Illustrator / Affinity Designer

Per un lavoro più personalizzato, Illustrator o Affinity Designer sono sicuramente alcune delle scelte migliori. Negli ultimi due anni, le illustrazioni personalizzate sono una delle parti più di tendenza dei siti web. Una grafica ampia e colorata regola il above the fold e una maggiore esperienza con gli strumenti giusti è sicuramente una buona cosa da fare. In questo luogo, possiamo anche aggiungere software 3D come Blender per il rendering di modelli 3d, che possono essere utilizzati come risorse nelle pagine web.

Photoshop / Affinity Photo

Photoshop era il principale software per il web design. Oggi può sembrare strano, soprattutto perché abbiamo tutti questi fantastici strumenti che si concentrano principalmente sul Web. Ma Photoshop è ancora un ottimo strumento e lo usiamo spesso quando ci sono foto che necessitano di alcune modifiche o ritagliare forme / moduli.

Presentazione

Ma non è solo il lavoro di progettazione: un PNG statico. Alcuni designer che si concentrano un po 'di più sulla grafica animata e sulle interazioni. Una buona demo di come gli elementi dovrebbero comportarsi al passaggio del mouse, allo scorrimento o al clic aiuterebbe notevolmente il lavoro degli sviluppatori front-end. Sia Figma che Adobe XD possono aiutare in questo, ma entrambi sono anche limitati.

Adobe After Effects

After Effects è considerata una delle prime scelte per la grafica animata. Fornisce tutti gli strumenti necessari per rappresentare tutte le azioni e le animazioni. Una buona cosa da ricordare ai designer qui è che le animazioni dovrebbero seguire i limiti del web. L'aggiunta del motion blur non è qualcosa che puoi fare. Quindi, quando entri in animazioni più avanzate, discutine sicuramente con il tuo team di sviluppo front-end o leggi di più sulle animazioni sul Web e su ciò che è possibile. Lo stesso vale per UX e A11y.

Conservazione

Figma e Adobe XD sono praticamente focalizzati sul cloud, quindi non dovresti preoccuparti di perdere il lavoro, ma non tutto è così: Photoshop, file Illustrator, font che hai scaricato, foto, ecc. Risiedono tutti sulla tua macchina.

È meglio eseguirne il backup e averli sempre accessibili, soprattutto se lavori su più di una macchina. E quando si tratta di condividerli, è semplicissimo.

Dropbox

La scelta migliore per questo sarebbe Dropbox. Con la sua app desktop facile da usare, terrà sotto controllo i tuoi file e li sincronizzerà con il cloud non appena apporti modifiche. Da lì, condividerli con il cliente o il tuo team è a portata di clic.