Diseño de Aplicaciones 
móviles
Santiago Porras Rodríguez 
UX Developer – SharePoint Developer 
Microsoft Windows Platform Development MVP 
Nokia Develope...
there is no alternative to 
design 
there is only good design or 
bad design
Objetivos 
Branding 
Pasos para conseguir un buen diseño 
Gama de colores 
Logotipo 
Fuentes 
Background 
Organizar el con...
Branding
Qué es 
proceso de hacer y construir una marca (en 
inglés, brand equity) mediante la administración 
estratégica del conj...
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-ident...
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/blo...
Gama de 
colores
Selecciona una gama de colores 
Usa colores complementarios o la 
gama de un mismo color 
A ser posible, que la gama de 
c...
Selecciona una gama de colores 
https://color.adobe.com // http://kuler.adobe.com 
http://colorschemedesigner.com/csd-3.5/...
Logo
Elige o crea un buen logotipo 
Debe ser claro y simple (fácil visualización) 
Debe hablar de tu aplicación 
Excepciones (l...
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ón 
No abusar de f...
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 contras...
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
Dibuja cómo quieres ver la información 
wireframe + iterate
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
Gracias por su atención 
Santiago Porras Rodríguez 
UX Developer 
Microsoft Windows Platform Development MVP 
Nokia Develo...
Próxima SlideShare
Cargando en…5
×

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

905 visualizaciones

Publicado el

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

Publicado en: Software
0 comentarios
2 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
905
En SlideShare
0
De insertados
0
Número de insertados
130
Acciones
Compartido
0
Descargas
19
Comentarios
0
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.
  • http://graffica.info/5-claves-para-un-buen-branding/
  • http://graffica.info/5-claves-para-un-buen-branding/
  • Estructura de un proyecto ASP.NET estándar
    Código de una página ASP.NET estándar
    Estructura de un proyecto ASP.NET vNext
    Referencias y diferencias entre ASP.NET 5.0 y ASP.NET 5.0 Core
    Instalar paquete de nuget (autenticación Microsoft)
  • Diseño de aplicaciones móviles - Conceptos, tips & tricks

    1. 1. Diseño de Aplicaciones móviles
    2. 2. Santiago Porras Rodríguez UX Developer – SharePoint Developer Microsoft Windows Platform Development MVP Nokia Developer Champion http://geeks.ms/blogs/santypr @saintwukong
    3. 3. there is no alternative to design there is only good design or bad design
    4. 4. Objetivos Branding Pasos para conseguir un buen diseño Gama de colores Logotipo Fuentes Background Organizar el contenido Aplicar el diseño
    5. 5. Branding
    6. 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. 7. Claves de un buen Branding Conoce a tu audiencia Singularidad Pasión Coherencia Visibilidad
    8. 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. 9. Pasos para conseguir un buen diseño en tus aplicaciones
    10. 10. Inspírate
    11. 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. 12. Gama de colores
    13. 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. 14. Selecciona una gama de colores https://color.adobe.com // http://kuler.adobe.com http://colorschemedesigner.com/csd-3.5/ http://flatuicolors.com/
    15. 15. Logo
    16. 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. 17. Malos ejemplos
    18. 18. Buenos ejemplos
    19. 19. Elige tu logo http://thenounproject.com/ http://flattyshadow.com/ http://www.syncfusion.com/downloads/metrostudio
    20. 20. Tipografía
    21. 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. 22. Elige tu tipografía http://www.fontsquirrel.com/ http://www.google.com/fonts
    23. 23. Background
    24. 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. 25. http://www.dinpattern.com/ http://www.freepik.com/free-vectors/background http://www.backgroundlabs.com/
    26. 26. Organiza tu contenido para que sea más legible
    27. 27. Piensa en grande
    28. 28. Dibuja cómo quieres ver la información wireframe + iterate
    29. 29. refine + finesse Plamas tus dibujos en el diseño
    30. 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. 31. Tu diseño no está acabado hasta que no lo veas en marcha
    32. 32. Demo
    33. 33. Q&A
    34. 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

    ×