web design

My Hand - Dino Olivieri
My Hand - Dino Olivieri
Il web design è certamente un’arte, un’arte difficile, in continua mutazione e perennemente in evoluzione per stili, gusto, colori, layout, navigazione, facilità d’uso, tecnologie e messaggi.

Ho iniziato a disegnare in digitale molto prima che comparisse il web.

Infatti già dall’età di 15 anni (parliamo del lontano 1984) disegnavo sprite, character set, fondi e layout pseudo-grafici per giochi su Commodore 64 e IBM PC.

Quella preziosa scuola mi ha insegnato a rispettare e amare ogni singolo pixel di un’immagine digitale, a gestire i miei layout con precisione certosina e, dulcis in fundo, a programmare.

Col tempo gli strumenti sono cambiati, ma in fondo l’arte di rendere appetibile, facile, appagante l’uso di un programma (in questo caso di un sito web) non è poi mutata significativamente.

Nella categoria Web Design Tutorials potrete trovare i miei articoli su Layouting, Usability, User Centered Design, Linee guida CSS, W3C Accessibility, e molto altro ancora.

Per quanto riguarda il web-design ecco alcuni miei esempi completi (cioè in cui ho completamente progettato, disegnato , programmato e testato l’intero sito) che ho avuto il tempo di “documentare”:


Fifa.com Worldcup 2014 - redesign
Fifa.com Worldcup 2014 - redesign

Fifa.com Worldcup 2014 (redesign)

I’ve partecipated in Deltatre as one of the front-end developers for the redesign for FIFA Worldcup 2014 – Brazil event for FIFA.com.
My contribution are sparsed in all pages especially in CSS Styling, parts of jquery interactions and CMS reworks.

The project was huge as the team involved, and times are very compressed.

A big and educational challenge.

The technologies used are:

  • Jquery and Bootstrap
  • LESS to CSS3
  • Modernizr
  • Custom JQuery plugins development
  • .Net and XSLT transformations
  • JSONP + REST
  • Microsoft Collab on TFS
  • JIRA
  • Bootstrap overriding

vappy - sigarette elettroniche
vappy - sigarette elettroniche

vappy – sigarette elettroniche

I’ve designed, customized and adapted for a full Responsive/Mediaqueries full compliant web store.

Vappy is a new brand for electronic cigarettes, which is very focused on producing and distributing a top level quality product.

Vappy is a customization of WP3, with different plugins, mobile ready, fully integrated with social networks and search engine for effective seo/sem analysis.

Technologies used are:

  • Linux
  • Apache
  • PHP
  • MySQL
  • Jquery
  • Responsive JS
  • CSS3 and CSS Mediaqueries.

Uefa com - Euro 2012 New Homepage
Uefa com - Euro 2012 New Homepage

UEFA Euro2012 Home Page

I’ve partecipated in Deltatre as one of the front-end developers for the production of the new home page for Euro 2012 event for UEFA.com.
My contribution are in the top Events Timeline, and to the top-right Fans Area Widget accordion.
The technologies used are:

  • Jquery and part of JQUery.UI
  • DOM Manipulation
  • CSS2 and CSS3
  • Modernizr
  • Custom JQuery plugins development
  • .Net and XSLT transformations
  • JSONP + REST

A great responsibility, due to the fact that the two object i’ve contributed are the front most of the landing home page of Euro 2012.
I hope you like it!


UEFA Euro2012 Tournament Calendar
UEFA Euro2012 Tournament Calendar

UEFA Euro2012 Tournament Calendar

I’ve partecipated in Deltatre as one of the front-end developers for the production of the web application Tournament Calendar for UEFA.com Euro2012.
The technologies used are:

  • Jquery and part of JQUery.UI
  • Raphael JS
  • HTML5
  • CSS2 and CSS3
  • Modernizr
  • Custom JQuery plugins development for the social network interactions (Twitter and Facebook)
  • Open Graph
  • JSONP + REST

I am very proud of this work because there’s a lot of technologies and techniques involved in one single focused project.
I hope you will enjoy it!


