PV.M Garage

Raccolta Di Handwritten Font Per I Tuoi Prossimi Progetti Di Grafica

piervix — Fri, 12 Mar 2010 02:12:07 +0000

Sei alla ricerca di “handwritten font”? Sei nel posto giusto, caro amico.
Abbiamo passato diverse ore cercando sul web font di alta qualità per soddisfare i gusti, e le necessità, dei nostri lettori. La cosa davvero interessante è che tutte le risorse selezionate sono assolutamente gratuite e liberamente scaricabili.

Questa volta ci siamo concentrati su una tipologia di font molto utile quando si tratta di creare design informali ai quali si vuole donare un tocco di originalità. Gli “handwritten”, letteralmente scritti a mano, sono utilizzati in diversi modi e li troviamo spesso inseriti in contesti particolari dove hanno il compito di rendere diretto un messaggio.
Di seguito riportiamo una raccolta completa e omogenea di caratteri tipografici che simulano la scrittura manuale, all’interno della quale potrai trovare i font giusti da aggiungere alla tua collezione.

Handwritten Font Per I Tuoi Prossimi Progetti Di Grafica

Jellyka – Estrya’s Handwriting

Breakfast at Michy’s

Journal Font

Hand of Sean Font

Luna Bar Font

Pappo’s Blues Band Font

PopStar Autograph Font

Christopher Hand Font

Dear Joe 5 Casual Font

Daniel Font

Joyful Juliana Font

Arsenale White Font

Nathan’s Notations Font

Note this! Font

Dali Font

Honey I Stole Your Jumper Font

Inkburrow Font

Jacek Zieba Jasinski Font

Child’s Play Font

Salamander Font

Aberration font

Gorillaz 1 Font

Brian Cary font

Emperors Scrawl font

SickCapitalVice Font

Jenny Font

Kids First Print Font

SF Burlington Script Fon

Kingthings Font

A Theme for murder Font

Tesla Font

Fely Font

!PaulMaul Font

Barbara Font

Good Foot Font

HarabaraHand Font

Jinky Font

Krazy Nights

Rabiohead

Next Font

Vielkalahizo Font

Altri articoli interessanti:

E-Commerce Web Design: Problematiche, Esempi e Pratiche Migliori

piervix — Tue, 02 Mar 2010 17:40:45 +0000

Il World Wide Web è un canale privilegiato, attraverso il quale è relativamente facile diffondere nuove idee. In questi tempi di crisi economica, questo potente strumento di comunicazione potrebbe rivelarsi prezioso per irrobustire il proprio business.
La grande rete fornisce diverse possibilità per migliorare, in modi differenti, le proprie attività e una di queste è sicuramente il commercio elettronico.

Di seguito si riportano le prime parole usate da Wikipedia per descrivere l’e-commerce:

“Il significato del termine “commercio elettronico” è mutato col passare del tempo. All’inizio indicava il supporto alle transazioni commerciali in forma elettronica, generalmente ricorrendo a una tecnologia denominata Electronic Data Interchange (EDI, introdotta alla fine degli anni settanta) per inviare documenti commerciali come ordini d’acquisto o fatture in formato elettronico.

In seguito vennero aggiunte delle funzioni che possono venire denominate in modo più accurato come “e-commerce” — l’acquisto di beni e servizi attraverso il World Wide Web ricorrendo a server sicuri (caratterizzati dall’indirizzo HTTPS, un apposito protocollo che crittografa i dati sensibili dei clienti contenuti nell’ordine di acquisto allo scopo di tutelare il consumatore), con servizi di pagamento on-line, come le autorizzazioni per il pagamento con carta di credito.”

Poblematiche Dietro La Realizzazione Di Un Sito E-Commerce

L’obiettivo principale per un sito e-commerce è quello di vendere e promuovere prodotti e servizi. Questo genere di sito web richiede una maggiore cura dei dettagli ed una logica precisa nella costruzione dell’interfaccia grafica per l’utente, in quanto il raggiungimento dello scopo è propedeutico ad una effettiva fruibilità della risorsa. Lo scambio di informazioni deve essere limpido, l’utente (il potenziale cliente) deve poter usufruire di strumenti immediati e diretti in grado di facilitare l’accesso a dati rilevanti e permettere una scelta accurata. E’ essenziale creare una perfetta user experience.

Si immaginino tre visitatori in un negozio reale: una ragazza carina e curata in una boutique di moda alla ricerca di nuovi e sgargianti vestiti; un nerd frenetico guidato dalla maniacale necessità di entrare in possesso dell’ultima diavoleria elettronica; infine una persona apparentemente normale, senza bisogni particolari, alla ricerca di offerte speciali e sconti.
E’ evidente che i potenziali clienti appena descritti sono alla ricerca di cose differenti e, per questa ragione, un esperto commerciante farà uso di approcci diversi per vendere i propri prodotti.

On-line la situazione cambia. Non c’è più il diretto contatto tra l’esperto venditore e il cliente; è il front-end web developer che deve realizzare un perfetto “distributore automatico di beni e servizi” prevendendo le reazioni dell’utente. Un buon web designer deve essere in grado di costruire una interfaccia web che mostri i prodotti giusti, nel posto giusto, nel modo giusto per guidare l’utente fino alla pagina del “Checkout”.

C’è un altro aspetto da tenere in considerazione. I nostri tre potenziali clienti richiedono prodotti differenti ed è logico pensare che cercheranno i beni di cui hanno bisogno in negozi specifici in grado di soddisfare le proprie esigenze. Una ragazza che cura con malcelato narcisismo il proprio aspetto personale difficilmente comprerà i propri capi in negozi generici, ha bisogno di sicurezza e un famoso fashion store con un commesso accomodante e gentile è sicuramente il posto ideale dove rinnovare il guardaroba; un geek, invece, conosce bene ciò che vuole, cerca un acquisto rapido e diretto e un megastore di informatica ed elettronica potrebbe essere il luogo perfetto per portare a termine la missione. L’acquirente “medio” (lasciatemi passare il termine) ha bisogno di un differente tipo di “fiducia”, vuole comprare roba buona (e quindi nota) ad un prezzo conveniente.

