Come ho imparato a rubare come un artista in un mese e ho progettato e realizzato il sito web della mia nuova azienda

# 4 - Quarto mese della mia sfida: 12 argomenti da imparare in 12 mesi

Una foto che ho scattato a Malaga (Spagna), la città di Picasso, è un bel dipinto per ispirare i colori

Forse ti stai chiedendo perché ho chiamato questo articolo "Come ho imparato a rubare come un artista", in realtà non ho imparato a rubare perché lo so già .. sto scherzando hehe . In realtà questo titolo deriva dal libro Ruba come un artista - Austin Kleon che il mio mentore mi ha consigliato di leggere.

"L'arte è un furto". - Pablo Picasso

Quello che inizialmente volevo imparare questo mese erano le teorie del design e dopo aver discusso con il mio mentore mi ha detto di imparare il significato dei colori o della tipografia. Dal momento che volevo iniziare qualcosa di più generico, mi ha parlato di questo libro che ti insegna in modo divertente come trovare l'ispirazione, come mantenere la motivazione, qual è il buon flusso di lavoro di progettazione e come mantenere la creatività e la produttività. Come puoi immaginare, terrò teorie e tipografia sui colori per un altro mese di apprendimento!

In realtà non ho mai studiato il design stesso, mi considero un designer e uno sviluppatore perché ho imparato praticando e questa è la ragione principale per cui voglio saperne di più sulle teorie. Forse ho la sindrome dell'impostore e questo mese di apprendimento è qui per fermarlo!

Ho iniziato la sfida il 6 luglio, se leggi il precedente post di Learning Lab Challenge in cui è stata costruita la mia prima app web progressiva, puoi vedere che l'ho completata il 13 luglio. Sì, stavo facendo un po 'di entrambe le date, ed è un male. È principalmente perché mi sono impegnato a fornire il sito Web della nostra nuova azienda .

Preparazione

  1. Trovare un mentore
    Ho scelto Vera come mentore. Era la mia collega della mia precedente compagnia ed è molto talentuosa.
  2. Definire l'ambito dell'argomento
    Come descritto di seguito, limiterò l'ambito di questo argomento al flusso di lavoro di progettazione e come trovare l'ispirazione.
  3. Scegliere una risorsa di apprendimento
    La mia principale risorsa di apprendimento sarà questo libro: Ruba come un artista - Austin Kleon.
  4. Definire un progetto
    Quando ho appena avviato una nuova società, che lavorerà come agenzia web, prima progetterò e poi costruirò il suo sito web. Inoltre, vorrei creare un elenco di controllo per il web design che avrei potuto utilizzare in tutti i miei progetti.

Il corso / lettura

Steal Like An Artist di Austin Kleon è un libro molto breve e di facile lettura. È molto divertente. Il libro è pieno di illustrazioni e disegni che rendono la lettura molto interessante. Ogni capitolo descrive un consiglio o un concetto da applicare nella tua vita o nel tuo lavoro.

Ognuno di questi consigli riguardava il flusso di lavoro di progettazione, gli hack di progettazione o la vita. Ho preso nota e ho cercato di applicare quelli più preziosi per me stesso ed è stato bello vedere che ne stavo già applicando altri.

Flusso di lavoro di progettazione

Austin Kleon non ha descritto un flusso di lavoro di progettazione in sé, ma solo una serie di consigli che ho compilato come "consigli da includere nel mio flusso di lavoro di progettazione"

Il primo e miglior consiglio di questo libro è di creare un file di scorrimento.
È fondamentalmente una raccolta di arte, siti Web, musica, foto, arte di strada, tutto ciò che ti fa sentire qualcosa, tutto ciò che ti piace o qualsiasi cosa che puoi usare come ispirazione in seguito. La raccolta può essere fisica, su un quaderno o digitale, ad esempio su Pinterest, Google Keep, Google Drive, Evernote ...
Ogni volta che devi avviare un progetto, puoi andare a questo file di scorrimento e selezionare le risorse che ti ispireranno, ecco perché lo chiama file di scorrimento. Un po 'come esca .

Lo terrei nel mio file di scorrimento, il miglior dipinto di sempre

Il secondo consiglio più importante è copiare e imparare copiando. Devo sottolineare che non dovresti fare una copia noiosa senza pensare, che si chiama plagio, ma di "decodificare" il progetto, cercare il significato dietro di esso e ricostruirlo sotto la tua comprensione. Inoltre, dicono che copiare da uno è plagio, copiare da molte fonti è ricerca. È un modo molto positivo di vedere le cose. Questo è qualcosa che sembra ovvio, ma interessante da sapere e da fare consapevolmente.

Un'immagine trovata in

