SlideShare une entreprise Scribd logo
1  sur  30
Elaboración de Páginas Web Utilizar los elementos fundamentales del diseño Ing. Lizette Martinez CBTIS 269
¿Qué es el diseño? Proceso de creación visual con un propósito, el cual cumple con exigencias prácticas.  Un buen diseño es la mejor expresión visual de la esencia de `algo` cuya creación no debe ser solo estética sino también funcional.
Los siguientes elementos son las bases que construyen el Diseño:
Linea Una línea es definida como una marca con longitud y dirección, creada mediante un punto que se mueve a lo largo de una superficie. Una línea puede variar en longitud, ancho, dirección, curvatura y color.  La línea puede ser de dos dimensiones (una línea de lápiz sobre papel), o tres dimensiones implícitas
Forma Una figura plana o una forma es creada cuando líneas actuales o implícitas se encuentran alrededor de un espacio. Un cambio en el color o el sombreado puede definir una forma.  Las formas pueden ser clasificadas en varios tipos: geométricas (cuadrado, triángulo, círculo) y orgánicas(irregulares en contorno)
Tamaño Este se refiere a las variaciones de las proporciones de los objetos, líneas o formas. Hay una variación de tamaño en objetos ya sean reales o imaginarios.
Color El Color es el carácter percibido de una superficie de acuerdo con la longitud de onda o la luz reflejada desde esta. El Color posee tres dimensiones: TINTE (otra palabra para color, indicada por su nombre así como rojo o amarillo),VALOR (su luminosidad o oscuridad), INTENSIDAD(su brillo u opacidad).
Textura La Textura es la forma como se siente la superficie (textura actual) o como puede ser observada (textura implícita).  Las Texturas son descritas con palabras como áspero, sedoso o rugoso.
Texturas en diseño web El uso de Texturas en diseño web puede ser muy sutil, quizás en un anuncio, o pueden ser en cualquier otro punto del diseño. En algunos casos, las texturas se utilizan para enfatizar ciertas partes del diseño. Debido a la versatilidad de las texturas, se pueden utilizar en combinación con muchos otros elementos de diseño, como la tipografía, los colores y la iluminación.
Valor El Valor es que tan oscuro o claro se ve algo. Podemos alcanzar cambios de valores en el color por medio de la adición de blanco o negro a dicho color. Claroscuro usa valores en los dibujo mediante contrastes de claros y oscuros en una composición
Balance El Balance es el sentido de equidad visual en una forma, figura, valor, color, etc. Existen tres tipos de balance: Simétrico – Este tipo de balance se ve en los casos en que los diferentes elementos componentes de la página web se encuentran dispuestos de acuerdo a alguna de las clases de simetría. (vertical y horizontal) Asimétrico – Es cuando los elementos componentes se colocan balanceados pero sin seguir ninguna simetría. Fuera de balance – En estos casos, los elementos son colocados en forma desbalanceada dentro de la página.
Balance simétricoSimetría horizontal Como está descrito anteriormente, la simetría horizontal es bastante rara en el diseño web todo el contenido de la misma puede ser incluida sin necesidad de que el usuario deba emplear las barras de desplazamiento, el diseñador puede basar su creación en la simetría horizontal
Balance simétricoSimetría horizontal En ella vemos que el menú está compuesto por líneas horizontales que abarcan la totalidad del ancho de la página y que el logotipo se encuentra ubicado en el pie de la página y también se encuentra dispuesto de acuerdo a la simetría horizontal del resto de la composición.
Balance simétricoSimetría vertical Una página web basada en simetría vertical implica que sus contenidos se encuentran distribuidos en dos o más columnas más o menos definidas que ocupan todo el largo de la página
Balance simétricoSimetría vertical Tal es el caso del siguiente ejemplo, donde puede verse claramente que el contenido principal de la página se encuentra dividido en dos columnas simétricas, debajo de un encabezado horizontal.
Balance simétricoSimetrías vertical y horizontal combinadas
Balance asimétrico  Los diferentes elementos que componen una página web se encuentran equilibrados o balanceados pero sin seguir un patrón simétrico.
Fuera de balance Esto se hace en forma deliberada, buscando el impacto visual. Un ejemplo de página sin balance es el siguiente, donde el creador ha decidido romper el equilibrio tanto horizontal como vertical, consiguiendo un efecto informal y abstracto muy llamativo.
Contraste El contraste es la yuxtaposición (fusión) de los elementos opuestos.
Enfasis El Énfasis es usado para crear ciertas partes de sus trabajos artísticos a través de llamado atención de manera especial. El centro de interés o punto foco es el lugar del dibujo que le invita a enfocar su mirada
Proporcion La Proporción describe el tamaño, ubicación o el monto de una cosa comparada con otra.
Patrones Los Patrones son creados mediantela repetición de un elemento (línea, forma o color) una y otra vez.
Gradación La Gradación del color es desde gamas cálidas a frías y de tonos oscuros a claros
Composición La combinación de distintos elementos para formar un todo.

