Memento: un Template HTML FREE

Beautiful work, nice work, very very nice theme… questi sono stati i primi commenti raccolti a caldo da Memento a pochi minuti dalla sua pubblicazione su Themforest.

La bella notizia? È che oggi puoi scaricarlo gratuitamente e metterlo subito in funzione per i tuoi business o per i tuoi clienti.

Live Preview »

Download

Si tratta di un template HTML multifunzionale. Se invece cerchi una versione WordPress dello stesso tema, allora fatti un giro su questa pagina.

Il tema HTML

Memento è un tema responsive, completamente personalizzabile, con un design fresco e potente, stile corporate, colore chiaro, gusto pulito :)

A parte le battute, fai prima a dare un’occhiata alla preview.

Una cosa da dire subito è che con Memento, ma questo vale oramai per tutti i nostri template, puoi configurare e personalizzare ogni cosa in modo estremamente semplice. Puoi creare infinite soluzioni di layout, usare slider, menu avanzati, pagine portfolio, blog e molto altro ancora.

Ma cerchiamo di capire meglio di cosa stiamo parlando.

9 Home page

L’importanza della home page per un sito è oramai lapalissiana. Con Memento ne abbiamo create nove. Non una, due o tre, ma nove. Sai che significa, soprattutto se sei un web designer che deve accontentare un certo numero di clienti?

Home page versione 1

Template HTML FREE: Memento

C’è un nuovo tipo di mercato. I navigatori sono sempre più esigenti, ma anche più informati ed esperti. Basta un’occhiata veloce per capire se vale la pena di fermarsi oppure no sul sito che hanno davanti.

Questa è la logica di layout di Memento. Un solo scroll per una pagina che offre una visione d’insieme con elementi sapientemente ordinati.

In alto campeggia una top bar con gli ultimi tweet del nostro account a sinistra e un menu di supporto a destra.

Il menu principale è ben visibile immediatamente sotto, con le sue icone e un effetto hover che si attiva in modo piacevole al passaggio del mouse. Anche i sottomenu si aprono al semplice passaggio del mouse. Basta provare per credere.

Lo slider della prima home page è quello con le thumbnail.

A seguire, uno spazio a tre colonne in cui è possibile offrire informazioni di anteprima. Es. contatti, portfolio etc..

Poi, ancora, uno slider con le testimonianze di clienti o lettori. E infine il footer, o se vogliamo, un pre-footer in cui possono essere ospitati tre widget di contenuto, e un piè di pagina con i credit e un elenco dei vari canali social su cui è possibile trovarci.

Home page versione 2 (stretched)

Template HTML FREE: Memento - Home 02

La logica strutturale rimane la stessa: piccolo scroll per una subitanea visione d’insieme. Qui però notiamo alcune differenze.

La prima è nello slider. Quello usato è l’elastic slider (che è anche responsive). Poi seguono 4 focus con featured image per dare informazioni sui servizi offerti. Poi troviamo una sezione a tre colonne in cui mettere in risalto quelli che sono i punti di forza dell’attività che si intende promuovere.

Anche il footer cambia: scompare il pre-footer, ma non i credits e i social che vengono centrati rispetto al wrapper.

Cambia anche il background, che è bianco assoluto.

Home page versione 3 (portfolio)

Template HTML FREE: Memento - Home 03

Luce ai progetti. Questo il senso della terza versione di Memento.

Qui abbiamo usato il flash slider, seguito da un layout a 4 colonne in cui mostrare – con tanto di featured image – alcuni progetti o attività meritevoli di attenzione.

Per il resto, come nella prima versione, c’è lo slider dei feedback e il footer ampio con i 3 widget e il piè di pagina.

Home page versione 4

Template HTML FREE: Memento - Home 04

Se dovessimo usare uno slogan per definire questa versione, potrebbe essere così: puntiamo tutto sull’accoglienza.

L’elegant slider è seguito da uno spazio appositamente costruito per il messaggio di benvenuto e dalle quattro colonne di evidenza di quelli che sono i punti di forza dell’attività che si vogliono promuovere.

Home page versione 5

Template HTML FREE: Memento - Home 05

Onore al bianco e agli spazi ordinati. In questa versione della home page predomina il concetto del rapporto tra forma e spazio. E non a caso, dopo lo slider (che è di tipo elegant) segue un layout a 4 colonne pensato per mostrare una galleria fotografica. Cosa c’è di più ordinato nello spazio di una raccolta delle migliori fotografie?

Ma la vera novità di questa versione, almeno rispetto alle precedenti, è la possibilità di far vedere a fine pagina, con la semplicità tipica del copia e incolla (le porzioni di codice sono chiaramente commentate per rendere facile all’utente lo spostamento di interi blocchi di layout), contenuti di tipo feed o ultimi articoli o parti di testo (es. filosofia aziendale) etc..