evisita.com - give your retirement home a new dimension
evisita.com - give your retirement home a new dimension

eVisita.com – 2012

I’m contributing with my past developed libraries and interfaces to a project for retirement home for elders.

eVisita is both an easy to use information and communication tool that lets your residence keep-in-touch with families.

Elder’s info: Let the resident’s relatives know at all time next appointments, menus and elder’s status.

Bulletin Board: Share do cuments, photos or any other information.

Quality and productivity: Save time with a centralised contact tool.

Open a gate to your activity and allow the families to be part of their relative’s everyday’s life.

eVisita is both a information and communication tool between residence personnel and authorised family members or relatives of the resident.

eVisita is extremely intuitive and easy to use.

eVisitors use their personal login and password to log in to the application and get access through this secured access to all the features described on this page.


Tucanna tFlow - preflight, color and pdf management
Tucanna tFlow - preflight, color and pdf management

Tucanna tFlow – 2012

I’m contributing on the backend part of this amazing product for preflight, color management, pdf workflow and many other high end graphical industrial features, in two words: Tucanna tFlow.

OS independent: You are free! to use your Mac, your PC, or both.

Preflight: Check and correct problem PDFs before they affect your production.

Total control: Complete production workflow at your fingertips.

Simplified workflow: Automation and simple integration with existing systems.

Color management: Color conversion, Ink saving, and Tone curve adjustments.

Client and Server: Connect and manage your files either locally or over the Internet.


Finsoft.it - Corporate Restyle 2009
Finsoft.it - Corporate Restyle 2009

Finsoft.it – Corporate Restyle 2009

Sono un po’ di anni che lavoro in Finsoft e devo dire che mi trovo molto bene, mi faccio un discreto mazzo ma godo anche di stima e autonomia per me fondamentali per fare un lavoro in cui ci metti tanta tanta passione.

Arriva il 2009 e la crisi che porta: quale migliore occasione per rinnovare un po’ l’immagine di una azienda che va benissimo ma che sicuramente negli anni ha pensato più al business che “all’immagine”.

Ecco dunque che grazie alla collaborazione di tutti i colleghi del 5° piano, e soprattutto grazie all’efficace contributo dell’agenzia grafica e pubblicitaria Adfarmandchicas di Torino (che stimo davvero molto, grazie Cocchi, grazie Daniele, grazie tutti!), viene fuori nuovo pay-off, logo lucidato (non è stato cambiato ma appena appena lucidato), nuovo layout web, carta tutta nuova, etc.. una presentazione video in Flash.. ah già ma questa è un’altra storia…


Ermanno Daelli - Store and Boutiques
Ermanno Daelli - Store and Boutiques

Ermanno Daelli – Store and Boutiques

Ermanno Daelli è un progetto grafico e web di una certa complessità perchè mischia diversi fattori in un unica interfaccia dall’apparenza molto semplice.

La parte principale infatti è sviluppata in Adobe Flash CS3 mediante l’uso di grafica 2D e fotografie di impatto.

Il tutto è stato sapientemente miscelato attraverso componenti di gallery appositamente sviluppate da me in Adobe Flash / Actionscript3.

Ermanno Daelli - Store and Boutiques
Ermanno Daelli - Store and Boutiques

Uno degli elementi di spicco e che la maggior parte del sito.

Nonostante sia stato sviluppato in Flash, il sito è totalmente dinamico.

I testi, le fotografie, le gallerie, le news e gli eventi, così anche come le configurazioni testuali e grafiche sono quasi tutte esterne al file swf e caricate dinamicamente da file xml prodotti come cache a partire da un DB amministrato.

La parte grafica è stata sviluppata insieme a Mediacom Web e al suo team di grafici 2D e 3d.

Ermanno Daelli - Store and Boutiques
Ermanno Daelli - Store and Boutiques

La componente di cui vado certamente più fiero è quella della gallery delle boutique e delle collezioni e quella delle news.

