Personalizar la marca de tu aplicación

Artículo
04/07/2015

En este tema, veremos algunas de las muchas posibilidades creativas que los diseñadores y desarrolladores de aplicaciones pueden usar para incorporar la personalización de marca a las aplicaciones de la Tienda Windows.

¿Por qué incorporar tu marca en tu aplicación?

Una marca define las cualidades por las que un negocio quiere que se lo reconozca. Cuando se diseñan las aplicaciones de la Tienda Windows, se necesita tomar decisiones minuciosas para garantizar que tus aplicaciones incorporen la esencia de tu marca. Al igual que una marca define un negocio, la expresión de la marca en tu aplicación de la Tienda Windows la diferencia de todas las demás aplicaciones. Analicemos un ejemplo.

Aquí tenemos un ejemplo de una aplicación de la Tienda Windows antes de la personalización de marca:

Ejemplo de una aplicación de la Tienda Windows para Contoso Bakery antes de la personalización de marca.

El ejemplo de Contoso Bakery ilustra la posible apariencia de una aplicación para una panadería si siguiera los principios del diseño Microsoft. Este es un buen ejemplo de cómo colocar contenido en la parte central, pero no transmite la marca de la panadería de manera eficaz.

Esta es la misma aplicación de ejemplo después de la personalización de marca:

Ejemplo de una aplicación de la Tienda Windows para Contoso Bakery después de la personalización de marca.

En esta versión de la aplicación de Contoso Bakery, algunos cambios evidentes hacen que esta aplicación sea más atractiva. Al incorporar más de la marca de la panadería, el contenido de la aplicación se presenta de una manera más persuasiva, y la sensación general de la aplicación evoca la esencia de una panadería.

Cómo incorporar tu marca

La expresión de tu marca se logra a través de un conjunto de elementos visuales. Por ejemplo, un estilo fotográfico, un diseño, gráficos y una paleta de colores personales, en conjunto permiten crear una marca reconocible y recurrente, a través de una variedad de medios, como difusión, prensa, Internet y aplicaciones de la Tienda Windows.

Considera a estos elementos visuales como si fueran las perillas y discos que mueves a través de código para crear una apariencia única en tu aplicación de la Tienda Windows.

Elemento visual	Descripción
Colores	El color es un atributo clave para expresar una marca. Aplica el color primario asociado con tu marca de forma que permita que los usuarios sepan que esta aplicación proviene de tu negocio.
Gráficos	Puedes usar gráficos para reforzar tu marca agregando personalidad a la presentación del contenido. Pero si usas demasiados gráficos, estos pueden interferir con el modo en que fluye el contenido y dar el aspecto de mera decoración, o causar distracción.
Imágenes	También puedes usar ilustraciones y fotografías para reflejar tu marca. Reutiliza el estilo y las imágenes de otras comunicaciones o sitios web de tu empresa.
Cuadrícula	El sistema de cuadrículas de las aplicaciones de la Tienda Windows permite unificar los elementos visuales de la presentación de tu aplicación. La cuadrícula alinea la interfaz de usuario de tu aplicación con personalización de marca para que funcione en el resto de Windows.
Diseño	La disposición de los elementos visuales de todas las páginas debe ser relevante en función de la marca. Debes esforzarte por lograr la uniformidad en todos los tipos de páginas y contenido.
Logo	Usa tu logotipo para permitir que las personas identifiquen rápidamente tu aplicación y reconozcan tu marca.
Tipografía	Los tipos de letra constituyen una parte clave de las aplicaciones de la Tienda Windows. Elegirlos correctamente puede tener el mismo efecto sobre tu marca que el color, el logotipo o el diseño, de modo que debes considerar con cuidado la tipografía que usarás.

Ejemplo de una aplicación de línea de negocio

La personalización de aplicaciones de línea de negocio (LOB) es importante para las perspectivas minorista y de empresa. Este ejemplo demuestra cómo se puede incorporar la marca en una aplicación comercial minorista y de empresa para una compañía de servicio expreso.

Elementos de la marca de la compañía

Fabrikam Worldwide Logistics proporciona tres niveles de servicios expresos internacionales. Estos servicios están dirigidos a propietarios de pequeñas empresas que quieren realizar y administrar envíos con facilidad. Un envío internacional confiable y transacciones sin roces son los mensajes centrales que se dan a los clientes.

Elemento de marca	Descripción
	La marca principal comunica el deseo de ofrecer servicios internacionales confiables mediante el uso de elementos gráficos, como el mapa y esquema.
	En relación con la marca principal, el logotipo de cada servicio comunica los tres niveles de servicios.
	Los elementos de la marca en los paquetes, como la líneas de puntos y el mapa, se vuelven a usar en el diseño de la aplicación para lograr cohesión en la personalización de marca.

