Más de 40 recursos y obsequios para el diseño de aplicaciones web móviles

Los avances de los teléfonos inteligentes han mejorado la calidad del desarrollo web móvil. Ahora es posible generar aplicaciones web completas utilizando solo HTML5 y CSS3 . Junto con muchas bibliotecas de JavaScript, las posibilidades de desarrollo móvil son infinitas.

En esta publicación, he reunido algo más de 70 recursos para desarrollar sitios web y aplicaciones web móviles.

Esta colección se centra más en aplicaciones web HTML5 / CSS3 / JS que en marcos o aplicaciones nativas. El propósito es darle a su aplicación web móvil una apariencia similar a la de las interfaces nativas.

Una mirada a: Diseño para dispositivos móviles

.no-js #ref-block-post-10687 .ref-block__thumbnail { background-image: url(“https://assets.hongkiat.com/uploads/thumbs/250×160/designing-for-mobile-devices.jpg”); }

Una mirada a: Diseño para dispositivos móviles


Cuando se lanzó el primer iPhone, arrasó en el mundo de la tecnología.
Desde entonces ha sido …
Lee mas

Gráficos PSD y UI

Los PSD gratuitos son generalmente los activos más útiles para los desarrolladores web. Si no tiene conocimientos de Photoshop, puede resultar estresante intentar diseñar una interfaz hermosa.

Asimismo, este conjunto de gráficos incluirá muchos botones, formas, texturas, barras de herramientas y otros útiles kits de GUI.

Interfaz gráfica de usuario de Android

Al igual que en el primer kit de GUI, también podemos encontrar elementos móviles relacionados con aplicaciones nativas basadas en Android.

Dependiendo de cómo desee diseñar su aplicación web móvil, estos dos paquetes de gráficos pueden proporcionar todo lo que necesita. Seguir con estilos básicos hará que sus diseños parezcan más integrados en el dispositivo.

Kits de diseño de interfaz gráfica de usuario de gráficos de Android gratis
Aplicación de Passbook iOS6 UI PSD

En cuanto a los kits de interfaz de usuario más avanzados, tenemos este increíble PSD de diseño de aplicación para iPhone. Esto es para una aplicación móvil Passbook que incluye una serie de capturas de pantalla de diferentes páginas.

Todo el diseño tiene capas y se puede descargar gratis.

interfaz de descarga psd gratuita de la aplicación iphone ios
Interfaz de usuario de la aplicación iOS de información sobre herramientas

La información sobre herramientas del menú no es tan común, pero esto no significa que no sirvan para nada en una aplicación web HTML5. Los iconos y estilos de los botones pueden repetirse mediante imágenes o códigos CSS3. Esto le dará una ventaja sobre la competencia con un estilo de interfaz rico.

tooltip freebie psd interfaz gráficos móviles
Nuevo kit de interfaz de usuario para iPhone

Los diseñadores de MediaLoot publican contenido premium y gratuito. Sin embargo, gran parte de su contenido gratuito sigue siendo de una calidad excepcional. Este kit de interfaz de usuario tiene la etiqueta Fresh iPhone y muestra un útil diseño de aplicación iOS.

Puede trabajar con los gráficos PSD para duplicar barras de título y degradados / texturas similares en su propia aplicación web.

Descarga gratuita del kit de interfaz de usuario para iPhone fresco psd
Cambio de iOS de gota de lluvia

Los interruptores de palanca son en realidad nativos de los dispositivos iOS, pero no se encuentran en ninguna parte de HTML5 / CSS3. Con este gráfico PSD, puede intentar construir un interruptor de palanca de estilo similar con una combinación de colores más agradable.

Los fondos son mucho más profundos que los elementos normales de la interfaz y el texto también es más grande y más fácil de leer.

control deslizante ios randrop encendido apagado
Kit de interfaz de usuario nublado

365psd es un sitio web increíble que todavía publica nuevos obsequios continuamente todos los días. Retrocediendo un poco en el tiempo, quiero hacer referencia al Cloudy UI Kit, que está lleno de elementos gráficos increíbles.

Podemos encontrar botones, barras de búsqueda, controles deslizantes, interruptores de encendido / apagado, menús desplegables y toneladas de otras cosas interesantes.

kit de interfaz de usuario nublado psd freebie
Punteros de mapa

Muchas aplicaciones nativas de Android e iOS se centrarán en la geolocalización. También se han creado aplicaciones web HTML5 en torno a API como Google Maps . Y estos mini iconos de pin de mapa son el compañero perfecto para cualquier estilo de aplicación web móvil.

móvil mapa punteros alfileres gráficos geolocalización
Descargas móviles UI Freebie

DeviantArt es una gran comunidad llena de artistas muy talentosos. Esta descarga gratuita en particular incluye una pantalla de aplicación móvil con barras de carga.

