Gestos Multi-touch

Primero que todo ¿que es Multi-touch? – Esta es una tecnología que permite la interacción de hombre y máquina mediante movimientos táctiles conocido como gestos táctiles en pantalla. En resumen y más fácil de entender permite al usuario hacer gestos con los dedos para manejar información, por ejemplo: pasar fotos, ampliarlas con un simple movimiento, etc.

Un ejemplo sencillo de un gesto es el “Spread, Se utilizan dos dedos para acercar la imagen, el usuario coloca dos dedos el pulgar y un dedo sobre la pantalla y para agrandar los separa sin levantarlos de la pantalla.

A continuación dejo 2 recursos muy completos en donde es muy fácil de  interpretar los distintos tipos de gestos y pueden ser utilizados de forma gratuita para cualquier tipo de proyecto.

Gestos Multi-touch

1 – Gesture Reference Guide
Esta guía contiene: 1) resumen de los gestos básicos 2) la forma de utilizar estos gestos para apoyar las acciones de Usuario 3)representaciones visuales de cada gesto para usar en la documentación de diseño y prestaciones.
Formatos: pdf, eps. omnigraffle stencil, visio stencils y visio.

Esture Reference Guide

2 – Touch Gesture Icons
Los iconos son libres para usar en cualquier proyecto personal, comercial, incluyendo el diseño web, software, aplicaciones, publicidad, cine, vídeo, juego de ordenador, diseño gráfico, ilustración, propios o para clientes.
Formatos: psd, eps, png en cinco tamaños diferentes: 48px, 64 px, 128px, 256px y 512px

gesture-icons-001

Grillas de diseño para móviles

La estética visual del diseño y la organización a veces caen en diferentes categorías. Relaciones tipográficas y espacios en la pantalla, se vuelve cada vez más difícil La or, tener el control de estos es de suma importancia sobre todo en proyectos grandes, entonces es necesario y útil el uso de grillas en el diseño en el sitio web.

Hace un par de meses diseñe una grilla para iPhone 4/4s, con el fin de ser usado de forma personal, pero cada vez la ocupo mas en mi lugar de trabajo fulltime.

Recurso en PSD para el uso de grillas de diseño para móviles.

A continuación, pueden descargar un archivo ZIP que contiene dos PSD uno para la IPhone 4/4s pantalla retina y otro para el iPhone 3G. Hay varios elementos separados por capas, Puedes usar este recurso libremente en cualquier proyectos, personal o comercial.

IPhone, 3G, 3GS (320×480) 

Grilla IPhone 3 copia

 

Phone 4 Retina Display (640×960) 

Grilla IPhone 4 copia

Diseño web adaptable o responsive web design

screens

El diseño y programación de sitios web adaptable o responsive web design permite crear sitios w<eb que se adaptan a cualquier dispositivo en que se esté navegando, lo que al usuario acceder a un sitio web desde diferentes medios: smartphones, tablets, netbook, notebook, desktop ,monitores y lo que venga.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web.

Importancias de las webs responsivas

Según las ultimas estadísticas realizadas por StatCounter desde Agosto de 2011 hasta Agosto de 2012 en estados unidos deja claro el incremento de dispositivos de los que se accede a internet y la web excluidas las apps.

DE-Traffic-Share-Data_September-2012-615x396

Beneficios del diseño y programación de sitios web

1 ) Cómo beneficia al cliente

No será necesario contratar dos o tres proyectos en paralelo para abarcar los diferentes soportes. Pasamos de crear una plataforma específica para móviles y otra para portátiles o sobremesas, a simplificar y obtener un todo en uno que se adapte a cualquier tipo de resolución.

Reducción de costos: Se reducen los costos ya que hasta hoy se debe hacer un sitio para la web y otro para dispositivos móviles. Esto origina mayores costos de creación y mantenimiento de la información.

Eficiencia en la actualización: El sitio solo se debe actualizar una vez y se ve reflejada en todas las plataformas. Cuando tenemos los portales independientes para web y móvil se debe realizar la actualización dos veces lo que crea la necesidad de mayor cantidad de recursos y posibilidad de error.

Beneficios Posicionamiento web (SEO)

Google recomienda uso responsive para ahorrar trabajo a su Googlebot-Mobile,
Responsive Design parte de la premisa “one page”, y por lo tanto, resultará más fácil posicionar un solo sitio que uno por cada dispositivo.
Imaginemos que finalmente nos decantamos por crear 3 sitios diferentes para abarcar los dispositivos existentes (www.misite.com + m.misite.com + ipad.misite.com). De este modo entramos en la problemática de que cada enlace entrante o mención en las redes sociales se repartirían entre las 3 URL’s, en función del dispositivo desde el que esté conectado el usuario. Mientras que utilizando un diseño de respuesta, toda la influencia linkbuilding favorecerá a esa única página ante los motores de búsqueda.

2 ) Cómo beneficia al usuario

La presencia móvil ha facilitado el acceso a la Red, y ahora es el turno para que los usuarios sean capaces de navegar de manera satisfactoria gracias al Responsive Design, independientemente del dispositivo en el que se encuentren. Solución para reducir la tasa de rebote, haciendo que el usuario pase más tiempo en la página por su facilidad de lectura y óptima visualización de los contenidos.
Además, el uso de esta tecnología favorece la accesibilidad para usuarios con dificultades visuales, aprovechando los márgenes de la página para mostrar los contenidos con la máxima calidad posible.

Impacto en el visitante: Esta tecnología por ser nueva genera impacto en las personas que la vean en acción, lo que permitirá asociar a la marca con creatividad e innovación.

Mejora la usabilidad y conversión: Esta tecnología aporta a la usabilidad y la conversión. Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante aumenta la conversión.

La web se adapta al medio en el que se muestra por lo que para el usuario es mucho más fácil navegar. Para entender bien esto, podemos utilizar un ejemplo sencillo: en una web vista desde un ordenador, pueden aparecer links de texto, sin embargo, si esta misma web se viera desde un dispositivo móvil, los links de texto suelen ser demasiado pequeños para acertar con los dedos. De ahí que se creen botones, para mejorar la usabilidad.

¿Cuándo utilizar responsive web design en un sitio web?

Sitios orientados a marca con estructuras simples: Los sitios web sin mucha complejidad son adecuados para ser realizados con esta tecnología.

¿Cuándo no utilizar responsive web design en un sitio web?

El responsive web design no funciona de manera adecuada en sitios complejos o con bastante contenido: Los sitios complejos también se vuelven muy complejos para navegar con tecnología responsive web design, en estos casos es mejor tener un portal móvil y otro para computadores de escritorio.

Problema: Diferentes dispositivos y resoluciones

La web se desarrollaba para un par de resoluciones de pantalla y con la entrada de los smartphones y las tablets las resoluciones se multiplicaron.

resolution_chart_in-line

Resoluciones:

Resolución por defecto: 980px en adelante
Nuevas resoluciones: 1200px en adelante
Tabletas en posición vertical (portrait): 768px en adelante
Teléfonos y tabletas gama baja: 767px e inferiores
Teléfonos gama media y baja: 480px e inferiores

¿El responsive web design vale la pena?

En un estudio realizado por el Pew Research Center , el 60% de los usuarios de dispositivos móviles prefieren leer noticias desde un navegador en vez de leerlo en una aplicación. Cuando se trata de contenido de texto, la mayoría de los usuarios favorecen siempre el navegador a través de una aplicación, por lo que ser capaz de mostrar este contenido a través de diferentes pantallas es una necesidad.

Frameworks y Grids de CSS para responsive web design

Foundation 3

Bootstrap

Gumby Framework

Responsive Aeon Framework

Ingrid CSS Fluid Framework

Titan Framework

Less+ Framework

Columnal

Gridiculo.us

Responsive Grid System

Susy: Responsive Grid for Compass

Colección de resposive web design

Media Queries

Sketching para realizar wireframe de distintos browser para móviles (Iphone 4 / 4S)

El desarrollo de wireframes (de baja intensidad o alta intensidad) es un proceso importante de creación, sirve principalmente para crear y materializar ideas, administrar espacios, estructurar,  presentar proyectos, generar discusión,  testear, comportamientos, incluir tanto al cliente como a los desarrolladores de tu equipo desde el inicio del proyecto y hacerlos participes de este y no encontrarse con sorpresa a la hora de hacer el traspaso formal del proyecto. Todo esto tomando en cuenta los entregables del arquitecto de información como: brief, inventario de contenido, mapa de sitio, flujo de contenido, map mind, partituras de interacción. etc…

Personalmente me preocupo de los espacios donde diseño, cada navegador tiene interfaces y espacios muy parecidos pero hay detalles que no se nos deben escapar, lo menciono mas adelante.

Sobre Resoluciones en distintos browser para móviles

Debemos tener en cuenta que la resolución de los iPhone 4/4S son de 640×960 píxeles, 326 ppp y las versiones anteriores son de 320×480 píxeles, 160 ppp.

Ejemplo espacio de diseño con Chrome

En posición vertical el área visual de diseño que nos ofrece Chrome sin hacer scroll es de 640×830, mientras que en posición horizontal (o apaisada) el área de diseño es 960×510, como se puede apreciar en las imágenes (1), Chrome a diferencia de Safari no tiene barra de navegación y no oculta la barra de dirección.

Sobre los Sketching para realizar wireframe de distintos browser para móviles (Iphone 4 / 4S)

He diseñado 5 Sketching para los 5 navegadores mas usados para IPhone

1) – Página n°1 información técnica sobre el navegador con respecto a espacios e interfaces, resoluciones y espacios de diseño de los 5 navegadores mas usados en IPhone 4/4S

mercury

safari

pufffin

opera

crhome

2) – Página n°2 Sketching para Wireframear.

Sketching templates Iphone 4-4S CHROME