wireframes - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la...
TRANSCRIPT
![Page 1: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/1.jpg)
WIREFRAMES
![Page 2: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/2.jpg)
(GÜAIRFREIMS)
![Page 3: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/3.jpg)
JERARQUIZACIÓNDE CONTENIDOS
#TET4011
![Page 4: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/4.jpg)
DISTRIBUCIÓNVISUAL
#TET4011
![Page 5: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/5.jpg)
ESQUEMATIZACIÓNDE LA INTERFAZ
#TET4011
![Page 6: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/6.jpg)
WIREFRAMES
SON ESTRUCTURAS MUY SIMPLES Y ESTÁN ENFOCADAS A VISUALIZAR LA
DISTRIBUCIÓN DE LOS CONTENIDOS DENTRO DE LA PANTALLA
![Page 7: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/7.jpg)
ESTRATEGIAARQ. DE LA INFORMACIÓN
DISEÑO DE INTERFAZDESARROLLO
#TET4011
![Page 8: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/8.jpg)
ESTRATEGIAARQ. DE LA INFORMACIÓN
DISEÑO DE INTERFAZDESARROLLO
#TET4011
WIREFRAMES
![Page 9: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/9.jpg)
LANDINGPAGE
![Page 10: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/10.jpg)
BASADA SOLAMENTE EN LA ARQUITECTURADEL CONTENIDO
#TET4011
![Page 11: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/11.jpg)
EVITA ELEMENTOSACCIDENTALES
#TET4011
![Page 12: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/12.jpg)
MENOR TIEMPOY COSTO
#TET4011
![Page 13: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/13.jpg)
MAYORPRODUCTIVIDAD
#TET4011
![Page 14: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/14.jpg)
EXCELENTE HERRAMIENTADE COMUNICACIÓN Y DISCUSIÓN ENTRE EL EQUIPO DE TRABAJO
#TET4011
![Page 15: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/15.jpg)
CARACTERÍSTICAS
![Page 16: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/16.jpg)
SIMPLES, SIN DISTRACTORES NI IMÁGENES
![Page 17: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/17.jpg)
PUEDEN SERDIBUJADOSA MANO
![Page 18: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/18.jpg)
CADA PANTALLAES UN WIREFRAME
![Page 19: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/19.jpg)
SIEMPRE VAN ACOMPAÑADOSDE UNA EXPLICACIÓN SOBRELAS ZONAS E INTERACCIONES
![Page 20: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/20.jpg)
SE UTILIZAN EN LA CREACIÓN DECUALQUIER TIPO DE INTERFAZ DIGITAL
![Page 21: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/21.jpg)
EN RESUMEN,LOS WIREFRAMESSON BACANES PORQUE:
![Page 22: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/22.jpg)
GUÍASVISUALES
![Page 23: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/23.jpg)
ESTRUCTURAS SIMPLESCONFORMADAS PRINCIPALMENTEPOR LÍNEAS Y CAJAS
![Page 24: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/24.jpg)
DISEÑADOSEN ESCALADE GRISES
![Page 25: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/25.jpg)
TODOS LOS ELEMENTOSGRÁFICOS ESTÁN REPRESENTADOSESQUEMÁTICAMENTE
![Page 26: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/26.jpg)
SE UTILIZA SOLOUNA FAMILIATIPOGRÁFICA
![Page 27: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/27.jpg)
DE PREFERENCIA SEUTILIZAN CONTENIDOSREALES
![Page 28: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/28.jpg)
MALASPRÁCTICAS
![Page 29: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/29.jpg)
USO DE COLORE IMÁGENES
![Page 30: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/30.jpg)
WIREFRAMEO SITIO DEFINITIVO?
![Page 31: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/31.jpg)
MEZCLA CONINTERFAZ REAL
![Page 32: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/32.jpg)
COMPLEJIDADDE ELEMENTOS
![Page 33: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/33.jpg)
WIREFRAMES MUY SIMPLES
![Page 34: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/34.jpg)
10 CONSEJOSPARA REALIZARWIREFRAMES
![Page 35: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/35.jpg)
SIMPLE POR SOBRETODAS LAS COSAS
#TET4011
1
![Page 36: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/36.jpg)
USA LA MAYOR CANTIDAD DE CONTENIDO REAL POSIBLE
#TET4011
2
![Page 37: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/37.jpg)
SIEMPRE TRABAJA EN ESCALA DE GRISES
#TET4011
3
![Page 38: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/38.jpg)
EVITA USAR LOGOS, IMÁGENES E ICONOGRAFÍA
#TET4011
4
![Page 39: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/39.jpg)
NO TE LIMITES A UNA APLICACIÓN DIGITAL, DIBUJA!
#TET4011
5
![Page 40: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/40.jpg)
DEFINE ESTRATEGIA Y CONTENIDOS ANTES DE COMENZAR
#TET4011
6
![Page 41: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/41.jpg)
SIEMPRE HAZ WIREFRAMES ANTES DE DISEÑAR
#TET4011
7
![Page 42: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/42.jpg)
EXPLICA LAS ZONAS E INTERACCIONES
#TET4011
8
![Page 43: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/43.jpg)
DISECUTE LOS WIREFRAMES CON TU EQUIPO DE TRABAJO
#TET4011
9
![Page 44: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/44.jpg)
CORRIGE LOS PROBLEMAS EN LOS WIREFRAMES, NO EN EL DISEÑO
#TET4011
10
![Page 45: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/45.jpg)
DUDAS?
![Page 46: WIREFRAMES - nicolasespinoza · diseÑo de interfaz desarrollo #tet4011. estrategia arq. de la informaciÓn diseÑo de interfaz desarrollo #tet4011 wireframes. landing page. basada](https://reader034.vdocuments.co/reader034/viewer/2022042805/5f68840c9a2baa394d686b79/html5/thumbnails/46.jpg)
A TRABAJAR!
#TET4011PRESENTACIÓN DISPONIBLE EN WWW.NICOLASESPINOZA.CL