Blog › Web e Grafica
Tradotto liberamente da questo
post su creativebits:
10 comandamenti del web design
- Non abuserai di flash
- Non occulterai il Contenuto
- Non confonderai il tuo prossimo
- Non cederai alla tentazione di
abusare di riflessi e luccichii
- Rifuggi gli appellativi superflui
e preserva le vocali nel nome della tua azienda web 2.0
- Pregherai dinnanzi all'altare
della tipografia
- Ti adoprerai per creare Atmosfere
coinvolgenti
- Va e crea la tua Community
- Confiderai solo in ciò che
è assodato
- Non avrai altro dio all'infuori
del Contenuto
Quello della retribuzione di un lavoro è sempre un argomento attuale che, nelle mail che ricevo e nei forum che frequento, è sempre presente.
Oltre al vecchio post per
farsi un'idea del prezzo di un lavoro, vorrei che prima di accettare offerte ridicole che offendono la vostra professionalità e a volte quelle dell'intera categoria, leggeste l'interessantissimo articolo di Sauro Pasquini:
Lavori mal pagati... se non gratis
E' già la seconda volta che mi capita! La prima pensavo fosse un errore, una trasposizione di grafica cartacea ma a questo punto cominciano a venirmi dei dubbi.
I fatti.
Collaborando con Manuele di Atipica.it mi capita di dover splittare e ottimizzare layout creati da altri, infatti a volte ci commissionano siti la cui parte grafica è già stata creata.
La prima volta mi arriva una jpg (!) a 300dpi del layout, perplessa chiedo per che dimensione di monitor debba essere ottimizzato, dato che, per come è fatto, è evidente che non può essere fluido. Mi dicono fate voi (fate voi?) ... cominciamo bene...
Cerco di fare del mio meglio per sistemare tutto in modo da minimizzare i problemi dovuti all'antialias in ridimensionamento, cercando anche di far combaciare il risultato con una grandezza di font adeguata e leggibile (date le proporzioni sballate che ne uscivano dal ridimensionamento).
Insomma, sebbene perdendo un enormità di tempo in più del previsto, me la cavo, non senza però chiedere spiegazioni.
Cercando di indagare sul perchè di questa scelta mi viene detto che così facendo il layout si poteva vedere bene stampato su carta per presentarlo al cliente... mah.... mi chiedo perchè mai un layout di sito non si possa presentare su un monitor che tra l'altro rende sicuramente di più l'idea del risultato finito, io l'ho sempre fatto con ottimi risultati!
Mi convinco che questo grafico è strano e mi auguro sia un caso isolato.
Invece mi sbaglio, perchè questa settimana mi si presenta un altro grafico con un layout in psd enorme e a 300 dpi, io allucinata sempre più domando per che risoluzione va ottimizzato e mi risponde che la dimensione giusta è quella che si ottiene ridimensionando a 72 dpi il layout che mi ha dato. Ma per din dirin diana... allora lo sai che il web supporta 72 dpi e non 300, allora perchè mi molli sto mastodonte per cui io devo impazzire a sistemare gli errori di ridimensionamento (leggi righine che diventano invisibili, bullet che si pasticciano, loghetti che non si leggono, font che diventano di 6 o 7 punti e quindi illeggibili ecc...)? Perchè? Perchè?
Data la strana coincidenza ho provato, cercato, imprecato ma nulla... non mi è venuta in mente una singola buona ragione per cui un layout fatto apposta per il web debba venir studiato a 300dpi.
Avete delle idee? Perchè io davvero non me lo spiego.
Stavo gironzolando per il web e sfogliando la sezione Photographic Backgrounds del sito
Design Meltdown ho cominciato a studiarmi le possibili soluzioni adottate per ovviare ai problemi di ridimensionamento di questo tipo layout.
Invece di farmi un mio appunto sulla scrivania e inserire qualche link nei segnalibri di firefox, ho pensato di scrivere le mie elucubrazioni qui, in modo da condividerle con voi.
Le soluzioni più utilizzate sono le seguenti:
Flash
La soluzione di gran lunga più utilizzata e forse la più efficace, ma quella che io amo meno è quella di costruire questi tipi di siti in flash, ma il mio interesse era sicuramente rivolto maggiormente ai siti che non utilizzano questo metodo.
Speriamo in bene
La soluzione "speriamo in bene" consiste nel creare un'immagine di background abbastanza grande sperando che nessuno abbia un monitor grande a sufficienza da vederne la fine.
Soluzione a mio avviso non molto adatta, visto il dilagare di monitor grandi e di dual e triple head.
Background ripetuti
Un'idea sempre efficace se la foto si presta ad un buon lavoro di "giunzione" è quella di preparare uno sfondo adatto ad essere ripetuto in orizzontale (per lo scorrimento verticale è spesso sufficiente bloccare il background rispetto allo scorrimento del testo come accade su
teamaginc.com).
Un lavoro spettacolare per quanto riguarda questo metodo potete ammirarlo sul sito
ubersuper.com.
Ridimensionamento dinamico
Soluzione interessante ma non applicabile a tutte le immagini è quella di mettere una div larga sempre il 100% sullo sfondo. L'immagine però deve reggere alla deformazione e alla sgranatura dovuta al ridimensionamento senza però pesare troppi Kbyte.
Sfumare verso un colore pieno
Un'altra soluzione molto adottata è quella di far sfumare un'immagine verso un colore pieno. L'immagine resta quindi tale quale a se stessa e l'eventuale ridimensionamento della finestra è colmato dal colore.
Concludendo:
Ho visto bei siti ma nessuna idea che davvero mi abbia illuminata, in ogni caso questo mi sembra un buon vademecum delle possibili soluzioni da adottare.
Se ne avete altre sarò ben lieta di accoglierle.
Ormai in rete si trovano generatori di qualunque cosa, alcuni pessimi altri effettivamente utili.
In questa carrellata ho selezionato quelli che mi sembrano più interessanti, innovativi o divertenti. Il tono è volutamente ironico perchè, ovviamente, trovo davvero poco creativo utilizzare questi automatismi senza aggiungere la propria fantasia.
Il mio consiglio è di
usarli con parsimonia senza dimenticarsi mai di aggiungere qualcosa di personale; nella massa dei siti presenti su internet l'importante è differenziarsi non omologarsi.
Partiamo dal nome.
Non sapete che nome dare al vostra azienda o al vostro progetto web 2.0? Nessun problema c'è
web 2.0 name generator per voi
Dovete trovare un buon nome di dominio? Ecco
nameboy ultimate domain name generator che vi viene in aiuto.
Nota:
non fidatevi troppo della disponibilità dei domini segnalata in questo sito dato che sostiene che ideespettinate.com sia libero O_o
Deciso il nome è ora di
occuparsi del logo.
Potete affidarvi al pratico
web2.0 logo creator:
o al facile quanto divertente
flickr logo maker
Bene, ora che il logo è fatto possiamo pensare allo
sfondo.
Se desideriamo sfondi rigati tanto di moda possiamo affidarci al pratico
stripe generator,
se invece desideriamo uno sfondo scozzese (tartan) possiamo giocare con il semplice quanto efficace
tartan maker.
Ma, perbacco, forse abbiamo corso troppo: dobbiamo prima
trovare una giusta cromia.
Qui la scelta di generatori è vasta (pensate che no ho fatto uno anch'io!)
Partiamo dal "più cool" di tutti, ovvero
Kuler, il generatore di colori della adobe;
poi ci sono altre proposte interessanti, come, ad esempio,
color blander o
color scheme generator.
Perfetto, ora passiamo ad occuparci dei
bottoni.
Se vogliamo uno stile web 2.0 glossy possiamo affidarci alle procedure sapienti di
my cool buttons:
se invece siamo interessati ai così detti antipixel, abbiamo ben due possibilità:
pixel button e
button maker online.
Fatti i bottoni possiamo dedicarci all'
arrotondamento degli angoli dei box, utilizzando
Ajax Rounded Corners Generator.
Per finire possiamo creare la
favicon con
favicon generator,
e anche una bellissima
gif di caricamento con
ajaxload.
Et voilà, il sito è servito!