Sul web una delle operazioni più complicate è proprio quella di generare fiducia, soprattutto quando si cerca di vendere qualcosa. E’ chiaro che se il cliente non ha piena fiducia nel commerciante l’acquisto non si concluderà.
E’ evidente, a questo punto, che per costruire un buon sito di commercio elettronico bisogna individuare la tipologia di clienti da gestire e realizzare l’applicazione web intorno alle loro esigenze.

E’ anche importante valutare se il business on-line può funzionare, ad esempio è arduo presumere che qualcuno compri vestiti costosissimi sul web senza averli provati almeno una volta, è più semplice che si acquistino borse accessori o t-shirt. E’ molto probabile, invece, che un giovane geek dia una occhiata alle offerte disponibili in rete e aquisti sul web il suo gadget elettronico. Tentare di vendere articoli e prodotti difficili da piazzare al pubblico in rete potrebbe essere controproducente; per cui se ci si trova a dover gestire una tipologia di clientela “difficile” bisogna fornire informazioni dettagliate e molte immagini con particolari interessanti sui prodotti.

Un sito web costruito per vendere dovrebbe anche prevedere offerte speciali sui prodotti e diffondere annunci mirati, l’obiettivo è quello di aumentare le vendite, ma non solo on-line. Infatti, creando interesse sugli articoli presenti nel negozio, attraverso descrizioni approfondite e note su come utilizzare al meglio il bene dopo l’acquisto (o spiegando come sfruttare caratteristiche proprie del prodotto non comunemente utilizzate), è possibile generare curiosità attorno ai propri prodotti e attirare una clientela attenta, che non si limiterà ad acquisti sporadici.

Realizzare una interfaccia web per un business on-line necessita una definizione specifica degli obiettivi, un layout e un design costruiti per soddisfare le esigenze della propria clientela in grado di offrire una user experience perfetta e affidabile. L’obiettivo finale è quello di trasformare semplici visitatori virtuali in consumatori reali.

Definisci Il Tuo Target E Scegli Lo Stile Giusto

E’ stata appena fatta una analisi di massima su alcuni punti chiave da tenere in considerazione nella progettazione di un e-commerce, si è anche sottolineato che il look and feel ha la sua importanza in un progetto web serio ed ambizioso.
Spesso ci imbattiamo in siti di commercio elettronico con un design scarno e sgraziato, ma è evidente che non si può prescindere da un aspetto professionale e uno stile accattivante e da quelli che sono le buone norme di ritmo e integrazione del testo per presentare i propri prodotti on-line.

Se hai deciso di affrontare questa nuova sfida devi conoscere con precisione il tipo di cliente che potrebbe essere interessato agli articoli del commercio in questione e creare un design in grado di catturare la sua attenzione. Con una analisi sommaria si può facilmente intuire che se, ad esempio, si sta tentando di vendere maglie da calcio retrò di squadre famose è opportuno prevedere uno stile vintage usando foto d’epoca e altri elementi cari a chi ama la “vecchia scuola calcistica”.
Uno stile perfetto richiede un uso opportuno dei colori, una buona tipografia e l’utilizzo scrupoloso di opportuni elementi di design. Un sito web invitante e accattivante, che comunica emozioni, è un ottimo modo di dire “Benevenuti!” ai propri visitatori (e potenziali clienti).

Dog Funk

Uno stile soft-grunge per un sito web legato al mondo dello snowboard.

Toys Rus

Colori vivaci e “allegri” per un e-stor di giocattoli.

Organic SuperMarket

Uno sfondo con richiami espliciti alla natura (erba e terra) per il sito di un supermercato irlandese.

Una tendenza molto diffusa è l’utilizzo di foto di alta qualità per mostrare in modo impecacbile i prodotti in vendita.

Rapha

Fotografia in bianco e nero per un layout pulito e ordinato.

Dune

Foto di alta qualità per un sito web di moda minimale.

Republic

Uso efficace della fotografia per evidenziare le diverse sezioni del sito, le offerte e i nuovi arrivi.

Rendi Il Tuo Sito Web Usabile E Fruibile

L’interazione con l’interfaccia grafica di negozio on-line deve essere facile da gestire, le informazioni sensibili agevolmente fruibili e le operazioni per l’aquisto chiare e semplici; ma per creare un perfetto strumento per la vendita di prodotti on-line un sito web usabile non basta. Bisogna creare curiosità e interesse nel visitatore, c’è da guidare gli utenti in un vero e proprio tour virtuale del negozio.
Lo sviluppatore dispone di tecniche variegate e funzionali per rendere confortevole la navigazione e di seguito sono riportate alcune soluzioni utili per costruire un sito web di e-commerce user-friendly.

Nota: i seguenti consigli sono semplicemente alcuni punti cruciali sui quali è doveroso fare qualche considerazione quando si progetta un e-commerce.

Assicurati di mettere in evidenza i tuoi migliori prodotti (i più venduti, i nuovi arrivi, particolari categorie di prodotti, etc…), molti siti e-commerce di successo utilizzano sezioni con elevante visibilità per mostrare i prodotti più interessanti e convenienti. Spesso queste sezioni diventano vere e proprie gallerie grazie all’utilizzo di tecniche Javascript (e Flash) attraverso le quali si realizzano eleganti slideshow.

Surfride

Questo sito usa un efficace galleria slideshow con grandi immagini per promuovere alcuni prodotti.

Chrome Bags Store

Un altro fantastico esempio di presentazione per promuovere i propri prodotti.

Spingi gli utenti a visitare più pagine e prodotti facendo uso di bottoni call-to-action ed effetti hover per le immagini cliccabili.

Nau

In questo sito un buon uso del doppio stato per le immagini cliccabili che dona dinamicità e freschezza alla pagina web.

Cellar Thief

Alcuni bottoni “strategici” sono presenti in questo layout.

Chocri – The Autumn Film