Al crear una aplicación web avanzada, es posible que deba manejar las cargas de avatar o contenido similar publicado por los usuarios. Esta interfaz de usuario de ventana debería proporcionar un excelente punto de partida.

descargas móviles gratuitas carga interfaz de carga

Plantillas móviles

El proceso de bosquejar su aplicación web móvil puede resultar complicado. A menudo es más tentador saltar directamente a la codificación y detallar el diseño después. Pero tomarse el tiempo para planificar los resultados puede ser de gran ayuda.

Esta pequeña colección de plantillas móviles y wireframes debería ayudarlo con esta tarea. He incluido plantillas de wireframing para dispositivos Android e iOS.

Plantilla de icono de aplicación iOS

Casi todos los diseñadores / desarrolladores de iOS deben conocer la plantilla de iconos de iOS de Michael Flarup en Pixel Resort . Recientemente compró un dominio de nivel superior para AppIconTemplate.com donde puede descargar este PSD gratuito.

Debo recomendar al 100% que tome este obsequio si planea admitir que su aplicación web móvil se guarde en la pantalla de inicio del iPhone.

ios app icon templates psd freebie
Tema de interfaz de usuario de AppView para iPhone

Me gusta pensar en el tema de AppView más como una plantilla para diseñadores minimalistas. Este conjunto de PSD incluirá todos los elementos de interfaz típicos que espera encontrar en las aplicaciones de iOS.

Es el punto de partida perfecto para agregar su propio contenido y configurar plantillas de página básicas para su aplicación web.

iphone ui plantillas gratuitas appview
Plantilla de dibujo de Android

Estas plantillas de Android son otra herramienta para construir su estructura de alambre principal. Tenga en cuenta que su aplicación web móvil no necesita imitar ninguno de los sistemas operativos móviles. Pero ayuda a usar los elementos predeterminados como punto de partida para sus proyectos.

iphone sketch stencil ui kit plantillas de wireframing
Plantilla PSD para Aplicación de iPhone

Esta plantilla PSD de aplicación gratuita para iPhone es cortesía de CreativeVIP .

Su biblioteca incluye muchos gráficos móviles útiles, pero esta interfaz de iPhone en particular ofrece una barra de pestañas y conjuntos de iconos. Más una pantalla de inicio y un diseño de página de contenido para sus propias personalizaciones.

plantilla de aplicación de iphone psd freebie ui

Conjuntos de iconos

¿Qué aplicación web móvil estaría completa sin una serie de iconos de interfaz relacionados? Piense en todos los lugares donde encontrará estos glifos y símbolos. Las áreas de la barra de herramientas de navegación superior y de la barra de pestañas inferior suelen utilizar iconos para representar las acciones de los botones.

Además, puede incrustar conjuntos de iconos en el contenido de su página para un enfoque más visual en las pantallas de los dispositivos móviles. La mayoría de estas colecciones incluirán una versión retina junto con los tamaños estándar de los iconos.

100 iconos de glifos de retina

Recientemente, Speckyboy publicó una colección de iconos de glifos de retina gratuitos para diseñadores móviles. Estos iconos se pueden usar en cualquier lugar de su diseño y también se pueden colocar @ 2x para pantallas de alta DPI.

freebie vector icons set galería ui iphone
Conjunto de iconos de MFG Labs

MFGLabs tiene un buen historial de lanzamiento de obsequios en la comunidad de diseño. La página de destino realmente se destaca, ya que puede ver cómo estos iconos se pueden colocar en un estilo de diseño típico. Obtén una descarga gratuita del paquete y juega en tu tiempo libre.

mfglabs freebie icons psd barra de pestañas móvil
Web0.2ama

Estos iconos bien diseñados también son útiles en áreas típicas de contenido móvil. No todas las aplicaciones web móviles necesitarán muchos iconos además de las funciones de interfaz. Pero las colecciones son de uso gratuito y de descarga gratuita.

iphone glifo iconos diseño freebie ios descargas
Conjunto de iconos comunes para desarrolladores de Android

La mayoría de las colecciones que hemos visto pertenecen a los iconos de iOS inspirados en Apple. Sin embargo, el paquete de GUI de Android también tiene muchos iconos nativos que puedes encontrar. Y este juego gratuito es perfecto para desarrolladores móviles que buscan imitar la sensación de la interfaz de Android.

iconos de aplicaciones comunes establecen glifos gratis
Iconos limpios

Los iconos limpios de IconDeposit son demasiado pequeños para usarlos en elementos de la barra de pestañas. Pero tienen el tamaño y la forma adecuados para las funciones de la interfaz y los botones de la barra de herramientas. Los gráficos son de color blanco a gris, pero puede actualizar los colores y efectos en Photoshop.

