25 Ejemplos de Web 2.0 y reglas de diseño tradicionales que se unen

En el amplio ámbito del mundo del diseño, el término "Web 2.0" es relativamente nuevo.

Con esto, viene su propio conjunto de estándares, algunos fuertes, otros no tan fuertes, ya que la Web 2.0 en sí misma es una definición muy variable y en constante evolución de los estándares de diseño .

Innumerables ejemplos de sitios Web 2.0 han roto las reglas de lo que alguna vez se consideró un diseño fuerte.

Por otro lado, en muchos casos, la Web 2.0 ha fortalecido el uso común de diseños erróneos; se centra en la usabilidad, la interfaz y la legibilidad .

En el mejor de los casos, la Web 2.0 es igual a las reglas de diseño tradicionales practicadas durante siglos, aunque sin duda es un reflejo de nuestra sociedad en su estado actual de ajetreo y bullicio.

Aquí hay una colección de 25 sitios que muestran cómo la Web 2.0 y las prácticas de diseño tradicionales se pueden unir para formar sitios web realmente impresionantes.

1. Diseño de matriz de píxeles

Josh Pyles es un tipo agradable, y también es un diseñador fantástico y disciplinado. Su última versión de Pixel Matrix es una maravilla, y hace un uso especialmente bueno del color y un sistema de grilla fuerte. Examine su cartera y verá que lleva esta práctica al trabajo de su cliente.

Si revisa la página "Acerca de" (tomando nota del buen sistema de pestañas en juego), puede ver que Josh ha incluido una bonita foto de su área de trabajo.

Debajo de esta foto se encuentra un gran equilibrio de fuentes de estilo Web 2.0, que establecen una jerarquía de información extremadamente sólida. Mantiene su propia biografía pequeña y metida en la barra lateral, y equilibra el texto más grande del área de contenido con un tipo más pequeño y sofisticado en la barra lateral.

Aspectos tradicionales:

Gran sistema de cuadrícula
Teoría maravillosa del color
Fuerte jerarquía de información

Mejoras de la web 2.0:

Hermosos degradados.
Detalles sutiles
Opciones de letra grandes y altamente legibles.
Una gran cantidad de formas de mantenerse conectado.
¡Incluso el formulario de contacto tiene una buena implementación de esquinas redondeadas!

2. MuttInk

Últimamente, la textura parece ser lo mejor desde las esquinas redondeadas, y aunque el sitio de MuttInk podría no ser clasificado como la típica Web 2.0, basta con echar un vistazo para saber que Jeremy Holmes (el hombre detrás del trabajo) es un increíble diseñador y artista gráfico .

La atención al detalle, la textura y una identidad fuerte lo ubican como un favorito personal.

Aunque los días de colores excesivamente apagados están algo detrás de nosotros (lo cual es algo bueno, en mi opinión), sigo siendo fanático de los tonos terrosos sutiles que se complementan con acentos brillantes, y MuttInk lo ha logrado brillantemente .

La turquesa sobre el beige realmente resalta y mantiene la sensación de "mesa de dibujo" que impregna el sitio. Y aunque el tipo es minúsculo, y un poco difícil de leer en lugares, todavía se ve muy bien en la página.

Aspectos tradicionales:

Extremadamente atención a los detalles.
Buen tipo (aunque quizás demasiado pequeño).
Gran identidad de marca.
Gran uso del espacio, especialmente en las páginas de cartera.

Mejoras de la web 2.0:

Gran uso de la textura.
Grandes imágenes profesionales que muestran el trabajo.
Acceso rápido a la vinculación social.

3. 45 Royale

La cartera en 45 Royale no solo muestra una increíble variedad de trabajo, sino que muestra que el equipo detrás del sitio entiende el buen uso de múltiples estándares de diseño. Es una combinación fantástica de retrocesos de la Web 2.0, pero tiene una base sólida en los estándares de diseño tradicionales (¡y solo mira esos colores!).

En particular, 45 Royale tiene uno de los mejores sistemas de grillas que he visto últimamente, y las imágenes que han elegido para mostrar el trabajo realmente combinan bien con el encabezado de color fluorescente de arriba.

Ver la teoría del color y la malla de la organización con tanta armonía es siempre una delicia, y lo han complementado con una combinación altamente sofisticada de fuentes, grandes y pequeñas.

