Challenge: Style Guidelines

El Challenge de Participación para esta semana consiste en la elaboración en equipo del

documento de Style Guidelines relacionados con su tema del Final Project.

El documento debe incluir las siguientes secciones:

Style Guidelines
 General Style Guidelines
 Web Style Guide
 Mobile Style Guide

Consideraciones
A continuación se describe las consideraciones para cada sección:

Style Guidelines
En esta sección, el equipo sienta las bases para contar con una guía y repositorio central y
organizado de uso común para todo el equipo, que incluye assets, fonts, etc. Esto con el fin
de mantener una presentación consistente y enfocada. Se incluye secciones para General
Style Guidelines, Web Style Guidelines y Mobile Style Guidelines.

General Style Guidelines

Aquí se explica las decisiones y referencias visuales sobre conceptos generales básicos
como
Branding,
Typography,
Colors y
Spacing,
así como las dimensiones a adoptar para el tono de comunicación y lenguaje aplicado
(Divertido/Serio, Formal/Casual, Respetuoso/Irreverente, Entusiasta/Sereno).

Puede tomarse como referencia un Design System existente, sobre el cual se puede realizar
adaptaciones.

Esta sección debe incluir el sustento de principios y elementos de diseño considerados para
las decisiones.

Web Style Guide.

En esta sección se explica e ilustra
las decisiones sobre los
responsive web interfaces
estándares visuales
estándares de interacción
para responsive web interfaces.
NOTA: Realizar una versión preliminar sobre esta sección.
Mobile Style Guide.
En esta sección se explica e ilustra los estándares visuales y de interacción para las
interfaces de aplicaciones móviles. Debe considerarse las diferencias en representación
visual de los componentes en las dos principales plataformas móviles, Android y iOS.
NOTA: Realizar una versión preliminar sobre esta sección.

interfaces de aplicaciones móviles

Android
estándares visuales
estándares de interacción

iOS
estándares visuales
estándares de interacción
Referencias
Referencias que pueden revisar:

How to build a component library / style guide with Figma

https://blog.prototypr.io/how-to-build-a-component-library-style-guide-with-figma-
9064b6c7fe4

How To Create a Complete Web Design Style Guide (Plus Template)

https://elementor.com/blog/web-design-style-guide/

Creating a UI Style Guide for Web and Mobile Apps in 2020

https://www.krasamo.com/creating-ui-style-guide-for-web-and-mobile-apps/

Figma YouTube Channel

https://www.youtube.com/c/Figmadesign/featured

Content style guide: A step-by-step guide to creating your own

https://gathercontent.com/blog/tone-of-voice-guide

Design Systems: A Figma publication for design systems creators, designers, developers,
and managers
https://www.designsystems.com/

Web Style Guide Resources

http://styleguides.io/

Google Design System

https://material.io/design

Apple Design System

https://developer.apple.com/design/
Los elementos de un "Style Guidelines" pueden variar según la organización o la
finalidad de las guías, pero en general, incluyen:

1. Ortografía y gramática: se establecen las reglas y preferencias en cuanto a la

ortografía, la gramática y la puntuación. Esto puede incluir la forma correcta
de escribir palabras difíciles, el uso de comas, puntos y otros signos de
puntuación, y reglas de capitalización.
2. Estilo de escritura: se establecen las preferencias de estilo en cuanto al uso de
palabras, frases y construcciones de oraciones. Esto puede incluir el uso de
palabras concretas y sencillas en lugar de términos técnicos o complejos, la
preferencia por frases cortas y simples, y el uso de voz activa en lugar de
pasiva.
3. Formato: se establecen las reglas y preferencias en cuanto al formato de los
documentos y la presentación de la información. Esto puede incluir la
estructura de los documentos, el uso de encabezados y subtítulos, el tamaño
y tipo de letra, y la forma en que se presentan las tablas y los gráficos.
4. Tono de voz: se establece el tono o la voz que se debe utilizar en los
documentos o en la comunicación escrita. Esto puede incluir la preferencia
por un tono formal o informal, el uso de humor o ironía, y la forma en que se
dirigen al público objetivo.
5. Uso de logos y colores: se establecen las reglas y preferencias en cuanto al
uso de logotipos, colores y otros elementos visuales en los documentos o en
la comunicación de la marca. Esto puede incluir las pautas para el uso del
logotipo, los colores que deben utilizarse y cómo deben combinarse, y las
reglas para el uso de imágenes y gráficos.
6. Uso de redes sociales y otras plataformas: se establecen las pautas y
preferencias para la creación de contenidos para las redes sociales y otras
plataformas. Esto puede incluir las mejores prácticas para la creación de
contenidos en cada plataforma, las pautas para el uso de hashtags y
menciones, y las reglas para la creación de publicaciones y anuncios.

En general, los elementos de un "Style Guidelines" ayudan a mantener un estilo

consistente y coherente en la comunicación escrita u oral y a establecer una imagen
cohesiva de la marca o la organización.