25 Esempi di regole di design Web 2.0 e tradizionali che vengono insieme

Nell'ampia portata del mondo del design, il termine "Web 2.0" è relativamente nuovo.

Con esso, arriva il suo insieme di standard, alcuni forti, altri non così forti, dal momento che il Web 2.0 è di per sé una definizione molto mutevole e in continua evoluzione degli standard di progettazione .

Innumerevoli esempi di siti Web 2.0 hanno infranto le regole di quello che un tempo era considerato un forte design.

D'altra parte, in molti casi il Web 2.0 ha rafforzato gli errori di progettazione comuni; pone l' attenzione su usabilità, interfaccia e leggibilità .

Al suo meglio, il Web 2.0 è pari alle tradizionali regole di progettazione praticate da secoli, anche se è senza dubbio un riflesso della nostra società nel suo attuale stato di trambusto.

Ecco una raccolta di 25 siti in cui viene illustrato come il Web 2.0 e le tradizionali pratiche di progettazione possono riunirsi per formare siti Web davvero sbalorditivi.

1. Pixel Matrix Design

Josh Pyles è un bravo ragazzo, ed è anche un designer fantastico e disciplinato. La sua ultima versione di Pixel Matrix è uno stordimento e fa un uso particolarmente efficace del colore e di un sistema a griglia forte. Sfoglia il suo portfolio e vedrai che porta questa pratica nel suo lavoro client.

Se controlli la pagina "Informazioni" (prendendo nota del bel sistema di tabulazione in gioco), puoi vedere che Josh ha incluso una bella foto del suo spazio di lavoro.

Al di sotto di questo scatto c'è un grande equilibrio di caratteri in stile Web 2.0, che stabiliscono una gerarchia di informazioni estremamente forte. Mantiene la sua biografia piccola e nascosta nella barra laterale, e bilancia il testo più grande dell'area del contenuto con un tipo più piccolo e sofisticato nella barra laterale.

Aspetti tradizionali:

Grande sistema di griglia.
Meravigliosa teoria dei colori
Forte gerarchia di informazioni

Miglioramenti Web 2.0:

Belle sfumature.
Dettagli sottili
Scelte dei caratteri grandi e altamente leggibili.
Un gran numero di modi per rimanere in contatto.
Anche il modulo di contatto ha una buona implementazione degli angoli arrotondati!

2. MuttInk