Altri esempi di bottoni call-toaction.

Organizza opportunamente i tuoi contenuti e fornisci strumenti utili per permettere una facile navigazione. Questo è un punto davvero importante, se i consumatori non trovano i loro prodotti preferiti non comprano e la nostra missione fallisce.
Un buon menù di navigazione è strettamente necessario per migliorare la nostra interfaccia web, ma spesso diventa difficile gestire una grossa lista di categorie e tag. Per risolvere questo tipo di problema si può tranquillamente usare un mega drop-down menù.

Republic

Splendida implementazione di un completo e ben fatto mega drop-down menu.

Zumiez

Altro esempio di drop-down menu.

Un buon menù di navigazione, tuttavia, non è sufficiente. La funzione di ricerca deve essere ineccepibile e dovresti anche considerare l’ipotesi di aggiungere opzioni avanzate per ottenere dei risultati precisi ed affidabili.

Borders

Search form nell’header.

Liga Retro

Funzione ricerca con opzioni avanzate.

Un’altra importante caratteristica da aggiungere potrebbe essere un breadcrumb trail, un semplice aiuto alla navigazione che assiste gli utenti visualizzando dinamicamente la posizione all’interno del sito web.

Master Of Malt

Esempio di breadcrumb in un sito web e-commerce.

Big Brown Box

Breadcrumb testuale.

Apple Store

La soluzione adottata da Apple è tra le più efficaci.

Il carrello è tra le sezioni più importanti di un negozio on-line; deve permette una gestione affidabile e completa delle voci presenti (aggiunta di un prodotto, eliminazione, modifica della quantità) e la possibilità di continuare il tour all’interno dell’e-store.
Un buon uso di icone e simboli, nel carrello come in altre sezioni del sito, potrebbe essere necessario per aiutare l’utente ad assorbire informazioni in modo rapido ed efficiente.

Crate And Barrel

Una toolbar in flash, un carrello assolutamente unico e ben fatto.

Dog Collars

Una modal window che ospita il carrello, altra soluzione intelligente.

FireBox

Un box nella sidebar per l’aggiunta di prodotti.

Non Perdere I Tuoi Utenti (Clienti)

Abbiamo visto come sia importante stimolare gli utenti e fare in modo che si fidino di noi per mantenere il nostro business on-line. Certo, una buona presentazione è essenziale per (auto)promuovere la nostra attività, ma i consumatori hanno bisogno di sicurezza per comprare sul web. Con alcuni semplici accorgimenti si può notevolmente migliorare la propria reputazione.

Alcune statistiche evidenziano come gli utenti passino molto tempo ad approfondire la conoscenza sui prodotti ai quali sono interessati e la mancanza di informazioni dettagliate sugli articoli in vendita è un errore riscontrabile in molti siti di e-commerce. Creare una accurata pagina con specifiche tecniche relative al bene è un dettaglio da non trascurare.
E’ anche utile esplicitare le relazioni semantiche tra i diversi prodotti, includendo link diretti ad articoli correlati tra loro (secondo criteri scelti opportunamente) nella pagina dei dettagli di ogni singolo bene in vendita.

Rapha

Un dettagliata pagina di presentazione.

Master Of Malt

Altro esempio.

Bridge 55

Immagini dettagliate per una pagina prodotto completa e informativa .

Il processo per il pagamento (checkout) deve essere trasparente e chiaro, e deve offrire tutti i dettagli necessari per portare a termine l’operazione nel minor numero di passi possibile. Una idea simpatica può essere quella di implementare un progress tracker che guidi il cliente nel checkout. Doverose anche le classiche FAQ per semplificare la comunicazione con gli utenti.

FireBox

Progress tracker per una pagina di checkout.

Cafe Press

Altro esempio efficace.

Non c’è da sottovalutare l’aspetto umano quando si tratta di vendere prodotti on-line. Se vi suona strana la cosa, pensate come se foste voi a dover acquistare un qualche prodotto on-line. Credo che difficilmente siate disposti a fornire i vostri dati personali per un pagamento ad una compagnia che non fornisce la possibilità di un contatto diretto con i propri rappresentati nel caso in cui sorga una qualsivoglia complicazione.
Dalla denominazione completa ai dati fiscali, da un contatto mail ad un numero telefonico per il supporto, nulla deve essere trascurato. Offrire una assistenza puntuale e consapevole è la chiave per non perdere clienti.

Una comunicazione aggiornata e trasparente sugli sviluppi dell’e-store è utile per mantenere viva l’attenzione e un blog potrebbe essere una buona idea per gestire in modo informale questo aspetto.

Un ultimo consiglio, sempre valido quando si pubblica sul web, è quello di rendere il sito SEO-friendly. Un negozio che non sa come farsi trovare non venderà mai…

A Showcase Of 65+ Well-Designed E-Commerce Websites

Below a massive collection of beautiful and working e-stores. They might be a good source of inspiration for your next works. Enjoy it!

Surf Ride

Me and Mommy-to-be

Big Brown Box

Itself

Lallevopuesta

Tillymoss

Fugitive Toys

One Horse Shy

Chrome Bags Store

Clothing at Tesco

Green Label Organic

Cellar Thie

Shirt Fight T-Shirts

Dog Funk

Dog Collars

20×200

Duchy of Cornwall Nursery

Piccadilly

Toys Rus

Master of Malt

Nature & Découvertes

Schokolade Von Chocri

Japnó Shop

Wood And Beyond

Ukecosas

Torn Robes

Yellow Bird Project

La Patate

Shirt City

Page CXVI

Opera Magé

The Autumn Film

Cosmicsoda

Borders

Liga Retrò

FarFetch

Weta’s Online Shop

Ride Four Ever

Hello, Bird!

Red Velvetart

I’m Walking

Feel Unique

Organic Food Ireland

Republic

Online Grocery Store

Tiger Leisure

Fat Face

Organic Vegetable Seeds

Shoes And Handbags

Shop Rush

Dune Shoes

Nau

Pixie Market

Hmv

Fire Box