¿Colores brillantes que rodean una paleta secundaria de gris, blanco y negro? Increíble.

Aspectos tradicionales:

Uno de los mejores ejemplos de un sistema de grillas.
Un montón de espacios en blanco y espacio para respirar.
Brillante elección de color.
Buen flujo de información.

Mejoras de la web 2.0:

Los colores simplemente cantan ... tanto que lo enumeré en ambas categorías.
El tipo de tamaño jumbo es muy legible, aunque de buen gusto.
Gran uso de ilustraciones y gráficos.
La multitud de proyectos está bien organizada y muy bien presentada.

4. Zoom de pellizco

Soy un fanático de la gran ilustración, especialmente cuando se presenta encima de un maravilloso ejemplo de espacio en blanco. Me encanta este sitio que simplemente hacer clic en la cartera es una maravilla. Gran espacio en blanco, gran sistema de grillas y maravilloso uso de JavaScript; estas cosas tienen una forma de hablarme (sí, estoy frente a una computadora bastante).

Lo importante a tener en cuenta cuando nos enfrentamos a la gran cantidad de tecnologías disponibles en la actualidad, especialmente los sofisticados desvanecimientos y artilugios que permite JavaScript, es reducirlos y mejorarlos.

¿Recuerdas los últimos años noventa cuando Flash estaba de moda? ¿Recuerdas cuan cansado de Flash todos obtuvimos después? Los buenos estándares de la Web 2.0 son tanto sobre la disciplina como sobre el diseño, y Pinch Zoom la tiene bajo control.

Ellos salpican su sitio con la bondad de lujo, sin embargo, mantenerlo delgado y divertido, con prácticamente cero tiempo de espera en las imágenes.

Aspectos tradicionales:

Otro gran sistema de cuadrícula (viendo un patrón aquí?).
Negro sobre blanco nunca parece envejecer.
Buen equilibrio de fuentes y titulares. (La letra pequeña, aunque legible, podría ser un tamaño de punto o dos más grande).

Mejoras de la web 2.0:

El control deslizante de cartera de JavaScript es muy divertido y efectivo.
La interfaz es minimalista y directa.
El uso variado de la Ilustración es un gran toque.
Abraza la tecnología actual de la web sin ser engorroso.
Soluciones únicas para el diseño de la página (Echa un vistazo a la mega-lista desplegable al hacer clic en la pestaña de información. ¡Prácticamente hay un sitio web completo escondido allí!).

5. Cameron Moll

Siempre he sido fanático del trabajo de Cameron, y como pueden ver, tiende a mantenerse en el lado tradicional del campo de juego de diseño. Aunque el sitio de su blog tiende a caer dentro del lado tradicional del diseño sofisticado y las fuentes pequeñas, no se puede negar la elegancia y belleza de su página de cartera, que es un fantástico equilibrio entre lo nuevo y lo tradicional.

Los colores son vibrantes y las opciones de fuentes combinan con la sensación general, pero de nuevo, el tipo puede ser bastante pequeño en algunos lugares, lo que es un no-electrónico de la Web 2.0. ¿Pero quién soy yo para elegir? Cameron ha encontrado un gran éxito y es el hombre detrás de Authenticjobs.com, un gran recurso para diseñadores (y uno que ayudó a pagar mis cuentas).

Aspectos tradicionales:

Contenido bien estructurado.
Las sutiles variaciones de color son un buen toque.
El tipo se ve elegante, aunque tiende a viajar en el lado pequeño del espectro. Aun así, es legible y se ve bien.

Mejoras de la web 2.0:

Muy buen uso de la textura.
La cartera contiene bonitas imágenes del trabajo, que son muy sencillas y fáciles de navegar.

6. Tema Tumblr "fluido" de Metalab

El único tema de Tumblr para hacer la lista se titula "Fluido", por diseño de Metalab. Llegó a la lista por una simple razón: es un hermoso ejemplo de lo mejor de la Web 2.0. Simple, limpio y reluciente con color.

Uno podría considerarlo un poco parcial en esta comparación (es un comodín de Web 2.0). Eso es porque Metalab es conocido por establecer estándares en el ámbito de la Web 2.0, y este sitio es un testimonio de ese hecho. Sin embargo, Metalab Design mantiene las reglas fundamentales en mente y mantiene la estructura simple y bien organizada.

