diseño para desarrolladores
TRANSCRIPT
![Page 1: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/1.jpg)
DISEÑO PARA DESARROLLADORES
@luguedesde
pasequeestaabierto.tumblr.com
Lucía Guedes de Rezende
![Page 2: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/2.jpg)
¿QUÉ ES EL DISEÑO?
![Page 3: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/3.jpg)
![Page 4: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/4.jpg)
un proceso creativo,
que combina estos elementos,
para resolver la comunicación de un
problema en un determinado contexto.
EL DISEÑO ES:
![Page 5: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/5.jpg)
ComunicaSimple Intuitivo - UsableAtractivo - Innovador
UN BUEN DISEÑO:
![Page 6: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/6.jpg)
ProfesionalesDiferencia de marcaSe ven los resultados
NOS BENEFICIAMOS DE UN BUEN DISEÑO:
![Page 7: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/7.jpg)
![Page 8: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/8.jpg)
- SIMPLE- ESTRUCTURA- ESPACIO- IMAGEN- TIPOGRAFÍA- COLOR
REGLAS BÁSICAS:
![Page 9: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/9.jpg)
SIMPLE
![Page 10: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/10.jpg)
Reglas básicas - SIMPLE
![Page 11: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/11.jpg)
ESTRUCTURA
![Page 12: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/12.jpg)
Reglas básicas - ESTRUCTURA
![Page 13: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/13.jpg)
Reglas básicas - ESTRUCTURA
![Page 14: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/14.jpg)
![Page 15: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/15.jpg)
ESPACIO
![Page 16: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/16.jpg)
![Page 17: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/17.jpg)
![Page 18: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/18.jpg)
![Page 19: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/19.jpg)
Click Me!
Reglas básicas - ESPACIO
![Page 20: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/20.jpg)
IMAGEN
![Page 21: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/21.jpg)
Reglas básicas - IMAGEN
![Page 22: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/22.jpg)
Reglas básicas - IMAGEN
![Page 23: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/23.jpg)
Reglas básicas - IMAGEN
![Page 24: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/24.jpg)
TIPOGRAFÍA
![Page 25: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/25.jpg)
R RSerif Sans serif
Reglas básicas - TIPOGRAFÍA
![Page 26: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/26.jpg)
Fantasía
R R R R
Reglas básicas - TIPOGRAFÍA
![Page 27: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/27.jpg)
COMIC SANS
Reglas básicas - TIPOGRAFÍA
![Page 28: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/28.jpg)
Reglas básicas - TIPOGRAFÍA
![Page 29: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/29.jpg)
RSerif
- Aspecto clásico o tradicional- Buenas para lectura de bloques de texto
Reglas básicas - TIPOGRAFÍA
![Page 30: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/30.jpg)
![Page 31: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/31.jpg)
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
![Page 32: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/32.jpg)
![Page 33: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/33.jpg)
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
![Page 34: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/34.jpg)
![Page 35: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/35.jpg)
Interlínea de texto
Reglas básicas - TIPOGRAFÍA
![Page 36: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/36.jpg)
Reglas básicas - TIPOGRAFÍA
![Page 37: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/37.jpg)
Bloques de texto
![Page 38: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/38.jpg)
![Page 39: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/39.jpg)
COLOR
![Page 40: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/40.jpg)
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
![Page 41: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/41.jpg)
![Page 42: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/42.jpg)
Reglas básicas - COLOR
![Page 43: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/43.jpg)
- SIMPLE- ESTRUCTURA- ESPACIO- IMAGEN- TIPOGRAFÍA- COLOR
REGLAS BÁSICAS:
![Page 44: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/44.jpg)
COMUNICACIÓN
![Page 45: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/45.jpg)
Manejo del espacioMantener margenes
![Page 46: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/46.jpg)
![Page 47: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/47.jpg)
![Page 48: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/48.jpg)
![Page 49: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/49.jpg)
Manejo del espacioMantener margenes
Left Brain vs Right Brain
Mercedes-Benz
![Page 50: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/50.jpg)
![Page 51: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/51.jpg)
ELEGIR
![Page 52: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/52.jpg)
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
![Page 53: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/53.jpg)
EntrevistaLinkedinPorfolio
Comunicación - ELEGIR
![Page 54: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/54.jpg)
SER UN EQUIPO
![Page 55: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/55.jpg)
Idea Boceto Diseño Desarrollo
Comunicación - SER UN EQUIPO
![Page 56: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/56.jpg)
CONTACTO
![Page 57: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/57.jpg)
Comunicación - CONTACTO
![Page 58: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/58.jpg)
APRENDER
![Page 59: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/59.jpg)
Cambiar el “no se puede”
![Page 60: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/60.jpg)
¿Cómo podemos mejorarlo?¿Podemos encontrar otra manera? Quizá si intentamos...
POR:
![Page 61: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/61.jpg)
HABLAR EL MISMOLENGUAJE
![Page 62: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/62.jpg)
Boceto?
Prototipo?
Mockups?
Build?
F5?
![Page 63: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/63.jpg)
PLANEAR
![Page 64: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/64.jpg)
¿Guías de diseño?¿Recorte de imágenes? Etapas de chequeo
![Page 65: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/65.jpg)
SEGUIR EL PLANACORDADO
![Page 66: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/66.jpg)
Manejo del espacioComunicación
![Page 67: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/67.jpg)
@luguedesde
pasequeestaabierto.tumblr.com
Lucía Guedes de Rezende
GRACIAS!
![Page 68: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/68.jpg)
HERRAMIENTAS
![Page 69: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/69.jpg)
960.gs
![Page 70: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/70.jpg)
myfonts.com
fontsquirrel.com
typekit.com
![Page 71: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/71.jpg)
thenounproject.com
iconmonstr.com
![Page 72: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/72.jpg)
colourlovers.com
kuler.adobe.com
![Page 73: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/73.jpg)
behance.net
dribbble.com
![Page 74: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/74.jpg)
pttrns.com
androidniceties.tumblr.com
![Page 75: Diseño para desarrolladores](https://reader033.vdocuments.pub/reader033/viewer/2022050802/559fd78f1a28ab264f8b4611/html5/thumbnails/75.jpg)
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