Y esto es lo que tenemos...
Sin embargo, esto no nos dará suficiente profundidad. Queremos hacer que este rectángulo sea aún más visiblemente curvo, ya que no toca la superficie de manera uniforme, pero agregar más sombra usando los estilos de capa o hacer la sombra más fuerte no nos dará el efecto deseado. Utilizar esta divisor horizontal ofrecido por dezinpolio.com y agréguelo en el centro de su forma, para que se "desvanezca" hacia las esquinas, como se muestra a continuación:
Ahora, ¿recuerdas que mencionamos las letras en negrita? La Web 2.0 hace un buen uso de las fuentes, preferiblemente muy fáciles de leer, ligeramente caricaturescas y en negrita. Nos costó elegir una fuente adecuada y decidimos optar por "Cooper Std".
Estamos haciendo para agregar una sombra muy suave (# 5674a7) y degradado de luz desde el blanco en la parte superior (#ffffff) a azul claro (#cd9de) ...
Esto nos dará un diseño de bebé muy lindo.
La Web 2.0 también tiene una buena proporción y, si bien los diseños son particularmente asimétricos, otros son, por así decirlo, obsesivamente simétricos. Prefiero el segundo tipo, ya que se necesita menos originalidad y gusto para crear, todo lo que necesitas es sentido de la proporción. Digamos que agregamos algunos botones en la esquina inferior y lateral de nuestro diseño...
¿Esto se ve bien?
No, no es así porque las pestañas parecen demasiado caóticas, así que nos aseguraremos de que la línea de la pestaña del lado izquierdo "se encuentre" con la línea de la pestaña inferior, así...
Ahora parece proporcional.
En caso de que se pregunte por qué nos saltamos un paso, los estilos de capa para las pestañas son casi idénticos a los que usamos para el rectángulo principal y lo mismo ocurre con la fuente y los estilos de capa de las “pestañas”. Para fines de aprendizaje, puede descargar el archivo PSD y analizar el proceso. Recuerde que todos estos degradados semi visibles y contornos de 1 px suelen ser los que marcan la diferencia entre un gran diseño web y un intento de diseño maduro. ¡Buena suerte!
[…] Marie escribió una publicación interesante hoy en Aquí hay un breve extracto. Hay muchísimos tutoriales y guías en línea que le enseñan cómo hacer un uso efectivo del diseño web 2.0. Si bien la mayoría de estos tutoriales son útiles, al mismo tiempo matan la originalidad en el diseño web. Por ejemplo, la mayoría “guía”… […]
[…] Jacob Cass escribió una publicación interesante hoy en Aquí hay un breve extracto. Hay muchísimos tutoriales y guías en línea que le enseñan cómo hacer un uso efectivo del diseño web 2.0. Si bien la mayoría de estos tutoriales son útiles, al mismo tiempo matan la originalidad en el diseño web. Por ejemplo, la mayoría “guía”… […]
Realmente buen trabajo. Encontré mucha información profunda que puede ayudarme a seguir adelante.
Interesante tutorial. Mi pregunta es: ¿Qué hace que esto sea “Web 2.0”? La Web 2.0 no tiene nada (o poco que ver) con la apariencia de un sitio. De lo que estás hablando aquí es del diseño o simplemente del aspecto de un sitio. Eso es todo. Flickr.com es un sitio web 2.0 y realmente no utiliza ninguno de estos principios. Además, Facebook es muy simple, no utiliza sombras paralelas, esquinas redondeadas o fuentes “ligeramente caricaturescas y en negrita”, pero aun así es un sitio web 2.0. También Wikipedia…. etc…
La Web 2.0 trata sobre cómo los usuarios interactúan con el sitio y cómo el sitio interactúa con ellos.
Una buena versión del diseño web 2.0.
buen tutorial...
Me gustaría preguntar,
¿Cómo saber si es un diseño 2.0 o no?
lo siento, solo soy un novato
[…] De mensen van pswish.com hadden het al par door, maar ze maken het nu officieel: Web 2.0 is an gevaar voor de identiteit van sites sites. Artículo original […]
[…] Ver tutorial […]
Gran artículo, gracias 🙂
Además, si buscas algunas fuentes bonitas y gratuitas http://www.fonts2u.com
¡Hola! interesante pieza de diseño 🙂 pero el enlace no funciona 🙁 ¿puedo obtener este archivo psd en otro lugar? Gracias