Design Collectors

Cafe Press

Zumiez

Pure And Little

Apple Store

Rapha

Bridge 55

Crate and Barrel

Nineteen 47

Tommy Hilfiger

Trolley Cards

Plus De Bulles

Teesey

Altri articoli interessanti:

Gennaio 2010, Utili Segnalibri per Collezionare il Meglio del Web

piervix — Wed, 03 Feb 2010 16:28:15 +0000

Il consueto appuntamento con il meglio del mese raccontato attraverso 35 e più segnalibri appositamente selezionati per voi.
L’obiettivo di questa rubrica è, come noto, quello di collezionare le migliori risorse offerte dal “World Wide Web”. La speranza è di fornire buoni spunti a voi lettori.

Vediamo come la design community ha dato il benvenuto a questo 2010 gustandoci alcuni tra i più interessanti articoli di questo inizio d’anno. Buona lettura!

Sorprendenti Tutorial per Web e Graphic Designer

Create a Gnarly Snowboarding Themed Web Design

How to Create a Cool Anaglyphic Text Effect with CSS

Design a Surreal Desert Scene in Photoshop

How to Make a Vibrant Portfolio Web Design in Photoshop – Design Instruct

How to Make a CSS Sprite Powered Menu

The New Hotness: Using CSS3 Visual Effects

Halftone Navigation Menu With jQuery and CSS3

How to Design the Apple iPad in Photoshop

Design a Colorful Retro Futuristic Poster in Photoshop

Reader Tutorial: Easy Digital Painting Illustration in Photoshop

Create a Grungy, Translucent Web Portfolio Design

Articoli e Interviste

An Interview with Designer & Blogger Jon Phillips

Curating Comments Threads

Principles of Great Design: Craftsmanship | Design Informer

The Risk of Being Unique – The Logic of Design Styles

15 Invoicing Tips for Designers and Freelancers | Vandelay Design Blog

Design Trends (Predictions) in 2010

Interview with Little Box of Ideas Design Blog

Freebie e Risorse

20 Must Have WordPress CMS Plugins

25 New High Quality Free Fonts

20 Sets of Photoshop Brushes for Vintage Style Design

25 Fresh, Clean and Unique Wordpress Themes – Speckyboy Design Magazine

29 Resources for Freelance Designers Operating on a Tight Budget

12 Awesome, Fresh And Free Web Social Icons Sets

Showcases e Fonti di Ispirazione

11 Most Popular Blog Design Styles (With Examples) | Web 2.0

70 Gourmet Logos Of Food Restaurants Bars And Grills

40+ Examples of Horizontal Scrolling Websites | Naldz Graphics

Single Page Website Designs: 70+ Latest Examples

Beautiful Helvetica Inspired Artworks (Fanart, Posters, Wallpapers & Icons)

Progress Trackers in Web Design: Examples and Best Practices

55 Trendy Web Design Interfaces From Deviantart

Sito del Mese – IndoFolio.com

IndoFolio – The Portfolio of Gopal Raju

Must Follow su Twitter

Fabio Marasco (marbio) on Twitter

Dainis Graveris (1stwebdesigner) on Twitter

ThinkDesign (ThinkDesign) on Twitter

Must Read Blog del Mese

Tutorialzine – PHP MySQL jQuery CSS Tutorials, Resources and Freebies

PelFusion.com

PSD Vault – Extra Unique Adobe Photoshop Tutorial

Altri articoli interessanti:

Una Collezione di 45 Font Industriali

tom — Tue, 02 Feb 2010 15:41:05 +0000

Sei alla ricerca di “industrial font”? Sei nel posto giusto, caro amico.
Abbiamo passato diverse ore cercando sul web font di alta qualità per soddisfare i gusti, e le necessità, dei nostri lettori. La cosa davvero interessante è che tutte le risorse che abbiamo selezionato sono assolutamente gratuite e liberamente scaricabili.

Il termine “industriale” è abbastanza generico, forse addirittura vago, se utilizzato per descrivere un set di caratteri tipografici; ed in effetti quelli etichettabili come tali potrebbero essere molteplici: dai font angolari, che spesso troviamo associati al mondo delle moderne industrie, fino a quelli usurati, quasi grunge, facilmente riconducibili ad una decadente fabbrica degli anni ‘60.
Ad ogni modo, qualsiasi tipo di font industriale tu stia cercando, siamo quasi certi che lo troverai scandendo la lista qui in basso.

Font Industriali Per I Tuoi Prossimi Progetti Di Design

1. Babylon Industrial

2. Industrial Decapitalist

3. 28 Days Later

4. TR Heavy

5. A Bite

6. Aldo

7. Heavy Loud Edge

8. Heavy Weight Gamer

9. Reservoir Grunge

10. Boston Traffic

11. Barrio 30

12. Greatlakes

13. Know Your Product

14. Lintsec

15. Metro

16. Heavy Rotation

17. Capture It

18. Techno Overload

19. Future Flash

20. Future Millennium

21. Retroheavy Future

22. Angular

23. Ignis et Glacies Sharp

24. Alpha Male Modern

25. Vanberger

26. WC Wunderbach

27. Armalite Rifle

28. Pulse Rifle

29. CitonLight DB

30. Destencil

31. Millenia

32. Octin Prison Free

33. Orbitron

34. Pirulen

35. Telegrama

36. Black Oak

37. Yatis Black

38. DS Nova Black

39. Paint It Black

40. Broad

41. Dusty

42. Dirty Bakers Dozen

43. Dynomite

44. Urban Brush

45. Urban Rubber

About The Author

Tom is a writer and designer who works with a supplier of Epson ink, paper and printing accessories. You can read more of his writing about art, advertising and design at CreativeCloud.

Altri articoli interessanti:

35+ Nuovi Siti Web Con Un Efficace Uso Delle Texture

ricardo — Tue, 19 Jan 2010 17:01:49 +0000

