Advertisement
  1. Web Design
  2. Visuals

Mantener la coherencia con una guía de estilo del sitio web

by
Read Time:13 minsLanguages:
This post is part of a series called All About Style Guides.
50 Style Guide Tools, Articles, Books and Resources
Style Tiles: An Alternative to Full Design Comps

Spanish (Español) translation by Marilu (you can also view the original English article)

La creación de guías de estilo se está convirtiendo rápidamente en una práctica común para los diseñadores web, especialmente cuando se trata de sitios con mucho contenido. Con una guía de estilo del sitio web, los diseñadores pueden establecer y mantener un aspecto y sensación creando un conjunto de reglas que el diseño sigue. El proceso se vuelve flexible, fácilmente actualizable y consistente.

Durante este tutorial voy a demostrar cómo puedes implementar una guía de estilo en tu propio sitio o proyecto.

¿Qué es exactamente una guía de estilo?

Las guías de estilo han existido desde hace tiempo. Incluso antes de los días de la web, las compañías a menudo necesitaban crear visuales consistentes y unificados para su marca. Esto se logró y se sigue logrando mediante el uso de directrices de marca o identidad. Esas directrices suelen figurar en un documento y pueden contener información como:

  • Los colores de la marca
  • La tipografía, como las fuentes, los tamaños, el encabezamiento, etc.
  • Posicionamiento del logo y cómo usarlo en diferentes situaciones, por ejemplo. el diseño de la impresión puede diferir del diseño de la web
  • Tono de voz

Exactamente lo que contiene una guía de marca/identidad depende de la compañía. Puede ser cualquier cosa, desde un documento de una sola página, hasta un documento masivo como el canal de televisión inglés, la guía de estilo del Canal 4.

C4 style guideC4 style guideC4 style guide

Las guías de estilo web funcionan de manera similar a las guías de marca/identidad, con la única diferencia de que no se crea una identidad para una marca, sino una identidad para un sitio web. Esta vez la marca es el sitio web y, como tal, se establece una guía de estilo para crear consistencia y unidad dentro del diseño de un sitio web.

¿Cuándo puedo usar una guía de estilo?

No digo que se deba escribir una guía de estilo para cada sitio web en el que estés involucrado, pero a veces tiene mucho sentido crear una.

Por ejemplo, podría ser una buena idea...

  • ...cuando un sitio web es de contenido pesado y tiene mucho contenido que necesita ser mostrado de diferentes maneras.
  • cuando se trabaja en equipos grandes en un sitio. Una guía puede ser útil ya que cada componente del sitio debe ser construido de manera consistente, sin importar qué miembro del equipo lo haya creado. Incluso si el miembro del equipo es un recién llegado. Otra ventaja para los equipos es que al tener una definición fija y convenciones de denominación para cada componente del sitio web se puede comunicar con mayor claridad y eficacia exactamente a qué componente del módulo se está haciendo referencia.
  • ...cuando un sitio necesita ser actualizado fácilmente, o frecuentemente se le agregan nuevas características.

La forma en que diseñamos los sitios web está pasando actualmente por un cambio. Estamos empezando a darnos cuenta de que el diseño de sitios web página por página puede dejar de ser la solución adecuada en algunas circunstancias. Al crear un sistema y una estructura como una guía de estilo nos permite ver el panorama general de cómo un sitio web puede encajar, haciendo que todo el proceso de actualización del sitio sea mucho más manejable.

Ahora que entiendes un poco más acerca de la guía de estilo de un sitio web, echemos un vistazo a algunos ejemplos.

Ejemplos de guías de estilo de sitios web

Twitter Bootstrap

Twitter Bootstrap style guideTwitter Bootstrap style guideTwitter Bootstrap style guide

Probablemente las reglas de estilo más conocidas para un sitio web se pueden encontrar en el Bootstrap de Twitter. Aunque no es específicamente una guía de estilo para twitter.com, varios de sus componentes se pueden encontrar en twitter.com y se usan mucho para las aplicaciones internas de Twitter.

Github

Github style guideGithub style guideGithub style guide

Github es un buen ejemplo de un sitio web que necesita utilizar una guía de estilo. Github tiene un equipo de diseñadores y desarrolladores trabajando en su producto y por lo tanto es esencial mantener la consistencia sin importar quién está trabajando en las nuevas características y secciones del sitio.