Il sito è in 3 lingue, tutto in utf-8 (il cirillico per il russo in flash ha creato qualche problema con gli embed delle fonti).

Dulcis in fundo lo Store, tutto sviluppato in php, mysql, apache2 e linux (rigorosamente LAMP).

La cosa che più mi piace dello store è l’uso semplice ma efficace di AJAX, di librerie di gestione della grafica e delle gallerie di immagini (come Mojomagnify, MojoZoom, ImageSlideshow5, etc..) tutti “sapientemente” modificati da me per piegarsi alle esigenze del cliente.

Ermanno Daelli - Store and Boutiques
Ermanno Daelli - Store and Boutiques

Ermanno Daelli è un mini e-commerce d’impatto e decisamente potente.

Realizzato anche grazie ai buoni consigli e alla pazienza di Fabio Tempestini con cui ho collaborato proficuamente (e che ringrazio molto per la gentilezza, la precisione e velocità con cui ha saputo sempre rispondermi), il sito rappresenta un piccolo punto di svolta nella grafica tradizionale dei siti di moda e un passo in avanti in un e-commerce leggero e versatile come ormai i tempi impongono.

Recentemente il sito è stato affidato a terzi per una revisione totale al fine di aggiornare il cambio di marchio e di linea.


ZENTAO.org - La Via del Benessere Zen
ZENTAO.org - La Via del Benessere Zen

ZENTAO – La Via del Benessere Zen

Su Wikipedia leggiamo: “Lo Zentao è una fusione e insieme una trasformazione (tutto cambia) dell’esperienza Zen e del pensiero di origine taoista. Zentao significa Tao dello Zen, ovvero “Via della Meditazione” e rappresenta una esperienza di benessere del corpo-mente che passa attraverso pratiche sia fisiche che mentali (per fare alcuni esempi: la meditazione, la corretta alimentazione, l’educazione emozionale, trattamenti di rilassamento e tonificazione come lo shiatsu, yoga, etc..).”

Zentao.org è dunque un sito semplice e che con umiltà si prefigge di raccogliere esperienze, tecniche, metodi e qualche perla di saggezza utili a chi (come me e mia moglie Stefy) cerca una vita più serena, piena, consapevole, focalizzata sulla realtà e lontana dalle illusioni, naturale e amorevole.

E’ difficile oggi riuscire a camminare sulla Via dello Zen (Zen Tao appunto), ma vale la pena almeno provarci, impegnandosi a fondo e facendo propri le 6 Nobili Perfezioni del Bodhisattva: Generosità, Moralità, Pazienza, Perseveranza, Concentrazione e Saggezza.


New Elfin - Comandi e Controlli Industriali
New Elfin - Comandi e Controlli Industriali

New Elfin – Comandi e Controlli Industriali

Scopri la vasta gamma di ausiliari di comando e segnalazione che la New Elfin progetta e produce, con esperienza e professionalità. Nel suo catalogo troverai 2 serie di pulsanteria industriale sia diametro 22 che diametro 30, quali lampade spia, pulsanti a fungo, pulsanti emergenza, lettori a chiave, manipolatori, una completa serie di contenitori cassette pulsantiere in termoplastico, alluminio o acciaio inox fino ai quadri in poliestere; un’importante linea di articoli per la sicurezza del comando e del controllo, dalle pulsantiere bimanuali ai dispositivi lampeggianti presenza tensione che sono completati dalle innovative lampade elettroniche per illuminazione quadri elettrici.

Io e Stefania abbiamo realizzato questo sito web istituzionale della azienda New Elfin usando tutte le migliori tecnologie a disposizione al momento: L.A.M.P. (Linux, Apache, MySql, PHP), mod_rewrite, multilanguage auto sensitive, meta db, sitemap, rss feeds, akismet, web semantico, e molto altro ancora, maps.google API, integrazione coi motori di ricerca, interfaccia web 2.0, …

Siamo molto soddisfatti sia del risultato che del cliente New Elfin: affidabile, puntuale, preciso, chiaro e solido.

