25 exemples de règles de conception Web 2.0 et traditionnelles

Dans le vaste champ du monde du design, le terme "Web 2.0" est relativement nouveau.

Avec elle, vient son propre ensemble de normes, certaines fortes, d'autres pas si fortes, puisque le Web 2.0 en soi est une définition très instable et en constante évolution des normes de conception .

D'innombrables exemples de sites Web 2.0 ont enfreint les règles de ce qui était autrefois considéré comme une conception solide.

En revanche, dans de nombreux cas, le Web 2.0 a renforcé les erreurs de conception communes; il met l' accent sur la facilité d'utilisation, l'interface et la lisibilité .

Au mieux, le Web 2.0 est à la hauteur des règles de conception traditionnelles pratiquées depuis des siècles, même s'il est sans aucun doute le reflet de notre société dans son état actuel d'agitation.

Voici une collection de 25 sites présentant comment le Web 2.0 et les pratiques de conception traditionnelles peuvent se combiner pour former des sites Web vraiment renversants.

1. Pixel Matrix Design

Josh Pyles est un gars sympa, et il est aussi un concepteur fantastique et discipliné. Sa dernière version de Pixel Matrix est un produit étonnant, et fait particulièrement bon usage de la couleur et d’un système de grille solide. Parcourez son portfolio et vous verrez qu'il intègre cette pratique dans son travail client.

Si vous consultez la page "A propos de" (en notant le bon système de tabulation en jeu), vous pouvez voir que Josh a inclus une belle photo de son espace de travail.

Au-dessous de ce plan, il y a un excellent équilibre entre les polices de style Web 2.0, qui établissent une hiérarchie extrêmement forte des informations. Il garde son bio petit et rentre dans la barre latérale et équilibre le texte plus grand de la zone de contenu avec un type plus petit et sophistiqué dans la barre latérale.

Aspects traditionnels:

Grand système de grille.
Magnifique théorie des couleurs
Forte hiérarchie de l'information

Améliorations du Web 2.0:

Beaux dégradés.
Détails subtils.
Grands choix de polices hautement lisibles.
Un grand nombre de façons de rester connecté.
Même le formulaire de contact a une belle implémentation de coins arrondis!

2. MuttInk

Dernièrement, la texture semble être la meilleure chose depuis les coins arrondis, et bien que le site de MuttInk ne soit pas classifié comme Web 2.0 typique, un seul coup d'œil suffit pour savoir que Jeremy Holmes (l'homme derrière le travail) est un designer .

Une attention particulière aux détails, à la texture et à une identité forte placent ceci comme un fave personnel.

Même si les jours de couleurs trop étouffées sont un peu derrière nous (ce qui est une bonne chose, à mon avis), je suis toujours fan des tonalités subtiles et terreuses qui s’accompagnent d’accents brillants, et MuttInk a réussi cela avec brio .

La turquoise au-dessus du beige apparaît vraiment et maintient la sensation de «table à dessin» qui imprègne le site. Et bien que le type soit plutôt minuscule et un peu difficile à lire à certains endroits, il est toujours aussi beau sur la page.

Aspects traditionnels:

Extrêmement attention aux détails.
Bon type (mais peut-être trop petit).
Grande identité de marque.
Grande utilisation de l'espace, en particulier sur les pages du portfolio.

Améliorations du Web 2.0:

Grande utilisation de la texture.
De grandes images professionnelles présentant le travail.
Accès rapide aux liens sociaux.

3. 45 Royale

Le portefeuille de 45 Royale présente non seulement un incroyable éventail de travaux, mais il montre également que l’équipe derrière le site comprend un bon usage de plusieurs normes de conception. C'est un mélange fantastique de solutions de repli Web 2.0, mais il repose sur des normes de conception traditionnelles (et il suffit de regarder ces couleurs!).

En particulier, 45 Royale possède l'un des meilleurs systèmes de grille que j'ai vus récemment, et les images qu'ils ont choisies pour présenter le travail collent bien avec l'en-tête de couleur fluorescente ci-dessus.

Voir la théorie des couleurs et le maillage de l'organisation avec une telle harmonie est toujours un plaisir, et ils ont tout complété avec un mélange très sophistiqué de polices, grandes et petites.

Couleurs vives entourant une palette secondaire de gris, blanc et noir? Impressionnant.

