Archivo para ‘Diseño Web’ Categoria

Diseño Minimalista de páginas Web – ¿Por qué menos es realmente más?

4 de Septiembre de 2012

El dicho de que menos es más se ha aplicado a todo, desde arte a la publicidad. Cuando se trata de diseño web, nunca ha sido más cierto de lo que es hoy en día.

Con toda la tecnología de vanguardia y tantos y fabulosos gráficos para elegir o crear, a menudo los diseñadores quieren tirar de todo lo que puede para crear un sitio web.  El resultado, más que impresionante, suele ser caótico. No hay ningún centro de coordinación o de fácil uso incluso para localizar barra de navegación, el usuario se confunde y a menudo son incapaces de navegar por el sitio fácilmente o les es imposible. Se van y el propietario del sitio web pierde no sólo un visitante, sino un posible cliente.

Un sitio web minimalista, por otro lado, ofrece a los usuarios un sitio web que es fácil de usar y de navegar. Con una buena página web de diseño minimalista, los visitantes pueden fácilmente y rápidamente encontrar exactamente lo que estás buscando. Encontrar un sitio como este es como encontrar un oasis en medio del desierto.

Piense en Google, por ejemplo. Simple, básico y muy eficiente. Nada podría ser más fácil de usar? Es el perfecto ejemplo de cuán eficaz puede ser un sitio web minimalista.

Los sitios web minimalistas pueden ser muy bellos cuando están bien diseñados y rezuman clase. Gran color y gráficos lo suficiente combinados con la cantidad correcta de los espacios en blanco hacen un sitio menos ocupado, por lo que es más sencillo para un visitante para navegar. Es un calmante y refrescante cambio para un usuario, y hace que el sitio se aprecie y quieran visitarlo a menudo.

Este contenido ha de ser claro y conciso. Si bien todos hemos escuchado que el contenido es el rey, esto no significa que tengan que haber toneladas y toneladas de contenido, especialmente si se tiene poca sustancia. La información que es de fácil acceso y, precisamente por escrito es mucho más eficaz que tenga demasiado contenido para cribar a encontrar la información necesaria.

Algunos diseñadores, por desgracia, pasan por alto esta necesidad para una navegación fácil. El esfuerzo para obtener o encontrar lo que buscas está agotador y por lo general no vale la pena el esfuerzo.

Sin embargo una precisión mínima ofrece a los visitantes muchos beneficios, principalmente la ventaja de ser capaz de leer en la pantalla la información sin demasiados elementos que compiten por su atención.

COLOR

10 de Julio de 2012

PARTE 1: INTRODUCCIÓN
El color puede ser un tema delicado. A veces los artistas utilizan colores que evocan ciertas emociones. Otras veces los artistas utilizan los colores, simplemente porque les gusta su aspecto. Mientras que cualquier profesor de diseño te dirá que la última razón está completamente equivocada. En mi opinión personal, el color siempre tiene un sentido. Este significado puede ser, como he mencionado, de tipo emocional o puede ser una preferencia personal por parte del propio artista, pero siempre tiene un propósito detrás de él.

No hay nada malo con la elección de un color porque te guste, sin embargo, al elegir un color hay que asegurarse de que su uso no está en contradicción con lo que estamos tratando de decir. El uso adecuado de la teoría básica del color puede ayudar a decidir qué colores coinciden, así como lo que cada color hace que la gente se siente.

PARTE 2: LA RUEDA
La construcción de la rueda es en realidad bastante simple. Tú tienes tus 6 colores básicos: rojo, naranja, amarillo, verde, azul y morado. Después, dependiendo de que rueda estés mirando, tienes extras, entre los colores que son mezclas de los colores básicos.

Hay nombres de todos estos colores, que son importantes saber. La siguiente es una lista de todos los nombres de los colores y lo que es bueno para ellos.

Los colores primarios: rojo, amarillo, azul. Estos 3 colores son los colores base para cada color en la rueda. Es por eso los llaman “primarios”. Cuando se mezclan dos colores primarios, se obtiene un color secundario. También hemos de tener en cuenta la posición triangular de los colores primarios en la rueda de color, y cómo los colores secundarios están junto a ellos.
Los colores primarios son útiles para el diseño o el arte, son los colores más vivos cuando se colocan uno junto al otro, por lo que notaremos que la mayoría de los restaurantes de comida rápida utilizan colores primarios en sus logos, ya que evoca la velocidad.