Crear un envío

Una pequeña empresa cliente inicia sesión con su cuenta para renovar un envío.

Página de inicio de sesión con personalización de marca de encabezado en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo

El color, el gráfico y el logotipo se trasladan al encabezado y a las páginas como elementos de personalización de marca.

En la página de la cuenta; el color, los gráficos (el esquema y la línea de puntos) y el tipo de letra comunican la marca principal. La identidad del cliente se comparte en el encabezado.

Página de Coho Craftsman que muestra personalización de marca conjunta en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo

La marca compartida del cliente se inspira en los tipos de letra de la marca principal y usa la fuente serif Constantia para el título y la fuente sans-serif Corbel en el resto de la aplicación.

La página de transacción usa un patrón de navegación plano. El usuario puede desplazarse por cada sección para ver y modificar la información.

Diseño de navegación plano en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, que muestra el movimiento panorámico horizontal en una página

Diseño de navegación plano en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, que muestra el movimiento panorámico horizontal, lado izquierdo de una página

Diseño de navegación plano en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, que muestra el movimiento panorámico horizontal, centro de una página

Diseño de navegación plano en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, que muestra el movimiento panorámico horizontal, lado derecho de una página

El usuario puede navegar con rapidez a la vista del zoom semántico en la página de transacción para ver el historial de todas las transacciones con información resumida.

Diseño de navegación plano en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, que muestra el zoom semántico, vista alejada

Diseño de navegación plano en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, que muestra el zoom semántico, movimiento panorámico en la vista alejada

Los elementos de marca, como el color, los gráficos, los logotipos de servicio y los tipos de fuente se usan con coherencia para comunicar la esencia del negocio.

El usuario navega a otras categorías usando la barra de navegación.

Barra de navegación en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo

Entregar un envío

Un conductor usa la aplicación para entregar envíos a los clientes. Si se usa el diseño de dos columnas para mostrar el inventario a la izquierda y el contenido a la derecha, el conductor puede navegar con facilidad y ver la información detallada de un envío. Los elementos de personalización de marca, como el esquema y los controles comunes, se usan con coherencia en toda la aplicación.

Página de dos columnas en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, que muestra inventario y mapa

Cuando el conductor llega al destino, la columna derecha muestra los detalles en una lista de desplazamiento vertical. Tanto la lista de inventario como el contenido detallado se desplazan en la misma dirección.

Página de dos columnas en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, que muestra detalle y lista de inventario

El gráfico de información que ayuda al conductor a ubicar el envío en el camión tiene los mismos colores de personalización de marca que las otras partes de la aplicación.

Cuando el conductor pide la firma del cliente, la aplicación muestra la página de firma en vista horizontal y expone la barra de navegación con personalización de marca. Es fácil para el conductor pasar el dispositivo al cliente en vista horizontal.

Página de firma en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, orientación vertical

Pedir la firma es un momento esencial en la personalización de marca. El usuario se relaciona con la marca y la aplicación de la empresa.

Una vez que el conductor tiene la firma, la aplicación muestra los elementos restantes y el gráfico de progreso.

Página de lista de inventario en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo, orientación vertical

Compartir la marca

La relación entre dos o más marcas se denomina colaboración de marca o marca compartida. Ten en cuenta las siguientes preguntas cuando diseñes una aplicación que deba acomodar varias marcas:

¿Qué marca lidera la comunicación?
¿Qué rol cumple la marca de respaldo en la comunicación?

Una aplicación de la Tienda Windows que no pueda abordar estas preguntas corre el riesgo de confundir a los clientes y diluir la marca.

Personalización de marca conjunta en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo

El ejemplo de Fabrikam se ocupa de la marca compartida reforzando su marca con la implementación coherente de elementos visuales. Por ejemplo, el color, los gráficos, el diseño y el tipo de letra de la marca Fabrikam aparecen en toda la aplicación y admiten un conjunto limitado de variaciones de estilo. Cada página de la aplicación comunica claramente que la aplicación corresponde a Fabrikam.

Encabezado de personalización de marca conjunta en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo

Para comunicar que la marca Coho Craftsman es secundaria con respecto a la marca principal, la imagen, el tipo de letra y el logotipo de Coho Craftman se acoplan al diseño de Fabrikam. Puedes imaginarte, por ejemplo, cómo otra pequeña empresa asociada con Fabrikam podría acomodarse en el área actualmente ocupada por Coho Crafstman.

