Diseccionar Diseño Web El Sitio App

Aplicaciones web, aplicaciones de Android, aplicaciones de iPhone y iPad y ahora, con el lanzamiento de las aplicaciones de Mac, ¡el mundo parece estar volviéndose loco! Parece que hay una aplicación para atender a casi todas las situaciones? pero en un mercado digital, ¿cómo se promueven estas aplicaciones? Con diseño web por supuesto.!

Hay decenas de miles de aplicaciones por ahí (y ese número crece cada día). Naturalmente, todas estas diversas aplicaciones necesitan utilizar diferentes métodos para promocionarse y el uso de un sitio web es una de las estrategias más importantes. Los sitios web de aplicaciones son algunos de los mejor diseñados y hay muchas tendencias que se ejecutan a través de este nicho particular del sitio. En este artículo analizaremos más detenidamente y examinaremos algunas de las técnicas que se utilizan actualmente..


Introducción


El sitio de Angry Birds es engañosamente simple, ya que utiliza la ilustración para entregar efectivamente el espíritu de su aplicación sin necesidad de un diseño demasiado estilizado..

"¿Dónde estaríamos sin Angry Birds permitiéndonos soltar algo de vapor lanzando pequeños animales con plumas alrededor del lugar?"

Algunas personas simplemente no podrían vivir sin Evernote para todas sus necesidades de toma de notas y ¿cómo podríamos saber dónde están todos sin Foursquare? ¿Dónde estaríamos sin Angry Birds permitiéndonos soltar algo de vapor lanzando pequeños animales con plumas alrededor del lugar? Las aplicaciones casi se han vuelto esenciales para el trabajo y la vida social de muchas personas..

La popularidad de las aplicaciones ha dado lugar a que muchos miles de ellas se lancen a varios mercados, y para que se note cualquiera en particular, debe distinguirse de la multitud y un sitio web bien diseñado es una forma de lograrlo..

Los sitios web de aplicaciones necesitan realizar varias tareas diferentes de manera efectiva. En primer lugar, es absolutamente crucial que los sitios web de las aplicaciones estén bien diseñados, al igual que cualquier sitio web que venda productos en línea; ya que la percepción de un comprador potencial del valor y la calidad del producto se verá influenciada por el entorno en el que se encuentra. Además de verse bien, se espera que los sitios web de aplicaciones comercialicen la aplicación, comuniquen su propósito, demuestren sus capacidades e incluso instruyan al comprador sobre cómo usarla. Algunos pueden incluso tener que integrar las funciones de comercio electrónico si la aplicación no se vende a través de un mercado.

No hace falta decir que puede ser todo un desafío cumplir con todos estos requisitos, y los diseñadores deben encontrar formas creativas para hacerlo. A continuación, examinaremos en profundidad algunas características comunes encontradas entre los sitios de aplicaciones que contribuyen a que sean un éxito. Empecemos.


Temas

¿El sitio web de la aplicación EpicWin imita el tema de su aplicación en su sitio? al máximo. Todo, desde texturas de fondo hasta tipografía, enfatiza el estilo y el tono de la aplicación..

Una gran mayoría de los sitios web de aplicaciones eligen imitar el tema de la aplicación que están promoviendo. El uso creativo de imágenes, colores, texturas y muchos otros elementos permiten que el sujeto de la aplicación trascienda la aplicación y permita que el sitio web se convierta en una extensión de la misma. Hay muchos ejemplos de este método en acción, uno obvio sería el sitio web de la aplicación Tea Round..

La aplicación de la Ronda del Té, en sus propias palabras; "Resuelve rápidamente los argumentos basados ​​en la sed al decidir quién hace el té". Es extremadamente obvio desde el diseño del sitio web que el propósito de la aplicación gira en torno al té.?

El uso de imágenes como el hervidor, la mancha de la taza en la nota y la taza de té en el logotipo son todos muy indicativos para el propósito de la aplicación. Como se mencionó anteriormente, este es un uso muy claro de esta técnica, pero también se puede utilizar con mayor sutileza, como en el sitio web a continuación..

Este es el sitio web de la aplicación Get Galleried, que muestra ejemplos de diseños web de alta calidad para brindar al usuario inspiración. Desde el sitio en sí mismo: "Rellenamos previamente los sitios inspiradores de galerías de diseño seleccionadas para usted en una interfaz rápida y en mosaico". Observe cómo el sitio web utiliza un patrón de mosaico para su fondo, lo que sugiere la galería de mosaicos que presenta la aplicación.

Esta técnica de extender el tema de la aplicación al sitio es una excelente manera de comunicar la naturaleza de la aplicación en sí. Claro, si bien aún será necesario proporcionar una explicación de cómo funciona exactamente la aplicación, este método le brinda al usuario una idea general de su propósito al instante..

Además, un beneficio adicional del uso de las mismas texturas, colores y elementos de diseño tanto para el sitio como para la aplicación, es que crea continuidad entre las dos plataformas, lo que permitirá al usuario familiarizarse con la marca y sentirse más cómodo usando la aplicación..


Iconos y botones

Notará que, además de los sitios web diseñados en torno a temas, también están diseñados para parecerse a una aplicación. Los elementos que se encuentran comúnmente en aplicaciones como los iconos y botones también se usan a menudo en el diseño de los sitios web..

Hay dos ventajas principales para diseñar el sitio web al estilo de una aplicación. El primer beneficio se relaciona con el punto señalado anteriormente, ya que ayuda a crear continuidad entre el sitio web y la aplicación. En segundo lugar, es sensato pensar que una buena cantidad de visitantes a estos sitios utilizarán dispositivos táctiles como iPhones y iPads..

Las aplicaciones utilizan elementos de interfaz grandes y visuales, como iconos y botones, ya que son mucho más fáciles de interactuar cuando se utilizan dispositivos sensibles al tacto, por lo que solo es una buena práctica utilizar dichas funciones en el sitio web..


Imágenes del dispositivo y capturas de pantalla

Puede hablar sobre su aplicación todo lo que quiera, usar cada superlativo en el diccionario y reclamar que resolverá todos los problemas de la vida, pero a menos que las personas puedan ver realmente lo que están comprando, estarán muy reacios a comprometerse con cualquier cosa. Es uno de los muchos problemas que tienen algunas personas al comprar productos a través de Internet, especialmente para información electrónica como libros electrónicos y música digital..

Para resolver este problema, las imágenes se utilizan para ayudar al comprador a visualizar lo que están comprando, como imágenes de portadas de álbumes en iTunes o libros electrónicos representados como libros reales. Es lo mismo con las aplicaciones; los sitios web a menudo mostrarán capturas de pantalla de la aplicación mostrada en dispositivos como iPhones, iPads y monitores de computadora. Esta técnica no solo permite que el usuario se familiarice con el aspecto de la aplicación, sino que también la ayudará a visualizarla en su propio dispositivo, lo que puede influir en su decisión de compra..

Si el dicho "una imagen vale más que mil palabras" es cierto, entonces un video debe comunicar más información sobre su producto de la que podría usar texto. Muchos sitios web de aplicaciones han decidido utilizar el video para demostrar su aplicación y sus capacidades a compradores potenciales..

La demostración en video de la aplicación Concentrate es un excelente ejemplo. El video puede demostrar completamente todas las características de la aplicación en un espacio de tiempo relativamente corto. Con la adición de música de fondo agradable y encabezados de secciones cortas; El video es más entretenido y la información es mucho más fácil de digerir que las muchas líneas de texto que se requerirían para comunicar la misma información..


Diseño

Como hemos discutido, los sitios web de aplicaciones tienen muchos objetivos que deben cumplir, pero su objetivo principal es lograr que los visitantes compren la aplicación en sí. Todos los sitios web incluirán algún tipo de enlace para permitirle descargar la aplicación, ya sea a través de una tienda de aplicaciones o directamente desde el sitio..

Para ayudar al sitio web a hacer esto, los diseñadores a menudo crean un diseño simple, pero efectivo, que guía al usuario a través de los puntos clave del sitio y, en última instancia, al elemento de llamada a la acción (el enlace de descarga). Muchos optan por utilizar el diseño 'Z'. El editor de diseño web Brandon Jones ha discutido en profundidad el diseño 'Z' aquí. Es un excelente artículo y lo ayudará a comprender mejor los puntos que estamos discutiendo aquí..

Veamos cómo se implementa tal diseño en un sitio web de aplicaciones. Usaremos el sitio web para la aplicación Leaflet. Una vez más, hay un excelente tutorial sobre Diseño web + sobre cómo se logró este diseño en particular. Se ha superpuesto una áspera forma de 'Z' en el sitio web para ayudar a demostrar nuestros puntos más..

Notará que la forma 'Z' cubre varios puntos en el sitio web en el siguiente orden:

  • Imágenes del dispositivo iPhone con capturas de pantalla de la aplicación.
  • El logo / nombre de la aplicación.
  • Una breve descripción de la aplicación.
  • El boton de descarga

El diseñador ha elegido deliberadamente colocar estos puntos a lo largo del camino que pretende que el usuario siga. Si el visitante del sitio siguiera el camino previsto, primero recibiría una indicación anticipada del propósito del sitio mediante el uso de imágenes de iPhone con capturas de pantalla de la aplicación. El usuario notará el logotipo de la aplicación rápidamente seguido de un párrafo que describe brevemente lo que hace la aplicación..

Ahora que el usuario se ha educado sobre los muchos beneficios de la aplicación, junto con imágenes atractivas, llegan a un botón convenientemente ubicado (junto con un precio tentadoramente bajo) que les permitirá comprar la aplicación por sí mismos..

Hay una increíble cantidad de aplicaciones disponibles y es un mercado muy competitivo, por lo que es esencial que pueda captar la atención de sus usuarios, aprovechar los beneficios de la aplicación y facilitarles la compra en un corto espacio de tiempo. , y el diseño 'Z' es perfecto para esto. Obviamente, es imposible incluir toda la información en este espacio, por lo que a menudo encontrará que los sitios que implementan este diseño brindarán muchos más detalles sobre cómo funciona la aplicación más abajo en la página..

El diseño 'Z' no es de ninguna manera el único diseño utilizado por los sitios web de las aplicaciones, ya que hay muchos otros para elegir, pero es muy efectivo cuando se usa correctamente. Aquí hay algunos ejemplos más de la disposición 'Z' en acción..

Obtener galleried

Evernote


Pasos y puntos de bala

El mercado de aplicaciones está saturado y si su aplicación no convence rápidamente a un comprador potencial, puede garantizar que podrán encontrar algo que encontrará en otro lugar. Por lo tanto, es esencial que pueda comunicar cómo funciona su aplicación y los beneficios que proporcionará de manera clara y concisa..

El uso de viñetas y pasos numerados es un método eficaz para desglosar la información, ya que los usuarios pueden no estar dispuestos a leer los párrafos completos de información sobre cómo funciona..

El sitio web de la aplicación Gallerytopia utiliza tanto viñetas como pasos numerados para comunicar información sobre la aplicación. Todos los beneficios se resumen utilizando una pequeña cantidad de puntos de bala cortos y fáciles de digerir. Los beneficios enumerados por estos puntos de viñeta se mejoran aún más mediante el uso de símbolos visuales de 'tic', casi como si estuvieran marcando su lista de requisitos.

Más abajo en la página, las instrucciones sobre cómo usar la aplicación se dividen en tres pasos numerados. Es muy común que los sitios web de aplicaciones dividan información sobre cómo funciona la aplicación o cómo usarla en una pequeña cantidad de pasos numerados. Estos pasos comunican que la aplicación es muy simple y fácil de usar, porque nadie quiere comprar algo tan complicado?


Más ejemplos de grandes sitios de aplicaciones

Ahora que hemos visto algunas de las características que implementan los sitios web de las aplicaciones, veamos cómo algunos de los mejores sitios web de aplicaciones hacen esto. A continuación se muestran algunos ejemplos excelentes de sitios web de aplicaciones bellamente diseñados..

Caleidoscopio

Cuentas

Bord

Concentrado

mensajero

Evernote

Cosas

Capas

Epic Win App


Conclusión

Hemos discutido muchas características y técnicas diferentes que se encuentran comúnmente en los sitios web de las aplicaciones y parece que hay un objetivo común que abarca muchas de estas características; Y eso es comunicar información de forma rápida y eficiente. Recientemente se anunció que la tienda de aplicaciones de Apple alcanzó los diez mil millones de descargas y el mercado está creciendo todo el tiempo. El sitio web de cualquier aplicación necesita captar la atención del usuario, comunicar los beneficios y hacer que esté fácilmente disponible en un corto espacio de tiempo; de lo contrario, hay un montón de otras opciones para que un comprador de la aplicación elija.

Por último, vale la pena mencionar que aunque estos sitios web emplean muchas técnicas para lograr sus objetivos, estas características no serían tan efectivas si no estuvieran contenidas en diseños de sitios web tan bellamente diseñados..

Este artículo ha analizado algunas características y técnicas que hacen que los sitios web de aplicaciones sean efectivos. ¿Hay alguna otra característica que haya notado entre estos tipos de sitios web? ¿Hay alguna aplicación web particularmente buena que conozca? Por favor comparta sus pensamientos y comentarios a continuación!