Diseño para desarrolladores

DISEÑO PARA DESARROLLADORES

@luguedesde

pasequeestaabierto.tumblr.com

Lucía Guedes de Rezende

¿QUÉ ES EL DISEÑO?

un proceso creativo,

que combina estos elementos,

para resolver la comunicación de un

problema en un determinado contexto.

EL DISEÑO ES:

ComunicaSimple Intuitivo - UsableAtractivo - Innovador

UN BUEN DISEÑO:

ProfesionalesDiferencia de marcaSe ven los resultados

NOS BENEFICIAMOS DE UN BUEN DISEÑO:

- SIMPLE- ESTRUCTURA- ESPACIO- IMAGEN- TIPOGRAFÍA- COLOR

REGLAS BÁSICAS:

SIMPLE

Reglas básicas - SIMPLE

ESTRUCTURA

Reglas básicas - ESTRUCTURA

Reglas básicas - ESTRUCTURA

ESPACIO

Click Me!

Reglas básicas - ESPACIO

IMAGEN

Reglas básicas - IMAGEN

Reglas básicas - IMAGEN

Reglas básicas - IMAGEN

TIPOGRAFÍA

R RSerif Sans serif

Reglas básicas - TIPOGRAFÍA

Fantasía

R R R R

Reglas básicas - TIPOGRAFÍA

COMIC SANS

Reglas básicas - TIPOGRAFÍA

Reglas básicas - TIPOGRAFÍA

RSerif

- Aspecto clásico o tradicional- Buenas para lectura de bloques de texto

Reglas básicas - TIPOGRAFÍA

RSans Serif

- Aspecto moderno- Buena opción para títulos- Buenas para lectura de

textos a tamaño pequeño

Reglas básicas - TIPOGRAFÍA

TítuloMuseo Sans serif

Museo Serif

Lorem Ipsum es simplemente el texto de relleno de las imprentas y

archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de

las industrias desde el año 1500, cuando un impresor (N. del T. persona

que se dedica a la imprenta) desconocido usó una galería de textos y

los mezcló de tal manera que logró hacer un libro de textos especimen.

No sólo sobrevivió 500 años, sino que tambien ingresó como texto de

relleno en documentos electrónicos, quedando esencialmente igual al

original. Fue popularizado en los 60s con la creación de las hojas

"Letraset", las cuales contenian pasajes de Lorem Ipsum, y más

recientemente con software de autoedición, como por ejemplo Aldus

PageMaker, el cual incluye versiones de Lorem Ipsum.

Reglas básicas - TIPOGRAFÍA

Interlínea de texto

Reglas básicas - TIPOGRAFÍA

Reglas básicas - TIPOGRAFÍA

Bloques de texto

COLOR

AMOR, IRA, SANGRE, INTENSO, CALOR, DINAMISMO

CÁLIDO, ENERGÍA, ENTRETENIMIENTO, ALEGRÍA, VITALIDAD

ENERGÍA, BRILLANTE, ALEGRÍA, CÁLIDO

FRESCO, SALUDABLE, BALANCE, ARMONÍA, DINERO

CALMA, FRÍO, SERENO, PAZ, TRANQUILIDAD, FRESCO

CREATIVIDAD, ELEGANCIA, AMOR, ALEGRÍA

LIMPIO, PURO, TRANQUILIDAD

PODER, ELEGANCIA, FORMALIDAD, TRADICIONAL

NEUTROS

FRÍOS

CÁLIDOS

Reglas básicas - COLOR

- SIMPLE- ESTRUCTURA- ESPACIO- IMAGEN- TIPOGRAFÍA- COLOR

REGLAS BÁSICAS:

COMUNICACIÓN

Manejo del espacioMantener margenes

Manejo del espacioMantener margenes

Left Brain vs Right Brain

Mercedes-Benz

ELEGIR

Diseñador imprenta Diseñador digital

Trabajos de imprenta(revistas, afiches, discos)

Poco conocimiento de diseñoweb y programación front-end

Por lo general no toman proyectos de índole digital

Trabajos digitales(sitios o apps web, mobile)

Bastante conocimiento de diseñoweb y programación front-end

Por lo general no toman proyectos de índole imprenta

EntrevistaLinkedinPorfolio

Comunicación - ELEGIR

SER UN EQUIPO

Idea Boceto Diseño Desarrollo

Comunicación - SER UN EQUIPO

CONTACTO

Comunicación - CONTACTO

APRENDER

Cambiar el “no se puede”

¿Cómo podemos mejorarlo?¿Podemos encontrar otra manera? Quizá si intentamos...

POR:

HABLAR EL MISMOLENGUAJE

Boceto?

Prototipo?

Mockups?

Build?

F5?

PLANEAR

¿Guías de diseño?¿Recorte de imágenes? Etapas de chequeo

SEGUIR EL PLANACORDADO

Manejo del espacioComunicación

@luguedesde

pasequeestaabierto.tumblr.com

Lucía Guedes de Rezende

GRACIAS!

HERRAMIENTAS

960.gs

myfonts.com

fontsquirrel.com

typekit.com

thenounproject.com

iconmonstr.com

colourlovers.com

kuler.adobe.com

behance.net

dribbble.com

pttrns.com

androidniceties.tumblr.com

Imagenes utilizadasFoto de tapa y slide 9: Denny Brechner (http://instagram.com/dennybre)Slide 2: Jiri JerabekSlide 49: Mercedes Benz Magazine AdSlides 45-50 y 66 ilustradas por Casey Edwards (@basicnoir) y Dennis Estanislao (@fwdpxl)Foto de contratapa: http://www.flickr.com/photos/npmeijer/Slide 52: Adham Dannaway