1micron pipeline

Pipeline per lo sviluppo di siti web avanzati
DATA
05/09/2020
AGGIORNATO
17/04/2023
In 1micron utilizzo diversi strumenti per realizzare siti web stilisticamente avanzati. Vedremo brevemente quali passaggi tecnici utilizzo per passare dalla progettazione alla pubblicazione dei contenuti, concatenando tali strumenti.

Progettazione

  1. Carta e penna
  2. ToDoList (AbstractSpoon)
  3. Figma
  4. Writer (LibreOffice)
  5. Trello

Ogni progetto viene preventivamente abbozzato su carta: schizzi, idee, e processi vengono prima formalizzati su appositi canvas di progetto, creati ad hoc, con specifico versionamento.

L'intero processo di gestione viene gestito internamente con ToDoList di AbstractSpoon: gli appunti cartacei delineano i punti chiave del progetto in relazione al tipo di analisi effettuata per il progetto ed alla parte creativa di brainstorming. In questo modo è possibile pianificare a grandi linee tempi e costi.

Ogni fase di sviluppo modella il progetto in itinere utilizzando un approccio a "rilascio continuo" (v. Continuous Delivery).

Per i progetti basati su budget allocati in modo predefinito (cioè che non richiedono di allocarlo diversamente in itinere) le fasi per ulteriori affinamenta progressiva diventano opzionali.

Per il copy di qualsiasi parte del progetto viene utilizzato utilizzo Writer di LibreOffice.

Con Figma (o software alternativo, come Adobe XD) si procede alla definizione del prototipo di progetto vero e proprio.

1micron: progettazione in Adobe XD

Grafica 2D

  1. Lightroom
  2. Illustrator
  3. Photoshop
  4. InDesign

Tutte le fotografie vengono sempre preventivamente processate in Lightroom.

1micron: lavorazione foto in Adobe Lightroom

Successivamente le immagini vengono esportate per eventuali ed ulteriori modifiche in Photoshop.

I file di Illustrator vengono utilizzati nativamente all'interno di InDesign o Photoshop oppure per esportare grafica SVG, utilizzata nelle interfacce grafiche.

1micron: iconset Alchemical Pixel realizzato in Illustrator

InDesign viene utilizzato per gestire processi di stampa e materiale specifico come slide e grafica in PDF per il web.

Grafica 3D

Utilizzo Cinema4D + RedShift per creare grafica tridimensionale in punti specifici dei siti web.

Editing

Utilizzo Visual Studio Code e Sublime Text per la realizzazione di tutti i codici dei siti web. Il codice viene versionato con Git e pubblicato su GitHub.

1micron: scrittura codice in SublimeText

Animazione ed effetti

  1. GSAP
  2. AfterEffects
  3. Cinema4D
  4. Premiere
  5. Adobe Media Encoder
  6. DaVinci Resolve Studio

Utilizzo diversi strumenti per realizzare animazioni 2D/3D per i siti web od effetti visuali per i video. In base a specifiche esigenze combino questi strumenti in modo differente per ottenere specifici formati ed effetti animati, che verranno poi successivamente trattati in JavaScript/CSS.

Framework

Principalmente utilizzo:

  1. Symfony
  2. NuxtJS
  3. Wordpress

Web Design Toolchain

Uno strumento che ho realizzato per uso interno utilizza tutti i componenti e le librerie presenti nei siti web di 1micron.

Questo permette di avere un archivio completo e sempre aggiornato dei componenti con relative annotazioni tecniche. Inoltre consente di verificare che non ci siano incompatibilità tra librerie, componenti e moduli al fine di creare un ecosistema di strumenti compatibili.

Hosting

  1. Hosting php
  2. Hosting con CDN (via GitHub)

Per i progetti in vanilla php o WordPress mi avvalgo della consulenza di diversi hosting provider, italiani ed esteri, fornendo consulenza per soluzioni shared, VPS e cloud server.

Per progetti in Symfony vengono utilizzati sistemi cloud, per esempio quelli forniti da Symfony.

Per i progetti NodeJS-based vengono utilizzati principalmente i servizi di Vercel.

Ricevi via email strategie efficaci di marketing per il tuo business