Aspects traditionnels:

L'un des meilleurs exemples d'un système de grille.
Beaucoup d'espace et de place pour respirer.
Choix de couleur brillant.
Bon flux d'informations.

Améliorations du Web 2.0:

Les couleurs chantent simplement ... tellement que je les ai énumérées dans les deux catégories.
Le format Jumbo est très lisible, mais de bon goût.
Grande utilisation de l'illustration et des graphiques.
Une multitude de projets sont bien organisés et bien présentés.

4. Pincer Zoom

Je suis une ventouse pour une grande illustration, surtout quand elle est présentée au sommet d'un magnifique exemple d'espace blanc. J'aime tellement ce site que le simple fait de cliquer sur le portfolio est génial. De grands espaces, un excellent système de grille et une utilisation merveilleuse de JavaScript; ces choses ont une façon de me parler (oui, je suis souvent devant un ordinateur).

La chose importante à garder à l’esprit lorsque nous sommes confrontés aux nombreuses technologies disponibles de nos jours, en particulier les fondus et les ruses fantaisistes rendus possibles par JavaScript, est de les réduire et de les régner.

Rappelez-vous la fin des années 90 quand Flash faisait fureur? Rappelez-vous combien de flash nous avons tous eu après? Les bonnes normes Web 2.0 concernent autant la discipline que la conception, et Pinch Zoom est bien maîtrisé.

Ils arrosent leur site avec la bonté de fantaisie, tout en restant mince et amusant, avec pratiquement aucun temps d'attente sur les images.

Aspects traditionnels:

Un autre excellent système de grille (voir un modèle ici?).
Le noir sur blanc ne semble jamais vieillir.
Bel équilibre des polices et des titres. (La petite police, bien que lisible, pourrait avoir une taille de point ou deux plus grande).

Améliorations du Web 2.0:

Le curseur de portefeuille JavaScript est amusant et efficace.
L'interface est minimaliste et directe.
Une utilisation variée de l'illustration est une excellente idée.
Adhère à la technologie actuelle du Web sans devenir encombrante.
Des solutions uniques pour la mise en page (consultez la liste déroulante en cliquant sur l'onglet info. Il y a pratiquement tout un site Web qui s'y cache!).

5. Cameron Moll

J'ai toujours été fan du travail de Cameron et, comme vous pouvez le constater, il a tendance à rester du côté traditionnel du monde du design. Bien que son site de blog ait tendance à se situer du côté traditionnel du design sophistiqué et des petites polices, on ne peut nier l’élégance et la beauté de sa page de portfolio, qui est un fantastique équilibre entre le nouveau et le traditionnel.

Les couleurs sont vives et les choix de polices s'accordent avec la sensation générale, mais là encore, le type peut être assez petit par endroits, ce qui est le cas du Web 2.0 no-no. Mais qui suis-je pour dénicher? Cameron a rencontré un grand succès et est l'homme derrière Authenticjobs.com, une excellente ressource pour les concepteurs (et qui aide à payer mes factures).

Aspects traditionnels:

Contenu bien structuré.
Des variations de couleurs subtiles sont une belle touche.
Le type semble élégant, mais a tendance à rouler sur le petit côté du spectre. Malgré tout, il est lisible et semble bien.

Améliorations du Web 2.0:

Très belle utilisation de la texture.
Portfolio contient de belles images du travail, qui sont très simples et faciles à naviguer.

6. Le thème Tumblr "Fluide" de Metalab

Le seul thème Tumblr à faire la liste est intitulé "Fluid", par Metalab Design. Il a fait la liste pour une raison simple: c'est un bel exemple du Web 2.0. Simple, propre et brillant de couleur.

