Este documento describe las guías de estilo y su importancia para mantener la coherencia en el diseño de interfaces web y aplicaciones. Las guías de estilo permiten que el cliente continúe con un proyecto sin perder el estilo original al mantener la plantilla y el estilo de los elementos. Incluye secciones sobre la paleta de colores, tipografía, botones, logotipos e imágenes, además de enlaces a ejemplos de guías de estilo de diferentes empresas y organizaciones.

1. Guías de estilo
Diseño de interfaces web
Desarrollo de aplicaciones web
Laura Folgado Galache – laurafolgado.es

2. ¿Paraqué?
§ Una vez que se ha acabado el diseño de un proyecto,
permiten que el cliente pueda seguir con él sin perder
el estilo.
§ Mantiene la plantilla de la página web.
§ Mantiene el estilo de los elementos internos.
Laura Folgado Galache – laurafolgado.es

3. ¿Cómo?
Intuitivo Sencillo
Informativo
Compatible
con los
estándares
Laura Folgado Galache – laurafolgado.es

4. Secciones
Laura Folgado Galache – laurafolgado.es

5. Paleta
crómatica
Laura Folgado Galache – laurafolgado.es

6. https://mozilla.design/firefox/color/
https://airbnb.design/building-a-visual-language/
Laura Folgado Galache – laurafolgado.es

7. https://rizzo.lonelyplanet.com/styleguide/design-elements/colours
https://www.ox.ac.uk/public-affairs/style-
guide/digital-style-guide?wssl=1
Laura Folgado Galache – laurafolgado.es

8. Tipografía
Laura Folgado Galache – laurafolgado.es

9. https://rizzo.lonelyplanet.com/styleguide/desig
n-elements/typography
https://www.yelp.com/styleguide#typography
https://mozilla.design/firefox/typography/
Laura Folgado Galache – laurafolgado.es

10. Botonesy
elementosde
navegación
Laura Folgado Galache – laurafolgado.es

11. https://www.starbucks.com/static/ref
erence/styleguide/buttons.aspx
https://www.yelp.com/styleguide#buttons
Laura Folgado Galache – laurafolgado.es

12. Logotipos
Laura Folgado Galache – laurafolgado.es

13. Imágenes
Laura Folgado Galache – laurafolgado.es

14. http://www.upv.es/entidades/ASIC/manuales/guia_estilos_upv.pdfLaura Folgado Galache – laurafolgado.es

15. Otros
elementos
Laura Folgado Galache – laurafolgado.es

16. https://airbnb.design/building-a-visual-language/
Laura Folgado Galache – laurafolgado.es

17. https://www.yelp.com/styleguide
Laura Folgado Galache – laurafolgado.es

18. Algunasguías
deestilo
• https://www.starbucks.com/static/reference/styleguide/
Starbucks
• https://www.ox.ac.uk/public-affairs/style-guide/digital-style-
guide?wssl=1
Universidad de Oxford
• https://www.yelp.com/styleguide
Yelp
• https://rizzo.lonelyplanet.com/styleguide/design-elements/colours
Lonely Planet
• https://mozilla.design/
Mozilla
• http://www.upv.es/entidades/ASIC/manuales/guia_estilos_upv.pdf
UPV
Laura Folgado Galache – laurafolgado.es

19. Webgrafía
§ ida Blog: https://blog.ida.cl/diseno/guia-de-estilo-
diseno-web/
§ Staff Creativa: http://www.staffcreativa.pe/blog/crear-
una-guia-de-estilo-de-diseno-web/
§ Marta Bernal: https://martabg.com/5-pasos-crear-guia-
estilo/
§ Digital Guide IONOS:
https://www.ionos.es/digitalguide/paginas-
web/diseno-web/la-guia-de-estilo-perfecta-para-
paginas-web/
Laura Folgado Galache – laurafolgado.es