¿Eres nuevo integrante del mundo del Diseño Web? Te sugiero una serie de conceptos que podrán ser de mucha ayuda para iniciar tu incursión en este ámbito.

1. PLANEACIÓN DE SITIOS WEB
¿Por dónde empiezo?
L.D.G. Víctor Luis Juárez Estrada

2. Planear un Sitio Web requiere saber de:
Conocimiento de informática básica
Manejo de Internet avanzado
Arquitectura de la Información
Wireframing
Fundamentos editoriales
Conocimiento técnico del color
Diagramación
Uso de multiplataformas y multidispositivos
Lógica de programación
Optimización de imágenes
Servidores y protocolos de conexión
Administración del tiempo
Administración de costes
Trabajo multidisciplinario
Estrategias de venta y trato al cliente
Seguimiento de proyectos
Estrategias de promoción en medios digitales
Entre otras cosas….

3. Tu asesoría y seguimiento consiste en:
* Planear secciones y contenidos
* Realizar un bosquejo inicial
* Acordar plazos de entrega
* Diagramación técnica
* Diseño de Interfaz
* Desarrollo
* Pruebas
* Publicación

4. ¿Cómo planeo los contenidos iniciales?
Realiza un Mapa de Navegación. Puede ser:
•Lineal
•No lineal
•Jerárquico
• Compuesto

5. ¿Cómo planeo los contenidos iniciales?
Mapa de Nav. Lineal:

6. ¿Cómo planeo los contenidos iniciales?
Mapa de Nav. No Lineal:

7. ¿Cómo planeo los contenidos iniciales?
Mapa de Nav. Jerárquica:

8. ¿Cómo planeo los contenidos iniciales?
Mapa de Nav. Compuesta:

9. Un proyecto reciente…

10. ¿Cómo “vender” la idea?
Haz un boceto:
•Mock-Up
•Wireframe
•Esquema visual
•Boceto / bosquejo

11. ¿Qué es un mock-up/wireframe?
• Esquema de página o plano de pantalla.
• Guía visual que representa el esqueleto o estructura
visual de un sitio web.
•Esquematiza el diseño y contenido de cada página,
incluyendo elementos de la interfaz y sistemas de
navegación.
•Carece de estilo tipográfico, color o aplicaciones gráficas
•Su objetivo reside en la funcionalidad, comportamiento
y jerarquía de contenidos.

12. ¿Qué es un mock-up/wireframe?
Los “Wireframes” o “Prototipos de baja fidelidad” son
diseños basados en líneas que buscan definir la
diagramación y organización de los elementos de un sitio.
Los wireframes permiten entender la globalidad de un
sitio en relación a sus contenidos. El Wireframe prioriza
diagramación y distribución de contenidos por sobre los
aspectos gráficos. Permite centrarse en el contenido y no
en el diseño visual, definiendo su organización, previo al
diseño, evitando cambios posteriores y perdida de
tiempo.

17. La diagramación
El objetivo es construir la estructura de las páginas de
un Sitio Web, con base en parámetros técnicos
fundamentales:
• La resolución de pantalla de los dispositivos de lectura,
• el límite de dimensiones de la interfaz
•La jerarquía de la información
• basarse en un sistema de composición estándar

18. La diagramación (Resoluciones)

24. La diagramación (Dimensiones)

26. La diagramación (Jerarquía)
El objetivo es responder eficazmente a la pregunta:
¿En dónde coloco mi información?
• El patrón en F
•El patrón Gutenberg
• El patrón Z y zig-zag

27. La diagramación (Jerarquía)
El patrón en F

28. La diagramación (Jerarquía)
El patrón Gutenberg

29. La diagramación (Jerarquía)
El patrón Z y zig-zag

33. La diagramación (Sistemas de Diagramación)
El objetivo es aplicar los fundamentos del Diseño
Editorial para facilitar la lectura de la información:
¿Cuáles existen?
• Semánticos
• No semántico

34. La diagramación (Sistemas de Diagramación)
Semántico
Semánticos (960.gs)

35. La diagramación (Sistemas de Diagramación)
No semántico
No Semánticos (unsemantic.com)

36. <victor>
Diseñador Web
</victor>
<email>
victor@leucorama.mx,
vicusdg@gmail.com
</email>
<facebook>
Víctor Juárez
</facebook>
<twitter>
@vicusdg
</twitter>