E questo è ciò che abbiamo ottenuto...
Tuttavia, questo non ci darà abbastanza profondità. Vogliamo rendere questo rettangolo ancora più visibilmente curvo, poiché non tocca la superficie in modo uniforme, ma aggiungere più ombra utilizzando gli stili di livello o rendere l'ombra più forte non ci darà l'effetto desiderato. Usa questo divisorio orizzontale offerto da dezinpolio.com e aggiungilo al centro della tua forma, in modo che “sfumi” verso gli angoli, come mostrato di seguito:
Ora, ricordi che abbiamo menzionato le lettere in grassetto? Il Web 2.0 fa un buon uso dei font, preferibilmente molto facili da leggere, leggermente cartoonesci e in grassetto. Abbiamo avuto difficoltà a scegliere un carattere adatto e abbiamo deciso di optare per "Cooper Std".
Stiamo facendo per aggiungere un'ombra molto delicata (# 5674a7) e una leggera sfumatura dal bianco in alto (#ffffff) all'azzurro (#cdd9de) ...
Questo ci darà un design per bambini molto carino.
Anche il Web 2.0 riguarda una buona proporzione e mentre i design sono particolarmente asimmetrici, altri sono per così dire ossessivamente simmetrici. Io preferisco la seconda tipologia, perché per realizzarla ci vuole meno originalità e gusto, basta solo il senso delle proporzioni. Diciamo di aggiungere alcuni pulsanti nell'angolo inferiore e laterale del nostro design...
Ti sembra bello?
No, non è così perché le schede sembrano troppo caotiche, quindi ci assicureremo che la linea della scheda sul lato sinistro”incontri” la linea della scheda inferiore, in questo modo...
Ora sembra proporzionale.
Nel caso ti chiedessi perché abbiamo saltato un passaggio, gli stili di livello per le schede sono quasi identici a quelli che abbiamo usato per il rettangolo principale e lo stesso vale per il carattere e gli stili di livello delle “schede”. A scopo didattico, puoi scaricare il file PSD e analizzare il processo. Ricorda che tutti questi gradienti semi visibili e i contorni di 1px sono spesso ciò che fa la differenza tra un ottimo web design e un tentativo maturo di progettazione. Buona fortuna!
[…] Marie ha scritto un post interessante oggi suEcco un breve estrattoCi sono tanti tutorial e guide online che ti insegnano come utilizzare in modo efficace il design web 2.0. Sebbene la maggior parte di questi tutorial siano utili, allo stesso tempo uccidono l'originalità del web design. Ad esempio, la maggior parte delle “guide”… […]
[…] Jacob Cass ha scritto un post interessante oggi suEcco un breve estrattoCi sono così tanti tutorial e guide online che ti insegnano come utilizzare in modo efficace il design web 2.0. Sebbene la maggior parte di questi tutorial siano utili, allo stesso tempo uccidono l'originalità del web design. Ad esempio, la maggior parte delle “guide”… […]
Davvero un buon lavoro. Ho trovato molte informazioni profonde che possono aiutarmi ad andare avanti.
Tutorial interessante. La mia domanda è: cosa rende questo “Web 2.0”? Il Web 2.0 non ha nulla (o poco a che fare) con l'aspetto di un sito. Ciò di cui stai parlando qui è il design, o semplicemente l'aspetto di un sito. Questo è tutto. Flickr.com è un sito Web 2.0 e in realtà non utilizza nessuno di questi principi. Inoltre, Facebook è molto semplice, non utilizza ombre esterne, angoli arrotondati o caratteri "leggermente fumettistici e in grassetto", ma è comunque un sito web 2.0. Anche Wikipedia…. eccetera…
Il Web 2.0 riguarda il modo in cui gli utenti interagiscono con il sito e il modo in cui il sito interagisce con loro.
Una bella interpretazione del design web 2.0.
bel tutorial...
vorrei chiedere,
come fai a sapere se è un design 2.0 o no?
scusa, sono solo un principiante
[…] Le persone di pswish.com non erano ancora arrivate, ma ora sono diventate ufficiali: il Web 2.0 è un vantaggio per l'identità dei siti web. Articolo originale […]
[…] Visualizza il tutorial […]
Ottimo articolo, grazie 🙂
Anche se stai cercando dei bei font gratuiti http://www.fonts2u.com
CIAO! pezzo di design interessante 🙂 ma il collegamento non funziona 🙁 posso trovare questo file psd altrove? grazie