Los diez principios del buen diseño

Estaba viendo el vídeo de Objetified (http://player.vimeo.com/video/50944978)  y me encantaron las palabras de Dieter Rams definiendo lo que el diseño debería de ser, para mi lo mejor es: Good design is as little design as possible que sería “El buen diseño es aquel que se diseña de forma mínima”

Una lista de principios para el buen diseño es:

  • El buen diseño es innovador.
  • El buen diseño hace útil un producto.
  • El buen diseño es estético.
  • El buen diseño hace un producto comprensible.
  • El buen diseño es discreto.
  • El buen diseño es honesto.
  • El buen diseño tiene un valor duradero.
  • El buen diseño es consecuente
  • El buen diseño es diseño en su absoluta mínima expresión

Bordes redondeados en IE

Hoy explicaremos paso por paso lo que hay que hacer para poder tener bordes redondeados en todos los navegadores, y en especial en el que suele dar más problemas en este tema, el Internet Explorer.

Pasos a seguir:

  • Descargarse de DillerDesign el archivo js (yo he cogido el de mínimo tamaño puesto que realmente no voy a modificarlo). En caso de que lo hayan eliminado tb puedes descargarlo aquí.
  • Incluir ese js en el head.
<script src="/js/DD_roundies_0.0.2a-min.js"></script>
  • Al cuadro que queramos redondear le ponemos una clase que le identifique. Aquí lo haremos llamándolo por ejemplo “cuadro”.
<div class="cuadro">lo que queramos poner </div>
  • Justo al comienzo del body, pondremos.
<script type="text/javascript"></script>

¿Y qué significa esa última línea de código?

  • Primer parámetro ‘.cuadro’ indica la clase del div que queremos redondear.
  • Segundo parámetro ’10px 10px 10px 10px’ Qué redondeo queremos darle a cada una de las esquinas, en este caso a todas le damos 10px de redondeo.
  • Tercer parámetro false, significa que sólo querremos mostrarlo en el caso de que el usuario lo vea en IE. En el caso en que estemos en Firefox, Ópera, Chrome,… podremos hacerlo mediante css sin que añada líneas de código innecesarias.

Nota: Por Internet hay muchos sitios en donde se explica como hacerlo, pero en el 80% de las webs visitadas era erróneo, no sabéis cuanto tiempo he perdido viéndolo. Menos mal que encontré esta página, que es de donde he sacado esta forma, compatible con IE8 e IE7 (no he mirado más allá)

Bordes redondeados con Photoshop

Hoy voy a explicar cómo hacer unos bordes redondeados a una imagen mediante la herramienta photoshop. Los pasos a seguir son:

  • Abrir la imagen en cuestión.
  • Desbloquearla (al principio tendrá un candado al lado de la capa, clicamos dos veces sobre la capa, le damos a ok y ya la tendremos desbloqueada).
  • Mediante la herramienta selección (la del rectangulito) seleccionamos toda la capa y vamos a Selección->Modificar->Redondear y le introducimos por ejemplo 5 píxeles
  • Selección invertir y una vez que estén seleccionados sólo los bordes darle a suprimir.
  • Y ya tenemos una imagen con los bordes redondeados!!!!!!!

¿Por qué separar contenidos y diseño al crear una web?

Hoy voy a dar una serie de razones por las cuáles es conveniente, bueno y necesario crear una web cuyo contenido y diseño se encuentren separados. Estas son:

  • Una mejor indexación en los distintos buscadores: Los robots calificarán mejor nuestros contenidos debido a que no se encontrarán ningún elemento de diseño de en medio.
  • Reducción del tamaño global: Se minimiza el contenido redundante entre páginas, lo cual significa que se reduce el tamaño de la página a cargar, algo ventajoso para el usuario (le tardará menos en aparecer) y también para nosotros (menor carga de trabajo y transferencia de datos en nuestros servidores).
  • Maximiza la audiencia potencial: Es mucho más fácil solucionar los problemas de accesibilidad (mantener versiones para PDAs, teléfonos móviles, etc…) y usabilidad (hacer sitios para personas con minusvalía)
  • Excelente portabilidad: Los cambios menores o globales tanto de diseño como de contenido serán infinitamente más sencillos y rápidos.

Ejemplo de cómo hacer un Aston Martin en 7 horas (a cámara rápida)

Realmente es increible el resultado de esta pintura con Photoshop CS y con una tbla digital Wacom Intuos 4

Aquí tenéis la imagen real.

Aquí tenéis el resultado:

Y en este video podéis ver todo el proceso…

Realmente increible, no habría caido en el dibujo si no hubiera sido por la matrícula…. Visto en esta página.