On pourrait considérer cela comme un côté unilatéral dans cette comparaison (c'est un tout-en-un Web 2.0). C'est parce que Metalab est connu pour établir des normes dans le domaine du Web 2.0, et ce site en est la preuve. Metalab Design garde toutefois à l’esprit les règles fondamentales et garde la structure simple et bien organisée.

La transparence et le chevauchement des graphiques sont l’une des nouvelles tendances du Web 2.0. Ils donnent à un site beaucoup de profondeur et imprègnent un look de pointe, presque futuriste. Le "Fluide" de Metalab a adopté ce concept et, mieux encore, l'a livré aux masses sous forme de thème téléchargeable.

Aspects traditionnels:

Structure simple et efficace.
Se distingue dans les masses de thèmes Tumblr.
Schéma de couleurs contemporain (bien que simple).

Améliorations du Web 2.0:

Grande photographie vibrante.
Améliore la conception Web 2.0 de pointe
Polices et en-têtes très lisibles.
L'utilisation de coins et de dégradés arrondis est poussée à l'extrême, mais ils sont présentés dans une solution Web 2.0 amusante et moderne.
Les icônes sont une excellente façon de naviguer dans les options pour chaque article.
N'oublions pas les fonds transparents!

7. Viget

Oh mec. Ce site. Ça me prend à chaque fois. Bien sûr, je suis un doux pour la texture, mais ce concepteur a également capturé la subtilité de la bonne théorie des couleurs et de la hiérarchie.

Je veux dire juste vérifier ces portraits près du fond! Ils sont accrocheurs mais ils ne sont pas en concurrence avec ce qui pourrait être un flux de conception très compliqué. N'oublions pas les bons choix de polices et la sensation d'aquarelle. Cerise sur le gâteau, bien que le site soit lourd en images, il se charge en un clin d'oeil!

Un autre aspect intéressant de ce site est que les concepteurs veulent partager beaucoup d'informations avec leur communauté et que ce ne sont pas les informations qui les vendent en tant que concepteurs, mais des informations qui, selon eux, pourraient être utiles aux utilisateurs typiques.

Ils vous permettent de creuser plus profondément sans gaver leurs besoins dans la gorge, ce qui est toujours une pratique bienvenue.

Aspects traditionnels:

Contenu bien structuré.
Belle couleur et type.
Bien que les polices soient plutôt petites, le contenu principal reste facile à lire.
Les œuvres d'art se fondent parfaitement dans le design (portraits sympas).

Améliorations du Web 2.0:

Le thème de l'aquarelle est extrêmement contemporain, et bien qu'il soit lourd en images, il a été conçu pour charger les maigres et les méchants.
Le contenu de la barre latérale est bien organisé et axé sur le contenu.
Solution unique à la boîte "Speech Bubble" dans la barre latérale.
Beaucoup d'informations partagées basées sur le contenu.

8. FeelWire

Feelwire est un autre exemple étonnant de grands espaces. Le type noir sur fond blanc, avec de grandes nuances de gris entre les deux, ne semble jamais vieillir. Ajoutez quelques icônes aux couleurs vives et vous avez vous-même un site simple mais efficace. Il s'agit de simplicité ici (bon sang, ils n'ont qu'une page!).

Les icônes de style Web 2.0 constituent la pièce maîtresse de cette page et contribuent grandement à la cohésion du site. Ils empêchent également le site d’être envahi par du texte et donnent à l’utilisateur quelque chose de curieux.

En retournant ces icônes, j'étais vraiment content de ce que j'ai trouvé: un statut de vol stationnaire très simple qui m'a donné les informations que je cherchais, avec le très populaire Web 2.0 "Speech Bubble". Une belle touche

Dernière chose: bien que j'aime les liens rouges, qui sortent aussi de la page et interagissent bien avec les icônes, je pense qu'ils devraient rendre le lien de contact un peu plus perceptible. Pour le moment, c'est un peu trop intégré au contenu, et j'ai vraiment dû chercher un moyen d'entrer en contact avec ces développeurs talentueux. Just sayin '.

Aspects traditionnels:

Court, doux et au point: un site d'une seule page.
Espace blanc!
Des choix de police subtils et de bon goût.
Nice, mise en page de base.

Améliorations du Web 2.0:

Les icônes glacées apparaissent bien sur la page.
Les renversements vraiment cool sur les icônes permettent de garder le site épuré, tout en vous donnant les informations dont vous avez besoin de manière amusante.
De beaux avatars ajoutent un élément humain.

9. Agami Creative

Ok, peut-être que c'est juste une chose personnelle avec ces sites très texturés, mais ce que fait Agami Creative, ça marche très bien. C'est un autre exemple contemporain de la façon dont les sites à forte densité d'image peuvent devenir une solution parfaitement acceptable en une journée de connexions à haut débit.

La pièce maîtresse de ce site est très certainement la tête d'aquarelle, qui sert de toile de fond parfaite à la conception du logo astucieux. Il abrite également la navigation, en mettant juste assez l'accent sur son emplacement, mais sans insulter l'utilisateur (car la plupart des gens savent où trouver la navigation ces jours-ci.).

En cliquant sur la page du portfolio, vous remarquerez une mise en page avec la quantité parfaite d'espace de respiration et un système de grille solide.

Des images simples contribuent au travail et attirent le regard sur les projets individuels, comme regarder à travers le trou de la serrure jusqu'au résultat final. Tout ceci est accompagné d'une police serif sophistiquée pour les en-têtes et d'une police sans empattement hautement lisible pour le corps du texte.

Aspects traditionnels:

Plus belle utilisation de la théorie des couleurs.
Grand oeuvre d'art
Combinaison intéressante de type / polices.
Le logo artistique, dessiné à la main, a une impression qui est véhiculée sur tout le site.

Améliorations du Web 2.0:

La navigation surdimensionnée facilite les déplacements sur le site.
Ils facilitent la prise de contact.
L'utilisation d'avatars est une bonne idée (même si honnêtement je pense qu'ils auraient pu faire mieux avec cela). Je ne suis pas sûr de savoir comment le look anime est censé être lié à ce site autre que l'influence asiatique?
Aime la texture!

10. Adit Shukla

Un autre site avec une excellente approche illustrative, le concepteur Adit Shukla, sait également comment créer une superbe palette de couleurs et joue même avec une belle solution dans la barre latérale.

Pour des raisons étranges, de nombreuses barres latérales sont négligées et négligées, comme si les concepteurs avaient la permission d’ignorer les règles de la bonne conception lorsqu’ils regroupaient la barre latérale d’un site. Pas avec ce site.

Bien que le contenu soit minimal (même un peu rare), on ne peut s'empêcher d'aimer la créativité impliquée, en particulier dans l'en-tête illustratif, qui ajoute une quantité de profondeur bien nécessaire. Les onglets de navigation ci-dessus sont également intéressants.

Aspects traditionnels:

Couleurs vives.
Solutions créatives aux éléments communs, tels que la barre latérale et l'en-tête.
L'illustration ajoute beaucoup de profondeur.

Améliorations du Web 2.0:

Mise en page simple avec une illustration d'en-tête bien développée, qui abrite également la navigation.
Le grand type est efficace.
Plusieurs façons de naviguer sur le site (même si honnêtement, je ne suis pas convaincu que ce soit une si bonne chose).
Les onglets transparents sont une belle touche.

12. cuillère à crème

La première chose que vous remarquerez à propos de Cream Scoop est la sélection audacieuse de couleurs utilisées sur tout le site. Ils n'ont pas peur de prendre les couleurs de la norme, et le résultat est aussi rafraîchissant que différent.

Bien que les couleurs soient en gras, il existe également des mélanges subtils de type fort et des dégradés qui apparaissent dans tout le site. Notez que le dégradé d'arrière-plan s'allume en haut, comme le bord d'un projecteur, pour mettre en évidence la navigation par ailleurs minimale. Le type est bien organisé et équilibré, avec une sensation nettement Web 2.0.

Aspects traditionnels:

Une sélection audacieuse de couleurs, mais une sélection qui fonctionne de manière étonnamment efficace.
Navigation minimaliste qui fait le travail.
Grande utilisation de l'illustration ludique.
La mise en page est structurée mais amusante.

Améliorations du Web 2.0:

Utilisation fantastique d'un dégradé en arrière-plan.
Le bleu vif attire vraiment votre attention et le dirige vers les choses importantes.
Utilisation cool des avatars sur la page à propos (quel âge ont ces gars-là?).
Grandes polices utilisées partout.

13. Carbonica

Carbonica renonce aux dégradés et à la bonté du Web 2.0 et opte pour un look "reconstitué" qui rappelle un album. Grande utilisation de la texture et de l'animation, mais aussi une approche très amusante du type dessiné à la main.

Assurez-vous de faire défiler un peu et de regarder les icônes qui correspondent parfaitement au thème!

Aspects traditionnels:

La structure de base est en jeu.
Le lettrage artisanal va bien avec le thème du site.
L'animation est une bonne idée (mais désolé, l'utilisation de Flash garde ce point hors de la catégorie Web 2.0).

Améliorations du Web 2.0:

La texture est excellente.
Les ombres portées ajoutent une profondeur réaliste.
De belles icônes, des photos et des illustrations.

14. DSGN + DVLP

Encore une fois, le schéma de couleurs noir et blanc général fonctionne pour ce site, et ils accentuent cette direction avec des icônes propres extraites du sac à main Web 2.0.

La page d’accueil est une sorte de page d’éclaboussure, avec un bon mélange d’icônes, une mise en page solide et même un peu de photographie. Tous ces éléments se réunissent de manière sophistiquée et parviennent à émettre un peu d’énergie.

Vous remarquerez que les pages secondaires utilisent un modèle séparé à 3 colonnes pour fournir les informations. C'est vraiment un design minimaliste, mais ce n'est pas une mauvaise chose.

Aspects traditionnels:

Le noir, le blanc et le gris offrent une sensation distincte.
Bon équilibre de type sur la page d'accueil.
Le modèle de page secondaire à 3 colonnes permet un flux cohérent d'informations une fois que vous quittez la page d'accueil.

Améliorations du Web 2.0:

La sensibilisation aux médias sociaux est définitivement en jeu.
Les icônes brillantes éparpillées à travers ajoutent de la couleur nécessaire.
Bon mélange de photographie et d'icônes.
Les icônes Jumbo figurent sur les pages secondaires.

15. Marchand de Trucs

Alors peut-être que je ne peux pas parler la langue, mais cela ne signifie pas que le site ne parle pas encore de moi ... Ok, cette ligne était boiteuse, mais ce site est quand même assez mignon. Il contient des œuvres d'art merveilleuses et, derrière tout, une base solide et un contenu structuré. Pas trop mal pour quoi (je pense) semble être un magasin de magie en ligne!

Aspects traditionnels:

Une attention intense aux détails.
La théorie des couleurs est bien en jeu, et c'est une palette très impliquée.
Bonne utilisation des polices qui suivent le thème général du site.

Améliorations du Web 2.0:

Utilisation extrêmement agréable de l'illustration en tant qu'en-tête
Icônes relativement grandes.

16. Paiko

Paiko, bien que simple, est l'un de mes sites préférés sur la liste. Il s’agit d’un mélange de fonctions d’agrafes de conception traditionnelles et d’améliorations Web 2.0: un bon type de toutes les tailles (y compris les méga-titres Web 2.0), de grands espaces et, bien sûr, la grille toujours importante.

Le choix d'ajouter de la texture en arrière-plan différencie vraiment le site et ajoute une couche supplémentaire à la conception déjà solide. il est traité avec soin et n'est pas trop utilisé comme dans certains sites. Cette texture, combinée à l'attrait plus sophistiqué du site, contribue grandement à renforcer l'identité de Paiko.

Parcourez la page du portfolio pour voir un exemple d'espacement et de structure de grille, sans parler de quelques exemples amusants d'images recadrées.

Aspects traditionnels:

Une structure de grille simple à deux colonnes avec un espace de gouttière qui lui donne une sensation agréable. Cette structure est transportée sur l’ensemble du site, ce qui lui confère un flux très constant.
Crafty feel ajoute une belle touche, sans être envahissante.
Les variations de polices et les couleurs sont très sophistiquées.

Améliorations du Web 2.0:

Jumbo-text!
Le titre est énorme et très lisible, et joue bien contre le plus petit type ci-dessous.
Superbes images et mise en page sur la page du portfolio.
L'utilisation conservatrice de la texture ajoute à l'identité globale.

17. Matt Dempsey

À l'autre extrémité du spectre de texture, nous avons un site de Matt Dempsey. Maintenant, il y a certainement une chose comme trop de texture, et certains auraient un argument valable s'ils soutenaient que ce site allait trop loin.

Cependant, je l'aime toujours, et les détails m'ont conquis lorsque j'ai commencé à parcourir les informations. Matt n’a pas peur de briser quelques règles qui m’ont toujours dérangé (comme garder l’information au-dessus du pli, une idée qui, à mon avis, a été inventée lors d’une table ronde de gens qui pensent trop). de ces gens de marketing.).

En fin de compte, Matt Dempsey présente son travail et son site de manière audacieuse et "sur votre visage". Et briser quelques règles, c'est être un concepteur, que les règles soient anciennes ou nouvelles.

Aspects traditionnels:

Croyez-le ou non, il existe un système de grille simple sous-jacent à la texture.
Distinct et unique
Pas peur de casser quelques règles

Améliorations du Web 2.0:

Matt utilise évidemment une approche Web 2.0 pour ses polices et son logo
Bonne utilisation de la technologie sur les pages intérieures (le curseur JavaScript est une touche cool).
Chaque information importante est énorme et facile à lire.
Portfolio présente le travail de manière amusante et high-tech.

18. Mash numérique

Avec Digital Mash, vous pouvez constater que beaucoup d’éléments ont été inclus dans les éléments qu’ils souhaitaient inclure dans le site ou, mieux encore, dans les éléments qu’ils avaient choisi de ne pas inclure.

Être capable de réduire la graisse est une pratique importante pour tout concepteur, et Digital Mash présente les bases, et seulement les bases. Ouvrez la page et vous saurez en quelques secondes ce dont parle l'auteur du site.

Le dégradé lisse de l'arrière-plan permet de présenter le contenu de manière sophistiquée. Du type propre au graphique percutant de l'illustration, le site reste simple.

La meilleure partie doit être lorsque vous approfondissez le site. Rendez-vous sur la page de travail et vous trouverez un portfolio présenté de manière presque démodée. Les pièces individuelles ont l'air d'être prêtes à être imprimées et reliées dans une mallette en cuir.

Cependant, la présentation élégante, les ombres à paupières et les petits détails (tels que les coins légèrement pliés de chaque pièce) lui confèrent un aspect contemporain. Combiner le nouveau et l'ancien. Je dois l'aimer.

Aspects traditionnels:

Élimination des éléments inutiles.
Les couleurs vibrantes sur la page d'accueil et dans l'en-tête des pages secondaires ajoutent un accent dynamique au fond gris.
La hiérarchie de l'information est forte, tout comme le flux général du site.

Améliorations du Web 2.0:

Présentation étonnante des images du portfolio; les ombres à paupières, les bords retournés et les petits détails font vraiment passer ce site à un niveau supérieur.
Un beau dégradé en arrière-plan présente bien l'information.
Les images de grande taille et surdimensionnées sont agréables à regarder.
Solution de navigation très cool.

19. Kyan Media

Kyan Media est un autre site fortement axé sur le Web 2.0. Le design du nuage et la palette de couleurs bleues éclatantes sont directement issus du livre, mais c'est un exemple extrêmement fort de la norme.

Le site le joue droit, et en grosses lettres vous indique exactement ce qu’il fait, suivi d’exemples de travaux. C'est une stratégie de conception simple trouvée dans d'innombrables sites, et pour une bonne raison. Il est rapide et ne menace pas une courte durée d'attention.

Et, comme tous les bons exemples, il englobe la technologie tout comme les règles de conception traditionnelles. Prenez le temps de survoler les exemples de travail. C'est un moyen amusant et informatif de présenter des articles de portfolio, et nous permet, en tant qu’utilisateur, de creuser plus profondément ou d’obtenir les bases en un coup d’œil.

Aspects traditionnels:

Tout a une sensation extrêmement solide.
La disposition générale de chaque page est forte
La hiérarchie informationnelle est excellente.
Les polices, les en-têtes et les couleurs de police sont cohérents.

Améliorations du Web 2.0:

Palette de couleurs bleu vif.
Utilisation amusante de l'illustration (qui n'aime pas les nuages?).
Punchy photography.
Bonne mise en œuvre de la technologie.
Les ombres portées subtiles ajoutent de la profondeur.
Polices très lisibles et en-têtes surdimensionnés.