L'ultimo consiglio più importante sul flusso di lavoro di progettazione è quello di stare lontano dallo schermo e mantenere le tecnologie per la versione finale del progetto. È meglio usare strumenti reali, come la carta, e usare il tuo corpo per la parte creativa del lavoro. Ti fa sentire che stai davvero creando e creando. È anche qualcosa che faccio sempre nel mio processo di progettazione.

Progettare hack

Quello che ho selezionato come hack di design sono suggerimenti che ti aiuteranno a fare un lavoro di progettazione migliore ma non fanno parte del tuo flusso di lavoro di progettazione, non devi farlo ogni volta che hai un nuovo progetto di progettazione.

Ogni artista sta seguendo i movimenti e alcuni influenzatori, ogni artista ha un mentore o anche gli allievi. In qualche modo cercano di imitare, copiare ed essere bravi come l'altro artista che li influenza. È qualcosa che è sempre stato lì ed è applicabile a qualsiasi artista. Perché non a te? Ecco perché il libro suggerisce di trovare 3 artisti che ami e di cercare tutto su di loro. Possono essere pittori, designer, imprenditori, musicisti, persino creatori di app! E se è possibile, puoi anche trovare quali sono i loro influenzatori e costruire un enorme "albero genealogico" di influencer. In questo modo non solo saprai tutto sui tuoi influenzatori ma anche sui loro e svilupperai davvero le tue abilità. Ad esempio nel mio caso ho le mie app preferite che controllo spesso per vedere come fanno le cose: Airbnb, Trainline, Google, ...

Imitano poeti immaturi; i poeti maturi rubano; i cattivi poeti deturpano ciò che prendono e i buoni poeti lo trasformano in qualcosa di meglio, o almeno in qualcosa di diverso. Il buon poeta lega il suo furto a un sentimento unico, assolutamente diverso da quello da cui è stato strappato; il cattivo poeta lo lancia in qualcosa che non ha coesione. Un buon poeta di solito prende in prestito da autori remoti nel tempo, o alieni nel linguaggio o diversi per interesse. - T.S. Eliot

Un altro suggerimento che il libro suggerisce è di iniziare a produrre cose che ti piacciono, creare e, se possibile, quotidianamente. Inoltre, per trarre vantaggio dal fatto che sei sconosciuto, sei un principiante, nessuno ti giudicherà, puoi fallire. Migliora te stesso e condividi sempre ciò che produci. È qualcosa che provo ma non è facile farlo quotidianamente. Ecco perché l'autore suggerisce di tenere un calendario con 365 caselle che controlli ogni giorno se produci qualcosa, è un bel trucco!

Infine, dà un trucco molto intelligente: crea un file contenente tutto il buon feedback che hai ricevuto. Se un giorno hai bisogno di motivazione, basta leggerlo, ti darà una spinta !

Life design

Questo libro contiene anche un sacco di riprogettazione della vita, come migliorare se stessi e la propria vita per mantenersi in salute e continuare il buon lavoro! Alcuni di loro sembrano molto semplici ed evidenti, ma ne ho notato 2 che sono piuttosto interessanti.

Rimani circondato dal talento, perché secondo Jim Rohn - "Sei sempre la media delle 5 persone con cui trascorri più tempo". Quindi il tuo stipendio, il tuo livello, la tua produttività, è la media di questi 5. È un'affermazione molto potente, quindi a seconda di ciò che vuoi, trova le persone giuste con cui lavorare e non pensare solo alla vicinanza fisica, può lavorare anche in remoto.

Accedi ogni giorno su un notebook (o virtuale) e rispondi a questa domanda: qual è la cosa migliore che è accaduta oggi? ti aiuterà a ricordare ciò che hai fatto ogni giorno e ti aiuterà anche a concentrarti sulle cose migliori per mantenere la positività e la motivazione.

Come ho creato il mio file di scorrimento

Da tutti i consigli forniti da questo libro ho trovato il "flusso di lavoro della copia" creando il file di scorrimento e utilizzandolo ogni volta che hai bisogno del più interessante per me (e prendendo anche parte diversa del progetto diverso e capendo perché).

