Algunos consejos y buenas prácticas en diseño web

Estas son algunas buenas prácticas y tips que me parecen relevantes de resaltar para quieres recién comienzan en el diseño orientado a web.

Siempre Wireframes antes de Diseño Visual

img: commlogix.com

Los wireframes son representaciones esquemáticas de una página, a través de los cuales se piensan y diseñan las jerarquías de los contenidos e interacciones de las distintas secciones, sin el ruido ni la emocionalidad del diseño visual. Ya sean bocetos en papel o piezas más elaboradas, esta práctica permite ahorrar mucho tiempo de producción y correcciones posteriores. Continue reading Algunos consejos y buenas prácticas en diseño web

Imágenes en porcentaje

Una buena opción a la hora de diseñar para blogs o sitios con un contenido dinámico, es utilizar imágenes con tamaños fluidos, en porcentaje, para que se comporten en relación a su contenedor padre.

Por ejemplo, el típico problema para los editores de blog es utilizar imágenes de un máximo de ancho, para que así no desestructuren las cajas de contenido. A través de este método, es posible dar una solución a esta complicación, ajustando el width de la imagen con porcentajes, en relación a su contenedor padre.

HTML
<body>
	<div id="contenedor">
		<h1>Contenedor de la imagen</h1>
		<img src="ejemplo.jpg" alt="Flor. Ejemplo de imagen en porcentaje" title="Flor. Ejemplo de imagen en porcentaje" />
	</div>
<body>
CSS
#contenedor{
	width: 100%;
	height: 50%;
}
img{
	width: 94%;
	margin: 2% 3% 3% 3%;
}

Ver ejemplo

a:hover con background position

Cuando queremos construir anclas para botones o menús, que utilizan imágenes de fondo para sus distintos estados (link, hover, active), una buena idea para desarrollarlas es utilizar una sola imagen, trabajando con el background-position.

Primero, tenemos nuestra imagen, compuesta por los tres estados del botón o menú que construiremos. La idea es que todos los estados tengan la misma medida, para que no se produzcan descalces a la hora de moverlas con el background-position.

imagena.jpg

Luego, construimos el area activa de nuestro botón, la zona del ancla donde es visible sólo la parte que necesitamos, dependiendo del estado en que se encuentra.

HTML
<a href="#" class="miboton" title="ejemplo">ejemplo</a>
CSS
a.miboton{
	display:block;
	width: 100px;
	height: 40px;
	background: url(http://www.midominio.com/miboton.jpg) no-repeat top left;
	}
a.miboton:hover{
	background-position: -100px 0;
}
a.miboton:active{
	background-position: -200px;
}

Así, tenemos nuestro botón con distintos estados, sin la necesidad de llamar a otras imágenes.
Ver ejemplo