Uno stile molto utilizzato nel Web Design moderno è il Grunge. Il suo successo probabilmente deriva dal fatto che è relativamente semplice da realizzare: attraverso alcune semplici tecniche con Photoshop è possibile creare splendidi effetti in pochi minuti. Un sito web grunge deve seguire una certa logica per rendere fruibili i contenuti, ma è comunque caratterizzato da una miscela “confusa” di oggetti sparsi e un massiccio uso di texture e pattern.
Negli ultimi siti web, che ho avuto modo di osservare con attenzione, è evidente che i designer stanno utilizzando texture delicate per creare layout chiari e leggibili ad elevato impatto visivo; è arduo, almeno per me, definire tutto ciò semplicemente “Grunge”.

Come si potrà osservare nella galleria qui in basso, la sezione più comune dove sono usate le texture è la “background-image”. L’obiettivo è rendere immediati i contenuti ed evidenziare la tipografia creando un buon contrasto tra lo sfondo e il testo. I risultati sono entusiasmanti ed è fantastico vedere come una texture semplice e sottile possa creare un grande impatto.

Siti Web con un uso Creativo ed Efficace delle Texture

Sotto è possibile osservare 37 esempi di siti web creativi che potrebbero ispirarti… Enjoy!

Cooper Graphic Design

OneTwentySeven

Bahur78

Becoming Human

Urban Roots

MoNkEyNuTs

JasonGrayMusic.com

Coopers Kids

The Crazy Love Campaign

Mutt Ink

Luthier Services

Daniel Marino

Epic Event

Make Film Work

Hull Digital Live 09

Mazza Móveis

Mike Matas Blog

Levi Lodge

Odosketch

Deren Keskin

Thibault Jorge

Pepper and Koffee

BR Origin

Portfolio of Jasmin Halkic

Riot Industries

Joolz

Billy Tamplin

Corking Design

Giraffe Restaurants

Versions

Baney Design

Christina Lauer

The Caddis Fly Angling Shop

Information Highwayman

Irvine Acosta

Pat Dryburgh

Kamal Chaneman

Altri articoli interessanti:

Creare Un Layout Con Elementi 3D Utilizzando Solo CSS3

piervix — Mon, 11 Jan 2010 15:57:51 +0000

Sul PV.M Garage focalizziamo spesso l’attenzione su quelle che sono le nuove tendenze del Web Design moderno e sulle nuove tecniche utili per creare siti web accattivanti e usabili.
In uno dei nostri tutorial abbiamo imparato come realizzare simpatici nastri e come giocare con la “drop shadow” di Photoshop per donare profondità ai nostri layout. Creare una percezione 3D in un sito e simulare un “mondo” in tre dimensioni è una tendenza molto diffusa nella creazione di layout grafici per il web.

Grazie a utilissimi software di grafica siamo in grado di disegnare con relativa facilità elementi in tre dimensioni, inoltre è anche possibile donare profondità utilizzando la prospettiva e un mix intelligente di gradienti e opacità. Senza dimenticare che esistono programmi, come Blender, che permetto la costruzione di oggetti 3D e immagini anche molto complesse da poter utilizzare nei nostri design.
C’è un interessante articolo che descrive diverse tecniche per simulare una percezione 3D nei lavori di Web Design su CreativityDen, consiglio un’attenta lettura: The six fundamental ways of adding depth in web design works.

Molti siti web evidenziano una bilanciata percezione della profondità ed è chiaro che questi tipi di layout richiedono l’utilizzo opportuno ed intelligente di immagini (generalmente richiamate attraverso la proprietà background dei CSS), linee e alcune tecniche CSS al fine di creare l’illusione della terza dimensione (Henry Jones, su Web Design Ledger, ha scritto un brillante articolo sull’utilizzo di linee da 1 pixel per esaltare distanze e bassorilievi; altra lettura consigliata: Adding depth with pixel perfect line work). Qui in basso è possibile apprezzare alcuni esempi di siti web che utilizzano diverse soluzioni per creare effetti 3D.

DesignM.ag

Blogof.FrancescoMugnai.com

Yoast.com

From-The-Couch.com

Calma. Siamo web designer, giusto? Abbiamo due grandi alleati per portare a termine i nostri progetti quotidiani: HTML e CSS ed evidente che i miglioramenti di questi due linguaggi sono stati considerevoli negli ultimi tempi. Dopo aver letto diversi articoli su come i CSS3 potrebbero migliorare e semplificare lo sviluppo delle interfacce per il web, mi sono chiesto fino a che punto sia possibile realizzare un layout in tre dimensioni semplicemente utilizzando HTML e alcune nuove proprietà dei CSS.

Nuove Proprietà dei CSS Utili nella Realizzazione di Elementi 3D

Ci sono alcune nuove proprietà dei CSS che ci aiuteranno a raggiungere il nostro scopo.

Utilizzeremo box-shadow, per creare la famosa “drop-shadow”, con l’aiuto di RGBa, un “color model” supportato dai nuovi browser che permette di ottimizzare il contrasto tra l’ombra e lo sfondo.

background: rgba(196,89,30,0.65);

-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

Un’altra grande proprietà dei CSS è il border-radius che ci permette di aggiungere angoli arrotondati, specificandone il raggio, a diversi elementi.

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;

Utilizzeremo anche bordi particolari per generare forme triangolari e costruire il nostro “ribbon”. Di seguito è possibile dare uno sguardo al codice che ci permette di disegnare triangoli utilizzando i CSS (per saperne di più su questa tecnica è opportuno leggere Creating Triangles in CSS su DinnerMint)

.triangle {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
}

Il triangolo, o la freccia, è utile per dare profondità ad alcuni elementi 3D. Box-shadow ci permette di aggiungere ombre a nostro piacimento. Border-radius, invece, ammorbidisce gli angoli spigolosi di forme rettangolari ovunque lo desideriamo.

Inoltre costruiremo un semplice menu, attraverso una “unordered list”, usando la proprietà transform per le singole voci della lista.

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);

In basso è possibile analizzare il risultato finale dei nostri sforzi, scaricare l’archivio contenente i file sorgenti e visualizzare la demo.