20. Rockatee

Eh bien, il est dit "Design fonctionnel" dans l'en-tête, donc il a eu un meilleur travail, non? Heureusement, ce site le fait. C'est un autre exemple de la façon dont la texture se glisse sur le marché du design web et confirme l'idée que nous sommes bien dans l'ère de la navigation haut débit.

Ce que vous remarquerez peut-être, c'est que Rockatee a plusieurs projets exposés dans la section portfolio, donc une solution rationalisée était définitivement en ordre. Ils l'ont fait avec une série d'instantanés, qui illustrent la profondeur de leur portefeuille prolifique. Faites-vous une faveur et vérifiez-le.

Une autre caractéristique importante est la navigation agréable. Il est bien placé et rend le site facile à cliquer. Ils vous aident même sur la page d'accueil avec un gros bouton qui mène au portfolio.

Aspects traditionnels:

Tout a une sensation extrêmement solide.
La disposition générale de chaque page est forte.
La théorie des couleurs est bien explorée et mise en œuvre.
Forte attention aux détails.

Améliorations du Web 2.0:

Navigation fantastique
De gros boutons vous mènent aux bits importants.
Cool "snapshot" portefeuille avec de grandes récoltes des œuvres individuelles.
Site présente les nombreux projets parallèles des concepteurs, mais ne les empêche pas de faire obstacle aux éléments centraux.
Excellente idée avec la chronologie sur la page "À propos".