MailChimp

Mailchimp style guideMailchimp style guideMailchimp style guide

Si miras esta imagen de la guía de estilo de MailChimp verás varios componentes de todo el sitio web de MailChimp. Una cosa que habrás notado es el enfoque humano y fácil de usar de MailChimp en el diálogo que utiliza en todo su sitio. Esto es consistente porque Mailchimp ha creado un conjunto de reglas a las que este tono de voz debe adherirse.

Creación de una guía de estilo de sitio web en Photoshop

Lo que decidas incluir en tu guía de estilo variará dependiendo del sitio para el que estés diseñando. Por ejemplo, un sitio de redes sociales tendrá componentes diferentes a los de un sitio de reseñas de películas.

Puedes ser tan detallado o tan breve como quieras, pero cuanto más detallado seas, más unificado será tu diseño.

Al crear una guía de estilo es importante incluir todas las situaciones en las que un elemento o componente puede encontrarse. Por ejemplo, deberías considerar diferentes estados para los botones y las entradas, así como los elementos del menú actual, etc. Esto debe ser demostrado dentro de tu archivo .PSD.

Consejo: Puedes cambiar varios estados visuales en Photoshop usando Comps de Capas. Echa un vistazo a nuestro reciente tutorial sobre el tema.

Paso 1: La preparación

En este ejemplo voy a crear una guía de estilo para un blog. La guía de estilo del blog consistirá en componentes, estos son:

  • Tarjeta de autor
  • publicación del blog
  • Comentario
  • Botones
  • Paginación
  • Elementos de forma
  • Tablas

También voy a usar los siguientes seis colores:

  • azul #a4d4e8 - Este será usado como el color primario
  • verde #aee1a3 - Este será usado como un color secundario
  • rojo #f67f77 - Este será usado como un color secundario y para advertencias de error
  • negro #474747 - Este será usado como un color de texto primario
  • gris oscuro #919191 - Este será usado como un color de texto secundario
  • gris claro #e7e2de - Esto se usará para los contornos

Todas las entradas y botones usarán un radio de borde de 5px, mientras que todos los widgets de los componentes tendrán un radio de borde de 0px, lo que los hace de forma rectangular.

Paso 2: Establecer nuestro documento

Setting up photoshop gridSetting up photoshop gridSetting up photoshop grid

En primer lugar, establecer un nuevo espacio de trabajo de documentos. He decidido poner el mío a 580px de ancho. Este es un tamaño cómodo para trabajar y representa un espacio de buen tamaño para un diseño basado en módulos.

Estoy usando una cuadrícula (Vista > Mostrar > Cuadrícula) para ayudarme en mi diseño y mantener todo bien alineado. He elegido usar una cuadrícula de 20px x 20px con una subdivisión cada 10px. Esto puede ser alterado yendo a Preferencias > Guías, cuadros y sectores.

Entonces verás la pantalla de abajo. Aquí puedes cambiar el espacio de la cuadrícula a lo que quieras, pero creo que una línea de cuadrícula de 20px con subdivisiones establecidas en 2 funciona bien. También he colocado algunas guías a 460px de ancho a cada lado de mi documento para ayudarme. Además de esto puede ser bueno activar el "snap" yendo a Ver > Snap. Esto asegurará que tus elementos terminen con las medidas exactas de los píxeles y no se pierdan con las medidas perdidas de los sub-píxeles.

photoshop preferences gridphotoshop preferences gridphotoshop preferences grid

Paso 3: El componente de autor

author component web site style guideauthor component web site style guideauthor component web site style guide

Lo primero que vamos a crear es el módulo de componentes de autor. Las redes sociales como Twitter han hecho estas tarjetas de autor bastante populares recientemente y pensé que sería bueno usarlas como parte de la guía de estilo de nuestro sitio web. De esta manera cada autor de nuestro blog puede tener su propia tarjeta de autor.

Comienza seleccionando la herramienta de forma y selecciona un color de primer plano de blanco. Con esto seleccionado, crear un rectángulo de 380x250px. Una vez que esto se haya creado, haz clic derecho en la capa de esa forma y selecciona "opciones de fusión". El panel de opciones de fusión debería aparecer ahora. En la barra lateral izquierda del popup, selecciona 'Trazo' y dale un tamaño de trazo de 1px. El color que vamos a usar es el gris claro #e7e2de tomado de nuestro conjunto de colores.

