Web design…è Design!

Corsi di formazione, Creatività, Web Design 4 Comments »

Torno a parlare ancora una volta di comunicazione visiva e di design, quello con la “D” maiuscola inteso come progettazione al fine di rendere la nostra vita più comoda e piacevole. Qualcuno forse si chiederà che cosa c’entri tutto questo con il web design rimanendo un pò perplesso.

Il web design oggi più che mai deve essere inteso come progettazione vera e propria dedicando molta attenzione all’aspetto “utile” del mezzo. Un sito web deve essere fruibile, gli utenti devono trovare ciò che cercano, non devono perdere secondi a capire e decifrare l’interfaccia grafica per quanto bella essa possa essere…

Grande attenzione all’aspetto SEO (Search Engine Optimization) quindi e all’usabilità di ciò che realizzate. Vi esorto a prendere un foglio di carta e una matita e disegnare prima la vostra idea, capire gli spazi, organizzare i contenuti e solo dopo realizzare in digitale ciò che avete in mente.

progettazioneweb.jpg
Dal bozzetto…

stazione-birra.jpg
…al digitale, completamente realizzato da zero in Photoshop.

Per chi volesse apprendere le mie tecniche si può rivolgere alla AbcFormazione  e per chi cercasse una società che realizzi siti web di qualità, in maniera seria e professionale può rivolgersi qui.

Rekuest Lab

Creatività, Web Design No Comments »

rekuestlab.jpg

Ieri ho realizzato questa grafica per la pagina di welcome della nostra divisione di sviluppo massiccio.
In seguito ho montato il tutto con Flash, inserendo l’audio e vari effetti speciali.

La pagina finale è visibile sul sito del laboratorio.

Flash - Il simbolo grafico è morto

Tutorials, Web Design No Comments »

Come molti di voi sapranno all’interno di Aobe Flash Cs3 abbiamo la distinzione gerarchica di vari tipi di oggetti. A cominciare dalle forme (shape), passando per i simboli grafici, pulsanti e quindi le clip filmato (movie clip o mc).

Senza entrare nei dettagli e nelle differenze di utilizzo di questi oggetti  molti manuali di Flash indicano quando utilizzare i simboli grafici e quando le clip filmato. 

Bene, secondo la mia persona visione potete anche dimenticarvi dell’esistenza dei simboli grafici, anzi, spesso sono solo di intralcio e complicano l’apprendimento di Flash e la strutturazione di un progetto. Qualcuno potrebbe dirmi che è un pò azzardata come affermazione ma io ripeto che tutto ciò che vi basta sono le forme, i pulsanti e le clip filmato.

Perchè?

Semplice! Essendo questi oggetti suddivisi in scala gerchica ne deriva che il simbolo grafico è una sorta di contenitore con determinate proprietà ma è subordinato alla clip filmato il che vuol dire che la stessa clip filmato ha le stesse proprietà del simbolo grafico più altre (filtri, motodi di fusione, ecc).

Se quindi le movie clip sono contenitori migliori rispetto ai simboli grafici e ne hanno tutte le proprietà perchè continuare a distinguere tral’uso dei simboli grafici  e clip filmato? E’ come dire che per andare al mare ci andate con la Panda e per andare in montagna ci andate con il Bmw. Prendete direttamente il Bmw e fate prima! Il Bmw è un mezzo di trasporto così come lo è la Panda, ha 4 ruote, le porte, il volante, il bagagliaio, il motore…ma è molto più comodo, più versatile, più spazioso, più bello e più versatile e arrivi prima!

Mi sento quindi di affermare che da oggi potete anche dimenticarvi dei simboli grafici e quando dovrete convertire qualcosa in un simbolo, usate direttamente il movie clip senza esitazione (a meno che non stiate facendo un’area cliccabile e  questo vale solo per chi usa l’As 2.0, nel 3.0 le cose sono ben diverse).

Come realizzare la grafica di un sito web

Corsi di formazione, Grafica, Tutorials, Web Design No Comments »

La scuola di formazione Abc Formazione mi ha chiesto se poteva assistere ad una delle mie lavorazioni di progettazione grafica di un sito web registrando a video alcune fasi di lavorazione in diretta; ecco quindi la prima parte del video nel quale sto realizzando il header di un sito web orientato al turismo.

martinbenes-web.jpg

