Planeación de sitios web
36
PLANEACIÓN DE SITIOS WEB ¿Por dónde empiezo? L.D.G. Víctor Luis Juárez Estrada
-
Upload
victor-juarez -
Category
Design
-
view
144 -
download
2
description
¿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.
Transcript of Planeación de sitios web
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>[email protected],[email protected]
</email>
<facebook>Víctor Juárez
</facebook>
<twitter>@vicusdg
</twitter>
