INSERIRE PIÙ DI UNA GOOGLE MAP IN UNA PAGINA WEB - TUTORIAL

Recentemente ho dovuto inserire 3 mappe di Google nella stessa pagina (questo il risultato).
È davvero semplice, però bisogna conoscere il funzionamento di HTML, CSS e jQuery.

 Anche per chi non avesse familiarità con questi linguaggi, ecco una guida per trovare la giusta strada.

MOCK-UP DI OGNI TIPO - RISORSA DEFINITIVA

Ho trovato un sito che raccoglie centinaia di mock-up, totalmente free.

Molti di questi mock-up sono azioni in Photoshop, io sinceramente non riesco ad usarli, ma molto altri, la maggior parte, sono i classici psd editabili con gli oggetti avanzati.

960PX GRID SYSTEM

Prima di creare un sito web bisogna creare la bozza grafica, ovvero come appare graficamente il sito, in Photoshop o ancora meglio in Fireworks.

È una fase fondamentale nella creazione dei siti web, perchè bisogna pensare a molti fattori, facendo coincidere la parte di comunicazione con quella dei contenuti, progettare un sito funzionale ma anche attraente, semplice da consultare e completo.

DRIBBBLE INVITE GIVEAWAY - CONTEST

Desideri diventare Player di Dribbble, per poter pubblicare gli shots dei tuoi progetti? , web e ui designer,  +Elena Meneghini ha un invito proprio per te!

RIDIMENSIONARE PIÙ IMMAGINI CON UN SOLO CLICK - TUTORIAL

Se hai mille immagini da ridimensionare tutte alla stessa dimensione come fai?

In Photoshop oltre ai batch, utili per automatizzare un'azione precedentemente registrata, esiste l'ancora più semplice funzione script.

GOOGLE WEB DESIGNER TOOL

Google ha da poco pubblicato un nuovo strumento per i web designer.

Google Web Designer è un'applicazione per Mac e Windows che ci permette di creare siti WYSIWYG (What You See Is What You Get), attraverso Drag & Drop di immagini e testi, con la possibilità di mettere mano anche sul codice.

MOCKUPHONE - DISPOSITIVI PER TUTTI I GUSTI

Mock-up di tutti i dispositivi, non solo Apple, ma anche Android e addirittura Windows Phone.

Ecco MOCKUPHONE, che mette a disposizione moltissimi mock-up scaricabili gratuitamente, ogni dispositivo è disponibile preso da diverse angolazioni.

IPHONE 5 MOCK-UP

Ecco quattro nuovissimi mock-up davvero realistici per la presentazione dei nostri progetti grafici sui dispositivi mobili.

Regy Perlera rende disponibili gratuitamente questi fantastici mock-up di iPhone 5.

TANTI AUGURI GOOGLE

Oggi Google compie 15 anni, e oltre al doodle interattivo nella pagina principale del motore di ricerca, Google pubblica anche un'infografica con tutti i passi che da 15 anni a questa parte ha compiuto, semplificandoci in qualche modo (o in molti modi) la vita nel web.

ICONMONSTR - ICONE PER OGNI ESIGENZA

Una pratica risorsa per trovare icone in bianco e nero davvero per tutte le soluzioni.

IconMonstr ci dà la possibilità di cercare icone in formato png e vettoriale attraverso parole chiave, proprio come facciamo su TheNounProject, ma su IconMonstr tutte le icone si possono usare anche per i nostri progetti grafici commerciali. Inoltre i pittogrammi sono raggruppati anche tematicamente in raccolte, il che ci rende la ricerca ancora più semplice. Ecco il link alla pagina:

PICONS - LA RISORSA DEFINITIVA PER LE ICONE SOCIAL

Picons è la risorsa definitiva per le icone dei social network.

