Diseño de aplicaciones móviles - Conceptos, tips & tricks

Diseño de Aplicaciones móviles

Santiago Porras RodríguezUX Developer – SharePoint Developer

Microsoft Windows Platform Development MVP

Nokia Developer Champion

http://geeks.ms/blogs/santypr

@saintwukong

there is no alternative to design there is only good design or bad design

Objetivos

BrandingPasos para conseguir un buen diseño

Gama de coloresLogotipoFuentesBackgroundOrganizar el contenido

Aplicar el diseño

Branding

Qué es

proceso de hacer y construir una marca (en inglés, brand equity) mediante la administración estratégica del conjunto total de activos vinculados en forma directa o indirecta al nombre y/o símbolo (logotipo) que identifican a la marca influyendo en el valor de la marca, tanto para el cliente como para la empresa propietaria de la marca.

Claves de un buen Branding

Conoce a tu audiencia

Singularidad

Pasión

Coherencia

Visibilidad

Ejemplos

http://www.webdesignerdepot.com/2013/11/20-inspiring-branding-guides/

http://www.logodesignlove.com/brand-identity-style-guides

http://imjustcreative.com/skype-brand-identity-book-and-guidelines/2011/08/31

http://www.creativebloq.com/branding/great-examples-design-style-guides-3132070

Pasos para conseguir un buen diseño en tus aplicaciones

Inspírate

Busca ideas en la vida real o en internet

https://dev.windows.com/es-es/design/modern-design

http://www.hongkiat.com/blog/mobile-app-ui/

http://www.fromupnorth.com/user-interface-inspiration-650/

http://blog.appversal.com/20-modern-app-ui-designs-stand/

https://www.behance.net/gallery/10163173/20-application-Modern-UI-for-Windows-8

Gama de colores

Selecciona una gama de colores

Usa colores complementarios o la gama de un mismo colorA ser posible, que la gama de colores esté relacionada con el tipo de aplicaciónNo abusar de colores llamativos

Selecciona una gama de colores

https://color.adobe.com // http://kuler.adobe.com http://colorschemedesigner.com/csd-3.5/ http://flatuicolors.com/

Logo

Elige o crea un buen logotipo

Debe ser claro y simple (fácil visualización)Debe hablar de tu aplicaciónExcepciones (logotipos conocidos)NO COPIÉIS

Malos ejemplos

Buenos ejemplos

Elige tu logo

http://thenounproject.com/

http://flattyshadow.com/

http://www.syncfusion.com/downloads/metrostudio

Tipografía

Elige tu tipografía

Si tu logotipo se diferencia por tener una fuente específica, tráela a tu aplicaciónNo abusar de fuentes “especiales”No combinar muchos tipos de fuentes diferente (recomendado 2 máximo)Maximizar la legibilidadEl contenido debe presentarse con fuentes legibles (Calibrí, Cambria, Adobe Garamon, Helvética, Verdana, Arial…

http://www.lancetalent.com/blog/tipografia-para-disenadores-freelance/

http://marianaeguaras.com/que-tipografia-usar-para-libros-impresos-y-digitales/

Elige tu tipografía

http://www.fontsquirrel.com/

http://www.google.com/fonts

Background

Elige o crea un buen background

Cierta uniformidad de color, es decir, o todo claro o todo oscuro para que pueda contrastar con el contenidoNo tiene por qué ser artístico, hasta un fondo blanco o negro puede funcionarA ser posible, que combine con la gama de colores escogidaNUNCA DEBE INTERFERIR EN LA VISUALIZACIÓN DEL CONTENIDO

http://www.dinpattern.com/

http://www.freepik.com/free-vectors/background

http://www.backgroundlabs.com/

Organiza tu contenido para que sea más

legible

Piensa en grande

wireframe + iterate

Dibuja cómo quieres ver la información

refine + finesse

Plamas tus dibujos en el diseño

Crea jerarquías con el tamaño y el grosor de la fuente

Crea tus diseños alineados y reglados

Los detalles importan

Tu diseño no está acabado hasta que no lo veas en marcha

Demo

Q&A

UX Developer

Microsoft Windows Platform Development MVP

Nokia Developer Champion

http://geeks.ms/blogs/santypr

@saintwukong

Santiago Porras Rodríguez

Gracias por su atención