Il sito è in continua evoluzione: always in beta, come la creatività e l’innovazione del cliente stesso.


Ainur.it - The Music of the Ainur
Ainur.it - The Music of the Ainur

Ainur.it 2007

Avete mai letto qualcosa di J.R.R.Tolkien? Lo Hobbit, il Signore degli Anelli, Il Silmarilion, Albero e foglia, I Figli di Hurin, etc…?

Quasi certamente sì, e se non l’avete fatto probabilmente avrete sicuramente visto o sentito parlare dei film della trilogia di Peter Jackson.In ogni caso sono sicuro che non abbiate mai ascoltato veramente il mondo di Tolkien, e gli Ainur rappresentano l’occasione felice per iniziare a farlo e per appassionarsi ancora di più ai libri del caro vecchio professore di Oxford.

A proposito, la grafica del nuovo sito e l’integrazione e-commerce è opera mia su base WordPress e plugin vari.

Un lavoro da certosino nello spirito di rievocazione del primo Earendil.it


Sinistra Democratica per il socialismo europeo sezione Venaria Reale (TO)
Sinistra Democratica per il socialismo europeo sezione Venaria Reale (TO)

Sinistra Democratica Venaria 2007

Un partito si divide, da una costola nasce un nuovo movimento, un amico politicamente impegnato mi chiede se posso aiutarlo a mettere su in una notte un blog per la sezione di Venaria. Agli amici difficilmente dico di no.

Ecco quindi una personalizzazione di dBlog CMS per www.sinistrademocraticavenaria.it messo su Aruba in una notte appunto e poi subito perfettamente operativo e politicamente impegnato.

Per quanto riguarda me, sono da sempre un ambientalista, un razionalista, un umanista e un laico; dunque per ovvie ragioni da sempre guardo con interesse a sinistra.

Non ho tessere di partiti ma sono sempre attento ai movimenti strutturati e con buone idee da portare avanti – insomma non quelli “mainstream”.


The Earendil Fantasy Society - 2007
The Earendil Fantasy Society - 2007

Earendil.it 2007

Dopo quasi 3 anni di glorioso online, il buon vecchio Circolo Tolkieniano Earendil cessa di esistere per rinascere (come Araba Fenice) nella nuova Società della Fantasia di Earendil.

The Earendil Fantasy Society è un club decisamente esclusivo.

In questa cerchia si riuniscono persone molto speciali che amano fare cose “fantastiche”.

Per cose “fantastiche” intendiamo: scrivere fiabe, creare mondi oltre la realtà, illustrazioni di luoghi e creature immaginari, comporre musica che rimanda il nostro spirito oltre i confini dell’universo mondo, partecipare alla stesura di progetti legati a questo genere attraverso qualsiasi mezzo artistico.

Se ami il genere fantastico e desideri creare poesia, prosa, immagini, illustrazioni, cinema, musica o videogiochi insieme a persone come te, sii la benvenuta o il benvenuto in The Earendil Fantasy Society.

Attualmente il sito è stato dismesso ed è stato spostato su due piattaforme social più idonee:

Per le fotografie:
http://www.flickr.com/groups/earendil/

Per i libri e le discussioni sui romanzi fantasy:
http://www.anobii.com/groups/0153dc9e240dcd9d31/


Jamaikabar.com - The jamaican reggae bar!
Jamaikabar.com - The jamaican reggae bar!

JamaikaBar.com

Il Jamaika Reggae Bar è un locale di Pianezza (TO) dove si beve, si mangia e si ascolta buona musica.

Lo Staff del Jamaika mi ha coinvolto offrendomi in cambio un po’ di serate gratis al locale.

Insomma uno scambio web site for drink & food.

Il sito è stato sviluppato in SimplePHPBlog con l’aggiunta di qualche plug sviluppato direttamente da me, più una piattaforma di fotogallery integrata in flickr per una migliore integrazione delle foto scattate durante le serate dedicate ai concerti!

