Il design delle pubblicazioni su Medium

Buon consiglio tre — un esempio pratico sull’uso delle nuove funzionalità di customizzazione grafica

Arianna Gambaro
Buon consiglio ☜
4 min readApr 11, 2016

--

Homepage layout: come ho custumizzato il design della pubblicazione

Qualche giorno fa Elizabeth Tobey e il team di Medium, hanno annunciato le nuove funzionalità a disposizione per le pubblicazioni. Ci sono tante novità ghiotte per chi, come me, è appassionato di Medium e ti consiglio di leggerle qui se non l’hai già fatto.

Quello su cui mi voglio soffermare in particolare è la personalizzazione del design delle pubblicazioni. Di seguito condivido cosa ho fatto io e non uno… ma taaaaanti buoni consigli non richiesti.

Step 1

Sono partita dalla pubblicazione che ho creato Buon consiglio dove scrivo di cose digitali, siti belli e social;

Step 2

In alto a destra ho cliccato su Owner e ho scelto Edit per modificare la pubblicazione;

Step 3

Ho customizzato un po’meglio l’area Info della mia pubblicazione. Al di là dei campi essenziali ed obbligatori, il mio consiglio è sicuramente di aggiungere i propri contatti e i tag, così da rendere più facile capire ai possibili lettori, gli argomenti di cui la pubblicazione tratta;

Step 4

Veniamo alla parte più interessante e più nuova, l’Homepage layout. Qui il mio consiglio è: divertiti a testare le combinazioni di layout per arrivare ad una soluzione che visivamente ti piaccia.

Homepage layout: le opzioni di customizzazione

Dopo n° tentativi, sono arrivata ad un risultato che mi soddisfa abbastanza e per farlo ho settato le seguenti caratteristiche:

  • Size L perchè volevo che il layout dell’header avesse un impatto visivo forte
  • Layout solo Logo anche se questa opzione è quella che mi ha lasciato più nel dubbio. Avrei voluto aggiungere anche un titolo, magari una tagline ma andava a riempire troppo la copertina, per cui per il momento ho lasciato così. Il logo bianco Buon Consiglio è una png di dimensioni 1064 x 593 px
  • Alignment Centrato il logo mi piace visivamente in posizione centrale
  • Color la scelta è strettamente legata alla mia immagine di Background. Io ho optato per questa palette colori:
La palette colori che ho scelto per la homepage
  • La scelta del Color, cioè della fascia sotto all’immagine di copertina, volevo che fosse neutra e in linea con gli altri colori, per cui ho scelto per un bianco sporco: #EFEFEF. Tra Subtle e Bold, ho scelto il Bold, perchè volevo si vedesse bene il colore di background.
  • Per la Background image ho creato un’immagine molto semplice con qualche iconcina qua è là che ricordassero un po’ l’idea di digitale e di web. La dimensione è 1918 x 753 px (Elizabeth Tobey suggerisce di mantenere la proporzione di 2:1 con una dimensione minima di 1500 px in larghezza e 750 px in altezza). Va selezionato anche il focus dell’immagine, cioè il punto in cui resterà sempre visibile

Step 5

Homepage navigation: ti consiglio di aggiungere le categorie che verranno visualizzate sotto all’immagine di copertina, sono dei filtri molto utili per la navigazione dei lettori, soprattutto quando i post cominciano a diventare molti.

In conclusione i buoni consigli di oggi sono tanti:

  • customizza la tua pubblicazione così da dare alla pagina una sua personalità
  • non customizzare “a caso”: se hai altri canali online nei quali parli della tua attività, sarebbe opportuno mantenere un minimo di coerenza grafica (di colori, font etc…)
  • nelle Info di pubblicazione aggiungi i tag, così è più facile per gli altri utenti trovarti
  • sì alle categorie perchè facilitano la navigazione dell’utente ma non aggiungerne troppe e soprattutto devono essere in linea con gli argomenti che tratti
  • usa un’immagine di background che ti rappresenti, che sia d’impatto e con una buona qualità grafica, possibilmente rispettando le proporzioni suggerite. Se vuoi usare un’immagine (magari una foto) con tanti dettagli, evita di inserire Titolo ed Headline al di sopra: potrebbero essere poco visibili
  • testa e testa: divertititi a testare le diverse funzionalità fino a che non raggiungi il risultato desiderato

Strumenti e link utili

  • Photoshop, Illustrator: per realizzare un’immagine di background ad hoc
  • Canva: strumento molto utile anche per chi non ha particolari competenze di grafica
  • Immagini free: se ne trovano ovunque, per esempio dai un occhio a TheStocks
  • Icone: a me piacciono molto le icone e, idem come sopra, ne trovi a vagonate se googoli. Io ho usato queste di Taras Shypka, ma utilizzo spesso Noun Project
  • Color Hex: per trovare il colore esadecimale (suggerita anche qui)

☞ Questo consiglio non richiesto è stato scritto da me. Se sei curioso di sapere chi sono e che cosa faccio: sbircia qui. In caso contrario grazie per avere passato 2 minuti del suo tempo, con me.

☞ Clicca “♥︎” per fare conoscere anche agli altri che “wow!” e altre cose belle. Se ti va, condividi la tua pubblicazione nei commenti qui sotto!

--

--

Arianna Gambaro
Buon consiglio ☜

Bicchieremezzopienista convinta, qui racconto storie di vita da freelance, qualcosa di digitale e un po’di coseaccaso // www.ariannagambaro.com