Enviar pesquisa
Carregar
Diseño de Interfaz web
•
0 gostou
•
577 visualizações
Alexis Morillo
Seguir
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 8
Recomendados
Anexo 19 ACTIVIDAD 3
Anexo 19 ACTIVIDAD 3
Edgar Mtz
Tema 3 diseño centrado usuario (2013)
Tema 3 diseño centrado usuario (2013)
Miguel Gea
La Interaccion persona ordenador
La Interaccion persona ordenador
Miguel Gea
Hci
Hci
Cesar Salazar
Tema 2. Los sistemas Interactivos: El ordenador
Tema 2. Los sistemas Interactivos: El ordenador
Miguel Gea
Seminario Patrones y tareas de interaccion
Seminario Patrones y tareas de interaccion
Miguel Gea
Seminario UX
Seminario UX
Miguel Gea
Usabilidad - Conceptos Básicos
Usabilidad - Conceptos Básicos
Karla Arosemena
Recomendados
Anexo 19 ACTIVIDAD 3
Anexo 19 ACTIVIDAD 3
Edgar Mtz
Tema 3 diseño centrado usuario (2013)
Tema 3 diseño centrado usuario (2013)
Miguel Gea
La Interaccion persona ordenador
La Interaccion persona ordenador
Miguel Gea
Hci
Hci
Cesar Salazar
Tema 2. Los sistemas Interactivos: El ordenador
Tema 2. Los sistemas Interactivos: El ordenador
Miguel Gea
Seminario Patrones y tareas de interaccion
Seminario Patrones y tareas de interaccion
Miguel Gea
Seminario UX
Seminario UX
Miguel Gea
Usabilidad - Conceptos Básicos
Usabilidad - Conceptos Básicos
Karla Arosemena
Desarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobile
Worköholics
Seminario: Prototipado y Wireframes
Seminario: Prototipado y Wireframes
Miguel Gea
Seminario Usabilidad y accesibilidad
Seminario Usabilidad y accesibilidad
Miguel Gea
Seminario Diseño objetos cotidianos
Seminario Diseño objetos cotidianos
Miguel Gea
Una mirada al futuro
Una mirada al futuro
Miguel Gea
Interacción Humano Computador
Interacción Humano Computador
Mario Solarte
Tema 5 usabilidad y evaluación (2013)
Tema 5 usabilidad y evaluación (2013)
Miguel Gea
Interfaces de usuario tema2
Interfaces de usuario tema2
Enrique Puertas
Tema 4 estrategias de diseño
Tema 4 estrategias de diseño
Miguel Gea
Seminario: Diseño Centrado en Usuario: caso videoclub 2013
Seminario: Diseño Centrado en Usuario: caso videoclub 2013
Miguel Gea
Seminario: componentes de un Interfaz de usuario
Seminario: componentes de un Interfaz de usuario
Miguel Gea
Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Jose Garcia
Tema 6 tendencias de IU
Tema 6 tendencias de IU
Miguel Gea
Fase 3 modelado del diseño de iweb
Fase 3 modelado del diseño de iweb
ROSA IMELDA GARCIA CHI
7. Accessibilidad
7. Accessibilidad
DCU_MPIUA
Diseño de interfaz de usuario
Diseño de interfaz de usuario
Stalin Eduardo Tusa Vitar
Capitulo 13 sfdsgfg
Capitulo 13 sfdsgfg
Kevin Cullisp
profundizaU1.pdf
profundizaU1.pdf
fernandomontenegro57
La usuabilidad
La usuabilidad
puracastillo
Informe de Diseño de Sistemas
Informe de Diseño de Sistemas
Jean Cruz
3Mayo2023 Taller construcción de Prototipos.pptx
3Mayo2023 Taller construcción de Prototipos.pptx
adso2024sena
La Ingeniería Web
La Ingeniería Web
Facultad de Ciencias y Sistemas
Mais conteúdo relacionado
Mais procurados
Desarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobile
Worköholics
Seminario: Prototipado y Wireframes
Seminario: Prototipado y Wireframes
Miguel Gea
Seminario Usabilidad y accesibilidad
Seminario Usabilidad y accesibilidad
Miguel Gea
Seminario Diseño objetos cotidianos
Seminario Diseño objetos cotidianos
Miguel Gea
Una mirada al futuro
Una mirada al futuro
Miguel Gea
Interacción Humano Computador
Interacción Humano Computador
Mario Solarte
Tema 5 usabilidad y evaluación (2013)
Tema 5 usabilidad y evaluación (2013)
Miguel Gea
Interfaces de usuario tema2
Interfaces de usuario tema2
Enrique Puertas
Tema 4 estrategias de diseño
Tema 4 estrategias de diseño
Miguel Gea
Seminario: Diseño Centrado en Usuario: caso videoclub 2013
Seminario: Diseño Centrado en Usuario: caso videoclub 2013
Miguel Gea
Seminario: componentes de un Interfaz de usuario
Seminario: componentes de un Interfaz de usuario
Miguel Gea
Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Jose Garcia
Tema 6 tendencias de IU
Tema 6 tendencias de IU
Miguel Gea
Fase 3 modelado del diseño de iweb
Fase 3 modelado del diseño de iweb
ROSA IMELDA GARCIA CHI
7. Accessibilidad
7. Accessibilidad
DCU_MPIUA
Mais procurados
(15)
Desarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobile
Seminario: Prototipado y Wireframes
Seminario: Prototipado y Wireframes
Seminario Usabilidad y accesibilidad
Seminario Usabilidad y accesibilidad
Seminario Diseño objetos cotidianos
Seminario Diseño objetos cotidianos
Una mirada al futuro
Una mirada al futuro
Interacción Humano Computador
Interacción Humano Computador
Tema 5 usabilidad y evaluación (2013)
Tema 5 usabilidad y evaluación (2013)
Interfaces de usuario tema2
Interfaces de usuario tema2
Tema 4 estrategias de diseño
Tema 4 estrategias de diseño
Seminario: Diseño Centrado en Usuario: caso videoclub 2013
Seminario: Diseño Centrado en Usuario: caso videoclub 2013
Seminario: componentes de un Interfaz de usuario
Seminario: componentes de un Interfaz de usuario
Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Tema 6 tendencias de IU
Tema 6 tendencias de IU
Fase 3 modelado del diseño de iweb
Fase 3 modelado del diseño de iweb
7. Accessibilidad
7. Accessibilidad
Semelhante a Diseño de Interfaz web
Diseño de interfaz de usuario
Diseño de interfaz de usuario
Stalin Eduardo Tusa Vitar
Capitulo 13 sfdsgfg
Capitulo 13 sfdsgfg
Kevin Cullisp
profundizaU1.pdf
profundizaU1.pdf
fernandomontenegro57
La usuabilidad
La usuabilidad
puracastillo
Informe de Diseño de Sistemas
Informe de Diseño de Sistemas
Jean Cruz
3Mayo2023 Taller construcción de Prototipos.pptx
3Mayo2023 Taller construcción de Prototipos.pptx
adso2024sena
La Ingeniería Web
La Ingeniería Web
Facultad de Ciencias y Sistemas
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest Merida
Luis Felipe Perez
Tema 6
Tema 6
ELias Davila Guerrero
Trabajo bañott
Trabajo bañott
Eleny30
Trabajo baño
Trabajo baño
Eleny30
Ingeniería Web
Ingeniería Web
Facultad de Ciencias y Sistemas
Aplicaciones
Aplicaciones
Cristhian Deza Castillo
Edwin alexande mata escobar
Edwin alexande mata escobar
Edwin Alexander
Arquitectura 2
Arquitectura 2
bistasa
Arquitectura
Arquitectura
Maria Amelia Rubino
Arquitectura de Información + Proceso Unificado de Desarrollo
Arquitectura de Información + Proceso Unificado de Desarrollo
Pio.la
informatica
informatica
yoanatec
Aplicaciones
Aplicaciones
Jhosely Malca
Ux ui, front-end y back-end
Ux ui, front-end y back-end
Scada Ucv
Semelhante a Diseño de Interfaz web
(20)
Diseño de interfaz de usuario
Diseño de interfaz de usuario
Capitulo 13 sfdsgfg
Capitulo 13 sfdsgfg
profundizaU1.pdf
profundizaU1.pdf
La usuabilidad
La usuabilidad
Informe de Diseño de Sistemas
Informe de Diseño de Sistemas
3Mayo2023 Taller construcción de Prototipos.pptx
3Mayo2023 Taller construcción de Prototipos.pptx
La Ingeniería Web
La Ingeniería Web
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest Merida
Tema 6
Tema 6
Trabajo bañott
Trabajo bañott
Trabajo baño
Trabajo baño
Ingeniería Web
Ingeniería Web
Aplicaciones
Aplicaciones
Edwin alexande mata escobar
Edwin alexande mata escobar
Arquitectura 2
Arquitectura 2
Arquitectura
Arquitectura
Arquitectura de Información + Proceso Unificado de Desarrollo
Arquitectura de Información + Proceso Unificado de Desarrollo
informatica
informatica
Aplicaciones
Aplicaciones
Ux ui, front-end y back-end
Ux ui, front-end y back-end
Último
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
AndreaMlaga1
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
SantiagoAgudelo47
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
calc5597
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
hellotunahaus
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
MarsielMendoza1
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
DanielaPrezMartnez3
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
LeonardoDantasRivas
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
Leo Florez
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
JustoAlbertoBaltaSmi
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Gabinete de Iniciativas Transfronterizas de Castilla y León
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
AhilynBasabe
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
karendaza9506
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GersonManuelRodrigue1
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
2021ArqROLDANBERNALD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
MaryNavarro1717
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Juan Carlos Fonseca Mata
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
Norberto Chacon
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
ilvrosiebp
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
EvaMaraMorenoLago1
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
Último
(20)
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
Diseño de Interfaz web
1.
Diplomados en Tecnología DIPLOMADOS UNIR.
Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR. Rif J-30001989-6 © 2007. Diseño y desarrollo De páginas Web Principios y Conceptos Básicos del Diseño Web Facilitador: Daniel Martín TEMA: DISEÑO DE INTEFAZ WEB
2.
Diplomados en Tecnología ASPECTOS A
CONSIDERAR AL MOMENTO DE DISEÑAR UNA INTERFASE WEB. Definición de Interfaz: La interfaz de usuario es la manera en que los usuarios se pueden comunicar con un ordenador. La creación de una página Web es posible con la unión de diferentes factores necesarios para su funcionamiento: aquello que se ve y es visible para el usuario - el diseño Web y el contenido - y aquello que no se ve pero que es igual o más importante - la programación Web, accesibilidad y la interfaz Web -. Todo junto forma una estructura virtual que tiene como función hacer llegar al usuario o cliente toda la información de manera adecuada y accesible. La interfaz, es un conjunto de elementos Hardware y Software de un ordenador que presentan información al usuario y le permiten interactuar con la información y con el ordenador. Si la interfaz de usuario está bien diseñada, el usuario encontrará la respuesta que espera a su acción. Si no es así puede ser frustrante su operación, puesto que el usuario normalmente se tiende a culpar a sí mismo por no saber utilizar el objeto. Debemos recordar que el Hardware son todos aquellos elementos físicos que comprenden una computadora: monitor, Mouse, teclado, cpu, etc. Mientras que el Software son los programas que utilizamos para interactuar con la maquina. La utilización de los software en este caso esta referida a programas como: navegadores Web, los cuales son utilizados para interpretar la información que es recibida desde Internet y mostrarla en nuestra pantalla. Puntos de vista en el desarrollo de una Interfase de usuario (IU): Existen tres puntos de vista distintos en una IU: el del usuario, el del programador y el del diseñador. Cada uno tiene un modelo mental propio de la interfaz, que contiene los conceptos y expectativas sobre ella, desarrollados a través de su experiencia. Estos modelos deben estar claros por los participantes en el desarrollo de un producto, de forma que se consiga una interfaz atractiva y a la vez efectiva para el trabajo con el programa. Una interfaz no es simplemente una cara atractiva; esta puede impresionar a simple vista pero decepcionar a la larga. Aquello importante es que el programa se adapte bien al modelo del usuario, cosa que se puede comprobar utilizando el programa más allá de la primera impresión. DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR. Rif J-30001989-6 © 2007.
3.
Diplomados en Tecnología Aspectos importantes
al momento de diseñar una interfase de usuario: Estos cinco puntos representan una parte pequeña pero importante del diseño de interfaces de usuario y ayudan a que la usabilidad de la aplicación mejore enormemente. • El usuario no está utilizando tu aplicación La cuestión más básica a considerar en el diseño de interfaces de usuario es que el usuario no quiere utilizar tu aplicación. Quieren hacer su trabajo de la forma más sencilla y rápida posible, y la aplicación no es más que otra herramienta para ayudar a conseguirlo. Cuánto menos estorbe tu aplicación al usuario, mejor. • La Ley de Fitt………………………………………………………………….. Esta es la ley más básica y más conocida entre las leyes del diseño de interfaces de usuario. Esta ley dice que cuando más grande y más próximo al puntero del ratón es un objeto, más sencillo es hacer click sobre él. Es de sentido común, pero, muchas veces es ignorado completamente en el diseño de interfaces. El tiempo para llegar a un objetivo es en función de la distancia y el tamaño del objetivo. Es por esto, que es conveniente usar objetos grandes para las funciones importantes. • Interferencias Innecesarias Cuando un usuario está trabajando, su atención está centrada en el trabajo que está realizando. Cada vez que debe concentrarse en la aplicación, le saca tiempo el volver a centrarse en el trabajo. Por lo tanto, se debe minimizar la cantidad de distracción y de interferencias por parte de tu aplicación. Cada aplicación tiene un elemento clave en la que centrarse – un editor de texto, es el texto; en un navegador Web, es la página Web – así que se debe de hacer de este elemento clave el centro de la interfaz. • Utilizar la potencia de la computadora En el diseño de interfaces para el usuario, las implicaciones que tiene esta idea son claras: cada vez que haya una decisión a tomar o trabajo a hacer, intentaremos que la interfaz lo haga por el usuario. Los ordenadores son muy potentes así que hemos de usar su potencia para ayudar al usuario. También se debe hacer que se pueda distinguir fácilmente entre elementos similares y, sobre todo, recordar las opciones de la aplicación. DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR. Rif J-30001989-6 © 2007.
4.
Diplomados en Tecnología • Haz
que sea fácil distinguir los elementos y buscarlos Los elementos de la pantalla que hacen cosas distintas deberían ser fácilmente distinguibles unos de los otros y el elemento seleccionado debe ser sencillo de distinguir y de leer. No se debe abrumar al usuario con demasiadas opciones. Proceso de diseño de Interfaz Fase de Análisis. En esta primera fase realizamos reuniones con los responsables para establecer ya des de un principio una visión clara del site a diseñar y organizar estudios de campo. Todo con un equipo multidisciplinario para asegurar un conocimiento global. También buscaremos productos competitivos, crearemos perfiles de usuario y, a partir de aquí, describiremos y documentaremos los escenarios y los requerimientos de operativa del usuario. Fase de diseño. En la fase de diseño se hacen una serie de reuniones en las que se barajan conceptos y metáforas y se realizan bocetos diferentes para encontrar el más adecuado. Se desarrollan posibles modelos de navegación y se elaboran dos tipos de prototipos para ver la diferencia: “Low fidelity” y “high fidelity”. Se lleva a cabo una documentación de estándares y directrices y, finalmente, se elabora una especificación de diseño. Fase de Implementación. Se va implementando el diseño y se realiza una evaluación global y se inicia la organización de test de usabilidad. Fase de desarrollo. Se efectúan encuestas para obtener feedback (una retroalimentación, una respuesta) por parte de los usuarios. Además, se organizan estudios de campo para obtener información de cómo se está usando lo website. También se comprueban los objetivos y su consecución - o no - mediante test de usabilidad. Entrega. Con frecuencia, los estudios para la usabilidad de proyectos, tanto en el análisis y el desarrollo como en la producción, suelen culminar con la elaboración y presentación de un documento final de “agujeros de usabilidad detectados” y medidas paliativas propuestas. DEFINICION DE Wireframes: También se les conoce cómo Prototipos de Baja fidelidad, StoryBoard, Schematics, Blueprints o Page Architecture y son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, sin elementos gráficos, de tal manera que implementan aspectos generales del DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR. Rif J-30001989-6 © 2007.
5.
Diplomados en Tecnología sistema sin
entrar en detalle, estos se deben realizar antes de empezar a programar y de crear el diseño visual de la página. Otro concepto para definir un wireframe “Es una representación esquemática sin elementos gráficos, formada por el contenido y elementos que formarán parte del proyecto (página web, poster, dípticos…). Siendo así una herramienta de discusión entre los responsables de contenido, diseñadores, programadores y cliente. Una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas.” Esto es lo que hace grande a los wireframes, y esto es lo que hace tan importante no saltarse este paso como parte de un proceso de creación o actualización de cualquier soporte (papel, web, visual…) La manera de crear un wireframe puede ser usando un lápiz y papel, o utilizando cualquier programa que permita crear lineas y formas poligonales (photoshop, fireworks, illustrator…), aunque cada vez mas están apareciendo muchos programas que tienen galerías de elementos ya creados para poder agilizar esta labor Las ventajas de usar Wireframes son por un lado el equipo y el cliente se centra en el diseño de contenidos y no en el diseño visual, y por otro lado, definiendo la organización y estructura en etapas previas al diseño y programación se evitan cambios posteriores más costosos, reduciendo así costos y tiempos. Al carecer de elementos gráficos, variar los comportamientos de los datos, información o elementos resulta mucho más fácil y menos costoso a nivel de tiempo. La información que deben contener los wireframes es: Inventario de contenido. Elementos cómo: cabeceras, enlaces, listas, imágenes, formularios, etc. Vínculos, títulos, etc. Layout. (diseño de la interfaz) Notas que nos indiquen el comportamiento de algunos elementos. La composición principal de Wireframe es un diagrama, el cual es una representación grafica de información que representa datos, existen varios tipos de diagramas, pero en el caso del diseño web los diagramas se encargan de mostrar la organización y comportamiento de los elementos que tienen cada una de las pantallas (paginas y sub paginas) que conforman nuestro sitio web En este paso de diseño web se debe tener en claro un aspecto fundamental, La complejidad del wireframe (diagrama). En algunos casos no es necesarios que nuestros diagramas sean perfectos y bien definidos, por lo general se DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR. Rif J-30001989-6 © 2007.
6.
Diplomados en Tecnología recomiendan que
sean bosquejos rápidos y fáciles de digerir, esto ayuda a explorar y analizar una idea de forma mas rápida y efectiva, debemos relacionar este comportamiento a tomar notas de las ideas principales que se nos presenta en una reunión de trabajo o mientras estamos presenciando una charla o clase. Los wireframes (diagramas) informales son preferibles: no nos atan prematuramente a una idea durante el proceso de exploración, y le dan a los diseñadores más libertad al momento de producir el diseño visual. Un wireframe (diagrama) busca capturar ideas principales, olvidándose un poco de lo estético y darle más importancia a lo funcional, ya que ellos están hechos para comunicar ideas principales. (Una vez el diseñador y el equipo que participa en la fase de creación y planificación del proyecto tenga bien en claro la estructura del proyecto a presentar, este diagrama debe pasar de ser un bosquejo de ideas generales y abstractas que solo lo pueden entender unos pocos, a un diseño bien definido que maneje un excelente criterio de la estetica a fin que pueda ser entendido por los demas integrantes del proceso de armado de la pagina web como: programadores, redactores, gerentes y demas departamentos involucrados en el proyecto. Este criterio obedece si somos parte de un equipo desarrollador de proyectos web para una empresa, dichos equipos por lo general están conformados por varios departamentos que realizan acciones en conjunto para la entrega de un proyecto web a un cliente. En el caso que estemos desarrollando un proyecto en el cual se trabaja directamente con el cliente sin contar con el soporte de un extenso departamento de diseño se sugiere que el proceso de elaboración de diagrama se simplifique, ya que podemos utilizar esta técnica para desarrollar diagramas que nos permitan a nosotros mismos poner en orden nuestras ideas. Una vez teniendo claro lo que deseamos presentar al cliente como una propuesta de diseño, es cuando procedemos a ejecutar el siguiente paso. Elaboración de un diseño final: Una vez se tengan claras las ideas y la diagramación de la página Web se procede a realizar el diseño final utilizando programas especializados para esta tarea como: (ADOBE PHOTOSHOP, FIREWORKS, GIMP, entre otros) para este diseño final no es necesario que el proyecto sea desarrollado directamente en un documento Web, simplemente se realiza una composición de las pantallas en formato (JPG, PNG o TIFF) y se la presenta al cliente como una propuesta impresa la cual debe lucir tan real como el proyecto final ya que siempre debemos asumir que nuestro cliente carece de creatividad, por lo tanto, es difícil que pueda imaginar con la misma claridad que lo hacemos nosotros las ideas que vamos a presentar. DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR. Rif J-30001989-6 © 2007.
7.
Diplomados en Tecnología Algunos ejemplos
de diagramas. Caso de estudio – Terra.org http://www.terra.org/ Caso de Estudio. NationWide / NASCAR http://nationwide.nascar.com/nationwide-series/ DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR. Rif J-30001989-6 © 2007.
8.
Diplomados en Tecnología Caso de
Estudio 5 Años de Firefox http://www.spreadfirefox.com/5years/es-ES/ Caso de Estudio GEOINT2009 (Microsite) http://geoint2009.com/ Recursos Algunas herramientas para el diseño de wireframes. http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes . Tutorial para diseñar una plantilla web en photoshop http://www.elwebmaster.com/editorial/taller-de-adobe-photoshop-disenar-un-sitio-web-o-blog Colocar un Slideshare http://www.slideshare.net/blackcreativebox/abc-wireframes Tesis de maestria de la universidad de Palermo Argentina. http://www.palermo.edu/dyc/master/pdf/tesis.completas/43.luzardo.pdf DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR. Rif J-30001989-6 © 2007.