Diseño web con retícula: mi flujo de trabajo
Enero 21st, 2009
Paso 1: Pensar
Siempre parto de un prototipo (a veces un Visio, otras un boceto en papel) en el cual defino cual va a ser la estructura de la web. Pienso que tipo de retícula se puede adaptar mejor a dicha estructura.
Paso 2: Definir la retícula
He probado otros sistemas, pero Grid Calculator es el que más me gusta. Me resulta muy cómodo variar el ancho y el medianil hasta encontrar las medidas idóneas. Aunque no permite una visualización completa de cómo quedarán las columnas, para mí es suficiente. Cuando la tengo definida, hago un “Imprimir pantalla”.
Paso 3: Preparar el archivo de trabajo
Abro mi “plantilla-base.psd”. Es un lienzo de 1000 px de ancho por 800 px de alto. Aproximadamente, es la zona visible sin hacer scroll en monitor configurado a 1280 x 1024 (evidentemente, faltarían los márgenes laterales). Tengo colocada una guía horizontal en 530 px para comprobar el corte en un monitor a 1024×768.
Paso 4: Construir la retícula
Pego la captura de pantalla del Grid Calculator. Selecciono la zona de la retícula y la estiro verticalmente para que ocupe todo el lienzo. Empleo el nombre de la capa para apuntar las características (medida, columnas…).
A continuación, la duplico y la giro 90º para tener una rejilla cuadriculada que me sirva como referencia.
Coloco las dos capas en una carpeta y su opacidad al 50%. Este sistema me permite visualizar rápidamente las dos capas (activándolas), una (desactivando la que no necesito) o ninguna (desactivando la carpeta).
Paso 5: Poner guías verticales
Antes marcaba con guías todas las columnas, pero era bastante caótico. Prefiero poner sólo las que formarán las columnas principales. Las activo y desactivo rápidamente con el atajo de teclado.
Paso 6: Diseñar
Ya tengo la retícula lista y sólo queda ponerse con el diseño de la web.
Bola Extra
A la hora de maquetar con CSS, la extensión Grid Fox me echa una mano.
Si os interesa, podéis descargar esta plantilla (PSD) con una retícula de 940 px de ancho y 8 columnas.
Consejos para diseñar landing pages
Enero 14th, 2009
Foto de Viernest
Últimamente me ha tocado diseñar algunas landing pages. La verdad es que lo que empezó como un experimento ha calado hondo en la empresa y ahora no hay campaña que no cuente con su landing page correspondiente.
A nivel comunicativo, me suelo basar en el modelo AIDA:
- Captar la atención
El usuario que llegue a esa página lo hace buscando un producto que (aunque sea mínimamente) ya conoce, así que voy siempre directo al grano. - Despertar el interés
Destaco las principales características y ventajas. Como siempre, y más que nunca, es recomendable usar frases cortas, listas y negritas. - Deseo de adquisición
Hay que seducir al visitante: que tenga la necesidad de usar el producto. Cuando puedo, uso un elemento de urgencia (“oferta válida hasta fin de mes” o “unidades limitadas”, etc.). - Acción
El objetivo principal esta claro: conseguir la conversión. Toda la página esta concebida para ello, ya sea rellenar el formulario, comprar el producto o subscribirse a la newsletter.
A nivel visual, siempre tengo presente las siguientes ideas:
- La primera impresión es fundamental
Generalmente empleo un gran destacado con mucho peso visual para conseguir captar la atención: una pastilla de un color vivo, con el titular a un tamaño considerable y una imagen que aporte fuerza y refuerce el mensaje. Siempre incluyo un botón que llame a la acción. No olvides vigilar el nivel de corte de la pantalla en la resolución más habitual (ahora mismo 1024 x 768). - Grandes botones
Pónselo fácil al usuario: varios botones repartidos por la página, que sean llamativos e imposible no verlos y, por supuesto, que inciten a la acción. - Coherencia gráfica
La landing page debe tener su propio diseño y ser más sencillo que el de la web principal. No obstante, intento mantener una cierta coherencia gráfica con el estilo corporativo: misma paleta de colores, mismas tipografías, pequeños detalles como los bullets… - No dejes que el usuario se escape
No uses la navegación entre páginas. Evita los menús y los enlaces a páginas extenas. Lo ideal sería que la única forma de abandonar la landing page fuera consiguiendo la conversión ;-) - La jerarquía puede ser la clave
Los usuarios escanearan la página, pero no la leeran. Una buena jerarquización de los contenidos es fundamental para indicarles los diferentes apartados informativos. - Evita el scroll excesivo
Si tu landing page tiene mucho scroll, algo no funciona. Recuerda que tienes que ir al grano, contar lo imprescindible y conseguir la conversión. Seguro que puedes suprimir algún apartado o reducir el volumen de texto. - Formulario sencillo
Si incluyes un formulario, hazlo lo más sencillo posible. Por supuesto, pide únicamente los datos imprescindibles, no seas excesivamente riguroso con la validación de los datos y, si puedes, coloca el nombre del campo al lado del input (y no encima) para que visualmente parezca menor.
Y el último consejo…
- Usa la analítica.
Comprueba de dónde y cómo vienen, cuanto permanecen, a dónde se van… Puedes comprobar los resultados y hacer modificaciones para mejorar las conversiones: variaciones en los titulares, distintas imágenes, preparar versiones en función de las palabras clave de los anuncios, etc.
¿Conocemos al usuario medio?
Enero 8th, 2009
Hablas con cualquier persona que use Internet y, por supuesto, todo el mundo conoce Google y YouTube. En Facebook empiezo a encontrarme con gente que no espero, pero… ¿el usuario medio usa Flickr, Twitter, Last.fm o Google Docs? ¿Selecciona sus contenidos? ¿Tiene Netvives o iGoogle como página de inicio? ¿Sabe cómo funcionan los RSS? ¿Conoce Firefox? ¿Mira el email todos los días? Todo eso, tan común entre los que “vivimos en Internet”, creo que le suena a chino al usuario medio.
Más allá de algunos pequeños estudios de usabilidad, me gusta mantener el contacto con los usuarios reales observando como navegan de forma normal (sin imponerles una tarea concreta, sin sentirse observados) las personas de mi entorno. Por ejemplo, el otro día ví a un amigo buscando “marca” en Google para ir a Marca.com. Posteriormente hizo clic en unos Adwords sin ser consciente de que es publicidad (¿debería saberlo?). Sé que tiene varios blogs en favoritos y que entra de vez en cuando para ver si han actualizado su contenido.
Es cierto que poco a poco, la gente usa Internet para más cosas y el nivel del usuario medio ha aumentado considerablemente. Todo el mundo tiene su email, usa Google y ve videos en YouTube. Muchas personas leen el periódico digital, usan la banca online o compran su billete de avión en la web de la compañía. No obstante, no debemos olvidar que las personas reales (nuestros usuarios) tienen unos conocimientos y comportamientos muy distintos a los nuestros. No esta mal recordarlo de vez en cuando :-).
Por cierto, para vosotros… ¿cómo es el el usuario medio?
Resolvemos problemas
Diciembre 22nd, 2008
Foto de James Duncan Davidson
I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.
Los diseñadores resolvemos problemas de comunicación. O por lo menos lo intentamos. Cuando alguien me dice “haz lo que quieras, pero que sea bonito“, me echo a temblar. Todos mis respetos para Veen. Su conferencia en Fundamentos Web 07 me encantó, sin duda la mejor de ese año.
“Sistemas reticulares” de Kimberly Elam
Diciembre 17th, 2008
Sistemas reticulares: principios para organizar la tipografía comienza con un apartado donde se analizan los principales principios de composición, como la proporción de los elementos o la ley de los tercios. Posteriormente, se estudian los tres tipos de composición más habituales en diseño (horizontal, horizontal/vertical y diagonal), acabando con un último capítulo dedicado a la jerarquía tipográfica.
La autora se basa en un ejercicio planteado a sus alumnos para ir mostrando las diferentes particularidades de cada uno de los principios o aspectos de cada tipo de composición. Jugando siempre con los mismos elementos, realiza diferentes composiciones obteniendo una amplia variedad de resultados. Estos análisis se complementan con la muestra de trabajos reales, como catálogos de Nike o carteles de la Bauhaus.
Aunque el formato del libro es un poco repetitivo (para mí, existen demasiados ejemplos del ejercicio y pocos de trabajos reales), permite ver hasta que punto influye la composición. Es fantástico para ver como una rotación de los elementos, aproximarlos al borde o jugar con las relaciones axiales modifica sustancialmente el resultado del trabajo y por tanto del mensaje que estamos transmitiendo.
Es un libro que una vez leído puede volver a ser consultado innumerables veces. No tanto en busca de inspiración (para eso creo que hay otros títulos más apropiados) sino para, ante un trabajo, establecer un planteamiento básico y resolver los problemas de composición que nos puedan surgir. Como podéis ver, me ha gustado bastante y ha pasado a tener un lugar destacado en mi biblioteca.
Sígueme en Twitter
Feed RSS