La transparencia y los gráficos superpuestos son una de las tendencias más recientes en la Web 2.0. Le dan a un sitio una gran cantidad de profundidad e imbuyen una apariencia vanguardista, casi futurista. El "Fluid" de Metalab ha adoptado este concepto y, mejor aún, lo ha entregado a las masas como un tema descargable.

Aspectos tradicionales:

Estructura simple y efectiva.
Se destaca en las masas de los temas de Tumblr.
Esquema de color contemporáneo (aunque simple).

Mejoras de la web 2.0:

Fotografía grande y vibrante
Eleva la apuesta por el diseño Web 2.0 de vanguardia
Fuentes y encabezados altamente legibles.
El uso de esquinas redondeadas y gradientes se lleva al extremo, pero se presentan en una solución Web 2.0 divertida y moderna.
Los iconos son una manera excelente y minimalista de navegar por las opciones de cada publicación.
¡No nos olvidemos de los fondos transparentes!

7. Viget

Oh chico. Este sitio. Me atrapa todo el tiempo. Claro que soy un poco sofisticado con la textura, pero este diseñador también ha captado la sutileza de la buena teoría del color y la jerarquía.

¡Quiero decir, solo mira esos retratos cerca del fondo! Son llamativos, pero no compiten con lo que podría ser un flujo de diseño muy complicado. No olvidemos las magníficas opciones de fuentes y la sensación de acuarela. La guinda del pastel es que, aunque el sitio tiene una gran carga de imágenes, se carga en un abrir y cerrar de ojos.

Otro aspecto interesante de este sitio es que los diseñadores desean compartir mucha información con su comunidad, y no es información que los vende como diseñadores, sino información que consideran que los usuarios típicos pueden considerar valiosa.

Te permiten profundizar sin agobiar sus necesidades, lo que siempre es una buena práctica.

Aspectos tradicionales:

Contenido bien estructurado.
Hermoso color y tipo.
Aunque las fuentes son pequeñas, el contenido principal sigue siendo fácil de leer.
La gran obra de arte se fusiona perfectamente con el diseño (retratos geniales).

Mejoras de la web 2.0:

El tema de la acuarela es extremadamente contemporáneo, y aunque tiene una gran carga de imágenes, ha sido diseñado para ser delgado y pesado.
El contenido de la barra lateral está bien organizado y orientado al contenido.
Solución única para el cuadro "Speech Bubble" en la barra lateral.
Gran cantidad de información compartida y basada en el contenido.

8. FeelWire

Otro ejemplo sorprendente de gran espacio en blanco es Feelwire. El tipo negro sobre fondos blancos, con grandes tonos de gris en el medio, nunca parece envejecer. Agregue un par de iconos de colores brillantes, y usted mismo tiene un sitio simple pero efectivo. Aquí todo se trata de simplicidad (diablos, ¡solo tienen una página!).

Los íconos con estilo de la Web 2.0 son la pieza central de esta página, y hacen un gran esfuerzo para mantener unido el sitio. También evitan que el sitio sea saturado con texto, y le dan al usuario algo por lo que sentir curiosidad.

Al pasar sobre estos íconos, quedé muy contento con lo que encontré: un estado de desplazamiento rápido muy simple que me dio la información que estaba buscando, y lo hice con la siempre popular Web 2.0 "Speech Bubble". Un gran toque.

Lo último: aunque me gustan los enlaces rojos, que también salen de la página e interactúan bien con los iconos, creo que deberían hacer que el enlace de contacto sea un poco más notable. Por ahora está demasiado metido en el contenido, y realmente tuve que buscar la manera de contactar a estos talentosos desarrolladores. Sólo digo'.

Aspectos tradicionales:

Corto, dulce, y al grano: un sitio de una sola página.
Espacio en blanco!
Opciones de letra sutiles y de buen gusto.
Agradable, diseño básico.

Mejoras de la web 2.0:

Los iconos brillantes salen de la página, en una buena forma.
Los rollovers realmente geniales en los iconos mantienen el sitio ordenado, pero le brindan la información que necesita de una manera divertida.
Bonitos avatares agregan un elemento humano.

9. Agami Creative