Ahora selecciona "Resplandor exterior" y establece el color del brillo exterior en el mismo color pero baje la opacidad del mismo a 80. Establece la extensión del brillo al 100% y el tamaño del mismo a 4. Esto le dará a nuestro componente un borde con un brillo grueso que se disfraza como un borde.

Photoshop layer stylesPhotoshop layer stylesPhotoshop layer styles

Los estilos de capa que acabamos de crear se van a utilizar mucho en otros elementos que creemos más adelante, pero aquí hay un consejo rápido sobre cómo utilizar los mismos estilos de capa en cualquier otro elemento. Si haces clic derecho en la capa del elemento que acabamos de crear y haces clic en "Copiar estilos de capa". Esto hará exactamente lo que dice y te permitirá pegarlo en cualquier otra capa que tengas. Para ello, simplemente haz clic derecho en la capa a la que quieres añadir el estilo y selecciona "pegar estilo de capa". Anota esto, ya que lo usaremos bastante a lo largo de este curso. Nos referiremos a este estilo de capa en particular para este elemento como el "estilo de capa principal".

Para el avatar del autor, toma un ejemplo de una foto y cambia su tamaño a 75px x 75px. A continuación, selecciona la herramienta "Marquesina elíptica" y arrastra el cursor sobre la imagen, empezando por la esquina superior izquierda y bajando hasta la parte inferior derecha. Mantén el cambio mientras lo haces para limitar las proporciones y crear un círculo perfecto. Luego, una vez que haya creado una selección sobre la imagen, cópiala y pégala en tu documento de guía de estilo. Copia y pega nuestro elemento "estilo de capa principal" y luego edita los estilos de capa y elimina el trazo.

Para crear las tres cajas de estadísticas, en primer lugar crear tres formas de rectángulo blanco que se puede dividir en partes iguales entre los 380px. Una vez que hayas hecho esto, toma uno de ellos y abre de nuevo el panel de estilos de capa haciendo clic con el botón derecho del ratón en la capa. Entonces selecciona "Sombra interior". Asegúrate de que el "modo de fusión" esté ajustado a normal y la opacidad al 100%. Pon el ángulo a '-90' y cambia la distancia a 5px. Para el color, usa nuestro color azul primario #a4d4e8. Entonces repite este proceso en las otras 2 cajas de estadísticas pero esta vez cambia sus colores de sombra interior a cada uno de nuestros colores secundarios; verde #aee1a3 y rojo #f67f77. Luego agrega el texto de cada estadística. En el mío he elegido mostrar el número de seguidores, seguidores y puestos.

Photoshop inner shadow stylePhotoshop inner shadow stylePhotoshop inner shadow style

Para añadir el texto y la biografía del autor he elegido usar "Droid sans", disponible como una fuente web de Google.

Para el pequeño triángulo de la esquina en la parte superior derecha de la tarjeta de autor crea un cuadrado de 50px x 50px con nuestro color primario azul y luego selecciona la "herramienta de lazo poligonal". Dibuja una línea recta desde la parte superior izquierda del cuadrado hasta la parte inferior derecha y luego dibuja alrededor de la parte izquierda del cuadrado. Una vez hecho esto, selecciona Capa > Máscara de Capa > Ocultar selección y esto creará el triángulo.

Para la estrella, selecciona la herramienta de forma "Polígono". Asegúrate de que los lados estén en "5" en el menú superior. Luego selecciona la pequeña flecha que está situada junto a la palabra "Laterales". Selecciona la estrella y el "Lado de la huella" al 50%. Luego dibuja una estrella blanca sobre el triángulo y colócala en la esquina superior derecha de la tarjeta de autor.

Paso 4: El componente de la entrada del blog

El componente de la entrada del blog se crea de la misma manera en que creamos el elemento principal de la tarjeta de autor arriba.

Blog post componentBlog post componentBlog post component

Luego he añadido el "estilo de capa principal" a esto. La imagen en miniatura de 70px x 70px está colocada a la izquierda interior de este He creado tres estilos de texto diferentes; el titular principal, la fecha y el texto del párrafo. En la parte inferior derecha he añadido un botón de "leer más". Vea el paso 6 para la creación de los botones.