Il footer qui, come per la versione 2, raccoglie al centro sia i credits che le icone dei social.

Home page versione 6

Template HTML FREE: Memento - Home 06

Credo che sia evidente, oramai, che non ci sono molti limiti alla possibilità di comporre la home page in base alle proprie esigenze e sempre in modo professionale. E questa versione lo dimostra.

Lo slider con thumbnail mette in risalto diverse foto/progetti da mostrare sin da subito al lettore che arriva sul sito. Un piccolo movimento degli occhi verso il basso e l’attenzione viene catturata dal welcome box a cui fa da supporto – sulla destra – una sezione dedicata ai feedback dei clienti.

Seguono le 4 colonne per la presentazione dei servizi e il consueto grande footer che già abbiamo visto in altre versioni.

Home page versione 7

Template HTML FREE: Memento - Home 07

Se ci è concesso un piccolo, piccolissimo, autovezzeggiamento, qui possiamo dire che siamo davvero di fronte a un’ottima composizione estetica degli elementi. Poche cose, ma presentate con un fascinoso tocco di prelibatezza.

Le confortanti tonalità del blu che dominano il background, unitamente alla tecnologia dello slider parallax, nonché alla scelta di mostrare solo 4 colonne con le categorie di prodotti/servizi di punta, enfatizzano l’impatto della pagina, ancorché basata sulla scelta di togliere e non di aggiungere contenuti.

Home page versione 8

Template HTML FREE: Memento - Home 08

Quando si hanno molte cose da raccontare o contenuti da condividere in una sola pagina di presentazione, allora non si può fare a meno di usare la tecnica delle tabs. In questa versione della home di Memento basta passarci sopra con il mouse per vedere quello che succede.

Home page versione 9

Template HTML FREE: Memento - Home 09

E per concludere con le home page di Memento, ecco una versione ancora più ricca di elementi. C’è tutto quello che può servire: slider, welcome box, portfolio e grande footer.

Ma abbiamo visto che non ci sono limiti alle soluzioni di layout. Il codice è commentato in ogni sua parte e permette di spostare, scomporre, aggiungere o eliminare ogni sezione con un semplice taglia o copia e incolla.

Pagina FAQ

Template HTML FREE: Memento - Home 10

Memento permette di avere una pagina FAQ per offrire ai tuoi lettori una lista di domande con risposte che si aprono con effetto toggle. Nella configurazione del toggle è possibile scegliere se avere tutte le FAQ aperte o chiuse, o se mantenere aperta solo una domanda, come nella nostra demo.

Testimonials

Template HTML FREE: Memento - Home 11

Ovviamente, i feedback e le testimonianze non potevano solo essere sparsi qua e là a sostegno di una promozione o di un’offerta, ma andavano raccolti e mostrati in una pagina ad hoc.

Noi l’abbiamo predisposta, ed è davvero molto gradevole, in linea con lo stile ordinato e pulito del tema.

Pagina Gallery

Non poteva mancare una pagina gallery. Ma Memento offre due soluzioni al riguardo:

  1. una gallery responsive
  2. una gallery filterable

Gallery Responsive – Template HTML FREE

Template HTML FREE: Memento - Home 12

Qui l’immagine selezionata viene posta in primo piano. Da notare lo slider sotto, che offre un’anteprima sulla quantità e sul tipo di immagini in galleria, e i pulsanti next e previous direttamente collegati allo slider. Infatti, se provi a scorrere le immagini, quella che va in primo piano viene messa in evidenza anche nello slider con un hover sulla cornice.

Gallery Filterable

Template HTML FREE: Memento - Home 13

Per chi è abituato a raccogliere le immagini in categorie, ecco la gallery filterable.
All’hover sulle thumbnails è possibile mostrare l’eventuale nome dell’immagine, un’icona che apre l’immagine a dimensione originale in una finestra lightbox  e un’altra icona per aprire la pagina di dettaglio dell’immagine, nel caso volessi aggiungere una descrizione della stessa.

Pagina contatti

Template HTML FREE: Memento - Home 14

Molto spesso, questo tipo di pagina viene sviluppato velocemente, senza pensare all’importanza che può avere nel quadro complessivo di una strategia di conversioni.

Noi l’abbiamo costruita mettendoci nei panni del cliente, cercando cioè di predisporre intorno a lui un ambiente rassicurante, con tutte le informazioni di cui ha bisogno rispetto all’azienda che sta per contattare.

In alto abbiamo inserito un pannello in javascript in cui puoi inserire una mappa interattiva di Google Maps o, se preferisci, l’immagine di una mappa statica. Sotto trovi il form di contatto e una sidebar sulla sinistra con le informazioni del sito, numeri telefonici di supporto etc.

