Diseñar una guía de estilo: elementos que se utilizan para crear productos atractivos

Si observa empresas como Dropbox, Google y Twitter, notará que cada una tiene su propia estética única. En todos sus productos, tanto móviles como web, existe una sensación de coherencia y uniformidad en su diseño.

La forma en que las empresas y los productos logran coherencia es a través de guías de estilo. Una guía de estilo es un conjunto de estándares que alinea los diseños con la voz y la misión de una empresa.

La coherencia es importante porque genera confianza. Y el diseño se trata de crear relaciones entre productos y usuarios.

El objetivo de este artículo es presentarle algunas guías de estilo y pautas de marca bien pensadas. También detalla algunos de los elementos más importantes que debe tener toda guía de estilo.

Con suerte, estos elementos y ejemplos servirán como fuente de inspiración e influirán en la forma en que diseña productos sostenibles en el futuro.

Antes de empezar ...

A continuación se ofrecen algunas sugerencias para cuando diseñe guías de estilo.

  • Primero diseñe su producto y luego cree una guía de estilo. No empieces por crear una guía de estilo. Primero, averigüe qué funciona y qué no. Luego estandarícelo.
  • Nunca estarás completamente satisfecho con tu guía de estilo. Esta bien. Crear un lenguaje de diseño universal es un proceso iterativo.
  • Comprenda bien la voz y el mensaje que desea que transmita su producto antes de escribir una guía de estilo.

Principios

Las guías de estilo siempre deben tener una página sobre principios de diseño. Los principios de diseño son un conjunto de pautas que influyen en cómo los diseñadores abordan y resuelven problemas al construir un producto.

Una de las características clave de un buen principio de diseño es que no es obvio ni demasiado amplio. Un buen principio de diseño debe ser lo suficientemente específico como para ayudar al diseñador a tomar decisiones.

Echemos un vistazo a las Pautas de interfaz humana de Apple, que tiene una sección sobre principios de diseño. Uno de sus principios es la manipulación directa .

La manipulación directa del contenido en pantalla involucra a las personas y facilita la comprensión ... A través de la manipulación directa, pueden ver los resultados visibles e inmediatos de sus acciones.

Esta descripción explica que la manipulación directa es un principio que gobierna y media las interacciones físicas y digitales. Ayuda a los diseñadores a elegir modos de interacción, como deslizar y rotar.

Al idear principios de diseño, menos es más. Comience con tres principios rectores y repita desde allí.

Para obtener más información sobre los principios de diseño, consulte el artículo A Matter of Principle de Julie Zhuo. Ha influido enormemente en mi forma de pensar sobre los principios del diseño.

Tipografía

La tipografía es clave para lograr la unidad en múltiples productos y diseños. Cada guía de estilo debe tener algunas secciones que detallen las especificaciones de tipografía.

Es importante limitar la cantidad de tipos de letra y tamaños que usa para mantener sus diseños simples. Como regla general, comience con dos fuentes como máximo: una para sus encabezados y otra para sus cuerpos. La mayoría de las veces, no necesitará más que eso.

Además, incluya ejemplos de casos de uso de tipografía para ayudar a otros diseñadores y desarrolladores a comprender cuándo usar cosas como negrita o cursiva.

Si tiene problemas para elegir fuentes, consulte Typewolf y FontPair. Para conocer el tamaño de la fuente, consulte Modular Scale y el artículo que lo acompaña, Más tipografía significativa.

También tenga en cuenta que las fuentes no están grabadas en piedra. Siempre puedes cambiarlos más tarde.

Imágenes

Mostrar, no contar. Las imágenes son una herramienta poderosa en manos de un diseñador. Las imágenes son dinámicas. Transmiten significado a primera vista y evocan emociones.

Si tiene los activos, considere incluir una sección que detalle qué tipo de imágenes deberían usar otros diseñadores para transmitir la voz y la identidad de su producto.

Nike es un buen ejemplo de una empresa que utiliza imágenes para transmitir su marca. Sus fotos tienen una calidad cinematográfica que te inspira a participar en su misión y marca.

Las imágenes no se limitan solo a fotografías. Empresas como Dropbox rara vez utilizan fotografías en sus diseños. En cambio, transmiten su personalidad a través de ilustraciones.

Este es un ejemplo de la guía de estilo de imágenes de Hubspot.

Observe cómo describen el tono y el objetivo de la fotografía antes de proporcionar ejemplos.

Con pautas sobre qué imágenes usar, los diseñadores pueden comunicar mejor el significado a los usuarios y, en última instancia, sumergirlos en una experiencia coherente.

Cuadrículas y espaciado

El buen diseño se preocupa tanto por los espacios en blanco como por el contenido. Las guías de estilo deben reflejar esta mentalidad e incluir una sección sobre cuadrículas y espaciado.

Es importante establecer un sistema de cuadrícula que funcione para cada caso de uso. En la sección de cuadrículas, incluya información como el número de columnas y filas, márgenes y usos de ejemplo.

For reading on grids, see A guide to creating grid systems that are built around your content as a primer. And follow it up with Modular Design For Grids.

Spacing should have its own section. Consistent spacing across a product creates a sense of uniformity and balance.

Having a list of margin sizes is useful to both designers and developers. In particular, developers can codify the space scale into Sass variables.

For example, using the Marvel spacing styleguide as a reference, the Sass counterpart might look like this:

$space-smaller: 5px;$space-small: 10px;$space-medium: 20px;$space-large: 40px;$space-larger: 80px;$space-largest: 240px;

Color

Color is another essential element in styleguides. Color helps establish visual hierarchies and create emotional resonance.

Color sections in styleguides make the lives of designers easier. Instead of spending time fretting about which colors to use, designers can reference the styleguide. This allows them to focus on content.

Como lo expresa Buffer en su guía de estilo:

El uso de colores constantemente aporta una sensación de familiaridad y unidad a un producto. El esquema de color de Buffer tiene como objetivo ser claro, discreto y amigable.

En el ejemplo anterior, Buffer nombra cada uno de sus colores. Esto es particularmente útil para los desarrolladores porque pueden convertir los colores en variables Sass:

$primaryColor = #168eea;$headingColor = #323b43;$bodyColor = #59626a;$borderColor = #ced7df;$lightBorderColor = #eff3f6;$fillColor = #f4f7f9;

Observe cómo Buffer usa primaryColor en lugar de un nombre como brandBlue . Elija nombres que describan la función del color en lugar del color en sí. Este enfoque facilita que tanto los diseñadores como los ingenieros ajusten sus valores de color sin tener que cambiar el nombre.

Si desea obtener más información sobre cómo elegir el color, consulte el artículo que escribí sobre Diseñar en color.

Componentes

A lot of designers and developers think about UIs as collections of components. The idea is that each UI component is its own entity. For example, a card is a single component.

Using this approach, designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.

Component-based thinking also helps engineers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together.

While you’ll often see components in UI and pattern libraries, it’s also useful to include components in styleguides for other designers to reference.

For example, Mapbox has a styleguide that includes all of their commonly used components. This includes buttons, inputs, and forms. This way their designers and developers know what UI components are already available.

If you want to learn more about components check Brad Frost’s Atomic Web Design article.

Principles, typography, imagery, grids and spacing, color, and components. This list isn’t exhaustive, but these six topics form the basis of a good styleguide.

What are your thoughts on styleguides? What are some of the lessons that you’ve learned in the process of creating styleguides? Leave a note below or tweet at me.

If you enjoyed this article, you might enjoy Photos and stories from a designer.

Photos and stories from a designer

Some of the best designers are also some of the best storytellers.medium.com

You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.

P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.