Come costruire un layout 3D solo con i CSS

Prima di ogni cosa, impostiamo la cartella con i nostri file: index.html e style.css

Prepariamo il documento HTML.





CSS Ribbon

Osservando l’immagine seguente, è possibile capire come costruiremo la struttura nella nostra pagina index.

E’ evidente che abbiamo bisogno di un “main container” (centrato), una “bolla” per i contenuti, e tre elementi per il nastro: un rettangolo e due triangoli.

     

 
3D CSS Ribbon
 

I Have Used Only CSS, friends!

For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.
It doesn't work with IE!


Go to the tutorial!

Il codice CSS per gli elementi base (container, bubble and rectangle) è riportato in basso.

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

:focus {
	outline: 0;
}
/* // Reset */

body {
	background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
	font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
	font-size: 12px;
	color: #999;
}

h2 {
	font-style: italic;
	font-weight: normal;
	line-height: 1.2em;
}

div#container {
	margin: 50px auto 0px auto; /* centered */
	width: 400px;
}

.bubble {
	clear: both;
	margin: 0px auto;
	width: 350px;
	background: #fff;
	-moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	position: relative;
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	background: #7f9db9;
	height: 50px;
	width: 380px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
	font-size: 30px;
	color: #fff;
	padding-top: 6px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}

Qui, invece, il risultato delle dichiarazioni precedenti.

Ora è il momento di aggiungere i due triangoli per completare il nastro. Questi devono essere posizionati al di sotto della bolla lungo l’asse immaginaria z, quella perpendicolare al nostro schermo. Useremo lo z-index per determinare l’ordine.




3D CSS Ribbon
 
 

I Have Used Only CSS, friends!

For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.
It doesn't work with IE!


Go to the tutorial!

Aggiungiamo le due classi in style.css per creare e posizionare i triangoli… e aggiungiamo anche lo stile per il contenuto (classe info).

.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; /* displayed under bubble */
}

.triangle-r {
	border-color: transparent transparent transparent #7d90a3;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 350px;
	top: 35px;
	z-index: -1; /* displayed under bubble */
}

.info {
	padding: 60px 25px 35px 25px;
}

.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #c4591e;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
}

L’immagine seguente ci mostra il risultato delle operazioni appena effettuate.

A questo punto strutturiamo una buona lista per il top-menu.





CSS3
is really
powerful

by PV.M Garage



3D CSS Ribbon



I Have Used Only CSS, friends!

For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.
It doesn't work with IE!


Go to the tutorial!

E’ proprio qui che faremo il nostro esperimento con la proprietà transfrom.

.menu {
	position: relative;
	top:3px;
	left: 50px;
	z-index: 80; /* the stack order: displayed under bubble (90) */
}

.menu ul li {
	-webkit-transform: rotate(-45deg); /* rotate the list item */
	-moz-transform: rotate(-45deg); /* rotate the list item */
	width: 50px;
	overflow: hidden;
	margin: 10px 0px;
	padding: 5px 5px 5px 18px;
	float: left;
	background: #7f9db9;
	text-align: right;
}

.menu ul li a {
	color: #fff;
	text-decoration: none;
	display:block;
}

.menu ul li.l1 {
	background: rgba(131,178,51,0.65);
}

.menu ul li.l1:hover {
	background: rgb(131,178,51);
}

.menu ul li.l2 {
	background: rgba(196,89,30,0.65);
}

.menu ul li.l2:hover {
	background: rgb(196,89,30);
}

.menu ul li.l3 {
	background: rgba(65,117,160,0.65);
}

.menu ul li.l3:hover {
	background: rgb(65,117,160);
}

.menu span {
	margin: 15px 80px 0px 0px;
	float:right;
}

Eccolo, il menù per come lo abbiamo costruito.

Fine. Il nostro semplice layout 3D è pronto.

Conclusioni

Credo che questa possa essere una ottima soluzione per migliorare le performance del nostro sito web pur mantenendo un fantastico disegno tridimensionale.
Il problema? Funziona, per come dovrebbe, solo con i browser di ultima generazione, inoltre Internet Explorer e Opera non renderizzano in modo opportuno le nuove proprietà dei CSS. In basso è possibile capire come i vari browser reagiscono al nostro codice.

Per chiudere è una buona idea validare il codice HTML.

W3C Validation

Responso: “This document was successfully checked as XHTML 1.0 Strict!”

Altri articoli interessanti:

Minimal e Retrò: Due Splendidi Progetti di Grafica

fciabatta — Tue, 05 Jan 2010 18:06:39 +0000

Oggi voglio proporvi i progetti, concettualmente molto diversi, ma entrambi assolutamente stupendi, di due grandi graphic designer: Albert Exergian e Stéphane Massa-Bidal.
I progetti sono personali, e forse anche per questo sono così belli.

Poster Series, Popular TV Shows

Il primo, di Albert Exergian, consiste in una serie di (40) poster dedicati alle serie TV più famose, sono realizzati in uno stile pulito e minimale
Ve ne propongo alcuni qui di seguito, gli altri potete vederli sul sito del talentuoso designer.

È incredibile come Exergian abbia ottenuto questi risultati con cosí pochi elementi. Sicuramente un’ottima fonte di ispirazione.

Web Services Covers Therapy

Il secondo progetto, di Stéphane Massa-Bidal – graphic e web designer, consiste sempre in una serie di poster. Questa volta il tema portante ruota attorno ai moderni Servizi Web, da Facebook a Flickr, da Wikipedia a Twitter.

Massa-Bidal ha realizzato i poster in stile retrò, con ritagli di immagini d’epoca e usando sapientemente font e colori.
Ecco qui alcuni dei suoi poster. Altri eccezionali lavori li potete trovare sul suo spazio flickr.

Per chi fosse interessato è anche possibile avere informazioni approfondite su Stéphane visitando il suo Portfolio.

Per ora è tutto gente, ma restate sintonizzati, altre grandi fonti di ispirazione vi aspettano sul PV.M Garage!

Altri articoli interessanti:

