diseño para desarrolladores
TRANSCRIPT
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