Post on 26-Dec-2014
description
PLANEACIÓN DE SITIOS WEB¿Por dónde empiezo?
L.D.G. Víctor Luis Juárez Estrada
Planear un Sitio Web requiere saber de:Conocimiento de informática básicaManejo de Internet avanzadoArquitectura de la InformaciónWireframingFundamentos editorialesConocimiento técnico del colorDiagramaciónUso de multiplataformas y multidispositivosLógica de programaciónOptimización de imágenesServidores y protocolos de conexiónAdministración del tiempoAdministración de costesTrabajo multidisciplinarioEstrategias de venta y trato al clienteSeguimiento de proyectosEstrategias de promoción en medios digitalesEntre otras cosas….
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
¿Cómo planeo los contenidos iniciales?
Realiza un Mapa de Navegación. Puede ser:
•Lineal•No lineal•Jerárquico• Compuesto
¿Cómo planeo los contenidos iniciales?
Mapa de Nav. Lineal:
¿Cómo planeo los contenidos iniciales?
Mapa de Nav. No Lineal:
¿Cómo planeo los contenidos iniciales?
Mapa de Nav. Jerárquica:
¿Cómo planeo los contenidos iniciales?
Mapa de Nav. Compuesta:
Un proyecto reciente…
¿Cómo “vender” la idea?
Haz un boceto:
•Mock-Up•Wireframe•Esquema visual•Boceto / bosquejo
¿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.
¿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.
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
La diagramación (Resoluciones)
La diagramación (Dimensiones)
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
La diagramación (Jerarquía)
El patrón en F
La diagramación (Jerarquía)
El patrón Gutenberg
La diagramación (Jerarquía)
El patrón Z y zig-zag
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
La diagramación (Sistemas de Diagramación)
Semántico
Semánticos (960.gs)
La diagramación (Sistemas de Diagramación)
No semántico
No Semánticos (unsemantic.com)
<victor>Diseñador Web
</victor>
<email>victor@leucorama.mx,vicusdg@gmail.com
</email>
<facebook>Víctor Juárez
</facebook>
<twitter>@vicusdg
</twitter>