Manual de Estilo Sitio Web Círculo de Diseño Maracay
ÍNDICE Capítulo I La institución
2
El proyecto
3
Capítulo II Estructura de contenido
6
Formato
7
Wireframing
8
Retícula
10
Uso tipográfico
12
Uso cromático
14
Navegación y enlaces
15
Imágenes
18
Animaciones
21
Software utilizado
25
Resultados de proyecto
27
Capítulo III Backend: Wordpress
32
Administrador de Contenido
32
Páginas (editar)
34
Usuarios administradores
36
La Institución Acerca de: Ente conformado por profesionales del diseño, que busca generar de forma coherente una propuesta concreta en todas las áreas de diseño y aquellas que se vinculan al mismo, que no solo permitan proyectar nuestros talentos, sino que también sirva de medio para difundir la cultura del diseño. La Institución Círculo de Diseño Maracay se dedicada a promover e instruir a sus seguidores en distintos campos relacionados al diseño (gráfico, moda e industrial) requiere un sitio web, funcional y con todo el contenido que ayude a proporcionar a sus usuarios y seguidores.
Su propuesta: Generar un espacio que procure la integración del gremio en la ciudad. Permitir la integración e interrelación con otros diseñadores nacionales e internacionales. Impulsar la investigación en diseño y desarrollar publicaciones que puedan servir de referencia para estudiantes y profesionales. Proyectar la cultura del diseño por medio de eventos que sirvan de plataforma para dar a conocer el trabajo de diseñadores nacionales. 2
Manual Estilo Capítulo I
El Proyecto
Manual Estilo Capítulo I
Objetivos:
Características:
Diseñar un sitio web que se adapte a las prácticas de usabilidad en la actualidad y permitir al Círculo de Diseño Maracay transmitir todo el contenido relacionado tanto a su institución como a las noticias, eventos y concursos que realicen.
Sitio web responsivo (adaptativo a distintas resoluciones de dispositivos; móviles, tablet y escritorio) y dinámico (contenido administrable bajo plataforma Wordpress) realizado en html5, css3 y jQuery, cuya interfaz toma en cuenta los conceptos de usabilidad, accesibilidad e interacción digital.
3
Capítulo II
Objetivos de capítulo: Abarcar todo lo relacionado a elementos y procesos en la construcción de interfaz del sitio web, su estructura, selección cromática, tipográfica, aplicación de imágenes, animaciones, interacciones y todas las características que éstos cumplen en el sitio.
Contenido: Estructura de contenido Formato Wireframing Retícula Uso tipográfico Uso cromático Navegación y enlaces Imágenes Animaciones Software utilizados Resultados de proyecto
Estructura de Contenido
Manual Estilo Capítulo II
Círculo de Diseño Maracay
Home
Zona Superior Logo Menú ppal.
Quiénes Somos
Contenido introductorio Artículos recientes Una Mano por el Diseño Zona Inferior Menú auxiliar Créditos Copyright
6
Una Mano por el Diseño
Zona Superior
Zona Superior
Zona Superior
Zona Media
Zona Media
Zona Media
Acerca de Zona Media
Blog
Objetivos
Listado de artículos
Misión Visión Integrantes Aliados comerciales Zona Inferior
Evento Actividades Participa
Zona Inferior
Aliados comerciales Zona Inferior
Contacto
Zona Superior Zona Media Formulario de contacto Mapa de ubicación Una Mano por el Diseño
Formato
Manual Estilo Capítulo II
Adaptativo: El diseño del sitio web para el Círculo de Diseño Maracay se realizó en base a la resolución standard de monitores en la actualidad (1366 x 768 píxeles), sin embargo esto no limita, ya que con el uso de scroll, cada página puede disponer de altura necesaría según el contenido que requiera, y se tomó en cuenta la capacidad de navegar sitios desde dispositivos móviles, tablet o distintas resoluciones de escritorio, para definir que la achura de contenido será fluída en relación a la medida y proporción de su pantalla contenedora.
Sitio web responsivo
7
Wireframing Bocetaje y Experiencia de Usuario: Durante la fase de bocetaje se crearon wireframes para definir el proceso de navegación del usuario y optimizar la experiencia que éste tendrá durante su interacción con el sitio web. La navegación principal (siguiendo la práctica común de usabilidad web) se ubica en el lado superior derecho de la pantalla, y la identidad institucional se ubica en la parte superior izquierda a la pantalla, que al hacerle click dirige al home de la página (ésto se ha convertido en práctica común de sitios web durante los últimos años). Además se incluyó el uso de CTA (call to action, o llamado a la acción) en distintas áreas del sitio, para invitar al usuario a permanecer viendo contenido e improvisar tráfico de navegación del sitio web. 8
Manual Estilo Cap铆tulo II
Navegaci贸n ppal.
Acceso homepage
CTA Principal
Art铆culos Recientes
Contacto
CTA: Llamado a acci贸n
Redes sociales 9
Retícula 12 columnas: La retícula utilizada desde el inicio del proyecto ha sido de 12 columnas. La selección de esta retícula se basó en dos características principales; Primero la capacidad de diagramar con mayor libertad y poder dividir el contenido en distintas ‘columnas visuales’ (agrupaciones de columnas para simular el
10
uso de 2, 3, 4 y/o 6 columnas): Y luego la característica Bootstrap 3.0, framework de twitter y actualmente el más utilizado para maquetar diseño web responsivo, cuya estructura de uso se maneja en base a 12 columnas.
Manual Estilo CapĂtulo II
Ejempo de retĂcula aplicada
11
Uso Tipográfico Familia: Frutiger Para el uso tipográfico del sitio se consideró Open Sans, fuente tipográfica sans-serif humanista diseñada por Steve Matteson, optimizada para uso web, mobile e impreso, y con licencia libre para su uso. Sin embargo el uso tipográfico de la institución se limita a Frutiger. Se utilizaron 3 pesos de esta familia: Frutiger LT Std Roman
abcdefghijklmnñopqrstuvwxyz abcdefghijklmnñopqrstuvwxyz 1234567890 #¿?¡!()& Frutiger LT Std Bold
abcdefghijklmnñopqrstuvwxyz abcdefghijklmnñopqrstuvwxyz 1234567890 #¿?¡!()& Frutiger LT Std Ultra Black
abcdefghijklmnñopqrstuvwxyz abcdefghijklmnñopqrstuvwxyz 1234567890 #¿?¡!()& 12
Manual Estilo Capítulo II
Estilo de aplicaciones: Título #1: Frutiger Ultra Black, 36px, mayúscula sostenida. Cabeceras de cada sección para identidicar como título principal. Título #2: Frutiger Bold, 34px. Título de artículos tanto en contenido interno como listados.
Título #3: Frutiger Bold, 16px. Título de caja de título es igual o inferior a 3 columnas (1/4 de la anchura total) Párrafo #1: Frutiger Roman, 16,5px. Utilizado como contenido general. Párrafo #2: Frutiger Roman, 14px. Contenido con ancho de caja igual o inferior a 3 columnas.
Título #1
Título #3 Título #2
Párrafo #1
Párrafo #2
13
Uso Cromático Selección: La aplicación cromática en el sitio web se basa en sus colores institucionales: rojo, blanco y negro. A esta paleta se le anexa un cuarto color para representar todo el contenido relacionado a Una Mano por el Diseño dentro del sitio web, ya que es un ente independiente paralelo a CDM cuyo color institucional es el azul.
Manual Estilo Capítulo II
R= 209 G= 39 B= 55 R= 25 G= 23 B= 23 R= 255 G= 255 B= 255 R= 18 G= 73 B= 14
Significado en psicología del color: Rojo: representando pasión, en este caso hacia el diseño. Asociado con acción, emoció, pasión, fuerza, energía.
Blanco: representa paz y pureza. Asociado con: Refinado, simplicidad, honestidad.
Negro: representando estabilidad y tradición. Asociado con seriedad, elegancia, clásico, conservador.
Azul: representando seguridad y éxito. Asociado con autoridad, confidencia, dignidad, confianza.
14
Navegación Y enlaces
Manual Estilo Capítulo II
Navegación Principal La navegación principal del sitio web se basa en un menú desplegable que está disponible en el header del sitio web durante toda su navegación. Este menú al ser abierto ocupa el 100% del tamaño de la pantalla en que se visualice y permite acceder a todas sus secciones.
Abrir menú
Cerrar menú Páginas internas
15
Navegación Y enlaces
Manual Estilo Capítulo II
Enlaces alternos: Adicional a la navegación principal, el sitio web contiene enlaces que permiten acceder a todo su contenido sin necesidad de desplegar el menú. Identidad: Inicio
CTA: Acerca de
Detalle Artículo
CTA: Contáctanos
CTA: Blog
Una Mano por el Diseño Redes Sociales 16
Filtrado Artículos
Breadcrumb Detalle Artículos
Enlace: páginas de aliados
CTA: Contacto
17
Imágenes Fotografías: Homepage: La fotografía principal del home es de proporción 4:3 a mínimo 2200px de ancho (para poder adaptarse a mayores resoluciones sin pixelarse). Editada con -100% de saturación y la sobrepone una capa del color rojo corporativo (ver uso cromático)
Homepage: La fotografía para el banner “Una Mano por el Diseño“ está a 2200px de ancho por 600px de altura. Editada con -100% de saturación y la sobrepone una capa del color azul corporativo (ver uso cromático)
18
Manual Estilo Capítulo II
Páginas internas: La fotografía principal de cada página interna es intervenida con saturación -100% sobre fondos de distintos colores coporativos, sin embargo éstas no deben tener ninguna edición, ya que al cargar la imagen en el sitio web (ver capítulo III para carga de información y administración del sitio), pasa por filtros css que generan su apariencia necesaria.
Listado de integrantes: las fotografías de integrantes son intervenidas con una máscara circular y sin saturación, sin embargo no es necesario editarlas para subirlas al sitio web. Ya que al igual que el caso anterior, ésta pasa por filtros css para obtener su apariencia
19
Imágenes Fotografías: Galerías: Las fotografías de galerías pueden ser cargadas sin edición preestablecida, éstas generan una miniatura en proporción 1:1 para mostrarse como listado, y al hacer click sobre una de ellas se muestra en su proporción original, sin importar como sea.
Íconos:
20
Manual Estilo Capítulo II
Animaciones
Manual Estilo Capítulo II
Eventos del mouse: Las animaciones e interacciones del sitio web fueron realizadas con los lenguajes css3, jQuery y JavaScript. Su función principal es amenizar la navegación e interacción entre el usuario y el sitio web. Todas las animaciones en el sitio web se ejecutan bajo funciones relacionadas a eventos del mouse: hover, click y movimiento. Las transiciones que se utilizan para estas animaciones se ejecutan en 0.2 segundos con efecto ease-in. Esto aplica en cambio de colores, opacidades, orientaciones y/o formas. Ejemplo de animaciones con css: a.navigation-selector { transition: all ease-in 0.2s; }
Homepage: Imagen principal (Home): esta sección es la única en el sitio web cuya animación no depende ni del hover o el click sino del movimiento del mouse. La imagen se mueve en lado contrario al puntero. (Aquí hace falta un poco de imaginación para ver la animación).
21
Animaciones
Manual Estilo Capítulo II
Header: Al hacer scroll en el sitio web, el header disminuye su altura y genera un color de fondo blanco con opacidad, la identidad pasa de negativo a positivo al igual que el icono de menú. Esto sucede en 2 milisegundos (como se explicó en el primer párrafo de ésta sección).
Menú Principal: Al expandir el menú de navegación principal, los enlaces de comienzan a aparecer desde el lado derecho de la pantalla. Al hacer hover en un enlace, crea una caja de color blanco que lo contiene, la caja aparece desde el centro vertical de la pantalla y se expande hasta sus lados para formar la caja de texto del enlace.
22
Scrolled header
Manual Estilo Capítulo II
Artículos recientes: Al hacer hover en algún item perteneciente al listado de artículos recientes del home; sucede un desplazamiento hacia la derecha (5px) y tanto el título como la línea izquierda del artículo cambian a color rojo.
Hover
CTA Contacto: Al hacer hover sucede un leve incremento de altura a la caja contenedora y cambio de elementos a color rojo.
Hover
23
Animaciones
Manual Estilo Capítulo II
Listado artículos: Filtrado: Al hacer click en cada una de las categorías, los artículos se muestran u ocultan de forma animada (según filtro de categoría). Hasta el momento, esta es la primera animación explicada cuyo comportamiento depende del click, y no del hover. Al hacer hover en items del listado: el color de fondo pasa de negro a rojo, la imagen pasa de 0 a 100% de saturación, el título se desplaza hacia arriba y aparece la descripción del artículo.
Filtrado
Hover
Acordeón: En la sección “Quiénes Somos“, el acordeón muestra u oculta las secciones de acuerdo a una activación mediante un click, este es el segundo y último elemento en el sitio web cuya animación depende del estado click.
24
Tabs
Software utilizados
Manual Estilo Capítulo II
Balsamiq Mockups: bocetos y wireframing
Adobe Photoshop:
diagramación y diseño
25
Software utilizados
Manual Estilo CapĂtulo II
Adobe Illustrator:
Adobe Brackets:
26
Ăconos y vectores
html, css, jquery, WordPress
Resultado de proyecto
Manual Estilo CapĂtulo II
27
Resultado de proyecto
28
Manual Estilo CapĂtulo II
29
Resultado de proyecto
Manual Estilo Capítulo II
El resultado del proyecto consistió en un sitio web cuya interfaz fue diseñada para ser adaptativa a distintas resoluciones y cuyo contenido puede ser administrado desde la amigable interfaz de la plataforma Wordpress (backend).
Durante su construcción se tomaron en cuenta distintas prácticas y conceptos relacionados a la optimización de diseño web según el avance de experiencia digital y las necesidades que éstas abarcan en la actualidad.
Capítulo III
Objetivos: Backend: Wordpress Características Administrador de contenido Páginas Usuarios administradores 31
Backend Wordpress (Características): El sitio para la institución Círculo de Diseño Maracay ha sido integrado bajo plataforma Wordpress, uno de los gestores de contenido más utilizados en la actualidad para administrar el dominio de la información en sitios web. Desde ésta plataforma se pueden administrar muchas configuraciones del sitio que van desde crear, editar y/o borrar contenido, imágenes, galerías, usuarios, plugins y funciones, sin embargo en este capítulo se explicará solo lo relacionado a la administración de contenido del proyecto en tema.
Administrador de contenido Crear, editar o eliminar artículos: En la sección “Entradas” (captura página 33) se encuentran todos los artículos que hayan sido creados o la posibilidad de crear nuevos, la estructura de contenido para ésta sección es la siguiente: Título: utilizado para mostrarse en el header de la página de artículo y como título de elemento en el listado general. Contenido: Se muestra en la zona media del sitio web, debajo de la imagen principal.
32
Imagen destacada: Utilizada como imagen de header del detalle de artículo y como imagen referencial en el listado general. Categoría de entrada: utilizada para el filtrado en el listado general. Resumen: Utilizado como referencia para el listado general y para optimiar SEO (posicionamiento en buscadores).
Manual Estilo Capítulo III
Título Entradas
Contenido
Categoría
Imagen destacada
Resumen
33
Backend Editar Páginas Aquí se puede editar alguna de las secciones principales ya creadas, por ejemplo el contenido de las secciones Acerca de, Una Mano por el Diseño, Contáctanos o el Homepage. El ejemplo utilizado es con la sección “Quiénes Somos“, cuya información se edita desde la página “Círulo de Diseño Maracay“.
Título Páginas Integrantes Descripción
Y los campos que comprende son: Título: Se muestra en el header de la página vista (comparar con imagen en pág. 35). Descripción. Acordeón: Contenido en pestañas: misión, visión, objetivos.
Acordeón
Subtítulo: Título de artículo. Integrantes: Se cargan en la sección “Integrantes“ del menú Wordpress, los campos utilizados son; título (nombre) , contenido (resumen biográfico) e imagen destacada (foto).
Sub Título Galería o imágenes
34
Manual Estilo Capítulo III
Referencia: Captura comparativa entre carga de información en la plataforma Wordpress (backend) y cómo se muestra en el sitio web (frontend).
Título Sub Título
Descripción Acordeón Galería o imágenes
Integrantes
35
Backend
Manual Estilo Capítulo III
Usuarios administradores Se pueden agregar infinita cantidad de usuarios para administrar el sitio web, o eliminar usuarios previamente creados, también se pueden asignar distintos roles a los usuarios y que no necesariamente tengan permisos
de “administrador“ en el sitio web o todo su contenido. Por ejemplo, si desean agregar un usuario que se encargue únicamente de cargar artículos en el sitio web, el rol de “editor“ es suficiente.
Agregar nuevos
Opciones de usuarios
36
De requerir modificaciones o informaci贸n adicional sobre el sitio web, contactar con su dise帽ador y desarrollador Julio Yanes. Email: contacto@graficodigo.com