Il video è disponibile sul blog della scuola 

Come potete notare realizzare la grafica di un sito web non vuol dire solo mettere insieme due immagini ma alcune volte parliamo di vera e propria manipolazione dell’mmagine e pittura digitale!

Apre il blog della formazione di qualità

Corsi di formazione, Grafica, News, Tutorials, Utility, Web Design No Comments »

dopo.jpg

Apre ufficiamente anche al pubblico il blog di una delle migliori scuole di formazione nel settore grafico e multimediale a Roma.
Giornalmente vengono pubblicati esempi dei avori realizzati dagli allievi, consigli dei trainer, news e molto altro ancora.

Per chi volesse affacciarsi alla filosofia di questa scuola può intanto vedere il loro blog.

Adobe lancia Astro!

News, Web Design No Comments »

astro-adobe.jpg

Il 15 maggio 2008 Adobe lancia finalmente il nuovo Flash player Astro!
A prima occhiata è davvero spettacolare e la cosa che colpisce sicuramente di più è  la piena integrazione del 3D tanto è vero che qualcuno si è cimentato nella ricostruzione di ambienti simil Quake navigabili direttamente da Flash.

Atro è il nuovo lettore Flash e corrisponde alla versione 10.

Ci attendono tante novità ed implementazioni a patto che sappiate sviluppare in AS 3.0!

Adobe Cards

Advertising, Creatività, Grafica, Web Design No Comments »

 creativecards.jpg

Adobe lancia un mini sito web promozionale per lanciare il suo messaggio creativo. L’idea è davvero formidabile!

Il tradizionale al servizio del digitale

Creatività, Grafica, Tutorials, Web Design No Comments »

I mezzi digitali sono straordinari e non potrei immaginare la mia vita senza. Amo il digitale.
E’ importante però non dimenticare le nostre origini e capire che una buona progettazione visiva avviene in una fase antecedente a quella dell’accensione della scatola magica.

Sopratutto nei progetti multimediali, dove oggi come oggi c’è molta improvvisazione, è fondamentale progettare correttamente il layout grafico in vista della sua vera funzione.
In particolare sul web bisogna fare le cose funzionali ed utili, oltre che piacevoli da vedere!

Una volta che aprite Photoshop e lo sapete usare, qualsiasi cosa che farete sarà bella ma la domanda da porsi è:”Funziona? E’ quello che avevo in mente? E’ facile da navigare? Gli utenti faranno click dove dovrebbero? La Call to Action è chiara?ecc..ecc.”

Per questo che esorto chi alvora con me a usare la vecchia cara matita e il bel foglio bianco, se riciclato, meglio. :-)
Vi posto qualche mia bozza di studio del layout per capire la migliore disposizione di alcuni elementi di navigazione.

layout1.jpg

layout2.jpg

layout3.jpg

Solo quando abbiamo fatto funzionare tutto su carta, si può procedere alla realizzazione finale in Photoshop per fissare la grafica finale.

I fessi nei cessi

Tutorials, Web Design 3 Comments »

300.jpg

Questo è il seguito della regola dei prosciutti nel quale analizzerò in breve quella che è la situazione dei novelli web designers ed in genere di chi è alle prime armi con molte aspettative.

Miei prodi, armatevi di pazienza, coraggio e perseveranza: si va in battaglia!

Il web designer medio ha la sensazione di essere in qualche modo sfruttato dal datore di lavoro e questo dato viene confermato dai infiniti annunci di lavoro che spesso sfiorano il surreale e la comicità fantozziana.
Gli annunci di lavoro nel settore del web design, nella maggior parte dei casi sembrano essere fatti per geni dell’informatica e creativi strabilianti.

Non mi stupirò se tra poco nelle offerte di lavoro nel settore del web design verrà scritto: “sono richieste le conoscenze di…TUTTO.”

Questo tutto equivale ad essere dei grafici creativi e illustratori, allo stesso tempo dei sviluppatori e programmatori provetti, se animatori 3D è meglio e se proprio vogliamo fare bella figura anche il montaggio del video non guasterebbe.

Riassumento ecco le doti necessarie per avere un posto di lavoro nel web design:

  • Photoshop, Illustrator
  • Flash Cs3
  • Html e Css
  • Php/Asp, MySql
  • Esperto in Joomla e WordPress
  • 3D Studio Max o Maya
  • After Effects e Premiere
  • Disegno a mano è gradito