Sebbene ora sia caduto decisamente in disuso, all’inizio il sito è stato integrato anche con Upcoming.org di Yahoo, per sponsorizzare e diffondere nel territorio gli eventi organizzati dallo staff.

So let’s go Jammin’ to the Jamaika Reggae Bar!


Fiat Atrium - Splash
Fiat Atrium

Fiat Atrium – 2006

Fiat Atrium è una applicazione Web sviluppata per Fiat Auto che ha il compito di presentare su

1. mega-schermi al plasma
2. chioshi internet
3. screensavers di PC esposti al pubblico

dati, schede, spot prodotto e consuntivi di produzione aggiornati in tempo reale da database di produzione aziendale con visibilità mondiale (cioè tutti gli stabilimenti produttivi e uffici commerciali presenti al mondo del gruppo).

Fiat Atrium - Plant Monitor
Fiat Atrium - Plant Monitor

L’applicazione Fiat Atrium è stata da me interamente sviluppata nelle seguenti tecnologie:

a. XHTML
b. Adobe/Macromedia Flash 8
c. Javascript
d. Asp.Net 2.0
e. Microsoft SqlServer 2000
f. Macromedia Flash 8 Video Encoder.
g. Microsoft Sql Server Agent
h. Microsoft IIS 7
i. Microsoft DTS

Fiat Atrium - World Monitor
Fiat Atrium - World Monitor

Fiat Atrium accede anche ad alcuni servizi web appositamente sviluppati per fornire dati di produzione e di consuntivo in tempo reale (in realtà rispetto al dato reale c’è una differita di circa dieci minuti).

Le scene disponibili sono:

a. presentazioni e applicazioni rich media applications in Flash
b. schede in XHTML o generate lato server in ASP.NET
c. contributi video in formato 16:9
d. spot in formato FLV
e. animazioni HTML5 per chioschi con sistema e browser CLASS A
f. slide animate sviluppate ad esempio con deck.js
g. jpg o png statici
h. animazioni SVG


Onyrix.com 2005 Edition
Onyrix.com 2005 Edition

Onyrix.com – 2005

La versione 2005 di Onyrix.com sfrutta il motore PHP di un blog engine abbastanza noto: SimplePHPBlog.

Partito da questo motore, che ha il pregio abbastanza interessante di essere relativamente semplice e di non richiedere alcun DB, ho customizzato una serie di moduli per ovviare alle diverse limitazioni della versione dell’epoca.Ora SimplePHPBlog è decisamente meno “simple” e offre un nutrito numero di funzioni.

Il taglio blog mi soddisfaceva abbastanza, specie per il fine che mi ero proposto, cioè di usarlo come memoria dei miei vari incontri: professionali, artistici, umani…

Una cosa però non mi piaceva tanto, ed era cioè la staticità, cosa che ripropongo (per mancanza cronica di tempo) nella versione successiva (2007) sempre nell’intenzione di rivoluzionare in maniera secca il tutto in un prossimo imminente luminoso futuro.


Onyrix.com 2003 Edition
Onyrix.com 2003 Edition

Onyrix.com – 2003

La versione 2003 di Onyrix.com presentava un top menu di navigazione realizzato in Flash 6, una colonna di news e reminders sulla sinistra e un menu animato tridimensionale posto al centro con pochi contenuti e molti, molti effetti speciali.

In primo piano campeggiava incontrastato il logo rotante in 3D di Onyrix, ovvero: “the 8 bytes man”, il quale era pensato per creare una sorta di effetto ipnotico anche mediante effetti rollover che cercavano in ogni modo di catalizzare l’attenzione del visitatore su particolari “vivi” a prima vista statici.

Senza dubbio un sito con un front-end semplice e un back-end tutt’altro che banale…


Earendil.it 2005 Edition
Earendil.it 2005 Edition

Earendil.it 2005

Earendil.it è un portale culturale che parte dalla letteratura fantasy per allargarsi al cinema, alla musica, alla filosofia, religione, attualità, eventi e ogni altro aspetto che può interessare i membri (diverse centinaia attualmente) di questa ormai importante web-community.

