Conceptos básicos para aprender a crear/diseñar aplicaciones móviles con un buen look&feel y que consigan tener éxito.

1. Diseño de Aplicaciones
móviles

2. Santiago Porras Rodríguez
UX Developer – SharePoint Developer
Microsoft Windows Platform Development MVP
Nokia Developer Champion
http://geeks.ms/blogs/santypr
@saintwukong

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

4. Objetivos
Branding
Pasos para conseguir un buen diseño
Gama de colores
Logotipo
Fuentes
Background
Organizar el contenido
Aplicar el diseño

5. Branding

6. 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.

7. Claves de un buen Branding
Conoce a tu audiencia
Singularidad
Pasión
Coherencia
Visibilidad

8. 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

9. Pasos para conseguir un
buen diseño en tus
aplicaciones

10. Inspírate

11. 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

12. Gama de
colores

13. Selecciona una gama de colores
Usa colores complementarios o la
gama de un mismo color
A ser posible, que la gama de
colores esté relacionada con el tipo
de aplicación
No abusar de colores llamativos

14. Selecciona una gama de colores
https://color.adobe.com // http://kuler.adobe.com
http://colorschemedesigner.com/csd-3.5/
http://flatuicolors.com/

15. Logo

16. Elige o crea un buen logotipo
Debe ser claro y simple (fácil visualización)
Debe hablar de tu aplicación
Excepciones (logotipos conocidos)
NO COPIÉIS

17. Malos ejemplos

18. Buenos ejemplos

19. Elige tu logo
http://thenounproject.com/
http://flattyshadow.com/
http://www.syncfusion.com/downloads/metrostudio

20. Tipografía

21. Elige tu tipografía
Si tu logotipo se diferencia por tener una fuente
específica, tráela a tu aplicación
No abusar de fuentes “especiales”
No combinar muchos tipos de fuentes diferente
(recomendado 2 máximo)
Maximizar la legibilidad
El 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/

22. Elige tu tipografía
http://www.fontsquirrel.com/
http://www.google.com/fonts

23. Background

24. Elige o crea un buen background
Cierta uniformidad de color, es decir, o todo claro o
todo oscuro para que pueda contrastar con el contenido
No tiene por qué ser artístico, hasta un fondo blanco o
negro puede funcionar
A ser posible, que combine con la gama de colores
escogida
NUNCA DEBE INTERFERIR EN LA VISUALIZACIÓN DEL
CONTENIDO

25. http://www.dinpattern.com/
http://www.freepik.com/free-vectors/background
http://www.backgroundlabs.com/

26. Organiza tu
contenido
para que sea
más legible

27. Piensa en grande

28. Dibuja cómo quieres ver la información
wireframe + iterate

29. refine + finesse
Plamas tus dibujos en el diseño

30. Crea jerarquías con el tamaño y el grosor de la
fuente
Crea tus diseños alineados y reglados
Los detalles importan

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

32. Demo

33. Q&A

34. Gracias por su atención
Santiago Porras Rodríguez
UX Developer
Microsoft Windows Platform Development MVP
Nokia Developer Champion
http://geeks.ms/blogs/santypr
@saintwukong