BLOG

Administrador
Publicado el: 14 - jul - 2014 Categorías: Diseño, Firefox OS, Phonegap

Guía de estilos para las aplicaciones de Firefox OS

Buenas a tod@s, como sabéis ya llevamos algunas noticias relacionadas con el diseño de nuestras apps, pues bien, hoy queremos hablar sobre la guía de diseño que nos ofrecen los sistemas operativos y que en muchos casos no se ajusta al diseño que queremos para nuestra app. Hoy queremos acercar a tod@s la guía de diseño que Mozilla nos propone para las apps que desarrollemos para Firefox OS.

Firefox OS y Cordova

Cómo sabéis Firefox OS es un es un sistema operativo móvil, basado en HTML5 con núcleo Linux, de código abierto, para el que hace poco empezó a dar soporte Cordova. Por si alguien aún no ha metido cabeza en el desarrollo para esta plataforma, os dejamos en el siguiente enlace la guía de cómo comenzar un proyecto para Firefox OS con Cordova:

http://docs.phonegap.com/es/3.5.0/guide_platforms_firefoxos_index.md.html#Firefox%20OS%20Platform%20Guide

Bien, este sistema operativo como otros tiene su propia guía de diseño, en ésta nos hablan desde las pautas para la creación de los iconos de la app, pasando por el diseño de las cabeceras e incluso por el fondo que debe tener nuestra app y el diseño de los elementos interactivos en formularios. Es una guía muy bien estructurada y con muchos materiales para descargar que nos puede ayudar a desarrollar una app para este sistema operativo siguiendo su estándar de forma fácil y rápida.

La guía

La guía está dividida en los siguiente apartados:

Paleta de colores
Tipo de letra
Encabezados
Fondos
Listas
Botones
Tab, barras de herramientas y filtros
Áreas de entrada
Interruptores, casillas de verificación y Sliders
Iconos de acción
Iconos de la App

Una de las frases que mejor define a la interface de Firefox OS es “Design is minimal, effective and intuitive but doesn’t feel soulless; has warmth“, que significa “Mínimo diseño, eficaz e intuitiva, pero no carece de alma; tiene calor“. Este es uno de los temas que más intentamos defender dentro de la comunidad, no por hacer un diseño cargado de efectos vamos a tener una mejor app, en muchos casos es todo lo contrario :) .

Los iconos de las apps

Este es uno de los puntos en los que se detienen más, para que la interface del sistema operativo sea todo lo homogéneo posible, te advierten de que debes seguir su guía al diseñar el icono de la app.

Nos dicen que sigamos las pautas de tamaño propuestas para las formas de los iconos.

Si el icono tiene una silueta única, es importante medir el peso de la misma en relación con el conjunto estándar de los iconos de Firefox utilizar la máxima coherencia.

Captura de pantalla 2014-07-14 a la(s) 13.44.40

Recursos

Web de la guía oficial de estilos de Firefox OS: http://www.mozilla.org/en-US/styleguide/products/firefox-os/
Web oficial de desarrolladores de Mozilla: https://developer.mozilla.org/es/Firefox_OS

Esperamos os haya gustado la noticia :)

Saludos a tod@s!

Deja tu comentario

Debes estarlogueado para comentar.

RT @PWAExpertsIO: 🎙️ Cómo capturar 🎼 audios con tu #PWA. @JoseJ_PR te enseña cómo hacerlo a través de este #tutorial👇🏼 https://t.co/Rkpw609:57 PM Jun 8th