Colores secundarios:
Naranja, verde, morado. Estos 3 colores son los que se obtienen cuando se mezclan los colores primarios. Observemos cómo el verde se encuentra entre el amarillo y el azul. Los colores secundarios son generalmente más interesantes que los colores primarios, pero no evocan rapidez y urgencia.

Los colores terciarios: Estos son los colores como el amarillo-verde y rojo-violeta. Están hechos mediante la mezcla de un color primario y un color secundario.

Los colores complementarios: rojo y verde, azul y naranja, púrpura y amarillo. No nos dejemos engañar por el nombre porque, rara vez se ven bien cuando se usan juntos. Se llaman “complementarios”, porque, se vuelven muy vibrantes y con un contraste fuerte. Los colores complementarios son útiles cuando se quiere hacer que algo destaque.

Colores análogos:
rojo y naranja, azul y verde, etc. Por lo general, coinciden muy bien, pero no crean grandes cambios. Son buenos para emitir sentimientos de serenidad en diseños y obras de arte en la que deseamos que los espectadores se sientan cómodos.

PARTE 3: OTROS TÉRMINOS
Hay un montón de nombres que se refieren a diferentes aspectos del color, pero aquí es donde empieza a ser complejo. Si deseáis saber más acerca del color, seguir leyendo.

Los colores cálidos: Son colores como el rojo, amarillo y naranja. Estos colores evocan calidez, ya que nos recuerdan cosas como el sol o el fuego.

Cool Colores: Colores como el violeta, azul, verde y púrpura. Estos colores evocan una sensación de frescura, ya que nos recuerdan cosas como el agua o la hierba.

Los colores neutros: gris, marrón. Estos no aparecen en la mayoría de las ruedas de color, son considerados neutrales, ya que no contrastan mucho con nada. Son demasiado tranquilos.

Valor: Generalmente se refiere a la cantidad de negro en un color. Cuanto más negro tiene un color, más oscuro es su valor.

Brillo: Se refiere a la cantidad de blanco en un color. Cuanto más tiene un color blanco, más brillante es.

Saturación:
Se refiere a la cantidad de un color usado. Cuando un color está en la saturación completa, es muy vibrante. Cuando un color es “no saturado”, una gran cantidad de color se ha eliminado. El desaturado de los colores tiende a hacerlos más neutrales, porque hay mucho gris en ellos.

PARTE 4: TIPOS DE COLOR
Como cabe suponer, hay diferentes tipos de color. Ahora es cuando se puede lanzar la rueda de colores por la ventana.

Color RGB: El nombre de RGB significa rojo, verde y azul, que son los 3 colores primarios. Este un modelo de color basado en lo q se conoce como síntesis aditiva, con lo que es posible representar a un color por la mezcla por adición de los tres colores luz primarios.

Color CMYK: Este es el método de color basado en pigmentos. CMYK significa Cyan, Magenta, Amarillo y Key-plate (la key-Plate corresponde a la plancha negra, y se llamaba así porque dicha plancha conteniene la mayor parte de la información de la imagen.). Lamentablemente, CMYK no puede reproducir la misma cantidad de colores que RGB. Este es el método utilizado por las impresoras de todo el mundo, y es también una forma inteligente de mezcla de pinturas.

Color Pantone (PMS): Este es otro método de impresión a color. PMS significa “Pantone Matching System”, y tiene una gran lista de colores especialmente mixta realizada por la Corporación de Pantone. En lugar de utilizar CMYK para crear colores, los pigmentos se crean de forma individual para la pureza. Por ejemplo, si queremos utilizar un color rojo-violeta, me quedaría con el PMS 233M. El color se hace exclusivamente para mi proyecto y siempre se imprimirá tal y como yo quiero. El único inconveniente de utilizar colores PMS es que sólo son útiles para los proyectos con pocos colores. También son más caros.

Top Programas de gráficos Web para Macintosh

8 de Abril de 2011

Cuando se trata de seleccionar un programa de gráficos Web, hay tantas opciones que a menudo puede ser difícil determinar qué programa es el adecuado. Si bien la tendencia es querer ir siempre a buscar el más popular, no siempre es la opción más adecuada para las necesidades de cada persona.

1. Adobe Photoshop
Photoshop es uno de los programas disponibles más avanzados y versátiles, y los desarrolladores de webs siempre quieren tener Photoshop en su arsenal de herramientas. Photoshop ofrece herramientas y funciones para la creación de animaciones GIF, imágenes, optimización de corte, procesamiento por lotes y automatización. Se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Fireworks, Flash, y GoLive.

