WipeWare Solutions – Autoescuela Pachuli – Libro de estilo 29. mayo 2013 Autoescuela Pachuli Libro de estilo Página 1 Índice Libro de estilo.......................................................................................................................................1 Fuentes.............................................................................................................................................1 Tipografía.........................................................................................................................................1 Colores.............................................................................................................................................2 Mensajes..........................................................................................................................................3 Estándares de diseño.............................................................................................................................4 Elementos interactivos.....................................................................................................................4 Estándar de diseño de las ventanas..................................................................................................5 Ventana de inicio de sesión.........................................................................................................5 Ventana de la aplicación..............................................................................................................6 WipeWare Solutions – Autoescuela Pachuli – Libro de estilo 29. mayo 2013 Libro de estilo Fuentes Usaremos para toda la aplicación el mismo estilo de fuente para todo el texto. Al igual que aplicaremos diferentes estándares para mostrar toda la información de la autoescuela en los diferentes elementos gráficos, también tenemos que usar un estándar especifico para la tipografía que se mostrara, tanto por pantalla, como impresa. Tipografía Se empleará la tipografía Liberation Serif, ya que es un tipo de fuente de código libre, y no se deben pagar licencias por ella, además está presente en LibreOffice / OpenOffice. Para el tamaño de letra se utilizará: • Para el título: 17 puntos. • Para el subtitulo: 15,5 puntos. • Para el texto: 13 puntos. Liberation serif regular ABC DE F GH IJK LMNO PQR STUVWXYZ ab cd ef gh ij kl mn op qrst uvwxyz1234567890.:,;()¡!¿?‘“€+-*/%=_ Liberation serif negrita ABC DEFG H IJK LMNO PQR STUVWXYZ ab cd efg hi j k lmn op q rstuvwxyz1234567890.:,;()¡!¿?‘“€+-*/%=_ Liberation serif cursiva ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrst uvwxyz1234567890.:,;()¡!¿?‘“€+-*/%=_ Liberation serif subrayada ABC DE F GH IJK LMNO PQR STUVWXYZ ab cd ef gh ij kl mn op qrst uvwxyz1234567890.:,;()¡!¿?‘“€+-*/%=_ Página 1 WipeWare Solutions – Autoescuela Pachuli – Libro de estilo 29. mayo 2013 Colores Se usaran los colores siguientes para el diseño de la interfaz de usuario y para todos los documentos impresos que se vayan a realizar. A continuacion podemos ver la composicion de estos colores. Los definiremos mediante su nombre HTML, su composicion en hexadecimal y en RGB, de esta manera no habra ninguna duda a la hora de matizar los colores. Puede que el color varie entre diferentes ordenadores, impresiones, tintas...Pero podremos identificarlo por su codigo en hexadecimal o RGB. Nombre HTML Código hexadecimal Código RGB DarkOrange FF8C00 255 140 0 Utilizaremos el color Dark Orange para el fondo en los títulos. RoyalBlue 4169E1 65 105 225 El Royal Blue estará presente en todos los textos de los títulos. LightGrey D3D3D3 211 211 211 Light Grey sera el color que usaremos para pintar los botones de la interfaz de usuario. Todos los demás textos estarán en color negro predeterminado. Todos los demás fondos de las ventanas serán blancos. Los colores elegidos no tienen ninguna finalidad especial. Los motivos de la eleccion son meramente corporativos y serviran para distinguir las diferentes partes que habra en las ventanas: menus, botones, elementos graficos, texto llano. Página 2 WipeWare Solutions – Autoescuela Pachuli – Libro de estilo 29. mayo 2013 Mensajes Mientras se use la aplicación, puede que hagamos búsquedas de alumnos o de alguna información y esta no este en la base de datos. También puede que intentemos insertar alguna entrada y ya exista. Cuando estos y algún que otro acto que pueda dar algun problema en la base de datos, la aplicación avisara mediante una ventana emergente. Las ventanas que pueden aparecer serán como las de a continuación. Este sera el mensaje de error. Aparecerá en los problemas en la escritura de la base de datos, para avisar de lo que se intenta hacer no es válido. El color del icono sera el siguiente: Nombre HTML Red Código hexadecimal FF0000 Código RGB 255 0 0 Y esta de aquí sera la ventana de alerta. Este mensaje se mostrara en las lecturas de la base de datos que no sean validas, o que no puedan mostrar ningún resultado. El color del icono sera el siguiente: Gold FFD700 255 215 0 Página 3 WipeWare Solutions – Autoescuela Pachuli – Libro de estilo 29. mayo 2013 Estándares de diseño Elementos interactivos Aquí están todo los elementos con los que el usuario podrá interaccionar en la ventanas. Botón de acción. Estarán presentes en la mayoría de las ventanas. Serán utilizados para terminar las operaciones, ya sera para confirmar, aplicar o cancelar las operaciones que haga el usuario. Combo box. Elemento que muestra un estado inicial o el ultimo elegido por el usuario. Si se pulsa sobre la flecha se mostraran diferentes opciones para el atributo al que haga referencia. Barra de progreso. Mostrará el progreso de algunas acciones que se estén realizando. Por ejemplo, imprimir. Text field. Campo donde el usuario podrá escribir el valor de algún atributo. Check box. Este elemento se puede seleccionar para especificar alguna opción. Si esta seleccionado aparecerá una cruz dentro del cuadro para mostrar que esta seleccionada. Icono de carga. Este cuadro aparecerá cuando se estén administrando alguna acción por la aplicación. Mientras este presente, el usuario no podrá interaccionar con la interfaz hasta que desaparezca. Normalmente se mostrara mientras la barra de progreso se este llenando. Barra de desplazamiento. Esta barra aparecerá en las listas de elementos que se muestren y no quepan en la misma ventana. El usuario podrá Página 4 WipeWare Solutions – Autoescuela Pachuli – Libro de estilo 29. mayo 2013 pulsar sobre los lados de la barra que hacer subir o bajar la lista. Lista. Este cuadro se mostrara cuando el usuario pueda elegir una o varias opciones. La opcion elegida quedara seleccionada con un fondo de color gris. Página 5 WipeWare Solutions – Autoescuela Pachuli – Libro de estilo 29. mayo 2013 Estándar de diseño de las ventanas Haciendo un repaso por todas las ventanas de la aplicación, descartando los mensajes emergentes, podemos observar que hay dos estilos de ventanas genéricas. Una es la ventana de inicio de sesión de los usuarios, y la otra es la ventana de la aplicación en si. Ventana de inicio de sesión Esta ventana será la primera que se mostrara al iniciar la aplicación. Podemos distinguir el cuadro central donde se dispondrá el titulo y los text field para la escritura del nombre de usuario y contraseña. En la parte inferior habrá un botón para enviar la solicitud de acceso a la aplicación con las credenciales insertadas. El fondo de la ventana principal sera de color gris. El cuadro central sera de color blanco. El titulo y el texto sera de su correspondiente naranja y azul independientemente. El cuadro interior que hay en el centro solo hace referencia a un espacio de la ventana. Dentro de el estarán los text field con el texto de usuario y contraseña. También habrá un check box para que la aplicación pueda recordar las credenciales. El texto que se mostrara seguirá la tipografía especificada anteriormente en el apartado de Tipografía. Página 6 WipeWare Solutions – Autoescuela Pachuli – Libro de estilo 29. mayo 2013 Ventana de la aplicación Esta ventana representa la mayoría de las pantallas que se mostraran en toda la aplicación. Puede que algunas no tengan dos espacios en el centro para mostrar la información. El fondo de la ventana sera de color gris. Los espacios que representan los demás cuadros serán de color blanco. El icono de carga y la barra de progreso solo aparecerán en ciertas ocasiones cuando el usuario interaccione con la base de datos o con la impresora. En la barra inferior, el cuadro representa el espacio donde los botones de interacción aparecerán (aceptar, cancelar, aplicar, examinar...). Dentro de los cuadros mas grandes se mostraran títulos correspondientes de las secciones que se estén mostrando. Esos títulos serán de color azul. Todo el texto restante estará en color predeterminado ( negro ) . Aparte de esos títulos, en ese espacio se mostrara la información referente a la sección. Información de los clientes, de los vehículos, formularios de matricula o de registro para exámenes. Hay que recordar, que todos los textos seguirán la tipografía estipulada en el apartado de Tipografía. Página 7