Ecco perché descriverò come ho creato il mio file di scorrimento:

  1. Ho creato un taccuino in Evernote chiamato Inspiration
  2. Da quando ho iniziato il mio progetto di sito Web di un'agenzia web, sono andato in diverse fonti per popolare questo file di scorrimento (Dribbble, Awwwards, Ricerca Google)
  3. Ho cercato lì le parole chiave "agenzia", ​​"portafoglio", "agenzia minimalista" (minimalista perché amo i siti web minimalisti)
  4. Ogni volta che ho trovato un disegno che mi piaceva l'ho aggiunto a Evernote copiando e incollando l'estensione Evernote Clipper. Quindi ho aggiunto i tag per sapere perché l'ho aggiunto in un file di scorrimento, ad esempio: Agenzia, Web, Mobile, Colori, Sfumatura, Animazioni, Tipografia
  5. Ho continuato anche ad aggiungere i miei siti Web preferiti con un buon design come Airbnb, Spotify, Apple Music.
  6. Per finire, tengo a mente che ogni volta che trovo qualcosa di bello, invece di dimenticarmene, lo inserirò in Evernote, o farò una foto e la metterò lì.
  7. Ora il mio file Swipe viene aperto ogni volta che avvio un nuovo progetto e posso usarlo o ripetere i passaggi precedenti per popolarlo prima di usarlo. Inoltre ho alcune foto di musei in foto di Google che ho scattato prima di avere questo file di scorrimento, posso anche usare la ricerca per trovarle come ispirazione.

Se non disponi di alcun file di scorrimento, ti consiglio vivamente di crearne uno non appena avvii un nuovo progetto.

Ora vediamo come migliorare il mio flusso di lavoro di progettazione web usando questo file di scorrimento.

La lista di controllo del design

Ho creato questa checklist per il web design in base a ciò che faccio di solito, ad alcune ricerche, a ciò che ho imparato da questo libro e anche al progetto del sito Web della mia azienda. Ho provato a renderlo il più generico possibile.

  • Definire l'architettura delle informazioni della tua app / sito Web (contenuto puro)
  • Raccogli ispirazione (Dribbble, Awwwards e siti preferiti)
  • Scorri il file per creare un elenco dei primi 7
  • Design wireframe (su carta)
  • Raccogli feedback
  • Progetta il sito Web in scala di grigi (puoi utilizzare il tuo strumento di progettazione preferito)
  • Raccogli feedback
  • Seleziona 2 caratteri
  • Progetta il logo
  • Definisci la tavolozza dei colori (dovrebbe adattarsi al logo)
  • Migliora il tuo design implementando caratteri, colori e logo
  • Raccogli feedback
  • Definisci animazioni da implementare (puoi progettarle se sono complesse usando un software, altrimenti tienili a mente o disegnale su carta)

Puoi trovarlo anche nella sua ultima versione nel mio repository GitHub: https://github.com/sandoche/Webdesign-checklist

Il motivo per cui ho deciso di progettare prima in scala di grigi è quello di concentrarmi maggiormente sulla spaziatura e sul layout stesso invece di provare i colori, leggi di più qui: https://medium.springboard.com/a-designers-guide- to-Selezione-colori-per-il-tuo-prodotto-9944756838d4

Ridisegniamo il mio portafoglio

La mia nuova società sarà composta da due marchi: l'agenzia uno chiamato Snitco e l'evento che organizza uno, chiamato Sconférenciers. E abbiamo deciso di iniziare con il marchio Snitco. È qui che mi concentrerò qui.

Il nostro marchio Snitco fornirà servizi diversi da 3 categorie: seminari sulla creatività, comunicazione, sviluppo e design.

Non abbiamo costruito nulla, quindi partiamo da 0!

Definire il contenuto

Inizialmente abbiamo iniziato a definire il contenuto in modo gerarchico. Lo faccio sempre ora quando creo una nuova app o un sito Web.

Ecco come appariva: https://github.com/sandoche/Snitco-information-architecture-example (scusate se ho fatto la mia architettura in francese )

Alla fine l'architettura si evolve e la si modifica per adattarla perfettamente al design.

Ma fondamentalmente erano 5 sezioni: intestazione con proposta di valore unica, i progetti, i servizi, il team e infine il piè di pagina.

Popolamento del file di scorrimento e selezione dell'ispirazione

Il prossimo passo è popolare il mio file di scorrimento Evernote, usando le parole chiave Agency, Web, Mobile, Colors, Gradient, Animations, Typography principalmente usando Dribbble e Awwwards.

Ecco come appare il mio file di scorrimento in Evernote

Una volta sentito di aver raccolto abbastanza dati ho creato la seguente lista:

  • https://dribbble.com/shots/3272390-HBK-Creative-Agency
  • https://dribbble.com/shots/3638273-Creative-Design-Agency-Website/attachments/812598
  • https://appico.com/ (animazioni, minimalismo)
  • https://bitesizeinc.com/home (animazioni, forme)
  • https://www.spotify.com/fr/ (colori, tipografia)
  • http://wearecocoon.co.uk/ (minimalista)
  • http://www.size.agency/ (contenuto semplice)
  • http://www.revstudio.pl/ (minimalista, semplice)
  • https://www.packwire.com/ (animazioni, colori)
  • https://revolut.com/ (semplice, tipografia)