Sapete quale è la cosa più spaventosa? Che il datore di lavoro tipo non si degna nemmeno di specificare quale sarebbe lo stipendio per avere tutto questo e state tranquilli, sicuramente non si intende sborsare più di 1000 euro al mese.

Il problema vero però, miei prodi, è quello che il datore di lavoro ignorante o chiamatelo furbo, sa bene che qualcuno nella massa alla fine si trova. Si punta in alto per avere il meglio del sottopagato.

Bisogna ristabilire una certa situazione di normalità in quanto non è possibile che qualcuno pensi di poter avere tutte queste competenze in una sola persona per uno stipendio che sfiora la miseria.

Le competenze vanno pagate e gli va dato il giusto valore!

Esorto i novelli alla ricerca di lavoro di prendere coscienza della propria profesionalità e di non svederla. Cominciate a pretendere il giusto per quello che valete. Il problema va cercato alla base e come si suol dire: il male è in mezzo a noi, si, perchè sono i web designer per primi ad accettare questo tipo di situazione e quanti sono quelli che ad un colloquio hanno quasi quasi il timore di chiedere quale sarà la retribuzione?

Sembra quasi che sia un sacrilegio pronunciare le parole:”quanto è la retribuzione?”

Se dovessi fare due conti così su due piedi mi verrebbe da dire che per imparare tutte quelle cose (BENE) che ho elencato sopra servono almeno 5-6 anni. Vale a dire che se uno arriva a 28 anni e sa fare tutto quello è una bella bestia e farebbe gola a qualsiasi azienda operante nel settore IT.

Quale è il prezzo onesto per tenere una professionalità del genere in azienda?

La prossima volta che andate ad un colloquio di lavoro, siate seri e fate anche voi le giuste domande, abbiate la consapevolezza di quello che valete e cosa potete REALMENTE offrire all’azienda che vi sta offrendo un lavoro.

Un ultima osservazione per i novelli: non esagerate, siate modesti, cercate di individuare quali sono i vostri limiti. Quanti anni di esperienza avete per avanzare determinate pretese?  Bisogna stare con i piedi per terra e fare i seri, all’inizio tutti si sentono dei geni della creatività che tutti stanno aspettando, bene, non è così.

E’ fondamentale fare esperienza e grazie a quella prendere coscienza del proprio valore e quindi di quello che può essere il vostro reale apporto in o per un’azienda. In base a questo potete pretendere, la giusta retribuzione. 

E ora, affilate le armi!

Quality over quantity

Grafica, Tutorials, Web Design No Comments »

Il mio motto preferito è Less is More ma devo dire che non mi dispiace nemmeno quello che cita:”Quality Over Quantity” il che significa che la qualità viene prima di tutto.

Facile a dirsi ma un pò più complesso da trasmettere. Durante i corsi che tengo cerco sempre di far capire che una delle cose più importanti, oltre alle tempistiche è la qualità e la cura del dettaglio, elemento che farà la differenza una volta usciti dall’ambiente “protetto” del corso.

E’ importante insistere sulla qualità visuale di quello che realizziamo perchè quando stampiamo un poster piuttosto che lanciamo on-line un sito web stiamo comunicando qualcosa, e di fatto facciamo comunicazione visiva.
Soffermiamoci qualche minuto in più sulla precisione dello scontorno, sulla correzione dei colori, sui dettagli e vi assicuro che i progetti che realizzarete ne gioveranno tantissimo!

Usiamo e divertiamoci quindi con gli strumenti che ad esempio Adobe Photoshop Cs3 ci offre per ritoccare, creare rilfessi, correggere e adattare al meglio di quello che è la nostra idea creativa perchè si sa…con Photoshop non ci sono limiti.

Di seguito pubblico alcuni dei lavori di esempio che hanno ralizzato alcuni dei miei corsisti:

nokiaweb.jpg

Fase1. Progetto grafico con Photoshop 

motorolaweb.jpg

Fase2. Assemblaggio in Flash Cs3

motoweb.jpg

Fase3. Verifica e messa on-line 

Consiglio sempre di progettare prima il lavoro che dovete fare su carta e solo una volta trovata l’idea e l’impostazione generale aprire Adobe Photoshop e realizzare la grafica finale.

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Login