2. Adobe Fireworks
Fireworks se ha desarrollado desde cero específicamente para satisfacer las necesidades de los profesionales del diseño web. Fireworks tiene características de estrecha integración con otros productos de Macromedia como la herramienta de animación vectorial, Flash y Dreamweaver.  Fireworks sólo es capaz de trabajar en el entorno de color RGB, por lo que no es una opción apropiada para trabajar con imágenes destinadas a la impresión comercial. Fireworks se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Photoshop y Flash.

3. Stone Studio
Esta suite de diseño web para Mac OS X incluye Create, PhotoToWeb, PStill, GIFfun, Slice & Dice, Pack Up & Go, y TimeEqualsMoney. Create es el principal componente de diseño web y se puede comprar por separado. Ofrece herramientas de texto, dibujo, efectos, producción automatizada de la página web, desarrollo de contenidos, y las características de diseño de la página. PhotoToWeb te permite crear álbumes web de fotos y presentaciones de diapositivas. GIFfun crea banners animados. SliceAndDice crea mapas de imagen y barras de navegación.

4. Adobe Photoshop Elements
Photoshop Elements está construido alrededor de los elementos básicos de la interfaz de Adobe Photoshop sin las características de la gama alta. Elements es principalmente una herramienta para edición de fotos, procesamiento y mejora, pero también puede funcionar para la creación de gráficos Web, tales como botones, banners, animaciones y galerías web para su uso personal y empresarial. Está diseñado principalmente para los fotógrafos aficionados,

Definir los principios de diseño a través de la metáfora o alegoría.

20 de Marzo de 2011

Lección 1

En general, todos los principios de diseño se aplican a cualquier cosa que se pueda crear.
Rara vez hay una sola manera correcta de aplicar cada principio.

Balance
Tratemos de caminar una larga distancia con una bolsa de 2 kilos de rocas en una mano y una bolsa
de 10 kilos de canicas en el otro. Después de un tiempo querremos hacer un cambio en nuestras bolsas
poniendo unas pocas canicas en la bolsa de las roca para balancear la carga, y que sea más fácil
caminar. Así es como funciona el equilibrio en el diseño. El equilibrio visual proviene de elementos
de la organización en la página de modo que ningún sector es más pesado que el otro. En caso contrario
el diseñador puede lanzar intencionalmente elementos fuera del balance para crear tensión o un estado de ánimo.

Proximidad / Unidad
Observemos a un grupo de personas en una habitación. A menudo se puede aprender mucho acerca de quién está
escuchando atentamente, los que parece que no están, o los que tienden a ignorar
dependiendo de lo cerca que estén sentados o bien de pie.
En el diseño, la proximidad o cercanía crea un vínculo entre las personas y entre los elementos
de una página. La unidad también se logra mediante el uso de un tercer
elemento para conectar partes distantes.

Alineación
¿Imagináis lo difícil que sería encontrar vuestro coche en un estacionamiento lleno de gente si todo el
mundo ignorara las rayas del estacionamiento y se estacionaran en todas direcciones y en cuaquier ángulo?
La alineación pone orden en el caos, en un estacionamiento y en un pedazo de papel.

Repetición / Coherencia
¿Qué pasaría si las señales de stop fueran de color rosa, amarillo en círculos, triángulos o verdes,
dependiendo de los caprichos de una ciudad o de sus residentes? Imaginemos los atascos
de tráfico y los accidentes a que eso llevaría . La repetición de elementos de diseño y el uso conlos
de forma segura.

Contraste
Imaginemos que estamos en un partido de baloncesto, un equipo profesional se parece mucho a otro.
Pero si enviamos a algunos de estos jugadores a dar un paseo por cualquier calle de la ciudad,
algo se hará evidente – los jugadores serán mucho más altos que el hombre promedio en la calle.
Eso es contraste. En el diseño, grandes y pequeños elementos, como el blanco y negro, cuadrados o círculos,
pueden crear un contraste.

Espacio en blanco
¿Alguna vez te has metido en un coche en pleno verano con otras 10 personas?
Si te ha tocado estar en la parte inferior, seguramente lucharás a codazos por llegar
a la ventanilla y obtener un soplo de aire fresco. Realmente no es cómodo, ¿verdad?
Los diseños que tratan de meter demasiado texto y gráficos en la página no nos hacen sentir cómodos
y además nos serán imposibles de leer.
El espacio en blanco le da al diseño un espacio para respirar.

