Descubre por qué un buen planteamiendo del diseño de Apps es importante para tener éxito en la conquista de las Stores y cómo llevarlo a cabo en Apps de la plataforma Windows.

1. TALKS 4 KIDS

2. TALKS 4 KIDS 2015 con Fundación Theodora

3. Patrocinadores
Colabora

4. TALKS 4 KIDS
POR QUÉ LOS ESPARTANOS MOLAN Y
JERJES DEBEMORIR

5. Mobile and Cloud Experience Lead at ENCAMINA
http://geeks.ms/blogs/santypr
@saintwukong
MVP Windows Platform Development
UX Developer
Nokia Developer Champion

6. Agenda
Branding
Pasos para conseguir un buen diseño
Gama de colores
Logotipo
Fuentes
Background
Organizar el contenido
¡¡SOY UN
GUAPERAAAASSS!! Y
MOLO MÁS QUE LA
PEDROCHE EN
TANGA!!!

7. Branding

8. 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.
Qué es

9. Branding a la máxima expresión

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

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

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

13. Inspírate

14. ■https://dev.windows.com/es-es/design
■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
Busca ideas en la vida real o en internet

15. Gama de colores

16. ■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
Selecciona una gama de colores

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

18. Logo

19. ■Debe ser claro y simple (fácil visualización)
■Debe hablar de tu aplicación
■Excepciones (logotipos conocidos)
■NO COPIÉIS
Elige o crea un buen logotipo
CONTEMPLAD MI SUPER LOGOOOOO
QUE TE CALLES CARA TROLL

20. Malos ejemplos

21. Buenos ejemplos
UN LOGO DEBE
SER ESPARTANO

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

23. Tipografía

24. ■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/
Elige tu tipografía

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

26. Background

27. ■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
Elige o crea un buen backgroundEJEMPLO CLARÍSIMO DE MAL BACKGROUND

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

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

30. Piensa en grande

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

32. refine + finesse
Plasma tus dibujos en el diseño

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

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

35. Ejemplo Myencamina

36. Q&A¿¿ALGUNA
DUDITA,
PERSA??

37. Nombre del ponente
Mobile and Cloud Experience Lead at ENCAMINA
http://geeks.ms/blogs/santypr
@saintwukong
MVP Windows Platform Development
UX Developer
Nokia Developer Champion

38. GRACIAS !!