Planeación de sitios web
Descargar como PPTX, PDF1 recomendación757 vistas
La planeación de un sitio web implica conocer aspectos técnicos como arquitectura de la información, wireframing y optimización, así como administrar tiempo y costes. El proceso incluye la creación de un mapa de navegación, diseño de interfaz y desarrollo, enfatizando la importancia de los wireframes para definir la organización del contenido. Se utilizan patrones de diagramación y principios de diseño editorial para mejorar la presentación y facilidad de lectura, priorizando la estructura sobre el diseño visual.
Planeación de sitios web
- 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:
- 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
- 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>