Dopo lunghe ricerche avevo già trovato vari pacchetti di icone che potevano essere utilizzate nei nostri progetti grafici, erano abbastanza personalizzabili, ma fino ad un certo punto (qui l'articolo).

BLEND ME IN - UN'ESTENSIONE PER GESTIRE I KIT DI ICONE

Blend Me In è una nuova estensione per Photoshop CS6 e Photoshop CC che ci permetterà di utilizzare centinaia di icone direttamente dall'applicazione, semplicemente usando il drag-and-drop.

Puoi cercare facilmente tra centinaia di icone direttamente all'interno di Photoshop, senza cambiare finestra, tutte Creative Commons Attribution 3.0 Unported License.

QUANTO CONVIENE? - INFOGRAFICA

Un'interessante infografica che analizza il prezzo effettivo dei muffin fatti in casa (sempre pensato che costasse di più farseli), con una grafica davvero curata e minimal.

Complimenti a Cristina Pasquale!

10 FANTASTICHE UI SU IPHONE | PART #2

Ecco il secondo appuntamento riguardante le interfacce alternative di iOS, il sistema operativo Apple.

Finalmente da oggi è possibile scaricare iOS 7, che per la prima volta, riporta una grafica completamente rinnovata rispetto alle precedenti versioni del sistema operativo. Tuttavia iOS mantiene la sua storica rigidità, utile a livello base per la stabilità del sistema operativo, ma limitante a livelli più avanzati.

SFONDI PATTERN MINIMAL PER IL WEB

Anche se la grafica oggi è molto minimal, soprattutto nei siti web un lievissimo pattern di sfondo dà sempre quel tocco in più.

Subtle Patterns è un sito da cui è possibile scaricare gratuitamente tantissimi pattern davvero minimal e raffinati.

BEAR BEER - INSPIRATION OF THE WEEK

Un branding molto particolare a cura di Aaron Martinez, adatto ad un pack di birra dalla grafica inconsueta.

Il progetto Bear Beer, gioca sulla doppia immagine, coi colori classici degli occhialini 3D, colori fluo, accesi, su sfondo bianco, minimal, luminoso.

IPHONE 5S MOCK-UP

In seguito all'uscita del nuovo iPhone 5S, qui di seguito il mock-up vettoriale, e quindi completamente scalabile, di iPhone 5S nelle sue tre colorazioni (compreso l'esclusivo color oro).

LONG SHADOW DESIGN

Sta diventando famoso nel web un nuovo trend: il Long Shadow Design. Si tratta di un'evoluzione del flat design, di cui avevo già parlato qui, al quale aggiunge un'ombra di 45° molto definita e apparentemente infinita.

Sebbene implichi una tridimensionalità, paradossale per il flat design, il risultato è una grafica fresca e allo stesso tempo incisiva, che mette in risalto gli elementi.

WIREFRAME PER IPHONE

Una raccolta di elementi in Photoshop, per rendere il wireframing delle app per iPhone un po' più semplice.

840 x 8600px di elementi scalabili, pronti per il display Retina di iPhone, presentati in due stili, chiaro e scuro, ognuno con oltre 60 degli elementi più comuni per l'UI Apple.

STICKDOWN - INSPIRATION OF THE WEEK

Un ottimo esempio di graphic design minimal utilizzando solo illustrazioni geometriche in outlines.

Lo stile è semplice e ricercato, capace di trasmettere pulizia e respiro anche nella moltitudine apparentemente casuale degli elementi.

YAHOO! PRESENTA IL SUO NUOVO LOGO

Yahoo ha un nuovo logo.

We’re excited to share the new Yahoo logo with you. It will begin appearing across Yahoo properties globally tonight.

SET DI ICONE PER IL WEB DESIGN

Oggi voglio proporti questi pack di icone (ma forse è più corretto chiamarli ideogrammi), utili per i progetti grafici nel web. Sono estremamente moderni (alcuni infatti si ispirano al nuovissimo iOS 7 di Apple).

Sono tutti gratuiti e ben fatti, minimal e puliti, si adattano ad ogni tipo di grafica, io ti consiglio di usarli come base di ispirazione per crearne di nuove adatte al tuo progetto grafico.

FLAT DESIGN UI KIT GRATUITI DA SCARICARE

Il flat design è sicuramente la tendenza del momento, e soprattutto nel web i progetti più accattivanti sono flat.

Dai menu ai pulsanti, ai form di contatto, ecco qualche kit ben fatto scaricabile gratuitamente di UI in flat design.

FLAT MOCK-UP PER LA PRESENTAZIONE DEI NOSTRI PROGETTI GRAFICI

Per quanto valido possa essere il progetto grafico, sicuramente anche la presentazione ha il suo peso. Le presentazioni più apprezzate sono sicuramente quelle in cui il prodotto indossa già virtualmente, attraverso mock-up, la nuova veste grafica, il progetto grafico che stiamo vendendo.

