Cómo Preparar una Guía de Estilo para tu Página Web

Diseño Web | 25 Enero 2011

Crea una guía de estilo

La Necesidad de una Guía de Estilo

Una guía de estilo es un documento que establece el “estilo” o formato estándar para tu página web. En ella se establecen las directrices comunes para el formateo de textos e imágenes, el uso de colores y fuentes, las variaciones de logotipo que se pueden utilizar, etc. La idea general es:
1. Crear consistencia a lo largo y ancho de tu página web
2. Crear directrices que pueden servir a los futuros socios a hacerse cargo en lugar tuyo
En las grandes empresas de diseño (y algunas pequeñas), una página web no puede ser creada sin una guía de estilo que la respalde. Es un documento de comunicación que nivela las expectativas de todos los implicados en el proyecto. También es una forma de asegurarse de que no haya sorpresas al final. Incluso si no estás trabajando en equipo, una guía de estilo puede hacer tu vida más fácil. Es un paso crucial hacia la creación de una página web profesional de éxito. Es la piedra fundamental en el proceso que te mantendrá enfocado y te ayudará a lograr un diseño más coherente.

El editor Wix ofrece un sinfín de posibilidades, lo que prepara el terreno para un proceso de diseño excitante y refrescante. Pero ¡cuidado! Tanta riqueza de posibilidades puede hacerte perder el camino. Una guía de estilo siempre te ayudará a dirigirte de nuevo en la dirección correcta, lo que te ahorrará mucho tiempo. Al crear una guía de estilo estás estableciendo reglas que harán que el proceso de diseño sea más eficiente y ayudarán a la página web final a lograr su propósito.

Cómo Preparar una Guía de Estilo

Antes de abordar el editor, agarra un lápiz y papel y construye tus directrices. Las directrices de una página Web mantienen todo coherente, desde los estilos de botón hasta la estructura de navegación.

Puntos a Considerar al Preparar una Guía de Estilo

1. Prepara una hoja de color- ¿Cuáles son los tonos que te gustaría utilizar en tu diseño? ¿Cuál es la combinación de colores de tu página web? ¿Un concepto en blanco y negro con texto de colores brillantes? ¿Sólido fondo negro con elementos en colores de neón? Cuando te veas ofuscado o perdido, coloca los colores juntos. Puede ser muy útil referirte a tu guía pre-armada.

Tabla de Colores

2. ¿Qué fuentes vas a usar? Por lo general no son necesarias más de tres. Busca combinaciones de fuentes que te sirvan. Decide qué tipo de letra que vas a utilizar para los títulos, subtítulos, encabezados y el texto principal. ¿Vas a usar negrita o cursiva para los títulos?

Cómo se verán los títulos

3. Piensa en la cuadrícula y el diseño de la página web. Esto determina en dónde se colocarán los elementos. Prepara algunas plantillas genéricas que se puedan utilizar mientras diseñas. Una buena cuadrícula es clave para una buena página web, y velará por la coherencia.

Cuadrícula de Estilo

4. Echa un vistazo a tu estructura de navegación y la organización de los materiales pertinentes. Hazte un Mapa de la información que deseas mostrar en tu página web – aquí es donde le das nombre a las opciones del menú. Las opciones del menú pueden incluir encabezados tales como inicio, acerca de, contacto, galería, portfolio (tal vez con algunas sub-categorías), enlaces, comentarios. ¿Vas a usar una página de introducción? ¿O usar más de un idioma? Este es el mapa de tu página web, asegurará que tu sitio tenga la estructura adecuada y te ayudará a preparar todos los materiales que necesitas de antemano.

Navegación del sitio

5. Prepara el texto que vas a utilizar. Piensa en las palabras clave que necesitas destacar. Reunir todo el texto en esta etapa, incluyendo información de contacto y pies de foto, será un gran ahorro de tiempo cuando estés en la etapa de construcción de tu página web.

Texto Acerca

6. ¿Qué imágenes se mostrarán? ¿Están listas para ser subidas o todavía necesitan compresión y/o edición? Decide qué imagen irá bajo qué pestaña y si necesitará títulos. ¿Cómo son las imágenes que vas a mostrar? ¿Tal vez con un marco coherente que las rodea? Si tienes una galería de algún tipo, planea de antemano las categorías de imágenes.

 Imágenes varias

7. Considera el uso de elementos gráficos. Aquí es donde decides cómo y cuándo serán incorporados, y cómo y dónde será integrado tu logotipo.

Elementos Gráficos

Tal vez te resulte útil tener el editor abierto y jugar con diferentes opciones. Asegúrate de transferir tus decisiones a la guía de estilo, para poder referirte a ella una vez que comiences la construcción de tu página web.

Lo mejor de una guía de estilo es que es transferible y puede ser aplicada a todas tus publicaciones. El esfuerzo que pongas en la guía de estilo sin duda dará sus frutos cuando veas que puedes aplicarla a cualquier otra forma de comunicación que utilices: email marketing, blogs, tarjetas de visita – tu compañía ahora tiene un estilo unificado y fuerte.

Recuerda que el documento que produces no es inamovible, ¡siempre puedes hacer cambios y actualizarlo!


Etiquetas: .
3 comments

Deja tu Comentario

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>