Contenu connexe

Tendances (19)

Layout presentacion
Layout presentacionLayout presentacion
Layout presentacion
 
Principios de diseño gráfico
Principios de diseño gráficoPrincipios de diseño gráfico
Principios de diseño gráfico
 
Dibujo técnico bea natalia
Dibujo técnico bea nataliaDibujo técnico bea natalia
Dibujo técnico bea natalia
 
Dibujo tecnico 2
Dibujo tecnico 2Dibujo tecnico 2
Dibujo tecnico 2
 
Conceptos de dibujo técnico
Conceptos de dibujo técnico Conceptos de dibujo técnico
Conceptos de dibujo técnico
 
Unidad no.1
Unidad no.1Unidad no.1
Unidad no.1
 
Diseño gráfico
Diseño gráficoDiseño gráfico
Diseño gráfico
 
La línea
La líneaLa línea
La línea
 
Dibujo técnico
Dibujo técnicoDibujo técnico
Dibujo técnico
 
Enrìquez diana entes de la composicion
Enrìquez diana entes de la composicionEnrìquez diana entes de la composicion
Enrìquez diana entes de la composicion
 
Entes de composición, número de oro, proporción áurea, tercios dorados, zonas...
Entes de composición, número de oro, proporción áurea, tercios dorados, zonas...Entes de composición, número de oro, proporción áurea, tercios dorados, zonas...
Entes de composición, número de oro, proporción áurea, tercios dorados, zonas...
 
Layout
LayoutLayout
Layout
 
Planosseriados
PlanosseriadosPlanosseriados
Planosseriados
 
Puntos y lineas
Puntos y lineasPuntos y lineas
Puntos y lineas
 
Los principios del dibujo
Los principios del dibujoLos principios del dibujo
Los principios del dibujo
 
La retícula
La retículaLa retícula
La retícula
 
Seccion 4
Seccion 4Seccion 4
Seccion 4
 
Conceptos básicos sobre dibujo técnico
Conceptos básicos sobre dibujo técnicoConceptos básicos sobre dibujo técnico
Conceptos básicos sobre dibujo técnico
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicos
 

En vedette (20)

Unidad 3 aplicar animacion al dibujo
Unidad 3 aplicar animacion al dibujoUnidad 3 aplicar animacion al dibujo
Unidad 3 aplicar animacion al dibujo
 
Gradiacion
GradiacionGradiacion
Gradiacion
 
Teoría del Diseño Web
Teoría del Diseño WebTeoría del Diseño Web
Teoría del Diseño Web
 
Teorías del Diseño
Teorías del DiseñoTeorías del Diseño
Teorías del Diseño
 
Teoria del diseño
Teoria del diseñoTeoria del diseño
Teoria del diseño
 
TD2. FASES DEL DISEÑO
TD2. FASES DEL DISEÑOTD2. FASES DEL DISEÑO
TD2. FASES DEL DISEÑO
 
Teoria del diseño
Teoria del diseño Teoria del diseño
Teoria del diseño
 
Proceso de diseño 3 etapas
Proceso de diseño 3 etapasProceso de diseño 3 etapas
Proceso de diseño 3 etapas
 
Hc Definición
Hc DefiniciónHc Definición
Hc Definición
 
Principios del diseño
Principios del diseñoPrincipios del diseño
Principios del diseño
 
3dossier lourdes azpiri
3dossier lourdes azpiri3dossier lourdes azpiri
3dossier lourdes azpiri
 
Planificación plantas
Planificación plantasPlanificación plantas
Planificación plantas
 
Regimenes de interconexión
Regimenes de interconexiónRegimenes de interconexión
Regimenes de interconexión
 
