Molok Studios

Sito per agenzia di localizzazione e post-produzione multilingua

  ,

Descrizione progetto

Abbiamo disegnato e sviluppato custom il sito della società Molok Srl specializzata nei servizi di localizzazione e post-produzione multilingue per videogames, film e per il digitale.

Lavorare al sito Molok studios ci ha permesso di mettere in gioco le nostre competenze di grafica e sviluppo al 100%, a partire dalla progettazione dei layout grafici delle pagine fino ad arrivare allo sviluppo completo del sito, lato frontend e backend.

In questa pagina vi racconteremo di più sugli step di progettazione del sito e vi sveleremo quali librerie javascript abbiamo utilizzato per gli effetti e le animazioni degli elementi all’interno delle pagine.

Visita il sito

STEP 1 – GRAPHIC DESIGN

Come primo step nella fase di progettazione ci siamo occupati del design e della struttura delle pagine web. Abbiamo scelto una grafica in outline e una palette colori forti per dare carattere al sito.

Le sezioni all’interno della pagina si intervallano grazie all’uso dei gradient (sfumature) che accompagnano l’utente alla fine della riga per inserirlo gradualmente in quella successiva.

Abbiamo conferito fluidità e dinamismo agli elementi della pagina attraverso le animazioni dei titoli e delle fotografie. Per le animazioni ci siamo ispirati all’ambito di lavoro della società, richiamando i movimenti tipici del mondo sonoro e dei videogames.

Infine, abbiamo realizzato una struttura che potesse valorizzare al meglio sia la parte testuale che quella visiva, alternando testi a immagini e video.

STEP 2 – FRONTEND DEVELOPMENT

Abbiamo cercato di dare un forte impatto visivo sfruttando le librerie javascript più utilizzate al momento:

  • Greensock
  • Barba JS
  • DrawSVG
  • Parallax
  • Sine waves
  • Simple noise
  • Slick slider
  • Revolution slider
  • Tilt JS
  • Vivus JS
  • Wow JS

In particolar modo con Barba JS abbiamo gestito le transizioni di pagina.

STEP 3 – BACKEND DEVELOPMENT

Il backend è gestito in WordPress: abbiamo creato un tema custom a partire dalla progettazione. Tramite il plugin ACF abbiamo realizzato un composer di pagina ad hoc che permette di gestire e replicare in totale libertà fasce e colonne, sfruttando tutti gli elementi grafici messi a disposizione. Questo composer è altamente scalabile con possibilità di ulteriori integrazioni in una fase successiva.

Ogni pagina si costruisce tramite fasce e colonne: ogni fascia ha dei settaggi tramite i quali è possibile impostare la visualizzazione del titolo della sezione, lo sfondo con immagine o video, margini interni ed esterni, modalità “light/dark” e la possibilità di nascondere la fascia lato frontend. All’interno di ogni fascia è possibile inserire diversi blocchi con incolonnamenti da 1 a 4: per ogni blocco è possibile definire la tipologia di animazione ingresso, l’effetto di parallasse, bottoni e allineamenti.

Il sito è compatibile con WPML: attualmente tradotto in italiano, arabo, cinese, francese, tedesco, giapponese, polacco, portoghese, russo, spagnolo e turco.

Il codice sorgente del sito è stato ottimizzato in ottica SEO friendly e di tempi di caricamento di pagina.

My Agile Privacy
Questo sito utilizza cookie tecnici e di profilazione. Cliccando su accetta si autorizzano tutti i cookie di profilazione. Cliccando su rifiuta o la X si rifiutano tutti i cookie di profilazione. Cliccando su personalizza è possibile selezionare quali cookie di profilazione attivare.
Attenzione: alcune funzionalità di questa pagina potrebbero essere bloccate a seguito delle tue scelte privacy