Mar 11 2010

Cómo Crear Guías de estilos para web (I)




Hoy iniciamos nuestro primer tutorial, y como llevo tiempo pensándolo y mirando la mejor manera de explicarlo, creo que ha llegado el momento de iniciarme en esta aventura. En este tutorial hemos cogido un blog al azar y hemos usado como referencia Punto Geek, pues tiene un estilo muy bien definido y fácil de usar.

¿Qué es una Guía de estilo?

Es un documento que recoge normativas y patrones básicos relacionados con el “aspecto” de un interfaz para su aplicación en el desarrollo de nuevas “pantallas” dentro de un entorno concreto. (sitio web de contenidos, nuevas secciones, entorno de aplicaciones de negocio).

Conceptualmente, el interfaz de usuario de divide en 3 puntos:

  • Significado: es la base del interfaz. Recoge el contenido o información de la pantalla. Textos, campos de formularios, botones, menús…
  • Comportamiento: trata el funcionamiento del interfaz. Cómo se comporta cuando un usuario envía un formulario (validaciones), hace clic en un enlace…
  • Aspecto: apariencia final de un sistema: colores, tipografía, dispocición de los elementos en pantalla (layout).

Las Guías de Estilo, generalmente se centran en el “Aspecto“. Puntos como diseño y maquetación (colores, tipografías y píxeles), y apenas incluye criterios o casuística para aplicar en el proceso de diseño de interfaz (“Significado“).

Así que sin más preámbulos empezamos con el tutorial.

PRIMERA PÁGINA: DEFINICIÓN DE LOS COLORES

A. CABECERA GENERAL DE CADA PÁGINA

Lo primero que hay que hacer es crear una cabecera general y pie para todas las hojas que recibirá nuestro cliente. En la cabecera crearemos 4 elementos comunes a todas las páginas.

  1. Nombre del cliente (en nuestro caso hemos decidido hacerlo sobre PuntoGeek).
  2. Nombre que le asignamos a la guía (puede ser para web, offset…).
  3. Paginación del documento (también se puede pone en el pie).
  4. Título del que vamos a tratar en cada hoja.
  5. Dejaremos un margen de 10 a 15 pixeles por los cuatro lados .

B. PIE DE PÁGINA

En el pie de página insertaremos 3 elementos básicos (hay mil maneras de crear un pie, no significa que esta sea la única manera):

  1. Logo de nuestra empresa
  2. URL de nuestro site
  3. Mail de contacto

Quedaría algo parecido a lo que vemos en la siguiente imagen.


C.COLORES

Vayamos al contenido,  empezaremos referenciando los colores que usaremos en el site que hemos diseñado. Una manera fácil de indicar que colores usaremos y donde es cómo mostramos es:

  1. Texto descriptivo para saber donde usaremos ese color
  2. El valor hexadecimal del color. Ejemplo: #7C7C7C
  3. El valor RGB del color. Ejemplo:  Red:124    Green:124    Blue:124

D. TEXTO EXPLICATIVO.

Aunque hayamos definido un nombre para cada color, que nos debería ayudar a la hora de saber donde poder usar ese color, añadiremos una leyenda explicativa (hay que pensar que alguna de la que lea tu manual/guía no son diseñadores y/o maquetadores y hay que facilitar un poco el trabajo a los demás),  que podría quedar algo parecido a:

Con todo esto tendríamos la primera página preparada para la impresión. Aquí os dejo una imagen de cómo quedaría todo.

Share on Twitter

Escrito por admin • Diseño web, Tutoriales • 4 • Tags: , , , ,