May 25 2010
Hola todos, frikis del planeta!
En este día especial, el día del Orgullo Friki, nos complace presentaros la nueva imagen de Guía del Friki. Un nuevo diseño más elegante y esperemos que más claro.
Hace ya varias semanas cambiamos el avatar de Twitter y el favicon del blog, dejando entrever la cara de nuestro nuevo compañero que forma parte del logo y estará presente en otras muchas partes del blog a partir de ahora.
May 17 2010
Buenas en este post simplemente os muestro un blog que Ivan Serrano diseñó y Christian hizo el desarrollo web, es un blog para el Centro de Cultura Contemporáneo de Barcelona (CCCB). En el blog vereis entrevista a autores de importantes obras, Exposiciones etc.
El Centro de Cultura Contemporánea (también conocido por sus siglas CCCB) es un museo de la ciudad de Barcelona. Acoge exposiciones fijas dedicadas a diversos estilos artísticos que van desde la fotografía a la escultura, pasando por la pintura o los frescos.
Mar 11 2010
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:
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.
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.
- Nombre del cliente (en nuestro caso hemos decidido hacerlo sobre PuntoGeek).
- Nombre que le asignamos a la guía (puede ser para web, offset…).
- Paginación del documento (también se puede pone en el pie).
- Título del que vamos a tratar en cada hoja.
- Dejaremos un margen de 10 a 15 pixeles por los cuatro lados .
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):
- Logo de nuestra empresa
- URL de nuestro site
- Mail de contacto
Quedaría algo parecido a lo que vemos en la siguiente imagen.
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:
- Texto descriptivo para saber donde usaremos ese color
- El valor hexadecimal del color. Ejemplo: #7C7C7C
- El valor RGB del color. Ejemplo: Red:124 Green:124 Blue:124
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.
Chupito de cerebro de alien 
Chancletas con forma de teclado 
Competición real a lo Angry Birds 
Cómo meter un avión de papel en un contenedor desde lo alto de un edificio 
Récord de monociclo sobre botellas de cerveza 
Últimos Comentarios