21. Les choses qui sont brunes

Un autre de mes favoris personnels est les choses qui sont brunes. Ils créent un site extrêmement soigné qui est égal à (ou meilleur que) les sites créés par les grandes agences, mais ils vous donnent également un aperçu des personnes en coulisses.

La page à propos contient d'excellentes photographies qui, bien que suffisamment professionnelles, ont aussi un attrait très artisanal. Vous pouvez dire que l’équipe a fait un voyage à l’extérieur, a exploré un endroit décent et a pris quelques clichés avec ses propres appareils photo numériques.

Une équipe professionnelle, mais accessible et amicale, est exactement le type d’équipe avec laquelle je veux travailler. Ces personnes sont réelles.

C'est l'un de ces rares sites qui fusionne de manière transparente des règles de conception solides avec des réglages modernes. Leur slogan, "Humbly Awesome", est mort.

Aspects traditionnels:

Belle couleur avec de superbes accents.
Bon usage des œuvres d'art qui s'intègre bien.
Solide et cohérent partout.

Améliorations du Web 2.0:

La navigation est propre et facile à lire.
De jolis boutons qui ne font pas trop la brillance.
La photographie est personnelle et ajoute une touche humaine au site.
Le portfolio est clair et facile à naviguer, avec une excellente présentation du travail.
Les titres sont volumineux mais sophistiqués.