Anche per le declinazioni web, come l'applicazione o il sito web, applicare il progetto al browser o al dispositivo mobile di riferimento, dà quel tocco in più.

LE ESTENSIONI DI CHROME PER I WEB DESIGNER

Nel lavoro quotidiano del web designer, c'è sempre bisogno di consultare i colori, i font, e verificare la compatibilità del progetto web sulle varie piattaforme. Questi add-on per google chrome sicuramente ci faranno risparmiare tempo.

Ecco quindi 10 utilissime estensioni per google chrome che ogni web designer dovrebbe avere.

RGB VS. CMYK VS. PANTONE, FACCIAMO CHIAREZZA

RGB, CMYK o Pantone? Facciamo un po' di chiarezza!
Quando si inizia un progetto grafico bisogna sempre aver chiare le piattaforme di applicazione, esse possono principalmente essere WEB o STAMPA.

È fondamentale saperlo per scegliere il metodo colore da utilizzare nell'elaborazione del progetto grafico. I metodi utilizzati sono RGB e CMYK.

STORIA DELLA TIPOGRAFIA - INFOGRAFICA

Sapevi che i norvegesi sono gli ideatori delle più economiche famiglie di font e in Israele invece sono stati creati i più costosi?

Un'interessante infografica ci svela tante curiosità, dati e storia a proposito della tipografia.

LOGHI DOUBLE CONCEPT - INSPIRATION OF THE WEEK

Un logo è ormai necessario ad ogni azienda, e probabilmente anche voi stessi avrete il bisogno di averne uno personale quando venderete la vostra professionalità. Il logo deve trasmettere un messaggio, delle caratteristiche, in modo chiaro e immediato e deve essere fortemente riconoscibile e memorizzabile.

La difficoltà quindi sta proprio nel creare qualcosa di unico e semplice. I loghi che vi mostrerò in questo post trasmettono delle idee forti e chiare, attraverso associazioni di parole che danno vita ad un concetto nuovo.

FONT CREATIVI DA SCARICARE

Negli ultimi tempi c'è la tendenza nel graphic design di utilizzare font molto creativi per per immagini e titoli.

Ecco una raccolta di font creativi di ispirazione e da scaricare gratuitamente.

LE DIMENSIONI DELLE COPERTINE DEI SOCIAL NETWORK - INFOGRAFICA

Una semplice infografica che indica le dimensioni delle copertine dei vari social network.

Il mio consiglio è di utilizzare le proporzioni indicate ma di usare comunque una risoluzione maggiore perchè utilizzando quelle descritte può succedere che l'immagine dopo il caricamento perda qualità e risulti sgranata.

10 ESEMPI DI ADVERTISING CREATIVI

Nel mondo del graphic design bisogna catturare l'attenzione, rimanere impressi, essere riconoscibili ma sempre nuovi.

Di seguito ho voluto raccogliere 10 esempi di advertising davvero creativi che svolgono bene la loro funzione.

IOS 7 REDESIGN - INSPIRATION OF THE WEEK

Fantastico concept del sistema operativo Apple, totalmente ridisegnato in ogni sua funzione, un ottimo esempio di flat design.

COME FABBRICARE IDEE

Nella creazione di un concept, dell'idea iniziale, che sia un progetto di advertising o la grafica per un brand, qualche utile consiglio per non perdersi in un bicchier d'acqua.

Una guida passo passo per trovare la soluzione migliore alle esigenze del progetto.

SCORCIATOIE DA TASTIERA PER GRAPHIC DESIGNER - GRAPHIC TIPS

Impariamo i comandi rapidi del Macintosh e in particolare della applicazioni Adobe Photoshop, Adobe Indesign e Adobe Illustrator, per essere più rapidi durante lo svolgimento dei nostri progetti, ricordiamoci che i software sono l'estensione delle nostre mani!

I 5 SITI PER DARE VISIBILITÀ AI TUOI LAVORI

Avete finito un progetto grafico e volete condividerlo col web? Ecco i migliori siti per dare visibilità e ricevere feedback sul vostro lavoro.

