Estudio de diseño en sitios web de aplicaciones Mac OS X (Diseños)

Apple siempre ha exigido el trabajo de mayor calibre de sus empleados, incluso desde su fundación a fines de los años 70. Muchos diseñadores se han mudado recientemente al entorno OS X, y la mayoría se enamoran a primera vista. Mac OS X Lion ofrece tantas funciones que no puedes encontrar en ningún otro lugar, entre las que destaca la App Store.

Desde aquí puede acceder a una gran cantidad de aplicaciones gratuitas y de pago. Todos estos están diseñados para OS X Lion y se pueden descargar directamente en Launchpad. En este estudio de caso, estudiaré las tendencias de diseño para los sitios web de aplicaciones Mac. ¿Están específicamente orientados a OS X y no incluyen aplicaciones de iOS? Los estilos son muy diferentes. Junto con estos consejos, también he compilado una pequeña galería de ejemplos de mis sitios de aplicaciones Mac favoritos para compartir un poco de inspiración.

Amplíe sus puntos clave

Cuando la gente llega a cualquier sitio web de una aplicación, esperan descubrir el propósito de la aplicación muy rápidamente. La forma más fácil de hacerlo es atrapar de inmediato la atención de los visitantes y guiarlos a lo largo del diseño. Y a partir de experiencias pasadas, parece que el texto / los gráficos de tamaño jumbo a menudo harán el truco.

Alfred App es un ejemplo de este tipo que incorpora toda la pantalla en un diseño deslizante. ¡Tanto el logotipo de la aplicación como el botón de descarga saltan de la página de un vistazo, junto con el ícono de la aplicación monstruosa! Los usuarios familiarizados con la aplicación Alfred reconocerán el sombrero y la lupa únicos. Y no es solo el área de la página superior, tampoco.

A medida que se desplaza hacia abajo, debe notar que cada sección de la página también se divide en partes. El área de captura de pantalla de demostración tiene una pequeña columna para miniaturas con una hermosa visualización de la aplicación. Con solo mirar las pocas fotos de demostración, generalmente se entiende lo que puede hacer la aplicación. A medida que encuentre más sitios web de aplicaciones, mantenga los ojos abiertos para la gran imagen. Cosas que están destinadas a destacar. También manténgase pensando en lo que debería ser saltar de su propio sitio web de aplicaciones.

Características de corte limpio

Los diseños de sitios más populares a menudo presentan el mismo tipo de elementos. Esto podría ser un diseño de ícono más finalizado y detallado, un elegante texto de logotipo y otros gráficos divertidos. Pero debes seguir el ejemplo de Apple y recortar las cosas prescindibles. Las interfaces limpias y simplificadas mantendrán la atención de sus visitantes a través de más descargas y compras.

Soy un gran fanático de Instagram, que me ha ocupado un montón de tiempo en iOS. Y la aplicación Mac Carousel es un hermoso servicio de hermana en el escritorio. Si observa que el diseño de su sitio presenta un área de logotipo más pequeña con más espacio para capturas de pantalla. Además, la tipografía parece más refinada para que coincida con la temática elegante y elegante.

También deberías notar que no hay navegación principal aquí. Considere duplicar esto para su propio sitio web de aplicación, ya que elimina mucha frustración del usuario. Esta idea se duplica para los usuarios móviles que encuentran su sitio web por primera vez en iPhone o Android. Si puede representar el mensaje de su aplicación en una sola página, le digo ve a por ello!

Incluir iconos de la App Store estándar

Recoger la atención de sus visitantes es un requisito importante, pero también desea ganarse su confianza. Y las personas que usan Mac OS generalmente confían en los desarrolladores de Apple. Debe incluir distintivos y / o botones en su sitio para que las personas sepan que ha sido publicado en la tienda de aplicaciones. Puede parecer pequeño, pero puede ser de gran importancia para los nuevos clientes potenciales.

Las Pautas de marketing de la Mac App Store (PDF) incluyen algunos detalles sobre la insignia de la App Store que se ve en la mayoría de las aplicaciones populares de Mac. También me gusta pegarle a las tomas de Dribbble para ver si alguien tiene conjuntos de diseño o iconos geniales relacionados con el tema.

Proporcionar una demostración donde sea posible

¿Recuerda todo el punto de transmitir su mensaje rápidamente? Esto puede lograrse más fácilmente a través de imágenes o video, no es una gran sorpresa. Pero incluso solo galerías de miniaturas o presentaciones de diapositivas a veces no son suficientes.

Debe intentar incluir una demostración de su servicio en un tipo de infografía de flujo de trabajo. Hay una gran cantidad de PSD gratuitos para descargar que caben en MacBooks, iPhone, iPad y todo lo demás. Aquí hay un hermoso ejemplo de una plantilla PSD de iMac gratuita para descargar. Ahora puede tomar capturas de pantalla de su aplicación y crear pequeñas imágenes de demostración.

Esto funciona muy bien en el ejemplo anterior para Notificarme. La aplicación está abierta y desarrollada para las 3 plataformas en iOS / iPad y OSX. A primera vista, puede asumir que la aplicación es un sistema de notificación. A través de un pequeño gráfico de demostración y algunas explicaciones adicionales, puede reunir las características extendidas para redactar su opinión sobre la aplicación.

Animaciones dinámicas y jQuery

Apple también es conocida por tener hermosas animaciones de transición. Su atención al detalle, tanto en el diseño como en la función, es increíble: abarca toda la gama de su cartera de software. Y como diseñador web que publica en Apple, es posible que el sitio de su aplicación tenga un toque mágico.

Reeder para Mac es hermoso y el sitio de demostración se adapta igual de bien. Tenga en cuenta que las URL de las páginas son extremadamente simples y fáciles de transmitir a amigos o a través de redes sociales. Además, la navegación se lleva a cabo en una columna lateral, mientras que el contenido de la página se reduce al mínimo.

Aunque Reeder tiene velocidades de página rápidas, es solo un ejemplo de muchos sitios web de aplicaciones. Si disfrutas de estas animaciones dinámicas, considera buscar en la biblioteca jQuery y también en el conjunto de jQuery UI. ¿Estas son dos bibliotecas de JavaScript muy populares con funciones preconstruidas para efectos de página? y puedes construir mucho! Por una idea, puede disfrutar de este pequeño tutorial al estilo de Apple utilizando jQuery para crear un efecto de aparición gradual en la pantalla de bienvenida.

Galería de inspiración

Como se mencionó anteriormente, ningún estudio de caso estaría completo sin un pequeño escaparate de diseño.A continuación se muestran algunos ejemplos de los diseños de mi sitio web de aplicación de OS X favoritos. Échales un vistazo y dinos lo que piensas! Y si nos perdemos algunos diseños de aplicaciones impresionantes, nos gustaría informarnos en los comentarios.