Sviluppato da una spin-off personale e ormai decisamente lontana del famoso portal-engine PHP-Nuke, Earendil.it aggiunge moduli scritti da me come “DinoGallery” e personalizzazioni spinte di altri moduli base e di terze parti.

La navigazione è gerarchica livello 2, il cammino di lettura è quello tipico del magazine web, mentre la grafica è volutamente fantasy con richiami al liberty e all’art nouveau.

Giunto quasi a mille utenti registrati e 10000 impression/giorno il sito ha chiuso nel 2007 a causa di problemi di tempo e di gestione e moderazione.

E’ stata comunque una bella esperienza e ricca di spunti.


Finsoft.it
Finsoft.it

Finsoft.it

Finsoft.it è il sito istituzionale, nonchè portale corporate, della software house per cui lavoro da qualche anno.

L’idea di Enrico Carpino, amministratore unico di Finsoft srl, era quella di un sito istituzionale chiaro, leggero, trasparente, che riuscisse a dare al cliente e al candidato consulente una immagine nitida di ciò che Finsoft è in realtà.

Usando un piano colore semplice (azzurro e bianco, ovvero i colori aziendali) abbiamo cercato di dare una lettura a Z con livello di navigazione 2. A sinistra abbiamo posto spazio agli headline aziendali, mentre a destra abbiamo lasciato ampio spazio alle presentazioni dei migliori clienti Finsoft.

Le icone sono state scelte con cura da archivi fotografici royalty free o realizzate da me tramite scatti digitali in condizioni suggestive (esempio la foto della sede aziendale in una giornata tersa dopo una nevicata).

La sezione corporate aziendale (dedicata ai dipendenti e accessibile mediante account) offre diverse utilities, un forum, un repository qualità e una rubrica contatti.


Studio Aglietto - Environmental Engineering
Aglietto.com - 2003

Aglietto.com – 2003

Aglietto.com è il sito istituzionale dello Studio di Ingegneria Ambientale dell’Ing.Ivano Aglietto.

La versione 2003 curata da me è stata realizzata completamente in Macromedia Flash e pensata come una brochure sofisticata e dinamica che desse il più possibile la sensazione della dinamicità e degli obbiettivi aziendali.

Purtroppo ad oggi non è più online perchè credo avreste sicuramente apprezzato il video di presentazione diretto e montato da me (se mai un giorno riuscirò a recuperarlo tra i miei back-up lo inserirò nel portfolio).


Siticontaminati.it - Il portale italiano delle bonifiche ambientali
Siticontaminati.it - 2004

Siticontaminati.it – 2004

Il portale Siticontaminati.it è il tipico esempio di portale multi-purpose.

Al suo interno sono infatti condensate funzionalità B2C, B2B, CMS e Document Repository, Applicative e di utilità.

Ho iniziato a sviluppare Siticontaminati.it senza partire da alcun portal engine in quanto nessun sistema aperto e preesistente offriva strutture o funzionalità riusabili nello specifico.

Le principali sfide che ho affrontato nel realizzare questo portale sono state:

1. Document Repository di alcuni gigabyte di documenti pdf, word, excel e powerpoint con organizzazione gerarchica, ricerca full-text, autoindicizzazione e categorizzazione (tecnologia usata: MS Index Server)
2. Gestione Bandi e automatismi di visualizzazione, archiviazione, ricerca e content-push.
3. Forum
4. Gestione offerte e richieste lavoro, nonchè archivio CV e Aziende
5. CMS articoli, newsletter e ricerca fulltext archivio
6. Gestione rivista online, sommari e preview pdf del periodico tecnico: “Siticontaminati”
7. User Centered Design, usability e grafica del sito
8. testing, forum-groups, manutenzione e affinamento navigazione

Ad ora Siticontaminati.it è stato stravolto abbastanza, e dalla iniziale semplicità e pulizia è passato ad una versione (fatta e pensata da terzi) decisamente più complessa e a mio parere meno usabile.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close