Lo primero de todo,
¿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.
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
Quedaria algo parecido a la imagen de abajo:
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.
DEFINICIÓN DE LAS TIPOGRAFÍAS
En la segunda página , indicaremos las tipografías que usaremos en el site en cuestión. Para ello crearemos tres bloques con:
1 - El nombre de la tipografía
2 - Escribiremos el abecedario en mayúsculas
3 - A continuación el abecedario en minúsculas
4 - Finalmente los números
5 - En alguna parte de la página haremos un texto explicativo del uso de cada tipografía, así como una breve introducción a modo informativo de las particularidades de usar texto css o imágenes.
El resultado sería algo parecido a:
TRATAMIENTO DEL TEXTO
En este apartado definiremos la manera en que trataremos el texto, para no hacer que este tutorial se extienda demasiado hemos remusido a grandes rasgos los matices.
Haremos capturas de los diferentes textos que podremos tener en el site, así como:
1 - Menú principal (si existiera submenú, lo pondríamos)
2 - Titulares /Título del post (si es un blog)
3 - Titular 2 (en un blog podría ser la fecha,autor,etc)
4 - Redes sociales
5 - Tags
6 - Texto de comentarios
7 - Textos del sidebar
…
Y como haremos en todas las páginas un breve texto explicativo, para facilitar el entendimiento del documento. Finalmente el resultado obtenido sería algo similar a :
¿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.
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
Quedaria algo parecido a la imagen de abajo:
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.
DEFINICIÓN DE LAS TIPOGRAFÍAS
En la segunda página , indicaremos las tipografías que usaremos en el site en cuestión. Para ello crearemos tres bloques con:
1 - El nombre de la tipografía
2 - Escribiremos el abecedario en mayúsculas
3 - A continuación el abecedario en minúsculas
4 - Finalmente los números
5 - En alguna parte de la página haremos un texto explicativo del uso de cada tipografía, así como una breve introducción a modo informativo de las particularidades de usar texto css o imágenes.
El resultado sería algo parecido a:
TRATAMIENTO DEL TEXTO
En este apartado definiremos la manera en que trataremos el texto, para no hacer que este tutorial se extienda demasiado hemos remusido a grandes rasgos los matices.
Haremos capturas de los diferentes textos que podremos tener en el site, así como:
1 - Menú principal (si existiera submenú, lo pondríamos)
2 - Titulares /Título del post (si es un blog)
3 - Titular 2 (en un blog podría ser la fecha,autor,etc)
4 - Redes sociales
5 - Tags
6 - Texto de comentarios
7 - Textos del sidebar
…
Y como haremos en todas las páginas un breve texto explicativo, para facilitar el entendimiento del documento. Finalmente el resultado obtenido sería algo similar a :
0 comentarios:
Publicar un comentario