22. Andrew Bradshaw

C'est peut-être l'un des sites les plus sophistiqués de la liste. Andrew a un excellent moyen de mailler la texture, le type, les boutons et la photographie en un paquet figé. Il garde également à l'esprit la hiérarchie, en accentuant les aspects importants et en minimisant les sections susceptibles de ne pas intéresser tous les utilisateurs.

La navigation est un surlignage, avec des couleurs variables apparaissant lorsque vous survolez les onglets. une touche très élégante.

À noter également l’en-tête texturé et le choix de police fort utilisé dans son logo. Encore une fois, Andrew combine la subtilité et les accents pour créer un site magnifique, complet et convaincant.

Aspects traditionnels:

Attrait général de sophistication propre.
Bonne utilisation des éléments d'accent, à la fois en couleur et avec le type.
Comme d'habitude, un système de grille solide le maintient ensemble.
La hiérarchie est bien mise en œuvre.

Améliorations du Web 2.0:

Des boutons de prise de vue différents.
Utilisation brillante de la photographie et de la présentation d'images.
Détails impressionnants dans la navigation.

23. James Lai

Dernièrement, j'ai quelque chose pour les sites Web à page unique, et comme vous l'avez probablement deviné, je suis aussi un aspirant pour la texture. Entrez James Lai, un designer qui sait se présenter grâce à une utilisation sophistiquée du type, de la texture et de l'animation.

