Disegnare la Landing Page della tua Startup: leggi, prova, studia, prova ancora


Un giorno un programmatore si sveglia con l’idea che si è scocciato di guadagnare poco:

“Quei tizi che si chiamano designer, e si credono artisti, e che guadagnano la grossa parte…da oggi mi disegno io tutto quello che mi serve. Se so scrivere codice C++ significa che posso fare tutto!

E comincio a cercare su internet un libro che mi spieghi come fare. E tu mi dirai:

“ah ha ah ha ah ha ah ha”

Chiaramente per un programmatore, tutto si può imparare leggendo un buon libro. E dopo aver speso qualche soldo in ebook (tipo Step by Step UI Design eBook)…che spreco… ho trovato qualcosa di vero valore: Bootstrapping Design

A questo punto, armato del mio libro – dopo averlo studiato – provo a realizzare il mio primo wireframe (“si dice così, no?”). Questo il risultato:

WIREFRAME LANDING PAGE vs1Design della pagina iniziale, versione 1, nome in codice: VERGOGNA

Il giorno dopo lo guardo e mi vergono anche solo di averlo immaginato.

“Ieri sembrava così carino…”

Capisco che bisogna leggere di più… allora divido i miei problemi in due parti: Disegnare il logo e disegnare la landing page. Credo che entrambi valgano il 50% di attenzione a provare quello che voglio fare.

Design del Logo

Eccitato e divertito, scrivo un post su delle idee (che alla fin fine non mi piacciono poi nemmeno…): NUOVA STARTUP ABCrapido – STUDIO PER UN LOGO

Design della landing page

Compreso che forse forse un po’ di merito andrebbe riconosciuto a questi santi artisti che riescono ad usare colori e linee e farne uscire qualcosa di piacevole e delizioso…cerco di dimenticare la logica e provo a guardare il mondo di ombre, sfumature e prospettive che mi circonda.
Con molta difficoltà.

Passo al prossimo libro, che forse mi aiuta a capire meglio i termini in gioco:

Principi Universali del design

Comincio a crearmi una lista di princìpi che possano essere la base dei miei pensieri. Tipo mantra da ripetere ogni mattina e prima di aprire il programma di progettazione (che per inciso è iDraw sul mio iPad).

Viene fuori qualcosa che il primo giorno mi sembra meraviglioso. Il secondo giorno…non più:
WIREFRAME LANDING PAGE vs2Design della pagina iniziale, versione 2, nome in codice: UN PASSO AVANTI

Mi rendo conto che quello che ho fatto è stato imparare che i colori non sono intercambiabili come per la punteggiatura e il compilatore. Non proprio. C’è un motivo se nessuno mette l’arancione e il verde insieme come mi piaceva tanto fare in Turbo Pascal 6.

 

Psicologia spicciola

Leggo articoli sulla scala cromatica dei colori e mi annoio a tal punto che provo una strada diversa: le persone!
Un libro semplice e veloce da leggere che consiglierei è:

100 Cose che ogni designer deve conoscere sulle persone

Ci sono tante cose che indirettamente condizionano il valore percepito di un sito web. E cose divertenti che si possono imparare (ad esempio che mettere i fiori all’ingresso di un supermercato induce una sensazione che tutto quanto sia fresco. Forte, no?)

Prossima iterazione della landing page. Sento di aver raggiunto l’apice creativo della mia vita.
WIREFRAME LANDING PAGE vs3Design della pagina iniziale, versione 3, nome in codice: SODDISFAZIONE

  • Il logo mi piace tanto. Mi convinco che potrei farlo di mestiere…
  • I colori scelti per la frase che spiega il prodotto mi ricorda quelle locandine retrò che mi piace vedere con alcuni amici.
  • Il blu e il verde e il rosso e l’arancione riescono a stare insieme senza darsi pugni.
  • L’effetto della corda mi è venuto in mente in 5 minuti: pensavo ci volesse un master in design prima
  • Inizio dei fumetti per raccontare il prodotto, tanto ormai sono un artista
  • Preparo già una sezione per i commenti positivi degli utenti

 

I fondamentali del Web Design

Mio fratello mi dice:

“Non sei nessuno se non hai letto Steve Krug con il suo famoso ‘Don’t Make me Think’”

. E allora amazon me lo invia prestissimo:

Don’t make me think. Un approccio di buon senso all’usabilità del web

