Wireframe de la página web
Técnico en integración de contenidos digitales
Centro de Diseño e Innovación Tecnológica Industrial
SENA Regional Risaralda
Martha Liliana Moreno Pulido
Pamela Cristina López Otero
Carlos Mario Giraldo Hoyos
2022
Tabla de Contenidos
Capítulo 1 Que es WireFrame ............................................................................................1
Título 2 Los propósitos de los Wireframe.......................................................................1
Título 3 Wireframes y arquitectura de la información ...................................................1
Título 4. ¿Cuáles son los principales tipos de wireframes?....................................1
Capitulo 2 Propuesta Boceto de la página web (Green Cities)..........................................2
Título 3 Resumen diseño y disposición de texto y objetos en la pagina web..............2
Título 4.........................................................................................................................2
Capítulo 4 Conclusiones.....................................................................................................5
Lista de Referencias.............................................................................................................6
Capítulo 1
Wireframe
En un principio, el término "Wireframe" significaba una representación visual de objetos
tridimensionales, como aquellos empleados en el desarrollo y diseño de productos. Ahora
también se usa para describir el modelado 3D en animación por computadora y en el
diseño y desarrollo de aplicaciones móviles y páginas web 2D.
En el diseño web, un Wireframe o un
diagrama Wireframe es una representación
visual en escala de grises de la estructura y
funcionalidad de una sola página web o
pantalla de aplicación móvil. Los Wireframe
se usan en las primeras etapas del proceso de
desarrollo con el fin de establecer la estructura
básica de una página antes de agregar el
contenido y el diseño visual, y se puede crear
con papel, directamente en HTML/CSS o con
A modo de conclusión, el wireframe debe usarse al principio de un proyecto para obtener
la aprobación del cliente en el diseño de las páginas clave y la navegación. Esto
proporcionará al equipo, concretamente a los diseñadores, confianza para avanzar. Con
ello, también ahorrarás mucho tiempo y dinero. Aplicaciones de software.
Título 2.
Los propósitos de los Wireframe
Los Wireframe reemplazan la naturaleza abstracta del mapa de sitio, que por lo general es
el primer paso en el desarrollo de sitios web, con algo más tangible y fácil de
entender. Los Wireframe tienen muchos propósitos interrelacionados:
Garantizar que el sitio o la aplicación se desarrolle de conformidad con los fines
acordados.
Centrarse en la facilidad de uso.
Capacidad de crecimiento del contenido.
Comentarios e interación sin esfuerzo
Titulo 3
Wireframe y arquitectura de la información
Como parte de todo el proceso de desarrollo del sitio web y de creación del Wireframe, la
arquitectura de la información (IA) apunta a ubicar y priorizar la información de forma
que logre la comprensión de una página web o aplicación móvil por parte de los usuarios
futuros. Hay cuatro elementos fundamentales, según la arquitectura de la Información
(IA) para el Word Wide Web:
Estructuras y esquemas organizativos: clasificación y estructuración de la
información.
Sistemas de etiquetado: representación de la información.
Sistemas de navegación: desplazamiento por la información.
Sistemas de búsqueda: buscar y encontrar información.
Titulo 4
¿Cuáles son los principales tipos de Wireframe?
Puedes crear tus Wireframe con apenas una hoja y un lapicero, o utilizar alguna
herramienta digital. Lo ideal es usar los recursos en conjunto para conseguir un buen
resultado.
Comienzas haciendo un esquema en un pedazo de papel y luego, pasas a la computadora,
donde podrás utilizar más funcionalidades.
¡Tres principales tipos de Wireframe!
Baja Fidelidad:
Este es el modelo más simple de todos. Normalmente, es hecho manualmente, sin colores
y con pocos detalles.
Anotado:
Es el modelo intermedio entre el de baja y el de alta fidelidad. A parte de los elementos
visuales organizados, simulando una página, puedes colocar anotaciones y subtítulos.
Alta fidelidad:
Este modelo es el más próximo de una versión final. Acá debes usar algún software que
permita interacciones como hacer clic en los botones.
Como estamos hablando de Wireframe, no necesitan ser muy bien desarrollados como la
versión finalizada del layout.
El punto central es mostrar con claridad toda la estructura del producto final. Caso
contrario, el concepto de crear un esquema y agilizar el proceso sería perdido.
Capítulo 2
Propuesta Boceto de la página web (Green Cities)
Título 3.
Capítulo 4.
Conclusiones
Una de las conclusiones que podemos sacar de este tema es que el Wireframe
debe ser siempre el primer paso de un proyecto, ya que se debe obtener la
aprobación del cliente antes de ejecutar el proyecto. Este primer paso va a
proporcionar al equipo de diseño poder avanzar con más confianza y seguridad en
la creación del proyecto. De igual forma este primer paso nos va permitir ahorrar
tiempo y dinero.
Crear un Wireframe como paso inicial es la mejor manera de tener un proyecto
exitoso. Sin importar si lo diseñamos usando un lápiz y una hoja de papel o si lo
realizas en una herramienta digital, siempre vamos a tener mejores resultados a la
hora de ejecutar el proyecto.
Para poder lograr el diseño deseado en la página web, debemos definir desde un
principio todas aquellas características que debe llevar la página web, según las
características o especificaciones solicitadas. A partir de este primer trabajo ya
podremos modificar, ampliar o eliminar los diferentes elementos que componen la
página web, esto a futuro nos va a traer grandes beneficios en ahorro de tiempo y
de dinero.
Bibliografía
[Link]
web#section_0
[Link]
Apéndice
Las tablas y figuras pueden ir en el apéndice como se mencionó anteriormente.
También es posible usar el apéndice para incluir datos en bruto, instrumentos de
investigación y material adicional.
Vita
Acá se incluye una breve biografía del autor de la tesis.
