Procedimiento para obtener los elementos del sistema de navegación

Definición del Diseño Visual

Es la identidad gráfica del sitio web.

 Paso a paso:

1. Analizar el objetivo del sitio

·         ¿Es informativo, comercial, educativo?

·         ¿Qué emociones debe transmitir? (confianza, modernidad, seriedad)

2. Definir el público objetivo

·         Edad

·         Nivel educativo

·         Gustos visuales

3. Seleccionar la paleta de colores

·         Elegir 2–4 colores principales

·         Definir color primario, secundario y de acento

4. Seleccionar tipografías

·         Una para títulos

·         Una para textos

·         Que sean legibles

5. Definir estilo gráfico

·         Minimalista

·         Corporativo

·         Moderno

·         Clásico

·         Ilustrado

6. Definir elementos visuales

·         Botones

·         Iconos

·         Imágenes

·         Estilo de fotografías

 Diseño de las Estructuras de las Páginas (Wireframe)

Es la estructura funcional sin diseño gráfico.

Paso a paso:

1. Identificar las páginas principales

Ejemplo:

·         Inicio

·         Servicios

·         Nosotros

·         Contacto

2. Definir las zonas de cada página

·         Encabezado (logo + menú)

·         Banner principal

·         Contenido

·         Llamadas a la acción

·         Pie de página

3. Organizar el contenido por jerarquía

·         Títulos grandes

·         Subtítulos

·         Texto

·         Botones

4. Aplicar la regla de 3 clics

El usuario debe llegar a cualquier sección en máximo 3 clics.

 Bocetos de Diseño

Son dibujos simples en papel o digital.

Paso a paso:

1. Dibujar la estructura básica

Rectángulos que representen:

·         Menú

·         Imágenes

·         Texto

·         Botones

2. Indicar ubicación de elementos

Ejemplo:

·         Logo arriba izquierda

·         Menú arriba derecha

·         Imagen central

3. Probar diferentes distribuciones

Haz 2 o 3 versiones antes de elegir la definitiva.

Borradores de Página

Ya incluyen colores, tipografías y contenido más real.

Paso a paso:

1. Aplicar el diseño visual definido

·         Colores reales

·         Tipografías reales

2. Colocar textos reales

·         Descripciones

·         Información

·         Botones funcionales

3. Insertar imágenes reales o de prueba

4. Ajustar alineaciones y espacios

Aquí ya se ve casi como el sitio final.

 Maqueta Web (Prototipo Final)

Es una versión interactiva que simula el sitio real.

Paso a paso:

1. Elegir herramienta

·         Canva

·         Figma

·         Adobe XD

·         WordPress

2. Crear páginas completas

·         Con enlaces funcionales

·         Botones que redirijan 

Comentarios

Publicar un comentario

Entradas populares de este blog

CSS

Imagen
   Uso de elementos CSS en HTML ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una página web, se utiliza en primer lugar el lenguaje HTML, para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza...
Leer más

Repaso de etiquetas HTML

  Resumen de etiquetas HTML para poner texto en una web   Resaltar textos   <strong> Texto de mayor importancia</strong> Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto.    <b>texto en negrita</b> La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es más correcto usar <strong>.   <em> texto en cursiva </em> Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.   <h1> títulos y encabezados</h1> Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas título son importantes para el SEO.   <big>texto más grande</b...
Leer más

Actividad 11

Imagen
 Una cafetería local quiere publicar su menú en su página web. Actualmente, el menú está organizado en una tabla HTML, pero los clientes se quejan de que: La tabla se ve desordenada El texto está mal alineado Es difícil distinguir los precios No hay separación clara entre los productos El diseño no es atractivo El dueño te contrata como desarrollador web para mejorar la presentación usando CSS . Situación inicial (tabla sin estilo) <table> <tr><th> Producto </th><th> Precio </th><th> Descripción </th></tr> <tr><td> Café </td><td> $25 </td><td> Caliente </td></tr> <tr><td> Té </td><td> $20 </td><td> Natural </td></tr> <tr><td> Pastel </td><td> $30 </td><td> Chocolate </td></tr> </table> Problema a resolver Diseña los estilos CSS en un archivo externo, necesar...
Leer más