Upload
maria-dolores-parra-lara
View
221
Download
2
Tags:
Embed Size (px)
Citation preview
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES
MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication
OBJECTIVE
Copyright © 2013 MyGraphicsLab / Pearson Education
This presentation covers the following ACA Exam objective:
2.3 Demonstrate knowledge of page layout design concepts and principles.
1. 2.3 Demostrar conocimiento de principios y conceptos de diseño de diseño de página.
DESIGN PRINCIPLES
Good design isn’t random; every element should be intentional, based on solid principles. Design principles include: Balance and symmetry Emphasis Alignment Proximity Movement White space Rule of thirds
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES
Buen diseño no es al azar; cada elemento debe ser intencional, basada en principios sólidos. Principios de diseño incluyen:
equilibrio y simetría énfasis alineación proximidad movimiento blanco espacio regla de los tercios
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: BALANCE AND SYMMETRY
Balance and symmetry work hand in hand. The basic definition of balance in design is the even or proportional distribution of elements within the design landscape.
One way balance is achieved is through symmetry. There can be horizontal and vertical symmetry, diagonal symmetry, radial symmetry, and asymmetric symmetry.
Balance and symmetry can be used to achieve design harmony: Harmony is the adaptation of elements in relation to one another to form a pleasing,
coherent whole.
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: BALANCE AND SYMMETRY
Equilibrio y simetría trabajan mano a mano. La definición básica de equilibrio en el diseño es la distribución proporcional o incluso de elementos dentro del paisaje de diseño.
Una forma se logra el equilibrio es a través de la simetría. Puede haber simetría horizontal y vertical, diagonal simetría, simetría radial y simetría asimétrica.
Equilibrio y simetría pueden utilizarse para lograr la armonía del diseño: Harmony la armonía es la adaptación de elementos en relación con otro
para formar un conjunto coherente, agradable. Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: SYMMETRY
This example incorporates many types of symmetry: En este ejemplo incorpora muchos tipos de simetría:
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: EMPHASIS AND HIERARCHY
When one calls attention to a design element, this is called emphasis. It might be done by bold or large type, color or size, or contrast.
The element that is emphasized is called the focal point. Emphasis is used to create hierarchy, which is a way of organizing
design elements in terms of their relative importance.
George’s SandwichesTuna Melt
Hot Pastrami
Ham and Cheese
Turkey and Swiss
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: EMPHASIS AND HIERARCHY
Cuando uno llama la atención sobre un elemento de diseño, esto se llama énfasis. Se puede hacer por tipo negrita o grande, color o tamaño o contraste.
El elemento que se enfatiza se llama el punto focal. Énfasis se utilizan para crear la jerarquía, que es una forma de
organizar los elementos de diseño en cuanto a su importancia relativa.
George’s SandwichesTuna Melt
Hot Pastrami
Ham and Cheese
Turkey and Swiss
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: ALIGNMENT
Alignment is the arrangement of elements in a line.
La alineación es la disposición de elementos en una línea.
Alignment draws the eye along the line formed by the elements.
Alineación dibuja el ojo a lo largo de la línea formada por los elementos.
By using alignment, designers and photographers can focus the viewer’s attention.
Mediante el uso de alineación, diseñadores y fotógrafos pueden centrarse la atención del espectador.
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: PROXIMITY
Proximity in design is grouping similar elements together. The viewer’s eye sees similar grouped objects as a single unit.
Proximidad en diseño es agrupar elementos similares. Ojo del espectador ve similares objetos agrupados como una sola unidad.
Proximity organizes information and provides structure for the project.
Proximidad organiza la información y proporciona la estructura para el proyecto.
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: MOVEMENT
In visual design, the illusion of movement is shown by shapes, lines, and curves within the image.
En el diseño visual, la ilusión de movimiento se muestra por las formas, líneas y curvas dentro de la imagen.
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: WHITE SPACE
Use of white space Consider white space a part of the
design. Consider white space a graphic
element.
White space is sometimes referred to as negative space because of the lack of content.
White space can be used as a design element to balance and give your eyes a place to rest.
It can also be used as a space for other elements to be placed such as text, logos, and animations.
White space doesn’t have to be white; a sky, ground, or any solid block of color can serve the same purpose.
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: WHITE SPACE
Uso del espacio en blanco Considerar el espacio en blanco una parte
del diseño. Consideremos un elemento gráfico el
espacio en blanco.
Espacio en blanco se refiere a veces como espacio negativo debido a la falta de contenido.
Espacio en blanco puede utilizarse como un elemento de diseño para equilibrar y dar a tus ojos un lugar para descansar.
También utilizable como un espacio para otros elementos para colocarse como texto, logotipos y animaciones.
Espacio en blanco no tiene que ser blanco; un cielo, tierra o algún bloque sólido de color puede servir el mismo propósito.
Copyright © 2013 MyGraphicsLab / Pearson Education
DESIGN PRINCIPLES: RULE OF THIRDS
The critical areas for the design elements are in the intersections of each third.
Las áreas críticas para los elementos de diseño están en las intersecciones de cada tercero.
Copyright © 2013 MyGraphicsLab / Pearson Education
ESSENTIAL PRINCIPLES OF GOOD WEB DESIGN: GUIDING THE EYE
Guiding the eye can be achieved using: Position: element position on the page influences in what order it’s seen Color: using strong and weak colors influences where users look Contrast: making things different causes them to stand out Size: large takes precedence over small
Guiar el ojo puede lograrse utilizando: Posición: influye en la posición del elemento en la página en qué orden ha
visto Color: usando las influencias de colores fuertes y débiles donde los
usuarios look Contraste: hacer cosas diferentes causas que destacan Tamaño: grande toma precedencia sobre la pequeña
Copyright © 2013 MyGraphicsLab / Pearson Education
GUIDING THE EYE EXAMPLE
Peachpit uses bars of color, borders, and white space to guide your eye through sections from top to bottom, left to right.
Peachpit utiliza barras de color, las fronteras y el espacio en blanco para guiar el ojo a través de las secciones de arriba a abajo, de izquierda a derecha.
Copyright © 2013 MyGraphicsLab / Pearson Education
ESSENTIAL PRINCIPLES OF GOOD WEB DESIGN: SPACING
Line spacing: spacing between lines directly affects how readable it appears.
Peachpit utiliza barras de color, las fronteras y el espacio en blanco para guiar el ojo a través de las secciones de arriba a abajo, de izquierda a derecha.
Padding: page elements generally should never touch. Relleno: elementos de página generalmente no deben nunca tocar. White space: refers to empty space on a page (not necessarily white).
It can help provide balance. Espacio en blanco: se refiere a un espacio vacío en una página (no
necesariamente blanco). Puede ayudar a proporcionar equilibrio.
Copyright © 2013 MyGraphicsLab / Pearson Education
SPACING EXAMPLE
This example has a very clean and simple site with plenty of space.
Este ejemplo tiene un sitio muy limpio y simple con un montón de espacio.
Copyright © 2013 MyGraphicsLab / Pearson Education
ESSENTIAL PRINCIPLES OF GOOD WEB DESIGN: NAVIGATION
Where are you? Where to go from here? The example here shows easy
navigations that leave no room for ambiguity.
¿Dónde estás? ¿Dónde ir desde aquí? Aquí se muestra fáciles
navegaciones que no dejan lugar a ambigüedades.
Copyright © 2013 MyGraphicsLab / Pearson Education
ESSENTIAL PRINCIPLES OF GOOD WEB DESIGN: TYPOGRAPHY
Font choices –– different types of fonts convey different messages.
Font sizes –– make sure your text sizes are consistent, large enough to be read, and proportioned so that headings stand out.
Spacing –– spacing between lines and various objects is important to consider.
Line length –– lines of text shouldn’t be too long. The longer they are, the harder they are to read.
Color –– avoid low-contrast text. It looks good but doesn’t read so well.
Paragraphs –– avoid justifying.
Copyright © 2013 MyGraphicsLab / Pearson Education
ESSENTIAL PRINCIPLES OF GOOD WEB DESIGN: TYPOGRAPHY
Opciones de fuente – – diferentes tipos de fuentes transmiten mensajes diferentes.
Tamaños de letra – – Asegúrese de que sus tamaños de texto son constantes, lo suficientemente grande para ser leídos y proporcionado para que destacan las partidas.
Espaciamiento – – espaciado entre líneas y varios objetos es importante tener en cuenta.
Línea longitud – – líneas de texto no deben ser demasiado largas. Cuanto más tiempo están, son más difícil de leer.
Color – – evitar texto de bajo contraste. Ve bien pero no lo lee bien.
Color – – evitar texto de bajo contraste. Ve bien pero no lo lee bien.
Paragraphs –– avoid justifying. Copyright © 2013 MyGraphicsLab / Pearson Education
DREAMWEAVER DESIGN AIDS
Rulers can be displayed in order to measure and align accurately.
Pixels are used as the unit of measurement in Dreamweaver and web design.
Grids can be enabled and settings can be modified: Choose View > Grid
Copyright © 2013 MyGraphicsLab / Pearson Education
DREAMWEAVER DESIGN AIDS
Los gobernantes pueden visualizarse con el fin de medir y alinear con precisión.
Píxeles se utilizan como unidad de medida en Dreamweaver y diseño web.
Las rejillas pueden activarse y configuración puede modificarse: Choose View > Grid
Copyright © 2013 MyGraphicsLab / Pearson Education