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.

Gráficos del sitio web de la aplicación Easy Chef para iOS

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.

Galería de capturas de pantalla de la aplicación para iPhone Tapbots y Tweetbot

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.

Insignias de la App Store de Instagr.am: nuevo diseño rediseñado en mayo de 2012

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.

Sitio web de la aplicación de redes sociales de registro móvil Localmind

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.

red social móvil para amantes de la moda - Pose

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.

Aplicación Forrst Leef para iOS: diseño de sitio web minimalista

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.

Sitio web de la aplicación Wood Camera iOS para iPhone

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.

Gráficos vectoriales del sitio web de la aplicación Barista iOS

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.

Sitio web de la aplicación digital iOS de la taza medidora de Kitchenator

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 Bosquet Forrst para iPhone

Aplicación Banjo

Aplicación Banjo para Android e iOS

Everyme

Aplicación iPhone Everyme para iOS

Aplicación Gifture

sitio web de la aplicación Gifture de redes sociales

Fontain

Sitio de aplicaciones para iPhone de Fontain

ImGame

Red de videojuegos de registro social ImGame

Aplicación Sparrow

Aplicación Sparrow para iPhone iOS

Cosas para iPhone

Lista de tareas pendientes de la aplicación Cultured Code iOS5 Things

Snapguide

Aplicación para iPhone Snap Guide

Whoovie

Reseñas de películas de la aplicación Whoovie para iPhone

Camino

Path Social Network para iPhone

Repeat Timer Pro

Tienda de aplicaciones Repeat Timer Pro iOS

La pata más linda para iPhone

Aplicación iOS de la pata más linda

Aplicación de pistacho

Aplicación Pistachio para iOS móvil

Delibar para iPhone

Aplicación para iPhone Delicious Sitio web de Delibar

Bosquejo con amigos

Aplicación para iPad Sketch with Friends

Obtener la aplicación Billy

Aplicación Billy para iPhone iOS

Aplicación Peg Jump

aplicación original del juego Peg Jump para iPhone

Detener el vómito

Detener el juego Vom para iPhone iOS

Crowdspottr

Aplicación móvil Crowdspottr para Android e iOS

Munch 5 al día

Diseño del sitio web de la aplicación Munch para iPhone

Aplicación Travveling

Dribbble Travveling para iPhone

Aplicación de folleto

Folleto de diseño del sitio web de la aplicación para iPhone

Obtener galería

Red de la tienda de aplicaciones de OS X e iOS

Plazaa

Diseño del sitio web de la aplicación de iPhone Plazaa German

Aplicación Make Faces

Aplicación de fotos de caras divertidas para iPhone

Aplicación Float

Nubes de sitios web móviles de la aplicación iOS Float

Tejido

Aplicación iOS de Weave to-do de Intuit

Aplicación Ballin ‘

Aplicación para iPhone Dribbble Ballin de Kangaroo Bandit

Forkly

Sitio web de la aplicación móvil de redes sociales Forkly

Mycityway

my city way para la tienda de aplicaciones de iOS

Toque la aplicación Place

diseño del sitio web de la aplicación para iPhone tapplace

Aplicación Photo Stats

Aplicación de Photo Stats para iPhone

Mezcla de ideas

Idea Mix para el boceto del diseño del sitio web de iPhone

Holitapp

Tienda de iPhone de la aplicación de vacaciones canadiense

Deja un comentario

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