Ce que je félicite le plus, c'est sa capacité à conserver son site sur une seule page, et pardonnez-nous la page "Tout sur moi" que l'on trouve sur pratiquement tous les sites. Bien que j'accorde une grande valeur à l'élément humain, parfois, le travail parle de lui-même et je ne peux pas reprocher à un gars de croire en ses propres compétences.

Aspects traditionnels:

Solution simple, à une seule page.
L'animation ajoute de l'intérêt à la présentation (bien que cela ralentisse un peu le site).
Bonne attention aux détails.

Améliorations du Web 2.0:

Un énorme type sur la page d'accueil vous indique le but exact du site.
Les informations de contact sont faciles à trouver.
Les miniatures fraîches aident les utilisateurs à naviguer dans le portefeuille.
Utilisation intéressante de la texture.

24. Subvertir

Subvert a été inclus non seulement pour son agencement fonctionnel, mais aussi pour le diaporama en fondu sur la page d’accueil. La présentation est amusante, mais elle est également informative et précieuse pour les clients potentiels.

La texture d'arrière-plan est complétée par des détails transparents, y compris un excellent système de navigation avec des onglets transparents! Le statut de survol de cette navigation est subtil et maintient la transparence.

J'ai tendance à naviguer directement sur les pages de travail de ces sites, et Subvert ne déçoit pas dans sa présentation. La structure de la grille est solide et facile à naviguer, et en cliquant, l'utilisateur est amené à une vue élargie du travail.