iconos de glifo set obsequios transparentes
Paquete de regalo IconBeast

El paquete gratuito IconBeast también está lleno de hermosos glifos para las barras de pestañas de iPhone. El paquete de color gris incluye más de 300 iconos que están dimensionados para dispositivos retina.

ios freebies png pack set iconos descargas
Iconos de almacenamiento de dispositivos

Este paquete de almacenamiento de mini dispositivo realmente me llamó la atención y quería incluir el conjunto aquí en nuestros recursos móviles. Estos son íconos monocolores que encajan mejor en su contenido, en párrafos o en botones de menú.

dispositivo de almacenamiento mini iconos set freebie
Iconos de rectángulo

Los íconos rectangulares son otra solución para la estética del contenido desnudo. Estos se pueden actualizar fácilmente en tamaño y color, además de que encajarán perfectamente en cualquier diseño móvil.

dribbble green freebies iconos conjunto descargar
Iconos nativos de Android

Por último, tenemos algunos iconos de interfaz de usuario móviles más nativos basados ​​en Android. Este obsequio es una excelente adición al conjunto que está controlado principalmente por estilos de iOS.

iconos vectoriales iconset nativos gratis descargar

Herramientas en línea

Es cierto que no existen tantas herramientas en línea y aplicaciones web utilizadas para crear sitios móviles. Sin embargo, las herramientas que están en línea pueden proporcionar mucha ayuda para acelerar el proceso de desarrollo.

Las herramientas web pueden facilitar su trabajo al proporcionar plantillas de código HTML5 / CSS3, generadores de iconos, demostraciones de teléfonos inteligentes y muchas otras ventajas también.

MakeAppIcon

MakeAppIcon es posiblemente la mejor herramienta en línea para desarrolladores de dispositivos móviles. Si no tiene tiempo para cambiar el tamaño y crear los diferentes iconos, esta aplicación web se encargará del trabajo por usted. Es de uso completamente gratuito y funcionará con todos los formatos de iconos comunes.

herramienta web gratuita webapp online conversión ios tamaños de iconos
Iconos DB

Si los conjuntos de iconos enumerados anteriormente no son suficientes, siempre puede consultar la base de datos de iconos. Su base de datos está repleta de nuevos iconos GPL de código abierto para usar en sus propias aplicaciones. Simplemente haga una búsqueda en el sitio web o haga clic en cualquiera de las etiquetas relacionadas en la barra lateral.

Iconos DB base de datos sitio web webapp herramientas en línea recurso
HTML5 móvil

HTML5 móvil no es tanto una aplicación web como un recurso en línea. Su página está codificada con un gráfico que muestra todas las diferencias en la representación de HTML móvil en los navegadores. Esto tiene en cuenta muchas de las diferentes aplicaciones de iOS, junto con los navegadores web basados ​​en Android.

tabla de compatibilidad html5 navegadores aplicación web móvil
Vídeos de aplicaciones web móviles HTML5

Treehouse es una nueva biblioteca de aprendizaje en línea que ayuda a los desarrolladores a adquirir nuevas habilidades. Su biblioteca de videos incluye CSS3, HTML5, jQuery e incluso programación Objective-C.

Esta página, en particular, maneja el desarrollo HTML5 para aplicaciones web móviles. Consulte algunas de las funciones para ver si estaría interesado en estudiar alguno de los temas en cuestión.

videos de treehouse aprendizaje en línea desarrollo de aplicaciones web móviles
Diseñador de maquetas

Mockup Designer es una herramienta alojada en Github que es gratuita para todos. Proporcionan elementos de interfaz muy básicos para estructurar su propio diseño. Extremadamente útil si recién está comenzando a crear diseños para aplicaciones web móviles.

Herramientas de aplicaciones web de Github Mockup Designer gratuitas
Initializr

Si no tiene una plantilla HTML5 básica, le recomiendo que consulte Initializr. Es una herramienta web gratuita que agrupará y empaquetará códigos HTML5 / CSS3 como plantilla para sus proyectos. Esto le ahorrará tiempo durante el desarrollo y reducirá drásticamente sus requisitos de codificación.

Inicio de la aplicación web del sitio web del inicializador de proyectos HTML5

Código fuente abierto

La pieza final para construir una aplicación web móvil es el código. Todos los desarrolladores de frontend al menos han oído hablar del diseño web receptivo. Quiero señalar que este no es siempre el camino a seguir cuando se crean aplicaciones web móviles.

Sin embargo, muchos de estos complementos y marcos de código permiten un diseño web receptivo para dispositivos móviles, lo cual es excelente cuando también se admiten navegadores de escritorio. También encontrará fragmentos de código que reflejan los efectos nativos de los teléfonos inteligentes Android e iOS.

iOS.js

