Diseñar sitios web de aplicaciones móviles Killer: consejos y ejemplos

La escena móvil ha crecido exponencialmente en los últimos años. La App Store de iOS junto con las aplicaciones de Android en Google Play se han convertido en los dos puntos de acceso para los entusiastas de los teléfonos inteligentes. A medida que aumenta el número de usuarios de teléfonos inteligentes, vemos que cientos de desarrolladores de aplicaciones móviles lanzan nuevas ideas al mercado.

Las aplicaciones más populares están acompañadas de su propio sitio web . Esto puede ser útil con el marketing y dar a conocer su nombre. También es una URL en línea mucho más bonita que cualquiera de las tiendas de aplicaciones. Siento que cualquier aplicación móvil exitosa casi requiere presencia en la web.

En este artículo, quiero repasar algunas de las tendencias de diseño más comunes para sitios web de aplicaciones móviles . No hay un reglamento estricto que deba seguir para crear un diseño de este tipo. Más bien, existen algunas pautas y tendencias únicas que los diseñadores web han encontrado que funcionan bien para ganar audiencia. Junto con mi Guía de desarrollo de iOS , puede armar una aplicación móvil fantástica y también construir su sitio web.

Consulte estos conceptos a continuación e intente implementar algunos en el diseño del sitio web de su propia aplicación.

Capturas de pantalla del dispositivo

Una pieza básica para cualquier sitio web de aplicación móvil deben ser las capturas de pantalla de la aplicación. Los visitantes solo están interesados ​​en su aplicación, y ¿qué forma más rápida de demostrar su propósito que a través de capturas de pantalla? Puede ajustar las tomas del dispositivo en cualquier estilo de diseño, por lo que no es un factor limitante.

Easy Chef es una aplicación iOS española que utiliza muchas tomas de dispositivos. La parte superior del diseño tiene una vista previa de presentación de diapositivas de diferentes vistas. Pero a medida que se desplaza hacia abajo, verá otros diagramas que utilizan pantallas de iPhone. Estos paneles incluyen etiquetas detalladas y vistas de pantalla ampliadas y de cerca. De hecho, he escrito sobre el diseño de gráficos informativos de productos en una publicación anterior.

Otra configuración interesante se puede encontrar en la página de la galería de Tweetbot . Este es un cliente de Twitter muy popular para iPhone y los desarrolladores han reunido una muestra deslizante de capturas de pantalla. Si está intentando ahorrar espacio en su diseño, esta puede ser una solución más sencilla. Los visitantes no necesitarán desplazarse hacia abajo en busca de una vista específica. jQuery es fácil de implementar y puede armar rápidamente una vista previa de la pantalla deslizante del iPhone. Puede ser difícil incluir detalles adicionales, pero esto se puede agregar en otra sección.

Insignias de la App Store

Esta técnica también parece muy sensata una vez que haya terminado de construir la aplicación. Las insignias se reconocen rápidamente como enlaces de descarga al mercado de aplicaciones. Tanto los usuarios de Android como de iOS tienen la capacidad de ver aplicaciones directamente desde su navegador, o esto se redirigirá cuando se vean en un teléfono inteligente.

Me gusta usar Instagram como ejemplo, ya que el sitio web se actualizó a un diseño más nuevo. Tienen insignias compatibles con Android Marketplace ( Google Play ) y iOS App Store. Ambas insignias tienen un diseño muy simple pero se reconocen fácilmente de un vistazo. Si está buscando diseños más complejos, le recomiendo una búsqueda rápida por goteo . Los diseñadores talentosos a menudo comparten los conceptos de la insignia de la tienda de aplicaciones para recibir críticas constructivas.

Redes sociales móviles

Facebook y Twitter se han pasado al móvil, pero esto no ha impedido que surjan otras redes. Estamos viendo que las redes sociales utilizan aplicaciones móviles para permitir una plataforma de comunicación completamente nueva.

Localmind funciona con un concepto similar al de Foursquare, en el que registras una cuenta y comienzas a registrarte en lugares locales. Puede dejar preguntas o responder las preguntas de otras personas. Su sitio web es muy amigable y atractivo para los recién llegados. Me encanta especialmente la sección de banner superior diseñada con un fondo de mapa personalizado. El uso de degradados y texturas de fondo dan vida propia al sitio web.

Uso compartido mínimo de fotos

Pose es otra red móvil con ideales similares para el diseño minimalista. Puede descargar la aplicación móvil para dispositivos iOS y Android. La sensación es similar a weheartit, pero es para los amantes de la moda móvil. Toda la aplicación se centra en la moda, el cabello, el maquillaje y el glamour.

Los usuarios pueden tomar fotos de su atuendo, ropa o accesorios y compartirlas en la red. Una cosa a tener en cuenta sobre Pose es la rapidez con la que puede navegar por el sitio web. Es fácil encontrar el blog de la empresa, los datos de contacto, etc. Otros sitios web de aplicaciones a menudo pasan por alto estas características corporativas que pueden ser un tema delicado.