La guerra civil espanyola [recuperado] [recuperado]
La guerra civil espanyola [recuperado] [recuperado]La guerra civil espanyola [recuperado] [recuperado]
La guerra civil espanyola [recuperado] [recuperado]
 
Diapositivas
DiapositivasDiapositivas
Diapositivas
 
Redes academicas
Redes academicasRedes academicas
Redes academicas
 
Plan de accion antrop
Plan de accion antropPlan de accion antrop
Plan de accion antrop
 
Seguridad informacion
Seguridad informacionSeguridad informacion
Seguridad informacion
 
¿cómo publicar una nueva entrada?
¿cómo publicar una nueva entrada?¿cómo publicar una nueva entrada?
¿cómo publicar una nueva entrada?
 
USALOS:
USALOS:USALOS:
USALOS:
 

Similaire à Tema 1 Utilizar los elementos fundamentales del diseño

Similaire à Tema 1 Utilizar los elementos fundamentales del diseño (20)

Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01Elaboracindepginasweb 110830201414-phpapp01
Elaboracindepginasweb 110830201414-phpapp01
 
Taller n°1
Taller n°1Taller n°1
Taller n°1
 
Principios del diseño
Principios del diseñoPrincipios del diseño
Principios del diseño
 
0202 principios de diseño
0202 principios de diseño0202 principios de diseño
0202 principios de diseño
 
Diagramación y composición
Diagramación y composiciónDiagramación y composición
Diagramación y composición
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
2. Elememtos del diseño.pptx
2. Elememtos del diseño.pptx2. Elememtos del diseño.pptx
2. Elememtos del diseño.pptx
 
Katherine Chicaiza taller-nª-1
Katherine Chicaiza taller-nª-1Katherine Chicaiza taller-nª-1
Katherine Chicaiza taller-nª-1
 
T1.hidalgo.gabriela y martinez.ricardo
T1.hidalgo.gabriela y martinez.ricardoT1.hidalgo.gabriela y martinez.ricardo
T1.hidalgo.gabriela y martinez.ricardo
 
2 fundamentos y elementos del diseño
2  fundamentos y elementos del diseño2  fundamentos y elementos del diseño
2 fundamentos y elementos del diseño
 
T1.giomara y stalin
T1.giomara y stalinT1.giomara y stalin
T1.giomara y stalin
 
GUIA Desempeño 2
GUIA Desempeño 2GUIA Desempeño 2
GUIA Desempeño 2
 
Mafer manobanda victor coquinche -taller1
Mafer manobanda   victor coquinche -taller1Mafer manobanda   victor coquinche -taller1
Mafer manobanda victor coquinche -taller1
 
Taller1 bryanmejia
Taller1 bryanmejiaTaller1 bryanmejia
Taller1 bryanmejia
 
Taller1 bryanmejia
Taller1 bryanmejiaTaller1 bryanmejia
Taller1 bryanmejia
 
Estructura y diseño de un sitio web
Estructura y diseño de un sitio webEstructura y diseño de un sitio web
Estructura y diseño de un sitio web
 
Elementos fundamentales del diseño
Elementos fundamentales del diseñoElementos fundamentales del diseño
Elementos fundamentales del diseño
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
Naty y moni taller 1
Naty y moni taller 1Naty y moni taller 1
Naty y moni taller 1
 
03_Elementos del diseño.ppt
03_Elementos del diseño.ppt03_Elementos del diseño.ppt
03_Elementos del diseño.ppt
 

Tema 1 Utilizar los elementos fundamentales del diseño

  • 1. Elaboración de Páginas Web Utilizar los elementos fundamentales del diseño Ing. Lizette Martinez CBTIS 269
  • 2. ¿Qué es el diseño? Proceso de creación visual con un propósito, el cual cumple con exigencias prácticas. Un buen diseño es la mejor expresión visual de la esencia de `algo` cuya creación no debe ser solo estética sino también funcional.
  • 3.
  • 4.
  • 5. Los siguientes elementos son las bases que construyen el Diseño:
  • 6. Linea Una línea es definida como una marca con longitud y dirección, creada mediante un punto que se mueve a lo largo de una superficie. Una línea puede variar en longitud, ancho, dirección, curvatura y color. La línea puede ser de dos dimensiones (una línea de lápiz sobre papel), o tres dimensiones implícitas
  • 7. Forma Una figura plana o una forma es creada cuando líneas actuales o implícitas se encuentran alrededor de un espacio. Un cambio en el color o el sombreado puede definir una forma. Las formas pueden ser clasificadas en varios tipos: geométricas (cuadrado, triángulo, círculo) y orgánicas(irregulares en contorno)
  • 8. Tamaño Este se refiere a las variaciones de las proporciones de los objetos, líneas o formas. Hay una variación de tamaño en objetos ya sean reales o imaginarios.
  • 9. Color El Color es el carácter percibido de una superficie de acuerdo con la longitud de onda o la luz reflejada desde esta. El Color posee tres dimensiones: TINTE (otra palabra para color, indicada por su nombre así como rojo o amarillo),VALOR (su luminosidad o oscuridad), INTENSIDAD(su brillo u opacidad).
  • 10.
  • 11. Textura La Textura es la forma como se siente la superficie (textura actual) o como puede ser observada (textura implícita). Las Texturas son descritas con palabras como áspero, sedoso o rugoso.
  • 12. Texturas en diseño web El uso de Texturas en diseño web puede ser muy sutil, quizás en un anuncio, o pueden ser en cualquier otro punto del diseño. En algunos casos, las texturas se utilizan para enfatizar ciertas partes del diseño. Debido a la versatilidad de las texturas, se pueden utilizar en combinación con muchos otros elementos de diseño, como la tipografía, los colores y la iluminación.
  • 13.
  • 14.
  • 15.
  • 16. Valor El Valor es que tan oscuro o claro se ve algo. Podemos alcanzar cambios de valores en el color por medio de la adición de blanco o negro a dicho color. Claroscuro usa valores en los dibujo mediante contrastes de claros y oscuros en una composición
  • 17. Balance El Balance es el sentido de equidad visual en una forma, figura, valor, color, etc. Existen tres tipos de balance: Simétrico – Este tipo de balance se ve en los casos en que los diferentes elementos componentes de la página web se encuentran dispuestos de acuerdo a alguna de las clases de simetría. (vertical y horizontal) Asimétrico – Es cuando los elementos componentes se colocan balanceados pero sin seguir ninguna simetría. Fuera de balance – En estos casos, los elementos son colocados en forma desbalanceada dentro de la página.
  • 18. Balance simétricoSimetría horizontal Como está descrito anteriormente, la simetría horizontal es bastante rara en el diseño web todo el contenido de la misma puede ser incluida sin necesidad de que el usuario deba emplear las barras de desplazamiento, el diseñador puede basar su creación en la simetría horizontal
  • 19. Balance simétricoSimetría horizontal En ella vemos que el menú está compuesto por líneas horizontales que abarcan la totalidad del ancho de la página y que el logotipo se encuentra ubicado en el pie de la página y también se encuentra dispuesto de acuerdo a la simetría horizontal del resto de la composición.
  • 20. Balance simétricoSimetría vertical Una página web basada en simetría vertical implica que sus contenidos se encuentran distribuidos en dos o más columnas más o menos definidas que ocupan todo el largo de la página
  • 21. Balance simétricoSimetría vertical Tal es el caso del siguiente ejemplo, donde puede verse claramente que el contenido principal de la página se encuentra dividido en dos columnas simétricas, debajo de un encabezado horizontal.
  • 22. Balance simétricoSimetrías vertical y horizontal combinadas
  • 23. Balance asimétrico  Los diferentes elementos que componen una página web se encuentran equilibrados o balanceados pero sin seguir un patrón simétrico.
  • 24. Fuera de balance Esto se hace en forma deliberada, buscando el impacto visual. Un ejemplo de página sin balance es el siguiente, donde el creador ha decidido romper el equilibrio tanto horizontal como vertical, consiguiendo un efecto informal y abstracto muy llamativo.
  • 25. Contraste El contraste es la yuxtaposición (fusión) de los elementos opuestos.
  • 26. Enfasis El Énfasis es usado para crear ciertas partes de sus trabajos artísticos a través de llamado atención de manera especial. El centro de interés o punto foco es el lugar del dibujo que le invita a enfocar su mirada
  • 27. Proporcion La Proporción describe el tamaño, ubicación o el monto de una cosa comparada con otra.
  • 28. Patrones Los Patrones son creados mediantela repetición de un elemento (línea, forma o color) una y otra vez.
  • 29. Gradación La Gradación del color es desde gamas cálidas a frías y de tonos oscuros a claros