Diseño web para móvil: patrones y trucos

En el artículo anterior: Mobile first: 10 trucos de diseño web responsive os contamos las diferencias entre el diseño adaptive y responsive. También hablamos de las ventajas de este último tipo de diseño web, gracias al cual el navegador muestra la página de manera óptima en cada dispositivo.

Todos necesitamos una cierta dosis de inspiración a la hora de abordar el diseño de páginas web, además de conocer las últimas tendencias para poder aplicarlas a nuestros proyectos. Por ese motivo, hoy os traemos una pequeña recopilación con galerías de patrones de diseño móvil.

Esperamos que os resulten de utilidad.

MOBIL PATTERNS: INSPIRACIÓN MÓVIL

Ofrece una colección de capturas de pantalla de aplicaciones móviles. Están divididas por sistema operativo (Android o iPhone). También se pueden hacer búsquedas por categorías como login, listas, mapas, galerías, navegación…

MOCKUPHONE: NOS AYUDA A VISUALIZAR EL DISEÑO WEB MÓVIL QUE ESTAMOS CREANDO

Gracias a este recurso podemos visualizar cómo queda el boceto de nuestro diseño móvil en diferentes dispositivos y desde distintos ángulos. Es una herramienta muy útil para presentar propuestas y para hacer modificaciones antes de crear el diseño final.

LOVELYUI: LA AYUDA PARA DISEÑO MÓVIL MÁS WIKI

Lovely UI es un blog que ofrece una colección de elementos de interfaz para dispositivos móviles y donde, además, podemos subir nuestras propias capturas para ayudar a otros. Se pueden elegir vistas de por categorías: botón, listas, mapas, búsquedas…

PTTRNS: INSPIRACIÓN PARA WEBS MÓVILES APTA PARA TODAS LAS CATEGORIAS

Otra interesante y completa galería de diseños de interfaz de usuario para móviles. Se pueden buscar los diseños utilizando su amplio listado de categorías (calendarios, mapas, listas…). Están clasificados por tipo de dispositivo (iPhone, iPad, Android, Apple Watch) lo que facilita enormemente encontrar lo que necesitamos. Además, en muchos casos se puede ver la secuencia de pantallas, lo que resulta muy útil para comprobar el funcionamiento global de una app.

INSPIRED UI: ENCUENTRA INTERESANTES RECURSOS PARA WEB MÓVIL

Esta fuente de recursos ofrece un amplio listado de ejemplos de app divididos en tres categorías: iPhone, iPad y Android. Podemos buscar ejemplos de navegación, pop-ups, notificaciones… Además, se puede ver la secuencia de pantallas de navegación lo que nos permite tener una visión de conjunto del diseño.

ANDROIDUX: ¿CUÁL ES LA TENDENCIA?

Como su propio nombre menciona, en esta web solo se muestran ejemplos para sistema operativo Android. En su mayoría corresponden a la versión Lollipop, con lo que encontramos ejemplos muy actuales que nos ayudan a saber qué es tendencia. Una utilidad muy práctica es el apartado Before/After, donde podemos ver diversos ejemplos de rediseño de aplicaciones.

IOS PATTERNS: EJEMPLOS MULTIPLES PARA IOS

Al contrario que en el caso anterior, en iOs Patterns solamente se recopilan ejemplos de pantallas para aplicaciones que funcionan con sistema operativo iOs. Como en el caso de otros recursos que os hemos presentado aquí, también ofrece secuencias de pantallas, lo que es muy útil para tener una visión global de la app.

¿Conoces algún otro recurso interesante? ¡Tu opinión nos enanta!