CSS Picnic e Colors per progettare una nuova Home Page

Nuovi contenuti, nuove immagini, nuovi CSS

Il sito manuelcesarini.it ha ormai qualche anno ed ha bisogno di una rinfrescata: nuovi contenuti, nuove immagini, nuovi CSS. Insomma… ha bisogno di mettersi al passo con i tempi.

Per questo ho iniziato la riprogettazione, partendo dai contenuti e dalla Home Page.

La scelta degli stili grafici è ricaduta sui CSS Picnic, di cui avevo già parlato nell’articolo “PICNIC : CSS BELLI E LEGGERI PER I TUOI PROGETTI WEB” : una grafica accattivante e molto leggera.

Un tocco di “Colors”

Ma non ero comunque soddisfatto, qualcosa mancava… Un tocco di “Colors“… Colors sono degli stili molto semplici ma anche molto utili per dare un tocco di colore ed innovazione al proprio sito.

Sono 16 i colori messi a disposizione (più il bianco…). Solo la propria immaginazione può porre limiti al numero di colorazioni implementabili, con molta facilità.

Colors permette di gestire le colorazioni dei testi, del background, dei bordi e delle immagini SVG.

Tutto questo condensato in 647 Bytes minificati e gzipped.

Un progetto di Home Page

mischiando i due CSS descritti sopra, ho provato a progettare una nuova Home Page. Per prima cosa ho realizzato un wireframe su https://wireframe.cc/  – anche se poi non l’ho seguito alla lettera 😀  ( ecco l’esempio: https://wireframe.cc/OaeVlF ) – e poi ho iniziato a scrivere qualche riga di codice per creare il mockup HTML.

Ecco il link per vedere la pagina statica di esempio: https://manuelcesarini.it/

Future implementazioni

Il lavoro è solo iniziato, adesso viene la fase più complessa, il sito va re-ingegnerizzato!!!

Innanzitutto deve essere finita la progettazione grafica ( esempio pagine interne, pagine di contatto, eccetera) e poi va messa mano al codice.

Se l’attuale sito è realizzato con WordPress, il nuovo infatti vedrà tre diverse fonti di dati: API CMS Directus, API Contentful e API WordPress.

Mi saranno di aiuto gli articoli:

API WordPress: cosa sono e come consumarle

Api Directus, consumarle facilmente con PHP, utilizzare la cache e minificare la pagina.

Per gestire le api WP e Directus e per la gestione della cache dei dati provenienti dalle API.

Alla prossima puntata 😀

 

0 comments on “CSS Picnic e Colors per progettare una nuova Home PageAdd yours →

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *