Download - Talks4Kids - Mobile branding
![Page 1: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/1.jpg)
TALKS 4 KIDS
![Page 2: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/2.jpg)
TALKS 4 KIDS 2015 con Fundación Theodora
![Page 3: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/3.jpg)
Patrocinadores
Colabora
![Page 4: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/4.jpg)
TALKS 4 KIDS
POR QUÉ LOS ESPARTANOS MOLAN Y JERJES DEBE
MORIR
![Page 5: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/5.jpg)
Mobile and Cloud Experience Lead at ENCAMINA
http://geeks.ms/blogs/santypr
@saintwukong
MVP Windows Platform DevelopmentUX DeveloperNokia Developer Champion
![Page 6: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/6.jpg)
AgendaBrandingPasos para conseguir un buen diseño
Gama de coloresLogotipoFuentesBackgroundOrganizar el contenido
¡¡SOY UN GUAPERAAAASSS!! Y MOLO MÁS QUE LA PEDROCHE EN TANGA!!!
![Page 7: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/7.jpg)
Branding
![Page 8: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/8.jpg)
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
![Page 9: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/9.jpg)
Branding a la máxima expresión
![Page 10: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/10.jpg)
Claves de un buen Branding
Conoce tu audienciaSingularidad
PasiónCoherenciaVisibilidad
![Page 11: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/11.jpg)
■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
![Page 12: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/12.jpg)
Pasos para conseguir un buen diseño en tus aplicaciones
![Page 13: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/13.jpg)
Inspírate
![Page 14: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/14.jpg)
■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
![Page 15: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/15.jpg)
Gama de colores
![Page 16: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/16.jpg)
■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
![Page 17: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/17.jpg)
https://color.adobe.com // http://kuler.adobe.com http://colorschemedesigner.com/csd-3.5/
■http://flatuicolors.com/
Selecciona una gama de colores
![Page 18: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/18.jpg)
Logo
![Page 19: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/19.jpg)
■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
![Page 20: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/20.jpg)
Malos ejemplos
![Page 21: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/21.jpg)
Buenos ejemplos
UN LOGO DEBE SER ESPARTANO
![Page 22: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/22.jpg)
http://thenounproject.com/
http://flattyshadow.com/
http://www.syncfusion.com/downloads/metrostudio
Elige tu logo
![Page 23: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/23.jpg)
Tipografía
![Page 24: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/24.jpg)
■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
![Page 25: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/25.jpg)
■http://www.fontsquirrel.com/
■http://www.google.com/fonts
Elige tu tipografía
![Page 26: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/26.jpg)
Background
![Page 27: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/27.jpg)
■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
![Page 28: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/28.jpg)
■http://www.dinpattern.com/
■http://www.freepik.com/free-vectors/background
■http://www.backgroundlabs.com/
![Page 29: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/29.jpg)
Organiza tu contenido para que sea más legible
![Page 30: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/30.jpg)
Piensa en grande
![Page 31: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/31.jpg)
wireframe + iterate
Dibuja cómo quieres ver la información
![Page 32: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/32.jpg)
refine + finesse
Plasma tus dibujos en el diseño
![Page 33: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/33.jpg)
Crea jerarquías con el tamaño y el grosor de la fuente
Crea tus diseños alineados y reglados
Los detalles importan
![Page 34: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/34.jpg)
Tu diseño no está acabado hasta que no lo veas en marcha
![Page 35: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/35.jpg)
Ejemplo Myencamina
![Page 36: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/36.jpg)
Q&A¿¿ALGUNA DUDITA, PERSA??
![Page 37: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/37.jpg)
Nombre del ponente
Mobile and Cloud Experience Lead at ENCAMINA
http://geeks.ms/blogs/santypr
@saintwukong
MVP Windows Platform DevelopmentUX DeveloperNokia Developer Champion
![Page 38: Talks4Kids - Mobile branding](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f0f7a01a28ab41568b45f7/html5/thumbnails/38.jpg)
GRACIAS !!