Tendenze nel Web Design Moderno: Footer Creativi, Grandi e Informativi

piervix — Mon, 04 Jan 2010 19:46:16 +0000

Il fondo della pagina, la fine del tuo lavoro di web design, la sezione conclusiva del tuo sito. Questo è il footer. La parte della pagina web che, in una interpretazione classica, è utilizzata esclusivamente per copyright e alcuni link.

Siamo a tutti gli effetti nell’Era di Internet e un sito web non è più una veloce vetrina di presentazione per aziende lungimiranti o strani nerd e geek. Al giorno d’oggi un sito web deve funzionare, deve essere interattivo, deve comunicare idee e presentare in modo unico servizi e prodotti. Nel web design moderno, fortunatamente, designer e developer stanno dicendo “NO” a footer standard e noiosi.
E’ un vero e proprio crimine trascurare la naturale conclusione di un progetto per il web utilizzando una semplice linea e alcuni link. Un sito solido, ben fatto e promettente ha bisogno di una intestazione perfetta, un corpo con testi leggibili e ordinati, grandi contenuti, ma anche di un footer “interattivo”, che lasci il segno.

Come i Visitatori Interagiscono con il Footer

E’ importante a questo punto capire come gli utenti interagiscono con il footer di un sito web in modo da presentare loro un piè di pagina usabile e funzionale.
I lettori attenti, che cercano informazioni riguardanti il copyright, su chi ha realizzato la grafica, il disclaimers o per i dettagli dei contatti, sicuramente pensano di trovare valide risorse nel footer. Visitatori che vogliono sapere di più sul backstage del progetto potrebbero scrollare la pagina fino in fondo per approfondire la conoscenza di autori e filosofia di pensiero dietro la pubblicazione web. C’è anche chi capita per caso sul tuo sito e l’utente distratto che scrolla e scandisce le tue pagine senza soffermarsi a leggere molto di quello che c’è scritto.

E’ chiaro a questo punto che si hanno sue macro-categorie di utenti sulla quale concentrare gli sforzi in fase di progetto per presentare loro un prodotto facilmente consultabile.

Utenti Attivi
Per diverse ragioni sono interessati a conoscere dettagli sul progetto. E’ importante riportare tutte le side-info (contatti, about us, disclaimer, licenze etc…) per i visitatori attenti e affamati di informazioni
Utenti Passivi
Scrollano e scandiscono distrattamente le pagine web. C’è bisogno di catturare la loro attenzione

Bene. Un footer sorprendente, creativo, grande e ricco di informazioni potrebbe fare al caso nostro.

Perché Dovresti Considerare un Footer Grande e Interattivo

Ci sono alcune linee guida (o consigli, se suona meglio) che un designer dovrebbe seguire nella costruzione del fondo della pagina.

Prima di tutto è buona norma mantenere una linea grafica omegenea. Certo, separare il footer dal contenuto è una regola che resta comunque valida; ma il tema generale deve essere finalizzato in modo opportuno rispettando la logica seguita nel resto del design. Un footer grande e usabile non vuol dire creare un layout completamente nuovo all’interno del sito.

E’ assolutamente necessario fornire informazioni aggiuntive sul progetto, pratici link per approfondire la conoscenza del sito web e dettagli sui contatti, in modo semplice e diretto.
Alcuni utenti sono interessati ad avere approfondimenti di varia natura e chi progetta il sito deve essere in grado di rendere fruibili e facili da trovare risorse del genere, risorse che magari i lettori abituali non trovano interessanti. Il posto migliore per mettere in evidenza queste “note secondarie”? Il footer!

Il vero lavoraccio è attirare l’attenzione del visitatore distratto, non curante dei contenuti che passano sotto i suoi occhi e che si lascia ammaliare solo da alcuni elementi del sito. Sappiamo benissimo che la prima impressione è importante e che c’è bisogno di un header perfetto e ormai moltissimi siti web hanno intestazioni da favola. E’ evidente anche che si ha la necessità di organizzare i contenuti opportunamente e farli visualizzare dal browser in modo ordinato, magari con un pizzico di creatività, e attualmente c’è l’imbarazzo della scelta in questo senso. Quindi, la domanda è: perché non utilizzare il footer per inserire il “WOW” Factor nel tuo lavoro di grafica per il web? Sii creativo, fornisci utili link e dettagli, evidenzia le sezioni migliori del tuo sito costruendo un footer brillante, grande e creativo.

Sono convinto che con questo tipo di scelta un sito possa diventare realmente usabile, diretto e comunicativo. Resta da ponderare oculatamente il tipo di contenuti da riportare in questa sezione. Qui in basso un lista con qualche utile spunto (non dimenticare, ovviamente, i classici crediti).

Mappa del sito con pagine importanti
Una veloce presentazione
Dettaglio dei contatti
Semplice contact form
Link a risorse utili
Breadcrumb
Lista con siti amici e partner
Search form
Notizie e post recenti
Ultimi commenti
Categorie e tag rilevanti
Ultimi tweet da Twitter
Link ai prifili sui Social Network
Bottone “Back to top”

Uno stile piacevole e un layout pulito sono essenziali per ogni lavoro di web design e se hai intenzione di creare un footer usabile e solido dovresti farlo utilizzando un layout intellegente a più colonne. Questa soluzione richiede una buona tipografia per evidenziare la gerarchia tra link e titoli; delle liste ordinate e ben bilanciate, magari impreziosite da icone e simboli; un uso razionale degli spazi bianchi per separare diversi blocchi ed elementi e migliorare la leggibilità. Tutti elementi che, se ben miscelati, possono far diventare quello strano inutile contenitore di crediti e informazioni secondarie una sezione del sito realmente utile ai lettori.
Benefici nel creare un footer completo e creativo?

Semplifica la navigazione e incoraggia gli utenti a visitare nuove pagine
Migliora il look and feel del tuo design
Promuove pagine importanti del tuo sito e altre cose interessanti
Evidenzia informazioni aggiuntive per conoscere meglio autori, sviluppo e propositi del progetto web
Migliora l’usabilità
Ti permette di liberare la fantasia ed essere creativo

