Tp N° 2 -AAT Diseño preliminar de un sitio web- Wideframes Figma

Materia Adaptación al ambiente de trabajo

Tp N° 2 -  Diseño preliminar de un sitio web

 

                                                Photo by rawpixel on Unsplash

1. ¿Qué es un sitio web?

Un sitio web es un conjunto de páginas relacionadas entre sí que se publican en Internet. Cada página puede contener texto, imágenes, videos, enlaces y otros elementos interactivos. Los sitios web pueden tener diferentes objetivos: informar, entretener, vender productos, enseñar, etc.

2. El proceso de diseño web

Antes de comenzar a programar un sitio, se debe planificar y diseñar. Esto implica varias etapas:

a) Definir el tema y los objetivos

Primero, se elige un tema de interés personal (por ejemplo: música, videojuegos, deportes, cocina, viajes, moda, etc.) y se define qué se quiere lograr con el sitio:

• ¿Qué información quiero mostrar?

• ¿A quién está dirigido (público objetivo)?

• ¿Qué tipo de contenido tendrá?

b) Analizar sitios de referencia

Es importante observar otros sitios de la misma temática para:

• Inspirarse en su diseño.

• Analizar qué funciona bien y qué podría mejorarse.

• Entender cómo organizan la información.

De cada sitio se pueden listar aspectos positivos y negativos, como:

• Positivos: colores agradables, buena organización, fácil de navegar.

• Negativos: textos difíciles de leer, muchos anuncios, diseño confuso.

3. Wireframes (bocetos del sitio)

Un wireframe es un dibujo simple del diseño de una página web.
Sirve para planificar la estructura del contenido antes de pasar al diseño digital.

🔹 Se puede hacer a mano en papel, usando cuadros y líneas para representar:

• Encabezado (header)

• Menú de navegación

• Cuerpo o contenido principal

• Imágenes

• Pie de página (footer)

🔹 No se dibujan colores ni decoraciones, solo la distribución de los elementos.

4. Diseño en Figma

Una vez definidos los bocetos, se pasa al diseño digital usando Figma una herramienta gratuita que permite crear prototipos de interfaces.

Con Figma se puede:

• Diseñar la estructura visual de un sitio web o aplicación.

• Prototipar: crear una versión de prueba que simula cómo funcionaría el sitio real.

• Colaborar en equipo: varios usuarios pueden trabajar al mismo tiempo en el mismo proyecto.

• Compartir ideas de diseño: permite mostrar un modelo visual antes de comenzar a programar.

Ejercicios:

Al ser esta una materia de Nivel Secundario no tiene como objetivo adentranse en toda la teoría formal sobre desarrollo web, pero si dar nociones previas necesarias para un curso introductorio.

En este práctico se busca que se pueda realizar un bosquejo de un sitio web a elección, teniendo como referencias otros sitios de temáticas similares.


Desarrollar


1 Describir sus intereses personales

2- Elegir el tema del sitio web a diseñar de entre los intereses nombrados en el punto anterior. Escribir un breve párrafo explicando por qué eligió ese tema y qué lo hace interesante.

3- Segun el tema elegido , indicar  5 sitios de internet que se puedan tomar como referencia para el trabajo. Visitar los sitios y listar tres aspectos positivos y tres negativos de cada uno.

4- Wireframes a mano. Hacer bocetos en papel con las posibles estructuras del sitio (mínimo 10 secciones)
 

5- Diseñar un sitio web según la temática elegida en Figma.

 Ejemplo de secciones de un sitio web sobre turismo serián: restaurantes, museos, con

 

Recursos:

https://www.figma.com/