Vi sarà capitato, una volta terminato, di voler mostrare il vostro progetto grafico sul web, per capire un po' cosa ne pensa la gente, e così l'avete postato su facebook e ai vostri amici magari è piaciuto. Esistono però altri social network dedicati al graphic design in cui chiunque può vedere i progetti che vogliamo condividere, e soprattutto, altri graphic designer, che con la loro esperienza, possono consigliarci su come migliorarlo o dimostrare la loro approvazione.

5 UTILI PLUGIN PER PHOTOSHOP

Cinque plugin per superare i limiti di Photoshop nella creazione di layout web.

Sebbene Adobe abbia creato Fireworks per lo sviluppo della grafica dei siti web, per molti aspetti è molto limitativo, tanto che Photoshop riesce a colmare perfettamente queste lacune e diventa lo strumento ideale per i progetti web.

PIXEL VS. EM

Se fino ad ora abbiamo considerato i pixel l'unità di misura nel web, dobbiamo ricrederci, o meglio, evolverci. Ormai creare siti web responsive che adattino il loro layout al dispositivo in cui si visualizza, non è più un optional: che sia un monitor da 15 pollici o un tablet, il sito web deve essere facilmente consultabile.

Ogni titolo, ogni immagine, ogni riquadro, ha delle dimensioni ben precise, misurate in pixel, ma se il sito viene visitato in diversi monitor, anche queste dimensioni devono cambiare, adattandosi. Per questo motivo è stato inventato l'em, una nuova unità di misura flessibile, basata su proporzioni e non su pixel, così da scalare ogni elemento in modo proporzionale.

FLAT DESIGN VS. IOS 7 ICONS

Tra poco più di un mese uscirà la versione definitiva di iOS 7, l'ultima release del sistema operativo per iPhone, già presentato a giugno in versione Beta al WWDC'13 di Apple.

Questa release oltre a presentare come ogni anno qualche nuova feature, ha una grafica totalmente rinnovata, al passo coi tempi.

10 FANTASTICHE UI SU IPHONE

In questo post voglio linkarvi 10 fantastiche interfacce di iOS, il noto sistema operativo degli iPhone.

iOS, come è noto, è un sistema operativo davvero molto chiuso, è impossibile, cioè, personalizzarlo a seconda dei gusti personali.

UTILIZZARE L'OMBRA REALE DI UN'IMMAGINE SCONTORNATA - TUTORIAL

Negli ultimi anni la tendenza nel graphic design è di utilizzare visual molto minimal, lasciando ampi spazi vuoti che diano respiro al soggetto centrale, che può essere il prodotto in questione oppure qualcosa di totalmente differente che si allacci bene e dia un senso all'headline.

Per poter utilizzare l'ombra portata del prodotto anzichè diventar matti a scontornarla perfettamente, mi hanno insegnato un trucchetto che fa risparmiare un sacco di tempo e il cui risultato è davvero ottimale.

COME CREARE UNA BRAND IDENTITY - INSPIRATION OF THE WEEK

I progetti che trattano di branding toccano tutti i campi del mondo del graphic design: partendo da ciò che il cliente vorrebbe, attravero le sue parole, bisogna sintetizzare l'idea e il messaggio che il prodotto vuole trasmettere e riportarlo in tutte le applicazioni: dal logo al sito web, passando per l'advertising.

Il progetto che ho selezionato da Behance (social network di graphic design) e che voglio mostrarvi, rappresenta tutte queste caratteristiche, in modo fresco e giocoso.

I 5 MIGLIORI SOCIAL ICON SET

Ormai in ogni progetto web, bisogna inserire le icone dei social network, per avere un call-to-action e rimanere in contatto col visitatore.

Anche le icone dei social network, ovviamente, devono riprendere lo stile del sito web in cui sono inserite, e devono tuttavia mantenere l'identità del social network a cui fanno riferimento, in modo che siano subito identificabili.

I 5 MIGLIORI FONT DI GOOGLE PER IL WEB

Ecco la mia personale lista di quelli che ritengo i 5 migliori font di google.

A differenza dei caratteri che abbiamo nei nostri computer, i font di google sono particolarmente pratici quando devono essere utilizzati nel web, poichè sono caricati tutti sul server di google, e grazie al codice HTML che ci viene fornito una volta scelto il font, può essere visualizzato da qualsiasi browser quando viene caricato il sito.

Tuttavia possono anche essere scaricati, per eventuali layout grafici e addirittura possono essere utilizzati per i nostri progetti personali.