Personalización de marca conjunta en la aplicación de la Tienda Windows Fabrikam Worldwide Logistics de ejemplo

También aparecen otras marcas en el ejemplo. Las compañías de tarjeta de crédito en el lado izquierdo de la página aparecen como marcas de nivel más bajo, en parte debido a su tamaño pequeño, colocación específica del contenido y color limitado. En el lado derecho de la página, las marcas del fabricante de prendas de vestir aparecen en un logotipo de un solo color y de tamaño reducido en escala, y se ajustan a los estilos del diseño de la marca principal. En todos los casos, los elementos visuales se han modificado de forma tal que las marcas de respaldo estén claras, pero no tan pronunciadas como la marca principal.

Ejemplos que evocan a marcas exclusivas

Aquí tenemos algunos ejemplos que muestran cómo cada elemento visual ayuda a evocar diferentes emociones y sentimientos. Las descripciones de cada elemento visual proporcionan detalles específicos acerca de cómo se creó el diseño y por qué es importante.

Contoso Downtown Café

Contoso Downtown Café es una marca conocida por ser auténtica. Ostenta platos de cocina cacera y bebidas artesanales. En este ejemplo, el color, la cuadrícula, el diseño y la tipografía son los elementos visuales usados principalmente para evocar la marca.

	Colores Los colores cálidos cobre, hueso, gris oscuro le dan a este diseño un efecto exquisito. La paleta cálida evoca algunos de los mismos colores que encontrarías en el pan, una sopa o postres caseros.
	Cuadrícula En este ejemplo, el contenido intencionalmente rompe con la cuadrícula. El contenido de la carta es clave para esta marca. Por ello, el margen superior se reduce para proporcionar más espacio al menú. El margen izquierdo se ajusta para que el nombre de la compañía, el texto introductorio y la información de ubicación queden más centrados, lo que le da espacio y amplitud al contenido. Todas estas desviaciones se aplicaron coherentemente y se trasladan a todas las otras páginas de esta aplicación.
	Diseño El diseño está destinado a dar la apariencia de una carta porque es lo que la conforma lo que trae al público nuevamente a este café. Como sus sándwiches y demás artículos de la carta, el diseño debe tener una apariencia más artesanal. El color de fondo hueso recuerda al papel, el tono es atractivo y el contenido está ordenado, con reglas separadoras verticales y una fuerte alineación de texto a la izquierda.
	Tipografía Copperplate Gothic Bold es el tipo de letra primaria usado en este diseño, que le da al nombre de la compañía su apariencia exclusiva, similar a la de un signo tallado en madera. Script MT Bold y Segoe UI son los tipos de letra que se usan para acompañar. La fuente de escritura se usa en contadas ocasiones en el encabezado de la carta y evoca un estilo de escritura a mano. Segoe UI se usa en el texto del cuerpo para aumentar la legibilidad de las opciones de la carta.

Marca Contoso French Bakery

Una aplicación de la Tienda Windows de ejemplo para Contoso Downtown Café, que muestra cómo la marca se expresa a través del color, el diseño y la fotografía.

Contoso French Bakery es una marca conocida por generar placer. Para muchos de sus clientes, es el destino ideal para satisfacer su gula y deleitarse con placeres inconfesables. En este ejemplo, los colores, las imágenes y el diseño son los elementos visuales que se usan para evocar la marca.

	Colores Una paleta de colores de tan solo dos, marrón y rosa, es suficiente para que los clientes piensen en una panadería. Marrón es el color primario, que conjura imágenes de chocolate, y el rosa es un color de énfasis, que evoca pasteles y galletas glaseadas. Además de los sabores asociados con ambos colores, tienen un objetivo para la marca. El marrón es lo suficientemente neutro para proporcionar un fondo rico para que se destaque una fotografía a todo color, y el rosa es lo suficientemente brillante para destacar partes específicas del contenido.
	Imágenes La fotografía es el foco de este diseño. Está claro que se destinó tiempo y experiencia a garantizar que cada imagen se vea lo suficientemente atractiva que incite a comerla. Como resultado, las imágenes de los artículos de panadería aclaran de qué se trata esta marca. Además, se usan para definir las categorías de contenido.
	Diseño Si se compara con los diseños de aplicación de la Tienda Windows estándar, este ejemplo tiene una apariencia diferente. La diferencia más clara es la ausencia de iconos cuadrados. Los iconos y cuadrícula todavía existen, pero se ha aplicado estilo a las imágenes para imitar los artículos que probablemente se encuentren en una panadería como, por ejemplo, las formas circulares y de crestas de un molde para magdalenas.