Si desea llamar la atención de los medios de comunicación, es importante que su sitio web se vea y se sienta como un producto de red social real. No solo está tratando de vender su aplicación (mediante anuncios o suscripción paga) sino que también vende la red en sí. Las aplicaciones sociales definitivamente pueden ser más complicadas que diseñar sitios web de aplicaciones normales. Pero también obtienen muchas más descargas de los usuarios y es un campo nuevo y emocionante para dispositivos móviles.

Desde humildes comienzos

Los diseñadores web no siempre son capaces de reunir gráficos e íconos extravagantes. Afortunadamente, los sitios web de aplicaciones no son fundamentales para determinar la destreza que tiene Adobe Photoshop. De hecho, creo que el minimalismo puede funcionar mucho mejor para este estilo de diseño.

Leef App es un cliente Forrst recientemente lanzado para iPhone. Su sitio web incluye una hermosa captura de pantalla de la aplicación junto con un gran botón de descarga en negrita. Todo el texto de la página se simplifica de manera similar a las fuentes y esquemas de color de Apple.

Lo que hace que el sitio web de Leef sea excelente es la naturaleza franca de cada elemento de la página. Es descarado y directo sin nada oculto o dejado de lado. Recomiendo probar este estilo como su primer sitio web de aplicación móvil, en todo caso solo para practicar. Puede aprender mucho si minimiza los detalles menores y se concentra en lo que llama la atención.

Precioso espacio en blanco

También tan brillantemente simple es el sitio web de la aplicación Wood Camera. Su diseño contiene nada más que un fondo blanco liso y contenido centrado. Este contenido incluye algunas capturas de pantalla predeterminadas, una insignia de la tienda de aplicaciones y algunas características clave adicionales.

Si sientes que el minimalismo y el espacio en blanco son importantes para tu diseño, ¡apégate a ello! Wood Camera no es un diseño de sitio web particularmente alucinante, pero es muy fácil de navegar. Su sitio ni siquiera tiene enlaces a ningún contenido alternativo aparte de la página oficial del desarrollador. Esto mantiene el enfoque en la aplicación y lo que puede ofrecer, lo cual es mucho más importante que los gráficos llamativos. Aunque eso no quiere decir que una obra de arte llamativa sea una mala idea, solo requiere una implementación adecuada.

Color vibrante Ilustraciones

Todo lo contrario al enfoque minimalista es un trabajo con ilustraciones únicas, que adoro totalmente. A menudo, este detalle adicional me venderá completamente la aplicación. Un ejemplo con el que puedo identificarme es la aplicación Barista para iPhone. El encabezado de su sitio está plagado de pequeños capuchinos vectoriales y bebidas espresso.

Pero observe cómo no hay otras imágenes cuando se desplaza hacia abajo en la página. Toda esta sección superior fue diseñada específicamente para la aplicación de iPhone, similar a una página de destino . Los vectores captan tu atención de inmediato y también dan pistas sobre de qué se trata la aplicación.

Kitchenator es una aplicación de iOS similar que convierte unidades de medida para cocinar y hornear. El diseño de su encabezado utiliza ricas texturas de madera, un mantel a cuadros y mini cucharadas de agua. Estas imágenes apuntan al propósito de esta aplicación incluso antes de echarle un vistazo al contenido.

Este estilo de diseño en realidad impregna todo el diseño. El área del pie de página coincide con un fondo de madera similar y muchas de las mismas opciones de fuente. Este es un ejemplo de un diseño de sitio web muy simple con algunos gráficos muy poderosos.

Sitios web de aplicaciones: escaparate premium

¿Qué artículo estaría completo sin un poco de atractivo visual? Junto con las técnicas anteriores, también he creado esta hermosa galería de sitios web de aplicaciones móviles; observe el logotipo y los esquemas de navegación, así como las URL del dominio. Al estudiar lo que hacen los profesionales, puede comprender las tendencias del diseño y utilizarlas en sus propios proyectos.

Aplicación Bosquet

Aplicación Banjo

Everyme

Aplicación Gifture

Fontain

ImGame

Aplicación Sparrow

Cosas para iPhone

Snapguide

Whoovie

Camino

Repeat Timer Pro

La pata más linda para iPhone

Aplicación de pistacho

Delibar para iPhone

Bosquejo con amigos

Obtener la aplicación Billy

Aplicación Peg Jump

Detener el vómito

Crowdspottr

Munch 5 al día

Aplicación Travveling

Aplicación de folleto

Obtener galería

Plazaa

Aplicación Make Faces

Aplicación Float

Tejido

Aplicación Ballin ‘

Forkly

Mycityway

Toque la aplicación Place

Aplicación Photo Stats

Mezcla de ideas

Holitapp

Deja un comentario

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