De acuerdo, tal vez sea algo personal con estos sitios de alta textura, pero lo que Agami Creative hace, lo hace muy bien. Es otro ejemplo contemporáneo de cómo los sitios de imágenes pesadas pueden convertirse en una solución perfectamente aceptable en un día de conexiones de alta velocidad.

La pieza central de este sitio es sin duda el encabezado de acuarela, que sirve como un telón de fondo perfecto para el diseño del logotipo astuto. También alberga la navegación, poniendo suficiente énfasis en su ubicación, pero sin insultar al usuario (porque la mayoría de la gente sabe dónde encontrar la navegación en estos días).

Al hacer clic en la página de la cartera, observará un diseño con la cantidad perfecta de espacio para respirar y un sistema de grilla fuerte.

Las imágenes simples contribuyen al trabajo y atraen la atención de los proyectos individuales, como mirar a través del ojo de la cerradura al resultado final. Todo esto está envuelto con una fuente serif sofisticada para los encabezados y una fuente sans-serif altamente legible para el texto del cuerpo.

Aspectos tradicionales:

Un uso más hermoso de la teoría del color.
Gran obra de arte.
Interesante combinación de tipo / fuente.
El logotipo artístico dibujado a mano tiene una sensación que se transmite a través del sitio.

Mejoras de la web 2.0:

La navegación de gran tamaño facilita el desplazamiento por el sitio.
Lo hacen realmente fácil ponerse en contacto.
El uso de avatares es una buena idea (aunque, sinceramente, creo que podrían haberlo hecho mejor con estos. ¿No estoy seguro de cómo se supone que el aspecto del anime se combina con este sitio además de la influencia asiática?).
Amo la textura!

10. Adit Shukla

Otro sitio con un gran enfoque ilustrativo, el diseñador Adit Shukla también sabe cómo armar un gran esquema de color, e incluso juega con una buena solución para la barra lateral.

Por alguna extraña razón, muchas barras laterales son descuidadas y se pasan por alto, como si los diseñadores tuvieran permiso para ignorar las reglas del buen diseño al tirar juntos la barra lateral de un sitio. No con este sitio

Aunque el contenido es mínimo (incluso un poco escaso), uno no puede evitar amar la creatividad involucrada, especialmente en el encabezado ilustrativo, que agrega una cantidad de profundidad muy necesaria. Las pestañas de navegación arriba también son un buen toque.

Aspectos tradicionales:

Colores vibrantes.
Soluciones creativas para elementos comunes, como la barra lateral y el encabezado.
La ilustración agrega mucha profundidad.

Mejoras de la web 2.0:

Diseño simple con una ilustración de cabecera bien desarrollada, que también alberga la navegación.
El tipo grande es efectivo.
Múltiples formas de navegar el sitio (aunque honestamente, no estoy convencido de que esto sea tan bueno).
Las pestañas transparentes son un buen toque.

12. Cream Scoop

Lo primero que notará sobre Cream Scoop es la audaz selección de colores utilizados en todo el sitio. No tienen miedo de tomar los colores una muesca de la norma, y el resultado es tan refrescante como diferente.

Aunque los colores son audaces, también hay mezclas sutiles de tipo fuerte y degradados que se salpican en todo el sitio. Observe cómo el gradiente de fondo se ilumina en la parte superior, como el borde de un reflector, para resaltar la navegación que de otro modo sería mínima. El tipo está bien organizado y equilibrado, con una sensación distintiva de Web 2.0.

Aspectos tradicionales:

Selección en negrita de colores, pero una selección que funciona de manera sorprendentemente efectiva.
Navegación minimalista que hace el trabajo.
Gran uso de la ilustración lúdica.
El diseño es estructurado pero divertido.

Mejoras de la web 2.0:

Fantástico uso de un degradado en el fondo.
El azul brillante realmente capta su atención y lo dirige a lo importante.
Buen uso de los avatares en la página de arriba (¿cuántos años tienen estos tipos?).
Grandes fuentes utilizadas en todo.

13. Carbonica

Carbonica renuncia a los gradientes y la bondad brillante de la Web 2.0 y opta por un aspecto "reconstruido" que recuerda a un álbum de recortes. Gran uso de la textura y la animación, pero también una forma divertida de dibujar a mano.

Asegúrese de desplazarse un poco hacia abajo y verifique los iconos, que también se ajustan perfectamente al tema.

