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 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 Sandwiches Tuna 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 Sandwiches Tuna 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. 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