Copyright © 2013 MyGraphicsLab / Pearson Education DESIGN PRINCIPLES MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

Copyright © 2013 MyGraphicsLab / Pearson Education

DESIGN PRINCIPLES

MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

OBJECTIVE


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


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


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.


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:


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


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


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.


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.


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.


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.


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.


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.


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


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.


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.


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.


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.


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.


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


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


Documents

Copyright © 2013 MyGraphicsLab / Pearson Education DESIGN PRINCIPLES MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication