Iconos gestuales para presentaciones de iPhone GRATIS !!!

Ante todo, mil disculpas por la caída de la web este fin de semana, afortunadamente ya está todo subsanado.

Hoy traemos unos iconos muy útiles para realizar presentaciones o storyboards de aplicaciones iPhone. Se trata de iconos gestuales para poder explicar la funcionalidad de nuestras apps o incluso de nuestras web para iPhone. Son 12 iconos en formato AI de uso libre.

Iconos gestuales para iPhone

Iconos gestuales para iPhone

 

 

DESCARGAR VECTORES GRATIS

Slider para Web App Mobile

Slider para Web App

Slider para Web App

Todos conocemos el efecto de pase de fotos o de la navegación entre contenidos en un Smartphone o tablet. Al desplazar el contenido hacia un lado u otro, este desaparece y aparece el siguiente. Este es el código que traemos hoy en este post de diseño web, en este caso para Web App.

El complemento utilizado es Swipe, un slider ligero hecho para mobile.

Al igual que si de un iPhone, iPad o Android se tratase, el pase de fotografías o contenidos se puede hacer en ambas direcciones, además, Swipe permite el giro de pantalla y se adapta a la pantalla escalándose sin problema alguno.

(más…)

Plantillas psd de iPhone GRATIS !!!

Plantillas PSD iPhone

Templates o plantillas de iPhone en psd, todo en capas para que puedas hacer una buena presentación de tu App o WebApp.

Buen post de GraphicsFuel en el que podrás encontrar toda una relación direcciones en las que descargar gratuitamente todo tipo de psd’s de iPhone. Podrás encontrar desde las carcasas del móvil hasta los más mínimos detalles, como iconos, elementos de formulario, teclados, botones, fondos…

Detectar una o varias acciones en una pantalla táctil

Acciones sobre pantallas táctiles

A diferencia del diseño web convencional, en el diseño para móviles, o tabletas, la interface táctil es diferente a la interface basada en ratón. En una pantalla táctil el modo de comportamiento del usuario es totalmente distinto y eso es algo que tenemos que tener en cuenta y sobre todo aprovechar sus ventajas.

Estamos familiarizados con la experiencia de interacción con la ayuda del ratón, seguramente una experiencia a la que todavía le queda mucho tiempo. La interface táctil es relativamente nueva. En un principio se trasladó la experiencia de ratón a la pantalla táctil, pero en seguida y de forma casi natural, comenzaron a desarrollarse una serie de interacciones basadas en la forma de tocar la pantalla. Gestos, distinción entre el uso de uno o más dedos, acciones pre grabadas que permiten recordar gestos y asociarlos a una acción, etc…

(más…)

Manipular Viewport con CSS

Viewport

Cuanto accedemos desde un smartphone o tablet a un sitio web, normalmente el navegador comprueba la resolución del terminal y escalan el contenido para adaptarlo a su pantalla.

Esta práctica ocasiona verdaderos quebraderos de cabeza en el diseño web para smartphones.

El viewport es un atributo del tag <meta> que  se incluye dentro del <head> de un documento HTML. Su aspecto es el siguiente:

(más…)

Ideas para diseñar Apps para iPhone e iPad

Interfaces para iPhone y iPad

El diseño de Apps es ya una asignatura de obligado conocimiento para un diseñador. Tamaño de gráficos, resoluciones, usabilidad, interfaces, todo es distinto a lo que actualmente hemos diseñado para web, así que no queda más remedio que ponerse al día y fijarse en lo que se está haciendo bien.

En esta pequeña muestra, podemos ver todo tipo de tendencias y soluciones muy creativas en lo referente a interfaces de usuario. Echadle un vistazo porque seguro que de aquí sacareis buenas ideas para próximos diseños.
(más…)

Web App con jQuery Mobile. Tutorial I.

Web App con jQuery Mobile. Tutorial I.

Web App con jQuery Mobile I

Web App con jQuery Mobile I

Hoy vamos a ver cómo enfrentarnos por primera vez a una Web App con jQuery Mobile. Se trata de un pequeño tutorial en el que podrás hacer tu primer diseño web para movil. Es básico, pero puede ser la base de grandes diseños futuros.

Vamos a empezar paso a paso definiendo cada uno de los códigos que componen la Web App y vamos a explicarlos.

(más…)

Diseñando para iPhone e iPad

Diseñando para iPhone e iPad

diseño para iPhone, iPad

diseño para iPhone, iPad

En este blog de diseño web, hemos tratado alguna vez el diseño enfocado a Smartphones, en concreto a iPhone. En esta ocasión pretendo hacer un post que pueda ser un recopilatorio y fuente de documentación para el diseño para iPhone e iPad.

Además de consejos de diseño, podréis descargaros plantillas para diseñar tanto en iPhone como en iPad.

(más…)

Diseño Web para iPhone, iPod, iPad. Detectar navegador.

Diseño Web para iPhone, iPod, iPad. Detectar navegador.