Aspectos tradicionales:

La estructura básica está en juego.
Las letras hechas a mano van bien con el tema del sitio.
La animación es un buen toque (pero lo siento, el uso de Flash mantiene este punto fuera de la categoría Web 2.0).

Mejoras de la web 2.0:

La textura es genial
Las sombras paralelas añaden profundidad realista.
Bonitos iconos, fotos e ilustración.

14. DSGN + DVLP

Una vez más, el esquema general de color en blanco y negro funciona para este sitio, y acento en esta dirección con algunos íconos limpios sacados directamente del bolso Web 2.0.

La página de inicio se destaca por sí sola como una especie de página de bienvenida, y tiene una buena combinación de iconos, diseño fuerte e incluso un poco de fotografía. Todos estos elementos se combinan de una manera sofisticada y logran emitir bastante energía.

Notará que las páginas secundarias usan una plantilla separada de 3 columnas para mostrar la información. Es todo un diseño minimalista, pero eso no es malo.

Aspectos tradicionales:

Negro, blanco y gris ofrecen una sensación distinta.
Buen equilibrio de tipo en la página de inicio.
La plantilla de página secundaria de 3 columnas permite un flujo constante de información una vez que navega fuera de la página de inicio.

Mejoras de la web 2.0:

La conciencia de las redes sociales definitivamente está en juego.
Los íconos brillantes dispersos en todo agregan el color necesario.
Buena combinación de fotografía e iconos.
Los iconos Jumbo aparecen en las páginas secundarias.

15. Marchand de Trucs

Así que tal vez no puedo hablar el idioma, pero eso no significa que el sitio aún no me esté hablando ... De acuerdo, esa línea era coja, pero aún así este sitio es bastante dulce. Contiene obras de arte maravillosas y, detrás de todo, una gran base y contenido estructurado. No está mal para lo que (creo) parece ser una tienda de magia en línea!

Aspectos tradicionales:

Intensa atención al detalle.
La teoría del color está en juego, y es una paleta muy involucrada en eso.
Buen uso de las fuentes que siguen el tema general del sitio.

Mejoras de la web 2.0:

Muy buen uso de la ilustración como encabezado
Íconos relativamente grandes.

16. Paiko

Paiko, aunque simple, es uno de mis sitios favoritos en la lista. Se presenta como una mezcla dividida de elementos básicos de diseño tradicional y mejoras de la Web 2.0: un buen tipo de todos los tamaños (incluidos los mega titulares de la Web 2.0), un gran espacio en blanco y, por supuesto, la grilla siempre importante que lo mantiene todo junto.

La opción de agregar textura en el fondo realmente diferencia el sitio, y agrega otra capa al diseño ya fuerte; se trata con cuidado, y no se usa demasiado, ya que es en algunos sitios. Esta textura, combinada con el atractivo más sofisticado del sitio, ayuda mucho a fortalecer la identidad de Paiko.

Navegue a la página de la cartera para ver un ejemplo de gran espaciado y estructura de cuadrícula, por no mencionar algunos ejemplos divertidos de imágenes bien recortadas.

Aspectos tradicionales:

Estructura de rejilla simple de dos columnas con espacio en el canal que le da una agradable sensación de amplitud. Esta estructura se lleva a cabo en todo el sitio, lo que le da un flujo muy constante.
La sensación astuta agrega un toque agradable, sin ser dominante.
Las variaciones de fuente y el color son muy sofisticados.

Mejoras de la web 2.0:

Jumbo-texto!
El titular es enorme y muy legible, y juega muy bien contra el tipo más pequeño a continuación.
Excelentes imágenes y diseño en la página de la cartera.
El uso conservador de la textura se agrega a la identidad general.

17. Matt Dempsey

En el otro extremo del espectro de textura, tenemos un sitio de Matt Dempsey. Ahora, definitivamente hay algo como demasiada textura, y algunos tendrían un punto válido si argumentaran que este sitio llega demasiado lejos.

Sin embargo, todavía me gusta, y los detalles me conquistaron a medida que comencé a examinar la información. Matt no tiene miedo de romper algunas reglas que siempre me han molestado (como mantener la información en el redil, una idea que creo que fue inventada en una mesa redonda sobre gente de marketing que piensa demasiado. Lo digo porque una vez fui uno de esas personas de marketing.).