Pagina 404

Template HTML FREE: Memento - Home 15

Un tocco di simpatia per la 404 di Memento. Ovviamente, va ricordato che ogni porzione di codice è debitamente commentata. Quindi, anche qui, puoi rintracciarla facilmente e scriverci quello che vuoi.

Pagina Archivio

Template HTML FREE: Memento - Home 16

Se hai delle news, degli articoli o dei contenuti da mostrare con un certo ordine, ecco la pagina archivio. C’è anche la sidebar per info di supporto, anteprima su lanci o promozioni e altro.

Pagina Blog

Memento offre due tipi di pagine blog:

  1. Big Thumbnails
  2. Small Thumbnails

Template HTML FREE: Memento - Home 17

Nella Big Thumbnails puoi fare leva sulla bellezza delle immagini, mostrandole a 500px.

Template HTML FREE: Memento - Home 18

Qui invece puoi sfruttare gli spazi per dare priorità ad altre informazioni, ma anche per mostrare i contenuti in modo diverso.

L’ordine degli elementi e la libertà di composizione rimane una costante dei nostri temi. Valuta e tue esigenze e scegli il layout a te più congeniale.

Pagina Portfolio

Quando si lavora e c’è bisogno di mostrare i risultati ottenuti, non c’è niente di meglio che poter scegliere tra uno o più layout di portfolio.

Memento ne contiene cinque:

  1. 3 colonne
  2. Big Image
  3. Filterable
  4. Full Description
  5. Con Slider

3 colonne

Template HTML FREE: Memento - Home 19

Ordinato e pulito. Puoi decidere quanti progetti mostrare in una schermata, usando la paginazione per tutti gli altri.

Big image

Template HTML FREE: Memento - Home 20

A volte, il vecchio metodo di mostrare gli oggetti uno sotto l’altro è la migliore soluzione per dare enfasi alle cose.

Questo layout è per gli amanti del dettaglio. L’immagine grande può essere ulteriormente ingrandita grazie al lightbox che si apre se ci clicchi sopra.

Filterable

Template HTML FREE: Memento - Home 21

Ci sono progetti che non si vogliono mostrare o che non si vogliono mostrare su una determinata pagina. Ce ne sono altri invece che tutti dovrebbere conoscere.

A questo serve un portfolio filterable. Grazie a dei filtri in JS puoi decidere di far vedere i tuoi progetti raccolti per categoria.

Full Description

Template HTML FREE: Memento - Home 22

E se invece decidessi di mostrare un progetto per volta? Con Memento puoi farlo tranquillamente, senza perdere traccia del portfolio. Infatti, sulla destra c’è uno slider featured project che mette in evidenza tutti gli altri progetti del sito.

With Slider

Template HTML FREE: Memento - Home 23

Un modo diverso di tenere tutti i progetti in una pagina grazie allo slider delle immagini.

Conclusioni

Abbiamo descritto più o meno tutte le caratteristiche di Memento. Certo, una cosa è leggere, un’altra cosa è navigarlo. Le parole possono essere abilmente scelte per dare la migliore immagine di un prodotto. Ma alla fine sono solo la fotografia del recensore.

Noi crediamo che Memento possa stimolare sensazioni che vanno al di là di una soggettiva rappresentazione. Layout, colori, slider etc. sono come una combinazione micidiale di creatività.

Perché non ti fai un giro sulla nostra preview per capire meglio?

Download

Licenza per il Template HTML FREE

Licenza Creative Commons
Diverso: Template HTML FREE by Your Inspiration Web is licensed under a Creative Commons Attribuzione – Condividi allo stesso modo 3.0 Unported License.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Nando è fondatore di Edi Group, società di Comunicazione e Formazione fondata nel 2005. È inoltre Trainer Microsoft e docente di Webdesign con anni di esperienza, anche in qualità di progettista, in corsi di Formazione Professionale regionali e privati. È stato speaker in diverse prestigiose conferenze, anche per conto di Microsoft Italia. Tiene abitualmente corsi di formazione presso le aziende. È autore di diversi libri sul Web Design, in italiano ed inglese. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

21 commenti

  1. jhacked
  2. laura
  3. francesca
  4. domenico
  5. Patrick
  6. Roberto
  7. Giusepppe
  8. dogfucking
  9. Alessandro
  10. Iury
  11. L

Trackback e pingback

  1. WordPress自适应CMS主题:Meménto | Aeego
    […] 作者:Your Inspiration Themes 语言:英文 类别:CMS 版本:1.1 演示下载:DEMO|百度云盘|华为网盘 […]

Lascia un Commento

Current day month ye@r *