iOS.js es una poderosa biblioteca de JavaScript que actualiza la apariencia de su página web. Obligará a ciertas funciones a comportarse como si se procesaran de forma nativa en un iPhone. Hay muy poco soporte para usuarios que no utilizan JavaScript, pero es una buena biblioteca que merece un poco de atención.

iosjs biblioteca javascript regalos de código abierto
Panel de desplazamiento de iOS

¿Sabes cómo puedes deslizar hacia la izquierda / derecha en la pantalla de inicio del iPhone para cambiar entre iconos? Este efecto exacto se ha duplicado para la web como un complemento de jQuery. iOS ScrollPane es un recurso gratuito para que su aplicación web duplique el mismo efecto de pantalla de inicio.

ios jQuery plugin scrollpane freebies pantalla de inicio
PhotoSwipe

Al comparar los complementos de presentación de diapositivas receptivos para dispositivos móviles, tendré que recomendar PhotoSwipe. Su documentación es muy simple y el soporte es fenomenal. Tanto los teléfonos inteligentes como las tabletas se beneficiarán de este complemento de jQuery.

presentación de diapositivas responsive mobile jquery plugin deslizar aplicaciones web
Tema móvil jQuery estilo iOS

Otro paquete impresionante en Github es este tema jQuery Mobile al estilo de iOS. La mayoría de los desarrolladores web de frontend conocen jQuery Mobile, que ofrece una interfaz móvil HTML5 / CSS3 dinámica.

Si disfruta de su biblioteca, definitivamente querrá probar este tema que replica las aplicaciones nativas de iOS.

ios iphone jquery mobile webdev template theme open source
jQuery slideToucher

slideToucher es un complemento de jQuery para agregar paneles de deslizar a deslizar en su aplicación móvil. Estos no funcionarán igual en su navegador de escritorio con la navegación del mouse. Entonces, aunque este complemento puede ser excelente para usuarios móviles, no es ideal para sitios web receptivos.

diseño de paneles deslizantes del complemento de aplicación web móvil
LimeJS

Junto con las aplicaciones web móviles típicas, hay muchos diseñadores interesados ​​en los juegos móviles HTML5. Esta biblioteca Lime.js de código abierto es un marco HTML5 para juegos en el navegador. Proporciona gestos táctiles nativos y también admite potentes extensiones a través de códigos JavaScript.

marco de juego html5 móvil de código abierto lime.js
Desplazador de contenido personalizado

De todos los complementos de jQuery aquí, creo que el Desplazador de contenido personalizado es mi favorito. Esto imitará el estilo de iOS de contenido deslizante que se puede aplicar en cualquier div o sección de la página. Puede deslizar para desplazarse o hacer clic y arrastrar en la barra de herramientas semitransparente de estilo OSX.

plugin jquery contenido personalizado barra de desplazamiento aplicaciones web de código abierto
Marco Junior

Junior es un marco HTML5 mucho más pulido y refinado para crear aplicaciones web móviles. Su sitio web tiene muchas demostraciones y la documentación es muy fácil de leer.

Puede que requiera un poco de trabajo inicial para concretar los conceptos básicos, pero es un paso adelante en el soporte de aplicaciones web HTML5 móviles.

Descarga gratuita de código abierto de HTML5 Junior framework
Casillas de verificación de estilo iOS

Todos conocemos los interruptores de encendido / apagado nativos que se encuentran en iOS. Este complemento de jQuery le permitirá diseñar cualquier elemento de casilla de verificación de formulario de entrada para que se comporte como un control deslizante. Los códigos se pueden descargar gratis y son muy fáciles de usar en cualquier sitio web.

ios mobile iphone framework casillas de verificación complemento jquery
Plantilla de iOS HTML5 de Luckyshot

La plantilla Luckyshot es un proyecto HTML5 / CSS3 de código abierto gratuito para crear diseños similares a las aplicaciones de iPhone y iPad.

Todo el marco está construido sin JavaScript y es totalmente sensible para adaptarse naturalmente a todos los monitores y pantallas móviles. Cualquiera que busque una solución HTML5 para aplicaciones web iOS naturales definitivamente debería consultar el marco de Luckyshot .

plantillas ios iphone ipad elementos móviles código fuente

Pensamientos finales

Esta colección exhaustiva de códigos móviles y kits de GUI debería proporcionar una biblioteca para los nuevos desarrolladores. A medida que avancen las tendencias, probablemente veremos una avalancha completamente nueva de herramientas y recursos que se publicarán en línea.

Espero que esta guía ofrezca un punto de partida audaz para que su idea de aplicación web se lance con el pie derecho. Pero si tiene alguna pregunta o recursos adicionales que podamos haber perdido, no dude en compartir sus pensamientos en el área de discusión posterior.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *