Diseño y Desarrollo web en Dreamweaver

29
DISEÑO & DESARROLLO WEB EN DREAMWEAVER JUEVES 10 MARZO LUIS PALOMINO

Transcript of Diseño y Desarrollo web en Dreamweaver

Page 1: Diseño y Desarrollo web en Dreamweaver

DISEÑO & DESARROLLO WEBEN DREAMWEAVER

JUEVES 10 MARZO

LUIS PALOMINO

Page 2: Diseño y Desarrollo web en Dreamweaver

TEMARIO• Estructuras• Punto de interés• Flujo visual• Bocetos• Diagrama• HTML & CSS• Ejercicio N°1

Jueves 10Marzo

1LUIS PALOMINO

Page 3: Diseño y Desarrollo web en Dreamweaver

LUIS PALOMINO BELTRÁNPadre. Comunicador. MBA. Brand Manager. Project Director. Docente. Músico. Scout. 11 años en eMKT.

/ Mehaceslataba@Mehaceslataba/ Mehaceslataba

Page 4: Diseño y Desarrollo web en Dreamweaver

¿ALGÚN PROGRAMADOR EN EL GRUPO?

Page 5: Diseño y Desarrollo web en Dreamweaver
Page 6: Diseño y Desarrollo web en Dreamweaver

ESTRUCTURAS¿Qué partes tiene mi diseño?

Page 7: Diseño y Desarrollo web en Dreamweaver
Page 8: Diseño y Desarrollo web en Dreamweaver
Page 9: Diseño y Desarrollo web en Dreamweaver

http://www.w3schools.com/w3 schools

Page 10: Diseño y Desarrollo web en Dreamweaver
Page 11: Diseño y Desarrollo web en Dreamweaver
Page 12: Diseño y Desarrollo web en Dreamweaver

SLIDER |

FOOTER

HEADER

Código externo para que se muevan las secciones

SECTION SECTION

SECTION

Page 13: Diseño y Desarrollo web en Dreamweaver

PUNTO DEINTERÉS

Page 14: Diseño y Desarrollo web en Dreamweaver
Page 15: Diseño y Desarrollo web en Dreamweaver
Page 16: Diseño y Desarrollo web en Dreamweaver
Page 17: Diseño y Desarrollo web en Dreamweaver

Es aquella parte de la composición que llama

especialmente la atención.

Debe ayudar a transmitir los objetivos de comunicación

de la marca.

Los demás elementos del diseño deben ser

dispuestos de forma que sean inferiores.

PUNTO DEINTERÉS

Page 18: Diseño y Desarrollo web en Dreamweaver

FLUJO VISUAL

Page 19: Diseño y Desarrollo web en Dreamweaver
Page 20: Diseño y Desarrollo web en Dreamweaver
Page 21: Diseño y Desarrollo web en Dreamweaver
Page 22: Diseño y Desarrollo web en Dreamweaver

El flujo visual es el camino que recorren

los ojos a través de una pantalla.

Si el diseño está bien realizado, este

camino se da de manera natural y

fluida.

FLUJO VISUAL

Page 23: Diseño y Desarrollo web en Dreamweaver

BOCETO

Page 24: Diseño y Desarrollo web en Dreamweaver
Page 25: Diseño y Desarrollo web en Dreamweaver
Page 26: Diseño y Desarrollo web en Dreamweaver

Hacer bocetos es una fase fundamental del proceso de diseño y es bastante útil para dejar fluir tu creatividad.

Bocetear y diagramar no es lo mismo.

BOCETO

Page 27: Diseño y Desarrollo web en Dreamweaver

Nos permite definir las zonas o divisiones que va a tener la página web.

Nos permite planear el punto de interés y flujo visual.

DIAGRAMA OESTRUCTURA

Page 28: Diseño y Desarrollo web en Dreamweaver

HTML & CCSDreamweaver

Page 29: Diseño y Desarrollo web en Dreamweaver

1. Definir la marca sobre la cual diseñarán una web.

2. Definir los objetivos de comunicación.

3. Definir la estructura de la web.

4. Dibujar el boceto de la web.

EJERCICIO N°1

Presentación: Sábado 12Formato: Lápiz y Papel