TALKS 4 KIDS

TALKS 4 KIDS 2015 con Fundación Theodora

Patrocinadores

Colabora

TALKS 4 KIDS

POR QUÉ LOS ESPARTANOS MOLAN Y JERJES DEBE

MORIR

Mobile and Cloud Experience Lead at ENCAMINA

http://geeks.ms/blogs/santypr

@saintwukong

MVP Windows Platform DevelopmentUX DeveloperNokia Developer Champion

AgendaBrandingPasos para conseguir un buen diseño

Gama de coloresLogotipoFuentesBackgroundOrganizar el contenido

¡¡SOY UN GUAPERAAAASSS!! Y MOLO MÁS QUE LA PEDROCHE EN TANGA!!!

Branding

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

Branding a la máxima expresión

Claves de un buen Branding

Conoce tu audienciaSingularidad

PasiónCoherenciaVisibilidad

■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

Pasos para conseguir un buen diseño en tus aplicaciones

Inspírate

■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

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

Selecciona una gama de colores

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

■http://flatuicolors.com/

Selecciona una gama de colores

Logo

■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

Malos ejemplos

Buenos ejemplos

UN LOGO DEBE SER ESPARTANO

http://thenounproject.com/

http://flattyshadow.com/

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

Elige tu logo

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/

Elige tu tipografía

■http://www.fontsquirrel.com/

■http://www.google.com/fonts

Elige tu tipografía

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

Elige o crea un buen backgroundEJEMPLO CLARÍSIMO DE MAL BACKGROUND

■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

Plasma 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

Ejemplo Myencamina

Q&A¿¿ALGUNA DUDITA, PERSA??

Nombre del ponente

Mobile and Cloud Experience Lead at ENCAMINA

http://geeks.ms/blogs/santypr

@saintwukong

MVP Windows Platform DevelopmentUX DeveloperNokia Developer Champion

GRACIAS !!