Redireccionamiento para iPhone, iPod, iPad

Redireccionamiento para iPhone, iPod, iPad

En este blog de diseño web, hemos hablado varias veces de lo importante que puede resultar tener la web adaptada para su navegación en terminales móviles, y en particular en iPhone.

Lo ideal sería tener una web adaptada a cualquier tipo de navegador, pero es muy grande la diferencia de usabilidad que existe entre el usuario que accede a nuestro contenido a través de su pantalla de ordenador y el que lo hace a través de un terminal móvil. El tamaño de pantalla, la falta de ratón, incluso el tiempo de dedicación, mucho menor que el que pueda tener un usuario desde casa, son algunos de los factores que nos obligan a tener nuestra web adaptada a estos terminales móviles.

A continuación vamos a ver cómo detectar si el usuario accede a nuestra web con un iPhone, iPod Touch o un iPad.

(más…)

Simular el drag de un iPhone con jQuery

Simular el drag de un iPhone con jQuery

simular iPhone en web

simular iPhone en web

El diseño web es usabilidad y ¿qué hay más usable que el desplazamiento sobre la pantalla de un iPhone?.  Un desplazamiento que además de facilitarnos la navegación por elementos mayores que la resolución de pantalla, nos hace tener la sensación de control absoluto sobre lo que estamos viendo, con una absoluta fluidez que nos permite fácilmente trasladarnos de un lado a otro del documento.

Pues bien, esto mismo ya está inventado para web, Overscroll es un plugin de jQuery que consigue el mismo efecto que el desplazamiento del iPhone.

En el siguiente enlace podréis ver una demo de su funcionamiento y descargaros gratuitamente el código fuente. Como véis en el ejemplo es una aplicación que asemeja el desplazamiento por pantalla del google maps.

Descargar interfaces de móviles en PSD GRATIS !!!

Descargar interfaces de móviles en PSD GRATIS !!!

Interfaces de Móvil en psd GRATIS

Interfaces de Móvil en psd GRATIS

El diseño para móviles, cada día es más significativo, nada mejor que para tener en cuenta medidas, proporciones e incluso para poder hacer la presentación adecuada al cliente, el tener una biblioteca de archivos psd con varios tipos de móviles.

Podréis encontrar desde el master para el iPhone, al Nokia 5800, Nexus One, Htc,…

Una recopilación realizada por http://www.wittysparks.com digna de guardar en favoritos o descargar en nuestros equipos.

Tendencias del Diseño Web. iPad, iPhone, iTouch

Tendencias del Diseño Web. iPad, iPhone, iTouch

Tendencias del diseño web

Tendencias del diseño web

El diseño web ha de adaptarse a los nuevos dispositivos. Pero no se trata únicamente de una motivación meramente económica, buscar una razón más para vender más (algo que todos buscamos), se trata también de explorar un mundo de posibilidades nuevas que nos llegan de la mano de la tecnología de estos nuevos terminales, y en especial claro está de Apple y su acelerómetro.

(más…)

iCE, la App GRATIS para iPhone. Convierte tu iPhone en una coctelera !!!

iCE, la App GRATIS para iPhone. Convierte tu iPhone en una coctelera !!!

Juego Gratis para iPhone - iPod

Juego Gratis para iPhone - iPod

Por fin acabamos de subir nuestra app para iPhone «iCE – Interactive Cocktail Entertainment«. Se trata de un proyecto en el que además de ilusión, hemos puesto muchas horas de trabajo y que espero que os guste.

Una coctelera GRATIS para tu iPhone

iCE es además de una biblioteca con una selección de los mejores cócteles, un juego a mi juicio, muy divertido. Se trata de convertirte en un barman.

El juego tiene varios niveles, en el nivel profesional tienes un bar en el que los clientes van haciendo sus pedidos, y tú tienes que prepararles el cóctel, entrando en el bar, eligiendo los ingredientes, echando los licores inclinando el iPhone o el iPod (ya que vale para los dos), agitando la coctelera para mezclarlo, etc…

Diseño del juego para iPhone

El proyecto está realizado por Medialabs, la idea original es de Santiago Revellado, la programación de Pedro Abreu, y a mi me tocó el diseño 😉

Aquí os dejo unas pantallas del juego, espero vuestros comentarios y sobre todo que os la descarguéis y mandéis vuestros comentarios, además ¡es GRATIS!

juego para iPhone y iPod Touch

juego para iPhone y iPod Touch

Diseñar webs para iPhone

Diseñar webs para iPhone

Diseñar web para iphone

Diseño de páginas web para móviles

Que el iPhone es una revolución está fuera de cualquier duda, y que el futuro de internet pasa por los móviles es algo que me temo irremediable. Si tenemos en cuenta que aquí quien marca el camino a seguir es Apple (no hay más que ver la cantidad de clones que le han salido al iphone) tenemos un resultado claro, «tenemos que aprender a diseñar webs para iPhone«.

(más…)