Paso 5: El componente de comentarios

Para crear la burbuja de comentarios real, crea un rectángulo redondeado de 316px x 90px y añádele el "estilo de capa principal".

Blog comment componentBlog comment componentBlog comment component

Crea una forma cuadrada de 15px x 15px y rotar este Edición > Transformar trazo > Rotar, y luego desde el menú de opciones, rotarlo en 45 grados. Selecciona la capa de forma real y vaya a Edición > Copiar y luego ve al gran rectángulo redondeado que acabamos de crear. Asegúrate de que el cuadrado esté alineado hacia donde quieras que vaya la punta. Luego ve a Edición > Pegar y esto fusionará las dos formas. Añade el estilo de capa principal a esto y ¡ahí está la burbuja del habla!

rotate shape photoshoprotate shape photoshoprotate shape photoshop

He decidido añadir dos componentes de comentario de entradas; uno es un componente de comentario estándar y el otro es un comentario de autor. Para el ejemplo del autor he cambiado el trazo para que sea el color azul primario.

Paso 6: Botones

Los botones son relativamente fáciles de crear porque establecimos algunas pautas antes de entrar en nuestra guía de estilo.

Blog button componentBlog button componentBlog button component

Para crear un botón grande, selecciona la herramienta "Rectángulo redondeado". En la barra de "opciones" asegúrate de que el radio esté ajustado a "5px" y dibuja un rectángulo primario azul de 125px x 40px. Luego agrega el texto de tu elección. Duplica la capa haciendo clic con el botón derecho del ratón en la capa y seleccionando "Duplicar capa". Una vez que hayas hecho esto, cambia su color a uno de nuestros colores secundarios. Repite este proceso para el botón con el otro color secundario. También, repite este proceso para los botones pequeños pero esta vez haz los rectángulos 30px x 105px y para el 'botón de llamada a la acción' haz 374px x 40px.

Para los estados de vuelo he añadido un sutil degradado añadiendo un estilo de capa de "superposición de degradado". Pon el modo de color en "Normal" y la opacidad en el 10% con el degradado que va del negro al blanco. Esto será suficiente para dar una pista de que un usuario ha pasado por encima del botón.

Para el conjunto de botones agrupados, crea un rectángulo redondeado de 380px x 30px de ancho y luego divídelo en cuatro botones de igual tamaño. Puedes hacerlo dibujando una línea de lápiz de 1px o cortando secciones con una herramienta de "marquesina rectangular" de 1px.

Paso 7: Paginación

La paginación se crea de forma similar al conjunto de botones agrupados que acabamos de crear arriba. Pero esta vez, en lugar de crearlo en cuatro botones de igual tamaño, crea diez botones cuadrados de igual tamaño con los botones de flecha en cada extremo un poco más grandes. La imagen de abajo lo demuestra. Para las flechas he usado algunas formas prefabricadas que son específicamente para las flechas de diseño web.

Paso 8: Formas

A estas alturas deberías haberte dado cuenta de lo fácil que nos hacemos la vida repitiendo muchos elementos y estilos. Lo bueno de esto es que crea consistencia dentro de nuestro diseño.

Blog form componentBlog form componentBlog form component

Las entradas y las áreas de texto para este conjunto se crean usando los métodos que usamos anteriormente. Para las entradas dibuja un rectángulo redondeado de 380px x 40px y aplica el color del trazo. Extiende la altura del área de texto un poco hasta alrededor de 90px. Para el enfoque de los elementos he usado nuestro "estilo de capa principal" y he añadido un elemento extra para los mensajes de error y éxito.

Conclusión

Depende de ti cuántos elementos quieras crear para tu guía de estilo. Conocerás los requisitos del sitio en el que estás trabajando y sabrás lo que necesitarás y lo que no. Lo bueno de la creación de una guía de estilo es que cualquier elemento que introduzcas en el futuro tendrá reglas y prácticas a las que habrá que atenerse y que permitirán la coherencia dentro de esto.

Creará familiaridad con los usuarios y permitirá una mejor experiencia tanto estética como funcional.

Otros enlaces, lecturas y recursos

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.