Non dimenticare, però, di restare concentrato su quelli che sono i tuoi scopi, un footer grande potrebbe anche risultare semplicemente invadente e irritare gli utenti. Se il tipo di pubblicazione non necessita di una soluzione del genere per raggiungere quelli che sono gli obiettivi prefissati, considera anche l’ipotesi di utilizzare soluzioni classiche o meno “invasive”.

Ora una vetrina completa attraverso la quale è possibile osservare e analizzare splendidi esempi di Footer Design. Enjoy it!

Showcase di Footer Grandi, Creativi e Ricchi di Informazioni

Di seguito sono riportati davvero splendidi lavori. C’è da sottolineare che alcuni di essi, come The Pixel e Ligne13, non riportanto informazioni dettagliate, ma ho deciso comunque di segnalarli, in primis per le loro dimensioni, ma principalmente, per l’elevata creatività dimostrata da chi li ha disegnati.

Boagworld

Portfolio of Rob Palmer

Kyle Fiedler

Duirwaigh

Idea Foundry

Jason Santa Maria

MonDaily

N.Design Studio

Help-Portrait

Carsonified Events

Bogdan Teodorescu

Ligonier Ministries

Incubus

Ecoki

Yaron Schoen

David Hellmann

I primi dieci

Versions

Evolve Printing

Los colores olvidados

Your Inspiration Web

DesignWorksGarage

Ligne Treize

DrupalCon

Urban Roots

ProBlogger

Elliot Jay Stocks

Mr. Diggles

10 Words

The Pixel

Creamy CSS Showcase

Sihirli Blog

Jiri Tvrdek

YoDiv

EctoMachine

Brian Hoff

Story Pixel

PSDTuts+

The Blizzards

SocialSnack

Altri articoli interessanti:

Il Nuovo PV.M Garage è On-Line!

piervix — Tue, 29 Dec 2009 23:45:45 +0000

Sono orgoglioso e felice di presentare, finalmente, il nuovo PV.M Garage. Quello appena terminato è il primo redesign per il blog e spero possiate apprezzare il lavoro fatto.

Dietro un così profondo cambiamento ci sono sempre forti motivazioni. Anche per il PV.M Garage, non è stato il semplice bisogno di un nuovo registro estetico a sostenere questa notevole mutazione, ma principalmente la necessità di dare la giusta forza espressiva al progetto.
Ci sono tre fondamentali ragioni che mi hanno spinto a cercare questo “rinnovamento”: la voglia di esaltare il senso di community, la necessità di mettere in evidenza i contenuti e la ricerca di una grafica più pulita e un layout più “leggibile”.

L’obiettivo principale, nel progettare il nuovo layout, è stato quello di rendere i contenuti facilmente fruibili e la navigazione immediata e diretta. Per cui ho lavorato molto sul look and feel, mantenendo inalterate alcune peculiarità del Garage e cercando di semplificare la lettura agli utenti.
Bene, a questo punto non resta che scoprire cosa c’è di nuovo.

Nuovo Logo

In realtà parlare di nuovo logo mi sembra quasi assurdo, considerando che in pratica non esiste un vecchio logo. Certo, da quando il sito è on-line abbiamo imparato a conoscere la simpatica faccina “occhialuta”; ma si può affermare che non è mai esistito, prima d’ora, un vero e proprio logo. Così il nuovo “marchio” del PV.M Garage nasce da una combinazione tra l’ormai nota faccina e una più accurata tipografia per il testo.

Dopo aver finalizzato il concept del nuovo logo l’ho riadattato al design del sito utilizzando una texture per lo sfondo e qualche effetto “grunge”.

Header e Menù

Adoro le intestazioni larghe e spaziose, inoltre sono fortemente convinto che ogni header che si rispetti dovrebbe contenere utili link e menù in grado di rendere veloce e puntuale la navigazione. Per questa ragione nella parte alta del nuovo design ho inserito il form per la ricerca, un menù veloce, per far conoscere meglio agli interessati la filosofia dietro il garage, il menù di navigazione e i link a Twitter e ai Feed RSS.

Form Cerca

Menù

Menù di Navigazione

Twitter e Feed RSS

Main Container and Sidebar

Questa sezione del sito è rimasta pressochè invariata, ho utilizzato uno schema basilare a due colonne con il main container per i post e la sidebar. L’unica vera novità è il posizionamento dei metadata degli articoli.

La sidebar contiene gli sponsor, la sezione community news, l’archivio e qualche utile link. Classica e semplice.

Footer

Il footer è stato completamente aggiornato. Si, è enorme… e forse questa è una vera e propria sfida, ma sono convinto che questa scelta possa funzionare.

Negli ultimi tempi il mega-footer è una tendenza mediamente diffusa, ma la reazione degli utenti ad una presa di posizione del genere è assolutamente imprevedibile. Il mio obiettivo è quello di presentare uteriori contenuti in un layout semplice e pulito… la mia speranza è che vi piaccia.

Questo è tutto amici. Vi consiglio di sfogliare l’articolo nella sezione in lingua inglese del sito. Perché? Beh, lasciando un commento avrete la possibilità di vincere una delle 3 copie del libro di Smashing Magazine in palio. Per saperne di più leggete The New PV.M Garage, A Fresh Change (With Special Giveaway).

Altri articoli interessanti:

Novembre 2009, 50 Segnalibri per Raccogliere il Meglio del Web

piervix — Sun, 06 Dec 2009 22:28:53 +0000

Il consueto appuntamento con il meglio del mese raccontato attraverso 50 e più segnalibri appositamente selezionati per voi.

L’obiettivo di questa rubrica è, come noto, quello di collezionare le migliori risorse offerte dal “World Wide Web”. La speranza è di fornire buoni spunti a voi lettori.
Novembre è stato un mese davvero interessante e gli articoli prodotti dalla community sono tanti e di qualità. A questo punto non resta che augurarvi una buona lettura!