Reducir el tamaño de las fotos para su uso en la web

6 de Marzo de 2011

En primer lugar hay que recortar la imagen para eliminar partes innecesarias. Después, podemos cambiar las dimensiones en píxeles para generar una imagen más pequeña.

Cualquier software de edición de fotos tiene un comando para cambiar las dimensiones en píxeles de una imagen. Lo podemos buscar en “Tamaño de imagen”, “Cambiar el tamaño,” o “Volver a muestrear.” Cuando se utiliza este comando se presenta con un cuadro de diálogo para introducir los píxeles exactos que deseamos utilizar.

Nunca, cambiaremos el tamaño o sobrescribiremos en el archivo original.
Después de cambiar el tamaño de la imagen, nos aseguráremos de hacer un Guardar como para no sobrescribir el archivo original y lo guardaremos como un archivo JPEG.

Al elegir el nivel de compresión, mantendremos la calidad en la gama media alta.
Trataremos de no sobrepasar los 100 KB por página Web en total de imágenes.

Esto puede sonar como un proceso que consume tiempo, especialmente si tenemos un montón de fotos para compartir, pero afortunadamente la mayoría de softwares actuales permiten comprimir un lote de fotos rápidamente. Algunos programas  incluso pueden cambiar el tamaño, comprimir, y generar galerías completas de fotos para su publicación en la Web. Y hay herramientas especializadas para ambas tareas – muchos de ellos de software libre.

Fundamentos de Diseño Web

20 de Febrero de 2011

Al igual que los diseños en papel, los Diseños Web deben ser simples y claros

El espacio y los espacios en blanco

Intente aprovechar el máximo espacio, haga que se expanda o contraiga para adaptarse a la ventana del navegador.

Mantenga la resolución de pantalla en mente. Aunque la mayoría de los usuarios se han alejado de una resolución de 800×600, mantenga esto en mente cuando se esté diseñando. Que un usuario todo lo que vea pueda ser un logo en su monitor no es un buen servicio.

Utilice el color para definir los espacios. Si desea tener una página con un ancho específico, céntrese en la pantalla del navegador, haga que el color de fondo de la página sea un color diferente. Esto ayudará a la página para cambiar el tamaño de los diferentes navegadores.

Gráficos

Es fácil dejarse llevar por una gran cantidad de imágenes y animaciones, pero pueden hacer una página muy difícil de leer. Cuando esté pensando en el diseño, recuerde que las imágenes son una parte importante del diseño, no sólo ideas posteriores.

Ancho de texto

Piense en el ancho de texto. Esto es a menudo llamado el “análisis de longitud”, y se refiere a cómo las palabras que se muestran en una sola línea. La mayoría de las personas pueden leer cómodamente cerca de 7 a 11 palabras en una línea. Más líneas, y el texto sería difícil de leer, líneas más cortas provocarían desarticulación y distracción.

El centrado de texto no es aconsejable, suele ser difícil aplicarlo bien y generalmente difícil de leer.

Descripción y esquemas de color Web

16 de Enero de 2011

Hay cuatro colores básicos que se pueden utilizar para un sitio Web. Vamos a ir mostrando con imágenes la combanización de colores y cómo puede generar un esquema similar en Photoshop.

  • Monocromáticos
    Es el uso de colores de la misma tonalidad. Pueden tener diferentes matices o tonalidades dependiendo de la cantidad de blanco o negro que podamos añadir.
  • Análogos
    Son aquellos colores que se encuentran a ambos lados de cualquier color en el círculo cromático.
  • Complementarios
    Los colores complementarios son los que quedan en el lado contrario del circulo cromático.
  • Triádicos
    Estos colores están uniformemente espaciados en la rueda de color.

Vamos a utilizar como color base en todas las combinaciones el color amarillo.

amarillo


Combinación de colores monocromáticos

monocromaticos

Esta combinación de colores utiliza el amarillo mostaza de color base y se añade algo de blanco y negro al color y a la sombra.

  • Superior izquierda – base de color # ffe500
  • Superior derecha – se ha añadido un relleno de 50% de blanco para conseguir # fff280
  • Abajo a la izquierda – se ha agregado un relleno de 75% de blanco para obtener fff8bf #
  • Abajo a la derecha – se ha añadido un relleno de 50% de negro para obtener # 7f7200