Aspects traditionnels:

Grand flux global.
Forte présentation du portfolio sur la page "Work".

Améliorations du Web 2.0:

Type énorme présenté sur un diaporama en fondu.
Onglets de navigation transparents!
Les boutons sont sympas et ajoutent un bon contraste aux arrière-plans.
Le diaporama du bureau sur la page "Société" est une bonne idée.
Embrasse la technologie.

25. Projet sur les oiseaux jaunes

À première vue, ce site peut paraître un peu échevelé ou dispersé, mais plus je le regarde et plus je navigue dans ses pages, plus j'ai remarqué la force de son organisation. Mieux encore, le design inspiré de l'Indie commence à attirer plus longtemps le séjour, et l'aspect épars du site correspond en fait au thème.

Si vous jetez un œil à la galerie de photos, vous verrez un grand nombre de photos d'amateurs qui ajoutent encore au look indé, tout en présentant le produit.

Cette approche clandestine, rendue populaire par des sites comme threadless.com, attache immédiatement le spectateur au produit.

Ils veulent faire partie de la foule et ne se sentent pas comme si quelqu'un essayait de leur vendre quelque chose. Si ce n'est pas une philosophie Web 2.0, je ne suis pas sûr de ce que c'est.

Aspects traditionnels:

Crafty logo établit vraiment la sensation, qui est effectuée sur l'ensemble du site.
Bien qu’il se sente dispersé ou flou au début, on se rend compte que ce look "mis en place" est exactement ce que les concepteurs recherchaient. Ils arrachent le regard tout en facilitant la navigation sur le site.
Approche cohérente et non traditionnelle.

Améliorations du Web 2.0:

C'est plus sur la philosophie avec celle-ci. Bien que l’aspect social du Web 2.0 soit pleinement effectif, ce site est également très performant en raison de son approche marketing virale et de sa grande philanthropie sous-jacente.
Construit une communauté!
De superbes photos et une navigation facile ne font pas de mal non plus.

En clôture ...

Le Web 2.0 est une norme difficile à définir , car lorsque les normes de conception traditionnelles constituent un ensemble rigide de règles et de directives (structure de grille, théorie des couleurs, espacement des lettres, crénage, suivi, etc.), le Web 2.0 presque plus encore un mode de vie.

Il combine la philosophie, le marketing, la technologie, la facilité d'utilisation et d'innombrables autres aspects de notre univers achalandé dans le but ultime de faciliter les choses pour les masses.

À cet égard, le Web 2.0 et les règles traditionnelles établies il y a longtemps partagent finalement le même objectif: organiser le chaos et simplifier le complexe .

Ces jours-ci, le concert peut être difficile, nous avons donc besoin de tous les outils à notre disposition, qu’ils soient à la fine pointe ou qu’ils aient été éprouvés au cours des siècles passés.

Écrit exclusivement pour WDD par Josh Sears. Il est écrivain, illustrateur et concepteur pour de nombreux projets Web. Il gagne sa vie en tant que concepteur Web principal, directeur créatif et copropriétaire de Littlelines.com . Vous pouvez Découvrez son travail ici , ou suivre ses mises à jour sur Twitter .

Comment utilisez-vous les éléments Web 2.0 avec un design traditionnel? Veuillez partager des exemples de votre propre portefeuille ou d'autres bons exemples que vous avez peut-être rencontrés.

règles de conception compilation de dessins traditionnel Web 2.0