Cuando se llega a eso, Matt Dempsey presenta su trabajo, y su sitio, de una manera audaz y "en su cara". Y romper con algunas reglas es de lo que se trata ser diseñador, ya sea que las reglas sean antiguas o nuevas.

Aspectos tradicionales:

Lo creas o no, hay un sistema de grilla simple subyacente a la textura.
Distinto y único
Sin miedo a romper algunas reglas

Mejoras de la web 2.0:

Matt usa un enfoque obviamente Web 2.0 para sus fuentes y logotipo
Buen uso de la tecnología en las páginas interiores (el control deslizante JavaScript es un toque genial).
Toda la información importante es enorme y fácil de leer.
Portfolio presenta el trabajo de una manera divertida y de alta tecnología.

18. Mash digital

Con Digital Mash, puede ver que se pensó mucho en los elementos que deseaban incluir en el sitio, o mejor aún, en los elementos que eligieron omitir.

Ser capaz de reducir la grasa es una práctica importante para cualquier diseñador, y Digital Mash establece lo básico y solo lo básico. Abra la página y sabrá en segundos de qué se trata el autor del sitio.

El suave degradado del fondo hace un gran trabajo al presentar el contenido de una manera sofisticada. Desde el tipo limpio hasta el gráfico llamativo de la ilustración, el sitio lo mantiene simple.

La mejor parte tiene que ser cuando profundizas en el sitio. Dirígete a la página de trabajo y encontrarás un portafolio presentado de una manera casi anticuada; las piezas individuales lucen como si estuvieran listas para ser impresas y encuadernadas en una caja de cuero.

Sin embargo, la presentación elegante, las sombras de gotas y los pequeños detalles (como las esquinas ligeramente dobladas de cada pieza) le dan a todo un sesgo contemporáneo. Combinando lo nuevo y lo viejo. Voy a amarlo.

Aspectos tradicionales:

Recortar elementos innecesarios.
Los colores vibrantes en la página de inicio y en el encabezado de las páginas secundarias añaden un acento vibrante al fondo gris.
La jerarquía de la información es sólida, al igual que el flujo general del sitio.

Mejoras de la web 2.0:

Impresionante presentación de las imágenes de la cartera; sombras de gotas, bordes hacia arriba y pequeños detalles realmente traen este sitio a un nivel más alto.
Un buen degradado en el fondo realmente presenta bien la información.
El tipo grande y las imágenes de gran tamaño son amigables para los ojos.
Muy buena solución de navegación.

19. Kyan Media

Kyan Media es otro sitio que se apoya fuertemente en el lado de la Web 2.0 del espectro. El diseño de la nube y la paleta de color azul vibrante son directamente del libro, pero es un ejemplo extremadamente fuerte del estándar.

El sitio lo reproduce de forma recta, y en letras grandes te dice exactamente lo que hacen, seguido de ejemplos del trabajo. Es una estrategia de diseño simple que se encuentra en innumerables sitios, y por una buena razón. Es rápido y no representa una amenaza breve.

Y, como todos los buenos ejemplos, abarca tanto la tecnología como las reglas de diseño tradicionales. Tómate un tiempo y pasa el cursor sobre los ejemplos de trabajo. Es una forma divertida e informativa de presentar las piezas destacadas del portafolio, y nos permite, el usuario, profundizar más o obtener los conceptos básicos con solo un vistazo.

Aspectos tradicionales:

Todo tiene una sensación extremadamente sólida.
El diseño general de cada página es fuerte
La jerarquía informacional es genial.
Las fuentes, los encabezados y los colores de fuente son consistentes en todo.

Mejoras de la web 2.0:

Paleta de colores azul brillante.
Uso divertido de la ilustración (¿a quién no le gustan las nubes?).
Punchy fotografía.
Buena implementación de tecnología.
Sutil dropshadows agregar profundidad.
Fuentes altamente legibles y encabezados de gran tamaño.

20. Rockatee

Bueno, dice "Diseño funcional" en el encabezado, por lo que tenía un mejor trabajo, ¿verdad? Afortunadamente, este sitio sí. Es otro ejemplo de cómo la textura se está infiltrando en el mercado del diseño web y confirma la noción de que estamos en la era de la navegación a gran velocidad en la Web.