Utilizar el esquema de color monocromático hará que un sitio web parezca más fluido y controlado.

Más
esquemas monocromáticos
monocromaticos_2

Se ha añadido a un cuadrado el 20% de negro para obtener más colores en el esquema. La adición de color negro o blanco a los colores puede crear un nuevo color a la paleta sin ensuciar el tono de la página.

Combinación de colores análogos
analogos

Este esquema de color toma el color base el amarillo y suma y resta 30 grados de la tonalidad en la paleta de color de Photoshop.

  • Superior izquierda – base de color # ffe500
  • Superior derecha – 30 grados para conseguir # 99ff00
  • Abajo a la izquierda – 30 grados para conseguir # FF6600
  • Inferior derecha – 100% blanco # ffffff

Los colores análogos pueden trabajar muy bien juntos, pero a veces puede entrar en conflicto.

Más colores análogos
analogos_2

Se ha añadido un cuadrado de 20% de negro para obtener más colores en el esquema.

Combinación de colores complementarios
complementarios

A diferencia de otros esquemas de color normalmente sólo tienen dos colores. El color base y su opuesto en la rueda de color. Photoshop hace que sea fácil obtener el color complementario, sólo tiene que seleccionar el área de color que desea como complemento de y pulsar Ctrl-I. Photoshop lo invertira por nosotros. Asegúremonos de hacer esto en una capa duplicada, para no perder el color base.

  • A la izquierda – base de color # ffe500
  • Derecha – el complemento # 001aff

Los planes complementarios de color son a menudo mucho más llamativos que otros esquemas de color, por lo que hay que usarlos con cuidado. Suelen ser más utilizados para sobresaltar.

Más esquemas de colores complementarios.
complementarios_2
Para obtener esta versión, de ha añadido un 50% blanco a la mitad inferior de los colores y el 30% de negro a la plaza central. Como podemos ver, nos da algunas opciones mas pero sigue siendo una combinación de colores complementarios.

Combinación de colores triádicos
triadicos

Los esquemas triádicos color se componen de 3 colores más o menos equidistantes alrededor de la rueda de color.

  • Superior izquierda – base de color # ffe500
  • Superior derecha – 120 grados para obtener # e500ff
  • Abajo a la izquierda – -120 grados para conseguir # 00ffe6
  • Inferior derecha – 100% blanco # ffffff

Los esquemas triádicos color producen a menudo unas páginas web muy vibrantes. Pero al igual que las combinaciones de colores complementarios estos pueden afectar a las personas de manera diferente.

También podemos crear esquemas de color tetrádicos o 4 colores, donde los colores están igualmente espaciados alrededor de la rueda de color.

Más esquemas triádicos
triadicos_2

Al igual que con los otros ejemplos, hemos añadido un cuadrado negro al 30% de los colores para obtener los tonos adicionales.

Esquemas de colores discordantes
discordantes

Recordemos que la belleza siempre está en los del espectador. Los colores discordantes son colores que están más lejos que cerca de 30 grados de diferencia en la rueda de colores y no son complementarios o parte de una tríada.

Los esquemas de colores discordantes puede ser muy impactantes y sólo debemos utilizarlos para generar atención. Recordemos que estos colores suelen crear un choque para atraer la atención del espectador, pero no debemos olvidar que quien lo  reciba no sea lo que exactamente está buscando.

Los elementos de diseño. Construcción del Diseño

11 de Enero de 2011

Los elementos del diseño son los pilares del diseño. Estos elementos son los que componen cada página que se genera. Y comprender estos elementos básicos nos hará capaces de elaborar más páginas web de gran alcance y mayor calidad.

Hay cinco elementos básicos de diseño:

Líneas y línea de trabajo

Las líneas son las fronteras y las reglas. Pueden ser horizontales o verticales y ayudar a delinear los espacios alrededor de los elementos en las páginas Web. La línea de trabajo aumenta la legibilidad del diseño. Pueden mejorar la comprensión y la legibilidad de un diseño, pueden ser utilizadas como un borde alrededor de elementos o un divisor entre los elementos.

Las líneas en el diseño web se pueden utilizar de muchas maneras:

  • Fronteras alrededor de los elementos
  • Líneas divisorias entre los elementos
  • Contornos alrededor de los elementos
  • Decoración

Hay tres maneras de incluir las líneas de trabajo de diseño Web:

1. La etiqueta <hr/> son líneas horizontales en los documentos de la página web. El estilo de la etiqueta <hr/> puede mejorar las líneas a futuro.
2. CSS ofrece muchas maneras de agregar bordes a los elementos. Con las fronteras de una o dos caras de un elemento, podemos crear líneas que son un poco más interesantes que un borde cuadrado simple.
3. Las ideas pueden ser utilizadas como líneas y bordes para crear efectos más decorativos.


Forma

Formas para hacer cualquier contorno cerrado en el diseño. Las formas en la mayoría de las páginas Web son cuadradas o rectangulares. No siempre tiene que ser así, se pueden utilizar  imágenes para generar otras formas dentro de los diseños. Se utilizan para transmitir el significado y organizar la información. Las formas pueden ser de 2 dimensiones o 3 dimensiones.

Hay tres tipos básicos de formas:

  • Formas geométricas
  • Formas naturales
  • Formas abstractas

Las formas en el diseño web se puede utilizar de muchas maneras:

  • Agregar interés a un diseño
  • Mantener el interés
  • Organizar elementos separados
  • Dirigir la vista a través del diseño

Figuras geométricas:

Las formas geométricas son lo que la mayoría de la gente piensa cuando piensa en las formas. La mayoría de las formas geométricas en las páginas web se crean a través de la disposición y CSS. Algunas formas geométricas comunes que se ve en las páginas Web son:

  • Cuadrados y rectángulos
  • Círculos
  • Triángulos
  • Diamantes

Las formas naturales:

Las formas naturales son formas que se encuentran en la naturaleza, y también suelen ser formas de objetos hechos por el hombre. La mayoría de las formas naturales en las páginas web se crean con imágenes. Algunos ejemplos de las formas naturales son:

  • Hojas
  • Charcos

Resumen formas:

Las formas abstractas son las que tienen una forma reconocible, pero no son “reales” de la misma manera que las formas naturales. Por ejemplo, un dibujo de palo de la figura de un perro es un perro de forma abstracta, un perro en una foto es una forma natural. Las formas abstractas en el diseño Web se agregan generalmente a través de imágenes.

Algunos ejemplos de formas abstractas son las siguientes:

  • Alfabeto glifos
  • Iconos
  • Símbolos


Textura

La textura es lo que le da un diseño de la sensación de una superficie. Es el sentido del tacto de los elementos en el diseño. En el diseño web, la textura es visual. Algunas texturas más comunes son:

  • En bruto
  • Suave
  • Dura

La textura en el diseño web se puede utilizar de muchas maneras:

  • Fondos
  • Énfasis
  • Diseños estilizados, como grabados o aguafuertes

La manera más común para incorporar la textura en los diseños Web es con la propiedad de estilo background-image. Podemos poner imágenes de fondo en la mayoría de los elementos a nivel de bloque, que nos permite agregar textura a lo largo de las páginas web.


Color

El color es el elemento de diseño en el que la mayoría de diseñadores de páginas web son muy conscientes, aunque es muy importante, el color no es un elemento necesario en cualquier diseño. De hecho, un buen plan de diseño no usa el color en primer lugar, sino que lo va añadiendo poco a poco y a medida para mejorar el diseño.
Algunos de los mejores diseños se hacen con sólo en blanco y negro o un toque de un solo color.

El color en el diseño web se puede utilizar de muchas maneras:

  • Fondos
  • Texto en primer plano
  • Imágenes

El color es muy fácil de añadir a las páginas Web. Hay muchas propiedades de estilo para añadir color, incluyendo:

  • El color de primer plano, como las fuentes y texto
  • El color de fondo, que cambia el color de fondo del elemento
  • Las fronteras de color para cambiar el color de los bordes alrededor de los elementos

También puede añadir color a su diseño a través de sus imágenes. Imágenes JPEG para las fotografías y GIF para imágenes de color plano.


Dirección

La dirección le da movimiento a los diseños web, le proporciona el estado de ánimo y la atmósfera. La dirección da la ilusión de movimiento dentro de un diseño. En la mayoría de los diseños hay una sensación de movimiento en una dirección a través del mismo. Los buenos diseños dirigen la vista a través del diseño de una manera deliberada para que el espectador vea lo que el diseñador quiere.

Hay tres direcciones básicas en el diseño:

  • Horizontal
  • Vertical
  • Diagonal