Marca Contoso Sandwich Truck

Un ejemplo de aplicación de la Tienda Windows para Contoso Sandwich Truck, que muestra cómo se expresa la marca a través de gráficos, cuadrículas y logotipos.

Contoso Sandwich Truck es una marca conocida por ser urbana, social y con reconocimiento de ubicación. Esta marca tiene el respaldo de un equipo de excelentes chefs y una flota de camiones, todos destinados al público que se encuentra en constante movimiento. En este ejemplo, los gráficos, la cuadrícula y el logotipo son elementos visuales que se usan para evocar la marca.

	Gráficos Las opciones del menú siguen siendo el foco y no están abarrotadas por un uso excesivo de gráficos. No obstante, los gráficos sí juegan un papel en el establecimiento de esta marca. Por ejemplo, las "estrellas" implican un sistema de calificación de los clientes, el color y las formas nos traen a la memoria los letreros de las calles y la información basada en ubicación se encuentra sobre un cuadro oscuro que incluye un gráfico de una calle asfaltada.
	Cuadrícula La cuadrícula estándar ancla todos los aspectos de este diseño e imita una estructura similar a lo que vería en una vista aérea de un mapa de las calles de la ciudad. Para desafiar esta presentación ordenada, gráficos de contenido superpuesto y sin bordes diferencian este ejemplo. La presentación general del contenido es llamativa y directa como medio para atraer a personas que viven en constante movimiento y necesitan tomar decisiones rápidas.
	Logotipo No se usa un logotipo de compañía en este ejemplo. El nombre de la compañía aparece en texto, y donde debería ir el logotipo en este ejemplo, vemos por primera vez el nombre de la compañía incrustado en la composición general. El logotipo o el nombre no está simplemente alineado en el borde superior izquierdo.
	Colores El negro y amarillo se usan como colores de énfasis. Desde la perspectiva de la personalidad, el negro y el amarillo son colores que se encuentran en entornos urbanos, como los letreros de las calles y las indicaciones en la calzada.

Ejemplo que refuerza la marca en las páginas de la aplicación

Incorporar la aplicación con tu marca en las páginas secundarias con contenido enriquecido es tan importante como aplicar personalización de marca a la página de destino. Este ejemplo usa una aplicación de equipo deportivo ficticia para demostrar cómo puedes incorporar tu marca en varias páginas de la aplicación.

Fabrikam FC, equipo de fútbol profesional

Los aficionados de Fabrikam FC, un equipo de fútbol profesional, quieren echar un vistazo tras bastidores a su equipo favorito, les interesa conocer todos los detalles sobre sus jugadores preferidos y esperan obtener la información más reciente desde cualquier sitio. El diseño de la página de destino refleja la naturaleza llamativa y dinámica de la marca.

Página de destino en la aplicación de la Tienda Windows del equipo Fabrikam FC de ejemplo

El color, la tipografía y los gráficos resaltan la naturaleza llamativa y dinámica de la marca.

Esta aplicación usa un diseño de navegación plano. Un usuario desliza rápidamente en la barra de navegación para navegar a otras vistas de la aplicación.

Barra de navegación en la aplicación de la Tienda Windows del equipo Fabrikam FC de ejemplo

El color y el logotipo se trasladan a la barra de la aplicación de navegación como elementos de personalización de marca. Los colores electrizantes del equipo sobre el fondo oscuro crean un fuerte contraste y logran una personalidad llamativa, y el color amarillo se usa en toda la aplicación para indicar interactividad.

Con la barra de navegación, el usuario puede navegar por los jugadores del equipo.

Página de jugadores en la aplicación de la Tienda Windows del equipo Fabrikam FC de ejemplo

Las fuentes son coherentes en las diversas vistas de la aplicación. El tipo de letra sans serif complementa el carácter llamativo y vigoroso del equipo. Con el estilo de fuente en todas mayúsculas, ciertas etiquetas de texto tienen el aspecto de elementos gráficos.

Para navegar rápidamente a un jugador determinado, aleja hasta la vista Zoom semántico de esta página.

Zoom semántico en la aplicación de la Tienda Windows del equipo Fabrikam FC de ejemplo

La secuencia de jugadores rompe la estabilidad de la cuadrícula para crear un diseño dinámico lleno de energía. Se usa en la página del equipo y en la página de destino.

Aplicación de la Tienda Windows del equipo Fabrikam FC de ejemplo, que muestra iconos y gráficos que refuerzan la marca.

El uso de iconos y gráficos simples hacen que el contenido sea más divertido y accesible, y estimulan la interactividad y la exploración en toda la aplicación.