Tendencia en diseño Web – Flat Design

Flat designEn esta oportunidad me gustaría “hablar” un poco de la tendencia actual que al parecer es “Flat Design”.

¿Qué es Flat Design?

Flat Design es el diseño plano que se aplica a la interfaz de usuario del software como por ejemplo aplicaciones móviles, sitios web, trípticos, sistemas operativos, etc. Desde mi punto de vista (y algunos comentarios que encontré en Internet) este tipo de diseño se popularizo con la nueva versión de Microsoft, el sistema operativo Windows 8 que tiene la interfaz plana bajo el nombre “Modern UI”.

Windows 8

Flat Design consiste en un diseño sin sombras ni relieves tampoco incluye imágenes complejas ni en tres dimensiones, es más bien minimalista y sencillo.

¿Por qué Flat Design?

Hasta hace un tiempo el diseño de sitios, sistemas y aplicaciones mostraban una interfaz “sobrecargada” de información lo cual daba la apariencia que uno tenía que ser un experto para utilizar una herramienta, perdiéndose en un mar de iconos, botones, imágenes y datos.

El diseño Flat Design viene a reemplazar a los anteriores debido a su sencillez para el usuario, quien se siente cómodo con una interfaz limpia y sencilla es decir fácil de usar.

En Flat Design, los puntos importantes a tomar en cuenta son:

  • Combinación de colores: una agradable combinación de colores es fundamental puesto que no se debe exagerar con la cantidad de colores, sin embargo los colores seleccionados deben ser armónicos entre sí.

Mezcla de colores

  • Tipografía: una tipografía visualmente atractiva y moderna ayuda bastante al Flat Design, actualmente tenemos una gran cantidad de fuentes libres en Google Fonts, Adobe Web fonts y Typekit.

Font types

Animación

Todos los puntos anteriores pueden ser alcanzados con la versión “antigua” de HTML es decir XHTML, pero se recomienda usar HTML5 en combinación con CSS3 y JavaScript.

Para finalizar no olvidemos del RWD (Responsive Web Design), el diseño adaptativo está en continuo crecimiento, por lo tanto es importante tomar en cuenta Flat Design para aplicaciones Web y aplicaciones móviles.

Enlaces de interés:

  • Flat UI Pro: colección de recursos gráficos de pago que incluye más recursos que la versión Free y también permite obtener las fuentes PSD. http://designmodo.com/flat/
Anuncios

Prueba de RWD en dispositivos Móviles con Adobe Edge Inspect

Cuando se diseñan y crean sitios Webs Responsive y llega el momento de probarlos, lo que generalmente se hace es probarlos reduciendo el tamaño (arbitrariamente) del browser, o en el mejor de los casos hacer uso plugins como “Web Developer”, ya sea para Firefox o para Chrome.

Pero, la realidad nos demuestra que no existe ningún sustituto, lo mejor siempre será probar directamente el sitio Web en un dispositivo móvil real. Los browsers en dispositivos móviles tienen algunas características peculiares y diferentes que las versiones de escritorio, por lo que hace mas fácil encontrar los posibles errores e investigar problemas técnicos que pueden ocurrir.

En este articulo, se pretende mostrar como realizar las pruebas, directamente en un dispositivo móvil, utilizando una herramienta de Adobe Adobe Edge Inspect.

edge-inspect-cover

Adobe Edge Inspect

En primer lugar es necesario instalar la aplicación Adobe Edge Inspeccionar, que se puede descargar desde Adobe Creative Cloud con una cuenta.

edge-inspect-isntall

edge-inspect-isntall1

Después de instalar la aplicación, se abrirá una venta para introducir los datos de usuario (cuenta Adobe Creative Cloud). A continuación, lo que queda es instalar la extensión para Google Chrome de Adobe Edge Inspeccione , y posteriormente la aplicación para dispositivos móviles, tanto para dispositivo iOS y Android  (en el momento de escribir estas líneas).

Instalando la extensión para Google Chrome

Google Chrome es impresindible para la interacciones y control con los dispositivos utilizando Adobe Edge Inspect.

Para ello necesitamos podemos instalar la extencion desde la Chrome Web Store.

edge-inspect-chrome-ex

Conexión A Dispositivos Móviles

Una vez que se termino de instalar, tanto la extención de Chrome como la aplicación en los dispositivos móviles, ahora se puede conectar de su computadora a su dispositivo móvil, en este caso (par mi) un dispositivo Android.

Hay que asegurarse de que los dos dispositivos están en la misma conexión inalámbrica – WIFI, y tambien que la extensión de Chrome está en la posición ON. A continuación, detectar su equipo y le dará una contraseña de 6 dígitos para conectarse.

edge-inspect-phone

Ahora solo queda introducir el código de acceso dentro de la extensión de Chrome.

edge-inspect-chrome

Prueba Web

Una vez que el código de verificación ha sido aceptado y los dos dispositivos están conectados, cada vez que abre una página web en Google Chrome (cuando Adobe Edge Inspect se está ejecutando), entonces al instante se mostrará en el dispositivo móvil conectado.

edge-inspect-prueba

Conclusión

Esta es la manera más recomendada de realizar pruebas de diseños Responsive Design. Como comentario adicional, decir que la versión Pro de Adobe Edge Inspect, permite conectar más de un dispositivo móvil al mismo tiempo.