En el diseño web, la dirección es más a menudo retratada por las imágenes en la página. Pero se puede imponer dirección a través de la colocación de elementos de la página, y con líneas especialmente cuando tienen puntas de flechas sobre ellas.

Se puede incorporar la dirección en los diseños web de las siguientes maneras:

  • Miramos las imágenes para determinar la dirección a la que los sujetos se enfrentan. Si la gente en la foto están mirando hacia la derecha, entonces debemos colocar la imagen en el lado izquierdo de la página. En caso contrario la dirección de los ojos en la foto dirigirá los ojos de los lectores fuera de la página.
  • Utilizaremos su disposición para sugerir la dirección. La posición de los elementos densos, como las fotos, en las líneas horizontales, verticales o diagonales. Mientras que los elementos menos densos, como el texto, los rodeen.
  • Utilizaremos las líneas, ya sea imágenes o etiquetas de recursos humanos, para sugerir el movimiento y la dirección.

Selectores de CSS 3. Avanzar hacia el futuro del CSS

11 de Enero de 2011

CSS 3 selectores de atributos
CSS 2 permitió a los diseñadores web empezar a seleccionar el contenido de los atributos. Con CSS 3, ahora podemos seleccionar las coincidencias parciales de cadenas en los atributos. Esto nos da más flexibilidad. Hay tres selectores de atributos nuevos:

A partir del atributo
Este selector se seleccionará en las coincidencias exactas del inicio de la cadena del atributo.
a[href="ftp:"] { … }

Fin del atributo
Este selector se seleccionará en las coincidencias exactas al final de la cadena del atributo.
a[href=".a2sistemas"] { … }
Coincidiría apuntando a unos únicos vínculos. Sitio a2sistemas.

Cualquier sub-cadena del atributo
Este selector coincidirá con cualquier atributo que tiene la sub-cadena dentro de ella.
img[src="photos"] { … }
Se correspondería con cada imagen que ha tomado fotografías en el atributo src. Por ejemplo “/ images/photos/image1.gif” y “/ photos/image2.gif” y “photos.gif”.

CSS 3 Pseudo-clases
Hay varias pseudo-clases de nuevo añadido en CSS 3 que funcionan en Firefox y Mozilla.
Root pseudo-clase representa el elemento raíz del documento . Así que los diseñadores que trabajan con XML, puede aplicar estilos a todo el documento sin saber exactamente qué es el elemento raíz.
:root { … }
El último niño pseudo-clase es similar a la :first-child pseudo-clase en CSS 2, pero se refiere al elemento secundario anterior.
p:last-child { … }
El objetivo pseudo-clase es útil para llamar la atención del texto que se dirige cuando en una etiqueta de ancla se hace clic.
:target { … }
Pseudo-clase permite seleccionar los elementos que no están representados por el argumento. Tengamos cuidado con éste, como las etiquetas HTML y el cuerpo son elementos también, a menudo coinciden menos ya que son muy específicas. Por ejemplo, este estilo le señalará las imágenes sin una etiqueta alt:
img:not([alt]) { border: thick solid yellow; }

CSS 3 Combinar hermanos
Este selector permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ir directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser el primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 se escribiría:
h3 ~ blockquote
Esto coincide con todos los siguientes blockquotes de un elemento <h3> independientemente de qué elementos se encontraban en el medio.

Selectores de estilo Hijos en hojas de cascada Las definiciones precisas de los estilos CSS

22 de Octubre de 2010

En CSS un elemento primario es un elemento que contiene otros elementos. Todos los elementos que están contenidos dentro de ese padre se llaman “hijo”. Usar el selector CSS hijo, puede definir propiedades que sólo afectan a elementos que son hijos de otros elementos específicos. Cada elemento es un hijo de otro elemento, excepto el elemento raíz, que no tiene padre.

Para seleccionar todos los párrafos que son hijos de la etiqueta <body>, escribiríamos:
body> p (background-color: # 00f;)

Esto es similar al selector descendiente, pero sólo se pueden definir los hijos, nietos o inferior.

Podemos combinar los selectores hijos con los selectores de otro tipo, como descendientes:
div ul li> p (background-color: # 00f;)
Esto afecta a los elementos a la AP que es un descendiente de Li, que es un hijo de ul que es un descendiente de div.

Compatibilidad con exploradores

Internet Explorer 6 e inferior (Windows) y 4.5 e inferiores (Macintosh) no son compatibles con este selector. Netscape 4 e inferiores no son compatibles con este selector.