Algo que puede notar es que Rockatee tiene bastantes proyectos en exhibición en la sección de portafolios, por lo que una solución racionalizada definitivamente estaba en orden. Lo hicieron con una serie de instantáneas que muestran la profundidad de su cartera prolífica. Hazte un favor y revísalo.

Otra característica de la nota es la buena navegación. Está bien ubicado y hace que el sitio sea muy fácil de hacer clic. Incluso te ayudan en la página de inicio con un botón grande que conduce a la cartera.

Aspectos tradicionales:

Todo tiene una sensación extremadamente sólida.
El diseño general de cada página es sólido.
La teoría del color está bien explorada e implementada.
Fuerte atención al detalle.

Mejoras de la web 2.0:

Fantástica navegación
Los grandes botones te llevan a los bits importantes.
Enfriar cartera "instantánea" con grandes cultivos de las obras individuales.
El sitio muestra a los diseñadores muchos proyectos paralelos, pero no les permite interponerse en el camino de los elementos centrales.
Gran idea con la línea de tiempo en la página "Acerca de".

21. Cosas que son marrones

Otro de mis favoritos personales es Things That Are Brown. Sacan un sitio extremadamente pulido que es igual a (o mejor que) sitios creados por grandes agencias, pero también le dan una mirada interna a las personas detrás de las escenas.

La página Acerca de contiene una gran fotografía que, aunque es lo suficientemente profesional, también tiene un atractivo muy casero. Se nota que el equipo hizo un viaje al exterior, exploró un lugar decente y tomó algunas instantáneas con sus propias cámaras digitales.

Un equipo profesional, accesible y amistoso es exactamente el tipo de equipo con el que quiero trabajar. Estas personas son reales.

Este es uno de esos sitios raros que fusiona sin problemas reglas de diseño fuertes con ajustes modernos. Su lema, "Humbly Awesome", está muerto.

Aspectos tradicionales:

Buen color con grandes acentos.
Buen uso de obras de arte que se integra bien.
Sólido y consistente en todo.

Mejoras de la web 2.0:

La navegación es limpia y fácil de leer.
Bonitos botones que no exageran el brillo.
La fotografía es personal y agrega un toque humano al sitio.
La cartera es clara y fácil de navegar, con una excelente presentación del trabajo.
Los titulares son grandes, pero sofisticados.

22. Andrew Bradshaw

Este es quizás uno de los sitios más sofisticados en la lista. Andrew tiene una excelente forma de combinar la textura, el tipo, los botones y la fotografía en un paquete congelado. También tiene en cuenta la jerarquía, acentúa los aspectos importantes y minimiza las secciones que pueden no ser de interés para todos los usuarios.

La navegación es destacada, con diferentes colores que aparecen al pasar el mouse sobre las pestañas; un toque muy elegante.

También cabe destacar el encabezado con textura y la opción de letra fuerte utilizada en su logotipo. Nuevamente, Andrew combina sutileza y acentos para crear un hermoso sitio que es minucioso y convincente en todo momento.

Aspectos tradicionales:

El atractivo general de la sofisticación limpia.
Buen uso de elementos de acento, tanto en color como con tipo.
Como de costumbre, un sistema de grilla fuerte lo mantiene unido.
La jerarquía se implementa bien.

Mejoras de la web 2.0:

Una toma de botones diferente.
Brillante uso de la fotografía y la presentación de imágenes.
Detalles increíbles en la navegación.

23. James Lai

Últimamente, me encantan los sitios web de una sola página, y como probablemente ya hayas adivinado, también me gustan las texturas. Entra James Lai, un diseñador que sabe cómo presentarse a través de un uso elegante del tipo, la textura y la animación.

Lo que más lo elogio es su capacidad para mantener su sitio en una sola página, y nos perdone la página "Todo sobre mí" que se encuentra en prácticamente todos los sitios. Aunque valoro mucho el elemento humano, a veces el trabajo habla por sí mismo, y no puedo culpar a un hombre por creer en su propio conjunto de habilidades.

Aspectos tradicionales:

Solución simple de una sola página.
La animación agrega interés a la presentación (aunque ralentizó el sitio un poco en mi extremo).
Buena atención al detalle.

Mejoras de la web 2.0:

