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.

Utilizar la herramienta adecuada: Fireworks

img: sweetpeabadges.com

En todo oficio siempre es fundamental trabajar con las herramientas apropiadas, lo que nos permite ahorrar tiempo y obtener mejores resultados. Podemos excavar un agujero en la tierra con una cuchara, o tomar sopa con una pala, pero ninguna de las dos opciones es obviamente la mejor. Adobe Fireworks es una software de edición de imagen creado para el diseño orientado a web, con muchas ventajas comparativas en relación a su competencia natural, Photoshop.

Navegar y buscar inspiración

Creer que un buen diseño debe ser obra y gracia de nuestra pura imaginación, sin ningún tipo de influencia es algo irreal y torpe. Es necesario ver como lo hacen los demás para tener un buen juicio y saber que es lo adecuado y que no. Buscar ideas sobre como resolver un ícono o como se muestra una tabla de precios puede ahorrar mucho tiempo y permite llegar a una solución más certera, entre los ejemplos vistos y lo que aportamos nosotros.

No olvidar los feedbacks visuales

Aunque nuestros diseños son imágenes planas, la interacción final del usuario con el sitio no lo puede ser, por lo que siempre hay que tener en cuenta el diseño de todos los feedbacks que se necesiten. El ejemplo clásico es pensar que sucede cuando el usuario pasa encima de un botón o un link de la navegación, ¿se oscurece o se aclara?, ¿es subrayado o no? Algo debe suceder que indique que se esta en un elemento de hipervínculo. Otras cosas que también hay que considerar son los mensajes de error en formularios, diseño de  loadings y notificaciones para acciones que ocurren con AJAX, e incluso, cuales son los tipos de efectos que se deben usar para esconder o mostrar contenidos.

Ser cautelosos en el uso de fuentes no seguras

img: randsco.com

Esto tiene que ver con una problemática técnica, pero que los diseñadores DEBEN conocer.
Debido a temas de copyright, los distintos sistemas operativos (windows, osx y linux) siempre han contado con un stock limitado y bastante distinto de tipografías que vienen instaladas por defecto, lo que ha hecho que tengamos que basarnos en las fuentes seguras (web-safe fonts) para asegurar que nuestro diseño se vea igual para todos los usuarios. Con el tiempo han aparecido nuevas técnicas que han permitido ir sorteando estas dificultades. La más popular es el @font-face en CSS que permite adjuntar las tipografías en nuestros estilos, sin necesidad de que este instalada en el ordenador del usuario. Sin embargo, como la mayoría de las fuentes conocidas son propiedad intelectual, existen ciertos resquicios que podrían hacer que los demanden por usarlas de este modo (aunque las hayan comprado) debido a que con esta técnica cualquiera que navega en el sitio puede descargar la fuente. Otro modo de solucionar el dilema es usar un intermediario que convierta los textos en imágenes o embeds, usando las fuentes que escogimos para el diseño. Puede ser un buen método, pero hay que considerar que el peso de nuestro sitio se verá incrementado, debido a la generación de este recurso. Lo mismo si usamos imágenes fijas para reemplazar textos conocidos.

Pensar las jerarquías y estilos de todos los elementos HTML básicos

Esta es una práctica muy útil y necesaria cuando se trabaja en un proyecto tipo CMS, donde son otros los que ingresarán los contenidos del sitio, probablemente a través de sistema de editores de texto web  (tipo Word) como TinyMCE. Por ejemplo, diseño de listas ordenadas o no ordenadas (ol, ul) e incluso como se anidan. También como se vería las citas y bloques de citas (q, cites, blockquotes) o diseñar la estructura de headings (h1-h6) para que ninguno de estos elementos se pierda en el contraste con el resto del contenido. Incluso planear como se deberían ver los elementos menos comunes como listas de definición (dl), elementos de teclado (kbd), abreviaciones y acrónimos (abbr, acronym), etc. Esto implica tener conocimientos básicos de HTML, lo que me parece que ayuda bastante para que puedan entender como se construye lo que diseñan.

Buena idea y buen diseño.
Ojo con la nube =)

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

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.

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

Primero, comenzamos llamando esta librería javascript en el head de nuestro sitio

<head>
    <script type="text/javascript" src="http://www.isotipo.net/wp-includes/js/scriptaculous/prototype.js"></script>
</head>

Luego, tenemos nuestro pequeño código HTML donde describiremos el título de la página, un div contenedor, el ancla que despliega el div oculto con un conveniente id que será recogido para ejecutar la acción, y por supuesto, el div oculto, también con su respectivo id.

<body>
    <h1>Colapsable</h1>
    <div class="contenedor">
	<a href="#" title="ejemplo" id="colapsa">Despliegalo !!</a>
        <div id="oculto">
            <p>Texto dentro del contenedor que se colapsará y se desplegará.</p>
        </div>
    </div>
</body>

Pasando a nuestro texto en javascript, tenemos que:

    function ocultar(){
        if($('oculto')){
            $('oculto').hide();
            $('colapsa').href="javascript:mostrar()";
        }
    }
    function mostrar(){
        $('oculto').show();
        $('colapsa').href="javascript:ocultar()";
    }

    Event.observe(window,"load",ocultar);

, donde la funcion ocultar() define que si existe el id “oculto”, le otorga un display:none a través de la funcion hide() de prototype, al mismo tiempo que le dice al ancla con id “colapsa” que su comportamiento href sea llamar a la función mostrar(), que hemos creado nosotros. Luego, al hacer click en el ancla y ejecutarse la función mostrar, el div “oculto” se muestra a través de la funcion show(), y el ancla pasa a tener un comportamiento href que llama a la función ocultar(), que también hemos creado nosotros. Así, al volver a clickear en el ancla, se completa la recursividad del proceso.

Por último, cargamos nuestra funcion inicial ocultar() al final del script, a través del modo Event.observe() y .. can can can… , le tenemos un sencillo pero eficiente colapsable en Ajax.

Ver ejemplo

Por supuesto es absolutamente editable, y si se agrega la librería para efectos scriptaculous, se pueden tener muchas posibilidades para nuestro elemento colapsable.

Ver ejemplo