Ultimamente la texture sembra essere la cosa più bella dagli angoli arrotondati, e anche se il sito di MuttInk potrebbe non essere classificato come tipico Web 2.0, basta uno sguardo per sapere che Jeremy Holmes (l'uomo dietro il lavoro) è un incredibile designer e grafico .

Una cura per i dettagli, la trama e un'identità forte lo rendono un regalo personale.

Anche se i giorni di colori eccessivamente sbiaditi sono un po 'indietro rispetto a noi (che è una buona cosa, secondo me), sono ancora un fan dei toni sottili e terrosi che si completano con accenti brillanti, e MuttInk lo ha brillantemente realizzato .

Il turchese in cima al beige schiocca davvero, e mantiene la sensazione di "tavolo da disegno" che permea il sito. E anche se il tipo è sul lato piccolo, e un po 'difficile da leggere a chiazze, sembra ancora bello sulla pagina.

Aspetti tradizionali:

Estremamente curato nei dettagli.
Bel tipo (anche se forse troppo piccolo).
Grande brand identity
Grande uso dello spazio, in particolare sulle pagine del portfolio.

Miglioramenti Web 2.0:

Grande uso della trama.
Immagini grandi e professionali che mostrano il lavoro.
Accesso rapido al collegamento sociale.

3. 45 Royale

Il portafoglio oltre a 45 Royale mostra non solo una straordinaria gamma di lavori, ma dimostra che il team dietro al sito comprende il buon utilizzo di più standard di progettazione. È una fantastica miscela di fallimenti Web 2.0, ma ha una solida base negli standard di progettazione tradizionali (e guarda solo quei colori!).

In particolare, 45 Royale ha uno dei migliori sistemi a griglia che ho visto negli ultimi tempi, e le immagini che hanno scelto per mostrare il lavoro si adattano perfettamente all'intestazione colorata fluorescente sopra.

Vedere la teoria dei colori e l'organizzazione della mesh con una così grande armonia è sempre un piacere, e hanno integrato tutto con una sofisticata miscela di caratteri, sia grandi che piccoli.

Colori vivaci che circondano una palette secondaria di grigio, bianco e nero? Eccezionale.

Aspetti tradizionali:

Uno dei migliori esempi di un sistema di griglia.
Un sacco di spazio bianco e spazio per respirare.
Scelta dei colori brillante.
Buon flusso di informazioni.

Miglioramenti Web 2.0:

I colori cantano semplicemente ... così tanto che l'ho elencato in entrambe le categorie.
Il tipo Jumbo è molto leggibile, anche se di buon gusto.
Ottimo uso di illustrazione e grafica.
Moltitudine di progetti sono ben organizzati e ben visualizzati.

4. Zoom pizzico

Sono uno schifo di grande illustrazione, specialmente quando è presentato in cima a un meraviglioso esempio di spazio bianco. Adoro questo sito così tanto che è sufficiente fare clic sul portfolio. Ottimo spazio bianco, grande sistema di grid e un meraviglioso uso di JavaScript; queste cose hanno un modo di parlarmi (sì, sono molto di fronte a un computer).

La cosa importante da tenere a mente quando ci troviamo di fronte alle molte tecnologie disponibili in questi giorni, specialmente le dissolvenze fantasiose e gli inganni resi possibili da JavaScript, è quella di assottigliarli e regnarli.

Ti ricordi la fine degli anni Novanta quando Flash era di gran moda? Ricorda quanto sono stati malati di Flash tutti in seguito? I buoni standard Web 2.0 riguardano tanto la disciplina quanto il design, e Pinch Zoom ha tutto sotto controllo.

Cospargono il loro sito con la bontà di fantasia, ma lo mantengono snello e divertente, con praticamente zero tempo di attesa sulle immagini.

Aspetti tradizionali:

Un altro grande sistema di griglia (vedere uno schema qui?).
Il nero su bianco non sembra mai invecchiare.
Bel bilanciamento di caratteri e titoli. (Il font piccolo, benché leggibile, potrebbe avere una dimensione in punti o due in più).

Miglioramenti Web 2.0:

Il dispositivo di scorrimento del portfolio JavaScript è divertente ed efficace.
L'interfaccia è minimalista e diretta.
L'uso vario dell'illustrazione è un grande tocco.
Abbraccia la tecnologia attuale del web senza diventare ingombrante.
Soluzioni uniche per il layout della pagina (controlla il mega-dropdown quando fai clic sulla scheda Informazioni. C'è praticamente un intero sito Web che si nasconde lì!).

5. Cameron Moll

Sono sempre stato un fan del lavoro di Cameron e, come puoi dire, tende a rimanere sul lato tradizionale del campo di gioco del design. Anche se il suo sito di blog tende a ricadere nel lato tradizionale del design sofisticato e dei caratteri piccoli, non si può negare l'eleganza e la bellezza della sua pagina portfolio, che è un fantastico equilibrio tra il nuovo e il tradizionale.

I colori sono vibranti e le scelte dei caratteri si fondono con l'impressione generale, ma ancora una volta, il tipo può diventare piuttosto piccolo in alcuni punti, che è un no. Ma chi sono io per scegliere? Cameron ha riscontrato un grande successo ed è l'uomo dietro Authenticjobs.com, una grande risorsa per i designer (e uno che ha contribuito a pagare le mie bollette).

Aspetti tradizionali:

Contenuto ben strutturato.
Variazioni di colore sottili sono un bel tocco.
Il tipo sembra elegante, sebbene tenda a cavalcare il lato più piccolo dello spettro. Anche così, è leggibile e sembra carino.

Miglioramenti Web 2.0:

Molto bello l'uso della texture.
Il portfolio contiene belle immagini del lavoro, che sono molto semplici e facili da navigare.

6. Il tema Tumblr "Fluido" di Metalab

L'unico tema Tumblr per rendere la lista è intitolato "Fluid", dal design Metalab. Ha fatto la lista per una semplice ragione: è un bell'esempio meraviglioso del Web 2.0 al suo meglio. Semplice, pulito e brillante di colore.

Si potrebbe considerare un po 'un lato in questo confronto (è un catch-all Web 2.0). Questo perché Metalab è noto per aver fissato degli standard nell'arena del Web 2.0, e questo sito è una testimonianza di questo fatto. Metalab Design tiene comunque in mente le regole fondamentali e mantiene la struttura semplice e ben organizzata.

La trasparenza e la grafica sovrapposta sono una delle tendenze più recenti nel Web 2.0. Danno a un sito una grande quantità di profondità e conferiscono un aspetto all'avanguardia, quasi futuristico. Il "Fluid" di Metalab ha abbracciato questo concetto e, ancora meglio, lo ha consegnato alle masse come tema scaricabile.

Aspetti tradizionali:

Struttura semplice ed efficace.
Si distingue tra le masse di temi Tumblr.
Combinazione di colori contemporanea (anche se semplice).

Miglioramenti Web 2.0:

Fotografia grande e vibrante.
Ottimizza il design Web 2.0 all'avanguardia
Caratteri e intestazioni altamente leggibili.
L'uso di angoli arrotondati e gradienti è portato all'estremo, ma sono presentati in una divertente e moderna soluzione Web 2.0.
Le icone sono un ottimo modo minimalista per navigare tra le opzioni per ogni post.
Non dimentichiamoci degli sfondi trasparenti!

7. Viget

Oh ragazzo. Questo sito. Mi prende ogni volta. Certo, sono un tipo delicato per la trama, ma questo designer ha anche catturato la sottigliezza della buona teoria dei colori e della gerarchia.

Voglio dire, guarda quei ritratti vicino al fondo! Sono accattivanti ma non competono con quello che potrebbe essere un flusso di progettazione molto complicato. Non dimentichiamo le fantastiche scelte di carattere e la sensazione dell'acquerello. La ciliegina sulla torta è che, sebbene il sito sia pesante per immagini, si carica in un attimo!

Un altro aspetto interessante di questo sito è che i progettisti vogliono condividere molte informazioni con la propria comunità e non sono informazioni che li vendono come designer, ma informazioni che ritengono che gli utenti tipici possano trovare di valore.

Ti permettono di scavare più a fondo senza riempire i tuoi bisogni in gola, che è sempre una pratica gradita.

Aspetti tradizionali:

Contenuto ben strutturato.
Bel colore e tipo.
Anche se i caratteri sono piccoli, il contenuto principale è ancora facile da leggere.
La grande opera d'arte si fonde perfettamente con il design (ritratti cool).

Miglioramenti Web 2.0:

Il tema dell'acquerello è estremamente contemporaneo e, sebbene sia pesante per immagini, è stato progettato per caricare snello e cattivo.
Il contenuto della sidebar è ben organizzato e guidato dal contenuto.
Soluzione unica per la casella "Fumetto" nella barra laterale.
Un sacco di informazioni condivise e orientate al contenuto.

8. FeelWire

Un altro incredibile esempio di grande spazio bianco è Feelwire. Il tipo nero su sfondi bianchi, con grandi sfumature di grigio intermedie, non sembra mai invecchiare. Aggiungi un paio di icone dai colori vivaci e hai un sito semplice ma efficace. Si tratta di semplicità qui (diamine, hanno solo una pagina!).

Le icone in stile Web 2.0 sono il fulcro di questa pagina e contribuiscono notevolmente a mantenere unito il sito. Inoltre impediscono al sito di essere sovraccaricato di testo e danno all'utente qualcosa di cui essere curioso.

Scorrendo queste icone, sono stato davvero contento di quello che ho trovato: uno stato di hover molto semplice che mi ha fornito le informazioni che stavo cercando, facendo così con il sempre popolare Web 2.0 "Speech Bubble". Un bel tocco.

Ultima cosa: anche se mi piacciono i collegamenti rossi, che spuntano anche dalla pagina e interagiscono bene con le icone, penso che dovrebbero rendere il link di contatto un po 'più evidente. A partire da ora è un po 'troppo nascosto nei contenuti, e ho davvero dovuto cercare un modo per entrare in contatto con questi talentuosi sviluppatori. Basta dire.

Aspetti tradizionali:

Breve, dolce e al punto: un sito di una sola pagina.
Spazio bianco!
Scelte dei caratteri sottili e di buon gusto.
Bello, layout di base.

Miglioramenti Web 2.0:

Le icone lucide spuntano fuori dalla pagina, in senso buono.
I rollover davvero belli sulle icone mantengono il sito libero, ma ti danno le informazioni che ti servono in un modo divertente.
I simpatici avatar aggiungono un elemento umano.

9. Agami Creative

Ok, forse è solo una cosa personale con questi siti altamente strutturati, ma ciò che fa Agami Creative, lo fa molto bene. È un altro esempio contemporaneo di come i siti con immagini pesanti possano diventare una soluzione perfettamente accettabile in un giorno di connessioni ad alta velocità.

Il fulcro di questo sito è sicuramente l'intestazione dell'acquerello, che funge da sfondo perfetto per il design del logo furbo. Ospita anche la navigazione, ponendo abbastanza l'accento sulla sua posizione, ma senza insultare l'utente (perché la maggior parte delle persone sa dove trovare la navigazione in questi giorni).

Cliccando sulla pagina del portfolio, noterai un layout con la quantità perfetta di spazio per respirare e un sistema a griglia forte.

Immagini semplici contribuiscono al lavoro e disegnano i tuoi occhi sui singoli progetti, come guardare attraverso un buco della serratura al risultato finale. Tutto questo è racchiuso da un sofisticato font serif per le intestazioni e un font sans-serif altamente leggibile per il corpo del testo.

Aspetti tradizionali:

Un uso più bello della teoria dei colori.
Grande opera d'arte.
Interessante combinazione di tipo / caratteri.
Il logo artistico disegnato a mano ha la sensazione di essere trasportato in tutto il sito.

Miglioramenti Web 2.0:

La navigazione sovradimensionata facilita lo spostamento all'interno del sito.
Rendono davvero facile entrare in contatto.
L'uso degli avatar è una buona idea (anche se onestamente penso che avrebbero potuto fare meglio con questi. Non sono sicuro di come si suppone che l'aspetto degli anime si mescoli con questo sito oltre all'influenza asiatica?).
Adoro la trama!

10. Adit Shukla

Un altro sito con un grande approccio illustrativo, Designer Adit Shukla sa anche come mettere insieme una grande combinazione di colori, e gioca anche con una bella soluzione alla barra laterale.

Per qualche strana ragione, molte barre laterali sono trascurate e trascurate, come se i progettisti avessero il permesso di ignorare le regole del buon design quando gettavano insieme la barra laterale di un sito. Non con questo sito.

Anche se il contenuto è minimo (anche un po 'scarso), non si può fare a meno di amare la creatività coinvolta, specialmente nell'intestazione illustrativa, che aggiunge una quantità necessaria di profondità. Anche le schede di navigazione sopra sono un bel tocco.

Aspetti tradizionali:

Colori vibranti.
Soluzioni creative per elementi comuni, come la barra laterale e l'intestazione.
L'illustrazione aggiunge molta profondità.

Miglioramenti Web 2.0:

Layout semplice con un'intestazione ben sviluppata, che ospita anche la navigazione.
Il tipo grande è efficace.
Molteplici modi per navigare nel sito (anche se onestamente, non sono convinto che questa sia una buona cosa).
Le schede trasparenti sono un bel tocco.

12. Cream Scoop

La prima cosa che noterai di Cream Scoop è l'audace selezione di colori usati in tutto il sito. Non hanno paura di prendere i colori di una tacca dalla norma, e il risultato è tanto rinfrescante quanto diverso.

Anche se i colori sono audaci, ci sono anche miscele sottili di tipo forte e sfumature che sono disseminate in tutto il sito. Notare come il gradiente di sfondo si illumina in alto, come il bordo di un riflettore, per evidenziare la navigazione altrimenti minima. Il tipo è ben organizzato ed equilibrato, con un aspetto distintamente Web 2.0.

Aspetti tradizionali:

Grassetto selezione di colori, ma una selezione che funziona in modo sorprendentemente efficace.
Navigazione minimalista che porta a termine il lavoro.
Grande uso dell'illustrazione giocosa.
Il layout è strutturato ma divertente.

Miglioramenti Web 2.0:

Uso fantastico di un gradiente sullo sfondo.
Il blu brillante attira davvero la tua attenzione e la indirizza verso le cose importanti.
Ottimo uso di avatar sulla pagina (quanti anni hanno questi ragazzi?).
Grandi caratteri utilizzati in tutto.

13. Carbonica

Carbonica rinuncia ai gradienti e alla lucentezza del Web 2.0 e cerca un look "messo insieme" che ricorda un album. Ottimo uso della trama e dell'animazione, ma anche un modo divertente di disegnare a mano.

Assicurati di scorrere un po 'verso il basso e controlla le icone, che si adattano perfettamente anche al tema!

Aspetti tradizionali:

La struttura di base è in gioco.
Le scritte fatte a mano si sposano bene con il tema del sito.
L'animazione è un bel tocco (ma scusate, l'uso di Flash mantiene questo punto fuori dalla categoria Web 2.0).

Miglioramenti Web 2.0:

La trama è grande
Le ombre esterne aggiungono profondità realistiche.
Belle icone, foto e illustrazione.

14. DSGN + DVLP

Anche in questo caso la combinazione di colori in bianco e nero generale funziona per questo sito, e accentuano questa direzione con alcune icone pulite tirate fuori dalla borsetta del Web 2.0.

La homepage si regge da sola come una sorta di splash page, e ha un buon mix di icone, forte layout e anche un po 'di fotografia. Tutti questi elementi si uniscono in modo sofisticato e riescono a emettere un po 'di energia.

Noterai che le pagine secondarie usano un modello a 3 colonne separato per fornire le informazioni. È tutto un design minimalista, ma non è una brutta cosa.

Aspetti tradizionali:

Nero, bianco e grigio offrono una sensazione distinta.
Buon equilibrio di tipo sulla home page.
Il modello di pagina secondaria a 3 colonne consente un flusso costante di informazioni quando si esce dalla home page.

Miglioramenti Web 2.0:

La consapevolezza dei social media è sicuramente in gioco.
Le icone lucide sparse per tutto aggiungono il colore necessario.
Buon mix di fotografia e icone.
Le icone Jumbo sono presenti nelle pagine secondarie.

15. Marchand de Trucs

Quindi forse non posso parlare la lingua, ma questo non significa che il sito non mi stia ancora parlando ... Okay, quella linea era zoppa, ma comunque questo sito è piuttosto carino. Contiene meravigliose opere d'arte e, dietro tutto, una grande base e contenuti strutturati. Non male per quello che (penso) sembra essere un negozio di magia online!

Aspetti tradizionali:

Intensa attenzione ai dettagli.
La teoria del colore è ben avviata, ed è una tavolozza molto coinvolta.
Buon uso di caratteri che seguono il tema generale del sito.

Miglioramenti Web 2.0:

Estremamente piacevole uso dell'illustrazione come intestazione
Icone relativamente grandi.

16. Paiko

Paiko, anche se semplice, è uno dei miei siti preferiti sulla lista. Si presenta come una miscela spezzata di graffette di design tradizionali e miglioramenti del Web 2.0: buon tipo di tutte le dimensioni (compresi i mega-titoli del Web 2.0), spazio bianco eccezionale e, naturalmente, la rete sempre più importante che tiene tutto insieme.

La scelta di aggiungere texture sullo sfondo distingue davvero il sito e aggiunge un altro livello al già forte design; è trattato con cura e non eccessivamente utilizzato come in alcuni siti. Questa trama, combinata con l'appeal più sofisticato del sito, contribuisce notevolmente a rafforzare l'identità di Paiko.

Sfoglia la pagina del portfolio per vedere un esempio di grande spaziatura e struttura della griglia, per non parlare di alcuni divertenti esempi di immagini ben ritagliate.

Aspetti tradizionali:

Semplice struttura a griglia a due colonne con spazio di gronda che gli conferisce una piacevole sensazione ariosa. Questa struttura è trasportata in tutto il sito, il che gli conferisce un flusso molto consistente.
Il tatto astuto aggiunge un tocco piacevole, senza essere invadenti.
Le variazioni e i colori dei caratteri sono molto sofisticati.

Miglioramenti Web 2.0:

Jumbo-testo!
Il titolo è enorme e molto leggibile, e gioca bene contro il tipo più piccolo qui sotto.
Grandi immagini e layout sulla pagina del portfolio.
L'uso conservativo della trama aggiunge all'identità generale.

17. Matt Dempsey

All'altro estremo dello spettro di texture, abbiamo un sito di Matt Dempsey. Ora, c'è sicuramente una cosa come troppa trama, e alcuni avrebbero un punto valido se sostenessero che questo sito va troppo lontano.

Tuttavia, mi piace ancora, e i dettagli mi hanno conquistato quando ho iniziato a setacciare le informazioni. Matt non ha paura di infrangere alcune regole che mi hanno sempre infastidito (come tenere le informazioni above the fold, un'idea che ritengo sia stata inventata in una tavola rotonda di persone di marketing iperconsiderate, lo dico perché una volta ero una di quelle persone di marketing.).

Alla fine, Matt Dempsey presenta il suo lavoro e il suo sito in modo audace e "in faccia". E infrangere alcune regole è ciò che significa essere un designer, sia che le regole siano vecchie o nuove.

Aspetti tradizionali:

Che ci crediate o no, c'è un semplice sistema di griglia che sta alla base della trama.
Distinto e unico
Non ha paura di infrangere alcune regole

Miglioramenti Web 2.0:

Matt usa ovviamente un approccio Web 2.0 ai suoi font e logo
Buon uso della tecnologia sulle pagine interne (il cursore JavaScript è un bel tocco).
Ogni piccola informazione importante è enorme e facile da leggere.
Portfolio presenta il lavoro in modo divertente e altamente tecnologico.

18. Digital Mash

Con Digital Mash, puoi vedere che un sacco di pensieri sono andati negli elementi che desideravano includere nel sito, o meglio ancora, gli elementi che hanno scelto di lasciare fuori.

Essere in grado di ridurre il grasso è una pratica importante per qualsiasi designer, e Digital Mash espone le basi e solo le basi. Apri la pagina e saprai in pochi secondi che cosa è l'autore del sito.

Il gradiente morbido dello sfondo fa un ottimo lavoro nel presentare il contenuto in maniera sofisticata. Dal tipo pulito, alla grafica incisiva dell'illustrazione, il sito lo rende semplice.

La parte migliore deve essere quando scavi più a fondo nel sito. Vai alla pagina di lavoro e troverai un portfolio presentato in un modo quasi antiquato; i singoli pezzi sembrano pronti per essere stampati e rilegati in un astuccio di cuoio.

Tuttavia, l'elegante presentazione, gli ombretti e i piccoli dettagli (come gli angoli leggermente piegati di ogni pezzo), conferiscono a tutto ciò un'inclinazione contemporanea. Combinare il nuovo e il vecchio. Devi amarlo.

Aspetti tradizionali:

Rifilato gli elementi non necessari.
I colori vibranti sulla homepage e nell'intestazione delle pagine secondarie aggiungono un accento vibrante allo sfondo grigio.
La gerarchia delle informazioni è forte, così come lo è il flusso generale del sito.

Miglioramenti Web 2.0:

Presentazione stupefacente delle immagini del portfolio; dropshadows, bordi rovesciati e piccoli dettagli portano davvero questo sito ad uno standard più elevato.
La bella sfumatura sullo sfondo presenta davvero bene le informazioni.
Le immagini di grandi dimensioni e di grandi dimensioni sono amichevoli per gli occhi.
Ottima soluzione di navigazione.

19. Kyan Media

Kyan Media è un altro sito che si appoggia pesantemente sul lato Web 2.0 dello spettro. Il design del cloud e la vibrante palette di colori blu sono direttamente fuori dal libro, ma è un esempio estremamente forte dello standard.

Il sito funziona in modo lineare e a caratteri cubitali ti dice esattamente quello che fanno, seguito da esempi del lavoro. È una strategia di progettazione semplice trovata in innumerevoli siti, e per una buona ragione. È veloce e non minaccia una breve durata di attenzione.

E, come tutti i buoni esempi, abbraccia la tecnologia e le regole del design tradizionale. Prenditi del tempo e passa sopra gli esempi di lavoro. È un modo divertente e informativo per presentare i pezzi del portfolio in primo piano e consente a noi, l'utente, di scavare più a fondo o di ottenere le basi con un semplice colpo d'occhio.

Aspetti tradizionali:

Tutto ha una sensazione estremamente solida.
Il layout generale di ogni pagina è forte
La gerarchia informativa è grande.
Caratteri, intestazioni e colori dei caratteri sono coerenti in tutto.

Miglioramenti Web 2.0:

Tavolozza di colori blu brillante.
Uso divertente dell'illustrazione (a chi non piacciono le nuvole?).
Fotografia punchy.
Buona implementazione della tecnologia.
Ombretti sottili aggiungono profondità.
Caratteri altamente leggibili e intestazioni sovradimensionate.

20. Rockatee

Bene, dice "Functional Design" nell'intestazione, quindi ha funzionato meglio, giusto? Fortunatamente, questo sito lo fa. È un altro esempio di come la trama si stia insinuando nel mercato del web design e confermi l'idea che siamo già nell'era ad alta velocità della navigazione sul web.

Qualcosa che potresti notare è che Rockatee ha diversi progetti in mostra nella sezione portfolio, quindi una soluzione semplificata era decisamente in ordine. Lo hanno fatto con una serie di istantanee, che mostrano la profondità del loro portafoglio prolifico. Fatti un favore e dai un'occhiata.

Un'altra caratteristica di nota è la bella navigazione. È ben posizionato e rende il sito un gioco da ragazzi. Ti aiutano persino sulla home page con un bel pulsante che porta al portfolio.

Aspetti tradizionali:

Tutto ha una sensazione estremamente solida.
Il layout generale di ogni pagina è forte.
La teoria del colore è ben esplorata e implementata.
Forte attenzione ai dettagli.

Miglioramenti Web 2.0:

Navigazione fantastica
I grandi pulsanti ti portano ai bit importanti.
Raffinato portfolio "istantanea" con grandi raccolti delle singole opere.
Il sito mette in mostra i progettisti di molti progetti paralleli, ma non impedisce loro di intralciare gli elementi centrali.
Ottima idea con la timeline sulla pagina "Informazioni".

21. Cose che sono marroni

Un altro dei miei preferiti è Things That Are Brown. Tirano fuori un sito estremamente raffinato che è uguale a (o meglio di) siti creati da grandi agenzie, eppure ti danno anche uno sguardo interiore alle persone dietro le quinte.

La pagina about contiene una buona fotografia che, anche se abbastanza professionale, ha anche un appeal molto casalingo. Si può dire che la squadra ha fatto un viaggio fuori, ha esplorato un punto decente e ha scattato alcune istantanee con le proprie fotocamere digitali.

Un team professionale, ma accessibile e amichevole è esattamente il tipo di squadra con cui voglio lavorare. Queste persone sono reali.

Questo è uno di quei rari siti che fonde armoniosamente le forti regole del design con modifiche moderne. Il loro slogan, "Humbly Awesome," è morto.

Aspetti tradizionali:

Bel colore con grandi accenti.
Buon uso di opere d'arte che si integra bene.
Solido e coerente in tutto.

Miglioramenti Web 2.0:

La navigazione è pulita e facile da leggere.
Bei pulsanti che non esagerano con la lucentezza.
La fotografia è personale e aggiunge un tocco umano al sito.
Il portfolio è chiaro e facile da navigare, con una grande presentazione del lavoro.
I titoli sono grandi, ma sofisticati.

22. Andrew Bradshaw

Questo è forse uno dei siti più sofisticati della lista. Andrew ha un ottimo modo di creare texture, tipi, pulsanti e fotografie in un pacchetto congelato. Mantiene inoltre in mente la gerarchia, accentuando gli aspetti importanti e riducendo al minimo le sezioni che potrebbero non essere di interesse per tutti gli utenti.

La navigazione è un punto culminante, con diversi colori che appaiono quando si passa con il mouse sulle schede; un tocco molto elegante.

Degna di nota è l'intestazione testurizzata e la scelta del carattere forte utilizzata nel suo logo. Ancora una volta, Andrew combina sottigliezza e accenti per creare un bellissimo sito che sia completo e avvincente.

Aspetti tradizionali:

Appeal generale di sofisticazione pulita.
Buon uso di elementi di accento, sia a colori che con tipo.
Come al solito, un forte sistema a griglia lo tiene insieme.
La gerarchia è ben implementata.

Miglioramenti Web 2.0:

Una presa diversa sui pulsanti.
Uso brillante della fotografia e presentazione delle immagini.
Fantastici dettagli nella navigazione.

23. James Lai

Ultimamente ho una cosa per i siti web di una sola pagina, e come probabilmente hai indovinato, anche io sono un fanatico della trama. Entra James Lai, un designer che sa come presentarsi attraverso un uso di fantasia di tipo, trama e animazione.

Quello che lo elogio di più è la sua capacità di mantenere il suo sito su una singola pagina e di perdonarci la pagina "Tutto su di me" che si trova praticamente su ogni sito. Sebbene attribuisca un valore elevato all'elemento umano, a volte il lavoro parla da solo, e non posso criticare un ragazzo per aver creduto nel suo set di abilità.

Aspetti tradizionali:

Semplice soluzione a pagina singola.
L'animazione aggiunge interesse alla presentazione (anche se ha rallentato il sito un po 'alla mia estremità).
Buona attenzione ai dettagli

Miglioramenti Web 2.0:

Il tipo enorme sulla home page ti dice lo scopo esatto dietro il sito.
Le informazioni di contatto sono facili da trovare.
Le fantastiche miniature aiutano gli utenti a navigare nel portfolio.
Uso interessante della trama.

24. Sovvertire

Subvert è stato incluso non solo per il suo layout ovviamente funzionale, ma per la presentazione in dissolvenza presente nella home page. La presentazione è divertente, ma è anche informativa e preziosa per i potenziali clienti.

La texture dello sfondo è completata da dettagli trasparenti, tra cui un ottimo sistema di navigazione con schede trasparenti! Lo stato di passaggio del mouse di questa navigazione è sottile e mantiene la trasparenza.

Tendo a navigare direttamente nelle pagine di lavoro su questi siti e Subvert non delude la sua presentazione. La struttura della griglia è forte e facile da navigare, e dopo aver cliccato, l'utente è portato a una visione ampliata del lavoro.

Aspetti tradizionali:

Ottimo flusso generale.
Forte presentazione del portfolio sulla pagina "Lavoro".

Miglioramenti Web 2.0:

Tipo enorme presentato in una presentazione sbiadita.
Schede di navigazione trasparenti!
I pulsanti sono belli e aggiungono un buon contrasto agli sfondi.
La presentazione dell'ufficio nella pagina "Azienda" è un bel tocco.
Abbraccia la tecnologia.

25. Progetto Yellow Bird

A prima vista questo sito potrebbe sembrare un po 'disordinato o disperso, ma più lo guardo e più sfoglio le sue pagine, più ho notato la forza della sua organizzazione. Meglio ancora, il design ispirato alle Indie inizia davvero ad attirare più a lungo il soggiorno, e l'aspetto sparsi del sito si adatta perfettamente al tema.

Se controlli la galleria fotografica, vedrai una sfilza di foto amatoriali che ancora una volta si aggiungono al look di Indie, mentre mostri il prodotto.

Questo tipo di approccio underground, reso popolare da siti come threadless.com, attacca immediatamente lo spettatore al prodotto.

Vogliono essere parte della folla e non si sentono come se qualcuno stesse solo cercando di venderli qualcosa. Se questa non è una filosofia del Web 2.0, non sono sicuro di cosa sia.

Aspetti tradizionali:

Il logo Crafty stabilisce davvero la sensazione, che viene eseguita in tutto il sito.
Sebbene all'inizio si senta sparsi o allentati, ci si rende conto che questo look "messo insieme" è esattamente ciò che i progettisti stavano cercando. Loro tolgono l'occhiata mentre ancora fanno il sito facile da navigare.
Approccio coerente e non tradizionale.

Miglioramenti Web 2.0:

È più sulla filosofia con questo. Mentre l'aspetto sociale del Web 2.0 è in pieno effetto, questo sito è anche reso forte grazie al suo approccio di marketing virale e alla grande filantropia sottostante.
Costruisce una comunità!
Anche le foto fantastiche e la navigazione facile non fanno male.

In chiusura…

Il Web 2.0 è uno standard difficile da definire , poiché laddove gli standard di progettazione tradizionali sono una rigida raccolta di regole e linee guida (struttura della griglia, teoria dei colori, spaziatura delle lettere, crenatura, tracciamento e così via), il Web 2.0, pur contenendo standard simili, è quasi più così un modo di vivere.

Combina filosofia, marketing, tecnologia, facilità d'uso e innumerevoli altri aspetti del nostro universo occupato con l'obiettivo finale di rendere le cose più facili per le masse.

A tale riguardo, il Web 2.0 e le regole tradizionali che sono state stabilite anni fa, in definitiva condividono lo stesso obiettivo: organizzare il caos e semplificare il complesso .

Al giorno d'oggi, può essere un evento difficile, quindi abbiamo bisogno di tutti gli strumenti a nostra disposizione, sia che siano all'avanguardia, sia che siano stati provati nei secoli passati.

Scritto esclusivamente per WDD da Josh Sears. È scrittore, illustratore e designer per una serie di progetti basati sul web. Si guadagna da vivere come Lead Web Designer, direttore creativo e co-proprietario di Littlelines.com . Puoi controlla il suo lavoro qui , o segui i suoi aggiornamenti su Twitter .

Come usi elementi web 2.0 con un design tradizionale? Si prega di condividere esempi dal proprio portafoglio o altri buoni esempi che potresti aver incontrato.

regole di progettazione compilazione di disegni tradizionale web 2.0