Da quella lista ho chiesto alla mia squadra di votare il loro preferito (quelli in grassetto) e di dirmi perché. Ho usato queste informazioni per usare ciò che funziona bene nei diversi progetti e creare il modello in scala di grigi.

Il modello in scala di grigi

Uso Adobe Xd (beta), che è gratuito, per creare il mio mockup. Ho davvero cercato di renderlo minimalista, ma ho anche cercato di definire alcune animazioni per avere un "effetto wow" come voleva il resto della squadra.

Quindi i diversi elementi che ho preso dalla lista dei progetti precedenti:

  • l'intestazione grande con la proposta di valore unica in grassetto
  • lo sfondo piatto
  • gli spazi bianchi nella seconda parte con le carte per descrivere ogni progetto
  • l'elenco dei servizi visualizzato in modo molto semplice, molto chiaro
  • qualche animazione apparente
  • un cuore che soffia

Ho cercato di combinare tutti questi diversi elementi in un modo molto armonioso, inoltre ho costruito altri che vanno avanti e ci aiutano a creare la nostra identità. Inoltre volevo usare solo 2 caratteri e alcune dimensioni dei caratteri per renderlo più semplice.

Il primo modello in scala di grigi in Adobe Xd

Ho anche usato questo mockup per provare diverse combinazioni di caratteri e alla fine ho finito con due Heebo e Noto mono.

Cercando i colori

Per trovare i colori ho provato diverse risorse per la tavolozza dei colori:

  • www.colorlisa.com - Tavolozza dei colori estratta da capolavori
  • https://color.adobe.com/ - Adobe color CC, con molta tavolozza puoi semplicemente usare la ricerca e digitare una parola chiave
  • http://colorhunt.co - Caccia al colore, simile alla precedente, ma con palette più alla moda
  • http://www.rehabcenter.marketing/tintui/index.html - La tavolozza più famosa, Material design, Pantone, Twitter, Flat UI colors

Ho giocato con loro e ho finito con il seguente.

Sei combinazioni di colori diversi.

Dopo aver parlato con il mio mentore Vera e il mio team, abbiamo deciso di andare su quello viola per Snitco e magari andare su uno più rosso per l'altro marchio Sconférenciers.

Da ciò ho creato una tavolozza e una breve linea guida per il design.

Creare un logo

Per creare il logo ho prima preso un foglio e ho provato a giocare con le lettere di Snitco. Inoltre ho deciso di mettere un punto alla fine di "Snitco" come parte del marchio per renderlo nitido, preciso e di classe. Ecco perché ho anche giocato con il "."

Sì ... è un casino

Ne ho fatti alcuni con il computer.

Alcune alternative di loghi, abbiamo finito per scegliere l'ultima

Abbiamo finito con questo dopo aver discusso con il team. Che è fatto dei due pezzi dello spazio negativo che trovi in ​​"S" ruotato e spostato per renderlo come due ali.

Tada  il logo finale

Disegno finale

Ora ho i colori e il logo, ho messo tutto insieme e riadattato gli spazi e le dimensioni, ecco cosa ho finalmente finito.

Ho anche creato le illustrazioni in base al contenuto dei nostri progetti per ogni piccola scheda.

Implementazione

Una volta convalidato il progetto dal team e dal mio mentore, ho cercato la migliore soluzione tecnica per implementarlo. Ho deciso di scegliere Jekyll con un plugin di internalizzazione per averlo in francese e inglese.

Ho separato le preoccupazioni: contenuto, html, stile, javascript per renderlo il più indipendente possibile.

Il risultato finale

Ecco il risultato finale : http://snit.co

Sentiti libero di dare un'occhiata e tutti i feedback sono benvenuti!

Uno screenshot della versione finale online

Feedback da questo mese di apprendimento

Cosa è andato bene

  • La lettura
  • Applicazione della lettura
  • Il processo di progettazione
  • Collaborazione con il mio team per creare un'identità adatta a tutti noi
  • Comunicazione con il mentore
  • Calendario - terminato il 25 luglio
  • Utilizzo di Adobe Xd
  • Il file di scorrimento è sorprendente
  • Sono molto orgoglioso di questo risultato finale

Cosa migliorare

  • Ho iniziato questo argomento mentre terminavo il precedente
  • Mi aspettavo un po 'più di apprendimento sul design stesso piuttosto che sul processo o su come trarre ispirazione
  • Forse avrei potuto anche conoscere la teoria del colore questo mese, ma il libro sul colore ha impiegato del tempo per arrivare

Se ti è piaciuto questo post, fai clic un paio di volte sul pulsante clap qui sotto per mostrare il tuo supporto! Inoltre, sentiti libero di commentare e dare qualsiasi tipo di feedback. Non dimenticare di seguirmi!

Vuoi vedere altri articoli come questo? Sostienimi su Patreon