Apprezzo ancora quello che ho fatto e provo a cercare delle variazioni sul tema.
Poi mi spingo a cercare di imitare il mio artista preferito: Salvador Dalì.

WIREFRAME LANDING PAGE vs4Design della pagina iniziale, versione 4, nome in codice: MANCA QUALCOSA

I colori sono più amichevoli. Però mi sembra l’esercizio da chiusura materia universitaria, non proprio un prodotto commerciale che cliccherei.
Provo a cambiare colori, linee, dritto diventa rotondo, rotondo diventa curvo; font corsivi, font a mano, font tecnologici; meno parole, molte parole. Niente.

Sono arrivato al punto che la mia sensibilità nell’apprezzare il design è superiore alla mia capacità di immaginarlo e riprodurlo.

Il momento più basso e deprimente: quando non hai gli strumenti per creare quello che pensi.

 

Ritorno un passo indietro

Provo a fare un passo indietro. Ho capito che non sarò mai un Illustratore, ma posso sempre essere uno che crea disegni stilizzati (tipo i meme che girano su facebook: forti!). Un libro da leggere su tutti:

Sul retro del tovagliolo. Come risolvere problemi e vendere idee con le immagini

Riparto allora da zero, e guardo tanto.
DAVVERO tanto, intendo.
Tipo centinaia e centinaia di siti web, e startup, e landing pages. E ancora e ancora.

E oggi riparto di nuovo e provo qualche idea che avevo visto poche ore prima.
Ecco il risultato:

WIREFRAME LANDING PAGE vs5Design della pagina iniziale, versione 5, nome in codice: TROPPO SQUADRATO, MA BELLO!

Mi sento felice, sento che questo è il meglio che abbia mai fatto fino ad oggi.
So che sono nato programmatore e logico, e che questo terreno mi è stato sempre precluso. Nessuno mi avrebbe dato due centesimi per scegliere un colore o disegnare un omino.

Ma so anche che domani e la settimana prossima, guarderò quello che ho fatto oggi e mi vergognerò nuovamente di me stesso.

Lo faccio ogni anno quando aggiorno il mio curriculum.
Guardo la storia meravigliosa che ricordavo di aver scritto e invece trovo la semplice puerile definizione di un tizio che aveva circa un anno meno di me, adesso.

Ma crescere e imparare è questo, no?
Migliorare e riuscire ad odiare il tuo passato.

E entrare nel futuro.

ECCO IL FUTURO

Licenza Creative Commons
[ITA] Questo articolo è opera di Paolo Russo ed è concesso in licenza sotto la Licenza Creative Commons Attribuzione – Condividi allo stesso modo 3.0. Per superare i limiti della Licenza, potrebbe bastare chiedere qui.
[ENG] This post is a work of Paolo Russo and is licensed with the Creative Commons License Attribution – Share it Alike 3.0. Permissions beyond the scope of this license may be available asking it here.
About these ads

4 thoughts on “Disegnare la Landing Page della tua Startup: leggi, prova, studia, prova ancora

  1. capisco tutto e apprezzo. ma, come nel più classico dei viceversa, come se cercassi di fare io il tuo mestiere, no? sono un grafico e ho aspettato circa dieci anni, lavorando davvero intensamente, per dirmi che ‘si’, posso fare questo mestiere… che, nella sua assurda semplicità, è quello di dirigere l’occhio di chi guarda, e legge, esattamente dove la comunicazione ha necessità che la sua attenzione si appoggi. E’ esercizio personale continuo del manifestare la forma nel modo più semplice possibile, ma dietro ci son regole, come in tutte le discipline… come non pensare poi che tutto quel bel lavorino lì non debba necessariamente interfacciarsi e entrare in armonia con le regole del tuo di mestiere?

    perchè pensare poi di fare a meno del comunicatore? non mordiamo mica….

    • Oops…io stimo e apprezzo (ora anche di più) la vostra arte e capacità di creare bellezza.

      Ho dimenticato forse di spiegare perchè sto disegnando da me il tutto: NON CI SONO SOLDI!
      Io come altri tanti aspiranti startuppari, iniziamo a budget basso se non nullo…questo è il grande limite.

      Infatti se dovessi mai trovare un finanziamento di 30k€, ne spenderei 10 in marketing, 10 in design e 10 in legale.
      Quindi un applauso sempre a voi, e mi dispiace di non aver soldi adesso per provartelo…

Give me Your 2 çents / Dimmi che ne pensi

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s