Enorme tipo en la página de inicio le dice el propósito exacto detrás del sitio.
La información de contacto es fácil de encontrar.
Las miniaturas geniales ayudan a los usuarios a navegar por la cartera.
Interesante uso de la textura.

24. Subvertir

Subvert se incluyó no solo por su diseño obviamente funcional, sino también por la presentación de diapositivas que se desvanecía en la página de inicio. La presentación es divertida, pero también es informativa y valiosa para los clientes potenciales.

La textura de fondo se complementa con detalles transparentes, ¡incluyendo un excelente sistema de navegación con pestañas transparentes! El estado de desplazamiento de esta navegación es sutil y mantiene la transparencia.

Tiendo a navegar directamente a las páginas de trabajo en estos sitios, y Subvert no defrauda en su presentación. La estructura de la grilla es fuerte y fácil de navegar, y al hacer clic, el usuario accede a una vista ampliada del trabajo.

Aspectos tradicionales:

Gran flujo general.
Fuerte presentación de la cartera en la página "Trabajo".

Mejoras de la web 2.0:

Enorme tipo presentado en una presentación de diapositivas que se desvanece.
Pestañas de navegación transparentes!
Los botones son agradables y añaden un buen contraste a los fondos.
Presentación de diapositivas de la oficina en la página "Compañía" es un buen toque.
Abraza la tecnología.

25. Proyecto Yellow Bird

A primera vista, este sitio puede parecer un poco desaliñado o disperso, pero cuanto más lo miro, y cuanto más hojeo sus páginas, más noto la fuerza de su organización. Mejor aún, el diseño inspirado en Indie realmente comienza a ser atractivo cuanto más larga sea la estadía, y el aspecto disperso del sitio realmente se ajusta al tema.

Si echas un vistazo a la Galería de fotos, verás una gran cantidad de fotos de aficionados que una vez más se sumarán al aspecto Indie, mientras exhiben el producto.

Este tipo de enfoque clandestino, que fue popularizado por sitios como threadless.com, inmediatamente une al espectador al producto.

Quieren ser parte de la multitud y no sienten que alguien esté tratando de venderles algo. Si esa no es una filosofía de la Web 2.0, no estoy seguro de qué es.

Aspectos tradicionales:

El logotipo astuto realmente establece la sensación, que se lleva a cabo en todo el sitio.
Aunque se siente disperso o suelto al principio, uno se da cuenta de que este aspecto de "armar juntos" es exactamente lo que los diseñadores estaban buscando. Se quitan la apariencia al mismo tiempo que hacen que el sitio sea fácil de navegar.
Enfoque consistente y no tradicional.

Mejoras de la web 2.0:

Se trata más de la filosofía con este. Mientras que el aspecto social de la Web 2.0 está en pleno efecto, este sitio también se fortalece debido a su enfoque de marketing viral y gran filantropía subyacente.
¡Construye una comunidad!
Las fotos geniales y la navegación fácil tampoco duelen.

Para concluir…

Web 2.0 es un estándar difícil de definir , ya que cuando los estándares de diseño tradicionales son una colección rígida de reglas y directrices (estructura de cuadrícula, teoría del color, espaciado entre letras, interletraje, seguimiento, etc.), la Web 2.0, aunque contiene estándares similares, es casi más que una forma de vida.

Combina filosofía, marketing, tecnología, facilidad de uso y un sinnúmero de otros aspectos de nuestro ocupado universo con el objetivo final de facilitar las cosas para las masas.

En ese sentido, la Web 2.0 y las reglas tradicionales que se establecieron hace años, en última instancia, comparten el mismo objetivo: organizar el caos y simplificar el complejo .

En estos días, puede ser difícil, por lo que necesitamos todas las herramientas a nuestra disposición, ya sean innovadoras o que hayan sido probadas durante siglos.

Escrito exclusivamente para WDD por Josh Sears. Es escritor, ilustrador y diseñador de una gran cantidad de proyectos basados en la web. Se gana la vida como diseñador web principal, director creativo y copropietario de Littlelines.com . Usted puede Echa un vistazo a su trabajo aquí , o sigue sus actualizaciones en Twitter .

¿Cómo se usan los elementos web 2.0 con el diseño tradicional? Por favor, comparta ejemplos de su propia cartera u otros buenos ejemplos que pueda haber encontrado.

reglas de diseño compilación de diseños tradicional web 2.0