Diseo y Composicin Para muchos desarrolladores web, incluido yo mismo, la parte ms intimidante del diseo proceso es el comienzo.

Imagine por un momento que usted est sentado en su escritorio con otra cosa que una taza de caf y la tarjeta de visita de un cliente potencial que necesita un sitio web corporativo bsico. Por lo general, una tarjeta de visita dice mucho de una compaa identidad, y podra ser utilizado como fuente de inspiracin del diseo. Desafortunadamente, ese no es el caso de la tarjeta de Servicios Smith en la Figura 1.1. Es negro y negro, todo el texto, sin carcter, bla, bla. Hablar sobre un lienzo en blanco! As que, a dnde va a aqu? Usted necesita un plan ... y lo que necesita ponerse en contacto con el Sr.Smith. Con un poco de informacin crtica del cliente sobre lo que su empresa hace realmente, y por la recopilacin de informacin sobre el contenido que usted tiene que trabajar, usted ser capaz de llegar a un diseo exitoso y el diseo. Cualquier persona, sin importar el nivel de talento artstico que l o ella tiene, puede llegar a un diseo que funciona bien y se ve bien, todo lo que necesita es un poco de experiencia y un conocimiento prctico de algunos principios de diseo bsico. As que vamos a empezar con lo bsico y despus de poco tiempo usted tener las bases necesarias para disear con calidad de exposicin sitios web. El proceso de diseo En un libro de programacin web que le hace poco, el autor introduce un escenario ficticio para explicar por qu los lectores necesarios para disear un diseo de pgina y crear una hoja de estilo para la ejemplo de aplicacin. Bsicamente, dijo que el diseador web de la compaa fue el conseguir la inspiracin de algn lado y no volvera hasta finales de ao. Sonaba como si fue lo que implica que los diseadores son propensos a desmoronarse a cabo e ir en busca de una visin por meses a la vez, pero yo voy a asumir que el autor hizo ese comentario de una manera entraable, y introducir el mismo escenario. Aqu estn los detalles de este escenario hipottico: Jim Smith, de Smith Servicios de las necesidades de un sitio web. Tenemos su tarjeta de visita y que est ansioso por llegar comenzado. Por desgracia, el diseador est fuera de la ciudad ... espera, eso no es un buena excusa. Digamos que fue herido durante una estampida monstruo vaca lechera mientras asista a la South by South West Interactive (SXSWi) festival en Austin, Texas. S, es creble. De todos modos, est fuera por unos meses, y ests por tu cuenta. As que por dnde empezar? El proceso real de desarrollo un sitio o aplicacin web incluye una gran cantidad de pasos, pero el proceso de la creacin de un borrador de diseo se reduce a apenas dos tareas: el descubrimiento y implementacin.

Descubrimiento El componente de descubrimiento del proceso de diseo consiste en satisfacer a los clientes y descubrir lo que hacen. Esto no puede sentirse como un "designy" tarea, pero la recoleccin informacin acerca de quines son sus clientes y cmo manejar su negocio es la nica manera usted ser capaz de llegar a un diseo adecuado y eficaz.

Antes de programar su primer encuentro con sus clientes, tome unos minutos para averiguar lo que hacen y cmo lo hacen. Si he pedido a usted para disear un sitio web para ellos, no puede actualmente tener uno, pero Google de todas formas. Si usted no puede encontrar toda la informacin sobre su negocio en particular, trate de aprender un poco ms sobre su industria antes de la primera reunin. Siempre que sea posible, la primera reunin con un cliente debe ser un real de persona a persona reunin. A veces, la distancia determinar que el primer encuentro se producir por telfono, pero si el cliente est en la ciudad, programar una hora para reunirse. Tenga en cuenta que esta reunin no se trata impresionar al cliente, venta de ti mismo, o la venta de un sitio web. La reunin inicial con el cliente es sobre la comunicacin. Trata de escuchar ms de hablar, y llevar un bloc de papel en el que usted puede tomar notas. No llevar un porttil. Las computadoras tienen pantallas, y la gente tiende a mirarlas. Si el cliente no est mirando a la pantalla todo el tiempo, se le a medida que escribe sus notas. Si usted tiene que arrastrar una tecnologa en la reunin, traer una grabadora de voz. En mi experiencia, sin embargo, un bloc de papel es menos amenazando con el cliente a menudo no tan conocedores de la tecnologa. Aqu estn algunas de las preguntas que me gusta hacer en las reuniones inicial del cliente, incluso si ya he respondi que a m mismo a travs de un motor de bsqueda: Qu hace la empresa? Cul es su papel en la empresa? La empresa tiene un logotipo o marca? Cul es tu objetivo en el desarrollo de un sitio web? Qu informacin desea ofrecer en lnea? Que comprende a su pblico objetivo? Hacer a sus miembros compartir comunes datos demogrficos, como edad, sexo, o un lugar fsico? Quines son sus competidores y tienen los sitios web?

A veces empiezo con ms preguntas que no se mencionan de usar su imaginacin y tratar de llegar a algunas preguntas creativas que realmente le dar una visin ms clara la organizacin del cliente. Si eres un programador, evitar la jerga tcnica. Si eres un diseador, evitar hablar especficamente sobre el diseo. Claro, que puede ser todo lo que ests pensando, pero El marcado semntico, el lquido y diseos fijos, y esquemas de color probablemente significar muy poco para el cliente. Peor an, este tipo de conversaciones puede traer opiniones equivocadas diseo a su manera, incluso antes de tener la oportunidad de empezar a pensar en el mismo diseo. Implementacin El siguiente paso en el proceso de diseo es tomar lo que has aprendido desde el cliente y el uso para crear un diseo. Independientemente del proyecto, trate de no quedar atrapado en la tecnologa asociados con la construccin de sitios web-a por lo menos no al principio. En este punto, no debe importar si el sitio se va a formar parte directamente de HTML, un modelo de gestin de contenidos sistema, o una aplicacin Rails Ruby on, lo fundamental es que tenemos una interfaz de diseo y una hoja de papel en blanco. "Papel?" As es, el papel. De verdad crees que iba a permitir que vuelva a su derecho de ordenador precioso despus de la reunin con el cliente se ms? De ninguna manera. He aqu por qu: es fcil perder el enfoque en el diseo, si empiezas a pensar en el diseo frente a una computadora. Si usted comienza en el papel, puede pasar por alto la tcnica limitaciones de los navegadores y CSS, y se centran en cmo desea que el producto final a buscar. Ahora usted podra pensar que todos los buenos diseadores de lujo

llevar cuadernos de bocetos de tapa dura en el que utilizan los marcadores de cara a disear y pintar representaciones de la obra maestra de web diseos de pgina. Para m, el equivalente a 79 es una espiral bloc de notas y escribir cualquier instrumento que puede encontrar en mi escritorio que todava funciona.

Comienzo por bosquejar un posible diseos de unos pocos. Despus de unos pocos de estos bocetos, que decidir sobre que ms me gusta, el salto en Photoshop, y el uso de la herramienta Rectngulo para bloquear las reas que he rebajado en mi papel. Una vez que he definido mi diseo, experimento con primer plano y colores de fondo hasta que haya un esquema de color slido. Yo sigo haciendo girar el Photoshop botones y empujar alrededor de pxeles hasta que, finalmente, tengo un borrador para mostrar al cliente. Simple, verdad? Bueno, tal vez me he saltado algunos pasos en esa breve descripcin. Honestamente, sin embargo, cuando la gente me pregunta cmo hago lo que hago, por lo general obtener una explicacin similar. La verdad es que son paquetes de ahora subconsciente la informacin de mi experiencia pasada y los diseo antiguo colegio y las clases de arte que me han ayudado a definir mi propio proceso de diseo. Aprender a disear es como aprender a programar. Algunas personas tienen un poco de destreza por ello, pero cualquiera puede aprender. As como hay un buen cdigo y el cdigo feo, hay un buen diseo y lo feo de diseo. Aprendizaje de algunos de los principios y convenciones que estn asociados con diseo le ayudar a entender la diferencia entre lo bueno y lo feo, y ayudar a que hacia el establecimiento de su propio proceso de diseo. Definicin de buen diseo Hay dos principales puntos de vista de que la mayora de las personas a determinar si una web diseo del sitio es "bueno" o "malo." Hay un punto de vista de la usabilidad estrictas, que se centra en la funcionalidad, la presentacin eficaz de la informacin, y la eficiencia. Luego est el punto de vista puramente esttico, que es todo acerca de la presentacin, animaciones caliente y sexy grficos. Algunos diseadores de quedar atrapado en la esttica y los grficos y olvidarse de la usuario, y algunos gurs de la usabilidad se pierden en sus pruebas de usuario y olvidarse de atractivo visual. Con el fin de llegar a la gente y mantener su inters, es esencial para maximizar tanto.

Lo ms importante a tener en cuenta es que el diseo es la comunicacin. Si crear un sitio web que funciona y presenta la informacin tambin, pero se ve feo o no se ajusta a la marca del cliente, nadie va a querer utilizar. Del mismo modo, si usted hace un sitio web hermoso que no es usable y accesible, la gente no puede ser capaz de usarlo. De hecho, los elementos y funcionalidad de un diseo de sitios web terminados deben trabajar como una unidad cohesiva nica, de modo que: Los usuarios estn satisfechos con el diseo, sino atrados por el contenido Una de las mayores preocupaciones entre los profesionales de la usabilidad es el tiempo que toma a los usuarios escanear la pgina de la informacin que desean, ya sea un fragmento de contenido, un enlace a otra pgina, o un campo de formulario. El diseo no debe ser un obstculo, sino que debe actuar como un conducto entre el usuario y la informacin. Autobs lleno de hippies plantilla John Oxton es (en la foto en la Figura 1.2) es un gran ejemplo de un diseo que es hermoso y til. Los grficos coloridos crecen alrededor de los bloques de contenidos, lo que lleva el ojo de nuevo

a la informacin sin interferir con las pginas ' lectura o de la organizacin. Figura 1.2: El autobs lleno de plantilla de los hippies Los usuarios pueden moverse fcilmente a travs de una navegacin intuitiva Hablaremos ms sobre la colocacin de navegacin ms tarde, pero el principalbloque de navegacin s debe ser claramente visible en la pgina, y cada enlace debe tener un estudio descriptivo ttulo. Una estructura de navegacin que no slo cambia el aspecto de cursor del mouse, pero tambin indica la pgina activa o de la seccin, al igual que el men que se muestra en la Figura 1.3, permite a los usuarios reconocer dnde estn, y cmo llegar a donde quieren ir. Navegacin secundaria, campos de bsqueda y enlaces de salida no debe ser dominante caractersticas de la pgina. Si hacemos estos elementos fciles de encontrar, y separar visualmente del contenido, que permiten a los usuarios centrarse en la informacin, a pesar de que sabr dnde buscar cuando estn listos para pasar a otros contenidos. Los usuarios reconocen cada pgina perteneciente al sitio Incluso si hay una gran diferencia entre el diseo de la pgina principal y el resto del sitio, un tema de cohesin o el estilo debe existir en todas las pginas de un sitio para ayudar a mantener el diseo juntos. Echa un vistazo a las capturas de pantalla de la lista ordenada de Steve Smith en la figura 1.4. aunque los bloques de contenido en estas pginas se dividen de manera diferente, hay varios visual indicadores que permiten a los usuarios saber que se trata de pginas del mismo sitio. Gran parte de esta la unidad se debe a la repeticin de los bloques de la identidad y la navegacin. El uso consistente de una paleta de colores muy limitada (negro, blanco, verde y cian) tambin ayuda a unificar el las pginas. Pgina web de Anatoma Figura 1.5: La anatoma de una pgina web Incluso desde el punto de vista de un diseador no es, la definicin de un diseo que satisface todos los requisitos que he descrito es un simple tarea. Es similar a hacer una frase en su refrigerador con palabras magnticas poesa. Aunque hay millones de maneras de organizar las palabras, slo algunos arreglos ningn sentido. la palabras magnticas son como la poesa de los componentes, o bloques, de la la pgina web. Aunque el nmero de estos bloques necesarios depende en el tamao y el tema del sitio, la mayora de los sitios web tienen la siguiente componentes, como se muestra en la Figura 1.5. bloque de contencin Cada pgina web tiene un contenedor. Esto podra ser en la forma de la etiqueta de la pgina del cuerpo, una etiqueta div que contiene todos, o (y yorealmente no quiero al decir esto, pero) una mesa. Sin algn tipo de contenedor, que habra hay lugar para poner el contenido de nuestra pgina. Los elementos se deriva ms all de la los lmites de nuestra ventana del navegador y en el espacio vaco. El ancho de la contenedores pueden ser lquidos, lo que significa que se expande para llenar el ancho de la ventana del navegador, o fija, de modo que el contenido es el mismo ancho que no

importa

el

tamao

de la

ventana es.

logotipo Cuando los diseadores se refieren a la identidad, se estn refiriendo al logotipo y los colores que existen en las diversas formas de una empresa de marketing, tales tarjetas de visita, membretes, folletos, etc. El bloque de la identidad que aparece en el sitio web debe contener el logotipo de la empresa o nombre, y se sientan en la parte superior de cada pgina del sitio web. El bloque de la identidad de la marca aumenta usuarios de reconocimiento y le permite saber que las pginas que ests viendo son parte de un solo sitio.

Navegacin Es esencial que el sistema de navegacin del sitio es fcil de encontrar y utilizar. Los usuarios esperan ver navegacin de la derecha en la parte superior de la pgina. Ya sea que usted va a utilizar los mens vertical hacia abajo el lado de la pgina, o un men horizontal a lo largo de arriba de la pgina, la navegacin debe ser tan cerca de la parte superior de la distribucin como sea posible. Por lo menos, todos los elementos de navegacin principal debe aparecer "en la mitad superior."

Contenido El contenido es rey. Un tpico visitante del sitio web entrar y saldr de un sitio web en cuestin de segundos. Si los visitantes no pueden encontrar lo que estn buscando, sin duda, se cerrar el navegador o bien irse a otro sitio. Es importante para mantener el bloque de contenido principal, el punto focal de un diseo precioso para que segundo no se desperdicien los visitantes explorar el pgina para la informacin que necesitan. Pie de pgina Situado en la parte inferior de la pgina, el pie de pgina por lo general contiene los derechos de autor, pngase en contacto, y informacin legal, as como algunos enlaces a las secciones principales del sitio. Al separar el contenido final de la parte inferior de la ventana del navegador, el pie de pgina debe indicar a los usuarios que estn en la parte inferior de la pgina. Los espacios en blanco El plazo de diseo grfico en blanco (o espacio negativo), literalmente, se refiere a cualquier rea de la una pgina que no est cubierto por el tipo o ilustraciones. Mientras que muchos diseadores noveles web (Y la mayora de los clientes) sienten la necesidad de cubrir cada centmetro de una pgina web con fotos, texto, tablas, y los datos, contar con un espacio vaco de una pgina es tan importante como tener el contenido. Sin cuidadosamente planeado espacios en blanco, un diseo se siente encerrado, como un atestado habitacin. Los espacios en blanco ayuda a un diseo de "respirar" al guiar a los ojos del usuario por una pgina, sino que tambin ayuda a crear el equilibrio y la unidad-dos conceptos importantes que vamos a discutir en mayor detalle ms adelante en este captulo.

En este punto, hemos tenido nuestra primera reunin con el Sr. Smith, nuestro cliente terico, y fue muy til. Se explica muy bien lo que hace y lo que quiere el sitio de lograr. A pesar de que no tienen contenido real, sin embargo, podemos utilizar los bloques estndar de la anatoma de la pgina web para comenzar a desarrollar un diseo. Aunque otros sitios especficos bloques se trabaj en los diseos de muchos diseos de sitios web, la anatoma pgina web trabaja para un resumen de los elementos ms comunes. Ahora que tenemos esta informacin, cmo podemos usarlo para crear un diseo fundamental para Servicios de Smith? Es hora de que una teora de cuadrcula.

Teora de la red Cuando la mayora de la gente piensa en las redes, que piensan acerca de la ingeniera y la arquitectura. Sin embargo, la red es una herramienta esencial para el diseo grfico tambin. Usando una red no se trata slo de hacer las cosas ser cuadrado y la lnea de arriba: se trata de la proporcin en que as. Ah es donde la "teora" viene en la teora de la red. Muchos historiadores del arte de crdito holands pintor Piet Mondrian como el padre del diseo grfico para su uso sofisticado de las redes. An La teora clsica de la red ha influido en el xito de los esfuerzos artsticos de miles de aos. La concepto de dividir los elementos de una composicin se remonta a las ideas matemticas establecidos por Pitgoras y sus seguidores, que define los nmeros como proporciones en vez de una sola unidad. Los pitagricos observaron un patrn matemtico que se haya producido tan a menudo en la naturaleza que crean que era de inspiracin divina. Se refirieron a este patrn como la proporcin urea o proporcin divina. La idea bsica se ilustra en la Figura 1.6. Una lnea puede ser dividida en dos utilizando la proporcin urea, dividiendo su longitud por 1,62. Este mgico nmero 1,62 es realmente 1.6180339 ... Es un nmero irracional que suele ser representado como (pronunciado phi). Explicar las matemticas usadas para llegar a este nmero es un poco demasiado complicado para este discusin, y no es realmente va a ayudar a ser un mejor diseador, as que me ahorrar los detalles. Adems, mis matemticas son un poco oxidado. As que lo que hace esta relacin tiene que ver con la grfica diseo? En general, las composiciones divididas por lneas que son proporcionales a la proporcin urea se consideran ser estticamente agradable. Los artistas del Renacimiento utiliza la divina proporcin en el diseo de sus pinturas, escultura y arquitectura, as como los diseadores de hoy emplean a menudo esta relacin al crear diseos de pgina, carteles y folletos. En lugar de depender artstica idea, la divina proporcin lgica nos da pautas para produccin de diseos atractivos.

La regla de los tercios Una versin simplificada de la proporcin urea es la regla de terceras partes, o en el acento de nativo de uno de mis grficos profesores de diseo, "Estado de turds". dividida en dos por una lnea de la proporcin urea se divide en dos secciones, una de las cuales aproximadamente el doble

del tamao de los otros. La divisin de una composicin en tres partes es una manera fcil de aplicar divina proporcin sin salir de la calculadora. Para iniciar la versin de lpiz y papel de su diseo, dibujar un rectngulo. Las dimensiones vertical y horizontal en realidad no importa, pero trate de mantener las lneas rectas y ngulos de 90 grados. Ahora, divide el rectngulo horizontal y verticalmente por terceras partes. como yo dicho antes, no empieces a pensar acerca de la tecnologa todava. A continuacin, divide el tercio superior de su diseo en tres partes otra vez. Por ltimo, dividir cada una de sus columnas en la mitad para crear un poco ms de un la red. Usted debe tener una plaza en el papel que se parece a la regla de red de terceras partes en el diagrama final de la figura 1.7. Seguir adelante y repetir los pasos anteriores para tener una regla de algunas de las redes de terceras partes en el que probar diferentes opciones de diseo. Con esta sencilla rejilla en su lugar, podemos comenzar a disear nuestro elementos. El rectngulo grande, representa el contenedor principal que hablado en la seccin llamada "Anatoma de Pgina Web." Cuando se utiliza este mtodo de diseo de diseo, me gusta colocar el primer bloque ms grande. Por lo general, que representa el bloque de contenido. En mi primera regla de los tercios la red, pongo el bloque de contenido dentro de los dos tercios de la disposicin en la parte inferior derecha. A continuacin, Pongo mi bloque de navegacin en el tercio medio de la columna de la izquierda. Pongo el texto parte del bloque de la identidad en el lado izquierdo del contenido, y la parte de imagen de la identidad en el men. Por ltimo, la calabaza el bloque de derechos de autor por debajo del contenido, en la mano derecha columna de la cuadrcula. El resultado es la parte superior izquierda de los cuatroacuerdos de distribucin posibles muestra en la Figura 1.8.

A medida que experimente con diferentes arreglos, el uso de las lneas que creanlos tres principales columnas como las guas de alineacin para la identidad, la navegacin, contenido,y los bloques de pie de pgina. Es muy tentador para organizar todos sus elementos a lo largo de una lnea en particular, pero trate de no dejar que esto ocurrir-no es muy
interesante visualmente. En su lugar, considere empujando parte del bloque de ms de esa lnea, como lo hice con el bloque de la identidad de los ejemplos en la Figura 1.8. Otra tendencia para los no diseadores que trabajan en los diseos es de centroalign todo en una pgina. El sistema de suspensin que nos impide hacer eso, pero hay una razn por la que tienden a quiere todo el centro. Que la razn es una voluntad de equilibrio. En un sentido figurado, el concepto de equilibrio visual es similar a la del equilibrio fsico ilustrado por un sube y baja. Al igual que los objetos fsicos tienen peso, as que los elementos de un diseo. Si los elementos a cada lado de un diseo tienen el mismo peso, se equilibran entre s. Hay dos formas equilibrio simtrico principales de equilibrio visual: simtrica y asimtrica.

Un equilibrio simtrico, o el balance oficial, se produce cuando los elementos de una composicin son las mismas en ambos lados de una lnea de eje.

A pesar de que puede no ser prctico para todos los diseos y los clientes, este tipo de simetra llamada simetra horizontal puede ser aplicada a los diseos de pgina web por su contenido centrado o equilibrado que entre las columnas. El sitio web Crecer colectiva es un ejemplo de simetratales. Aviso en la pgina que se muestra en la figura 1.10 que las reas de contenido profesional en una sola columna en la parte superior de la pgina, a dos columnas, a tres columnas en la parte inferior de la ventana, y sin embargo el diseo todava mantiene su equilibrio simtrico. La mayora del resto del contenido del sitio es dividida en columnas simtricas tambin. Figura 1.10: Crecer pgina web colectiva Las otras dos formas de equilibrio simtrico son menos comunes en el diseo de sitios web, debido a la la naturaleza del medio. Sin embargo, son comnmente exhibido en el logo y el diseo de impresin. Estos son:

simetra bilateral, que existe cuando una composicin equilibrada en ms de una eje simetra radial, que se produce cuando los elementos estn igualmente espaciadosalrededor de un centro de punto

El equilibrio asimtrico El equilibrio asimtrico, o el balance informal, es un poco ms abstracto, y ms en general visualmente interesante, de un equilibrio simtrico. En lugar de tener imgenes en el espejo a ambos lado de la disposicin, el equilibrio asimtrico implica objetos de diferente tamao, forma, tono o colocacin. Estos objetos estn dispuestos de modo que, a pesar de sus diferencias, igualar la el peso de la pgina. Si usted tiene un objeto grande en un lado de una pgina, y lo asociamos con varios artculos ms pequeos en el otro lado, la composicin todava se siente equilibrado. El cartel del concierto por mi amigo Jeremy Darty presenta en la Figura 1.11 es un buen ejemplo de El equilibrio asimtrico. El peso visual de la gran flamenco rosa a la izquierda se compensa con la peso combinado de los flamencos ms pequeos y pequeos bloques de texto en el lado derecho de la diseo. Observe tambin el uso de Jeremy del Estado de tercios. La nube azul detrs del Pop aspira ttulo ocupa un tercio del espacio vertical y se extiende dos tercios de la horizontal. Echa un vistazo a la foto de las tres piedras en Figura 1.12. Puede que no sea una particularmente interesante imagen, pero por lo que el equilibrio se va, se sale! Si fuera a usar un pedazo de papel para cubrir cualquiera de las tres piedras a continuacin, toda la fotografa se sienten desequilibrados y sin terminar. Es en general, el balance de forma en que funciona. Es como si la toda la composicin es en un marco de cuadro que cuelga por un solo clavo en la pared. No hace falta mucho peso en un lado u otro para cambiar toda la imagen fuera de balance. A diferencia de un equilibrio simtrico, equilibrio asimtrico Es muy verstil, y como tal, se utiliza mucho ms a menudo en la web. Si usted echa un vistazo a la mayora de dos columnasdiseos de sitios web, te dars cuenta de que el columna ms grande es a menudo de color muy claro-una tctica

que crea un buen contraste para el texto y el contenido principal. El diminutivo de navegacin columna es a menudo ms oscuro, tiene una especie de frontera, o se hace para destacar de alguna otra manera, con el fin de crear equilibrio en el diseo. Sitio de John Hicks, Hicksdesign, que se muestra en la figura 1.13, es un buen ejemplo del equilibrio asimtrico. La pesada barra lateral marrn, que contiene el logotipo y la navegacin principal del sitio, se mantiene fijo en ellado derecho de la disposicin, incluso cuando se desplaza el contenido. Este elemento siempre presente, ofrece inters y el equilibrio con el resto del contenido de la pgina. Figura 1.13: Hicksdesign-un ejemplo de equilibrio asimtrico Muchos principios en el trabajo en el diseo de este sitio-John Hicks de diseo no es slo acerca de El equilibrio asimtrico. El sitio cuenta con una gran armona, que proviene de labrillante repetido, balas de colores, cabeceras de colores similares, y tipos de letra uniforme. Parte de esa armona surge del hecho de que el sitio cumple con los principios de unidad.
unidad La teora del diseo describe la unidad como una referencia a la forma en que los diferentes elementos de una composicin interactan entre s. Un diseo unificado que funciona como un todo y no que se identifica como piezas separadas. Tener los monos en la figura 1.14, por ejemplo. Sus colores y formas similares significa que puede ser fcilmente reconocida como la formacin de un grupo, en lugar de simplemente ser cuatro monos. Aunque no es un tema en estos das, la unidad es un de las muchas razones por qu los diseadores web siempre despreciado marcos HTML. Es importante que la unidad no slo existe dentro de cada elemento de una pgina web, pero a travs de la web toda la pgina-la propia pgina debe trabajar como una unidad. Podemos usar un par de mtodos para lograr la unidad en una presentacin (adems de evitar cuadros): la proximidad y la repeticin.

proximidad La proximidad es una manera obvia, pero pasa por alto a menudo para hacer un grupo de objetos siente como una sola unidad. La colocacin de objetos prximos entre s dentro de un diseocrea un punto focal hacia que el ojo se desplazar. Echa un vistazo a la pintura digital en la figura 1.15.mientras que compuesto por un surtido aparentemente al azar de los accidentes

cerebrovasculares, los cinco movimientos que son los ms cercanos juntas parecen formar un objeto unificado. Figura 1.15: Creacin de un grupo con la proximidad Practicamos el concepto de proximidad en la Web cuando empezamos aestablecer los mrgenes y relleno de los elementos. Por ejemplo, cuando define las reglas de estilo CSS para la mayora de los sitios, me por lo general cambian el margen por defecto que existe entre los elementos comunes como HTML como encabezados (h1, h2, h3 ...), los prrafos, blockquotes, e incluso imgenes.Al alterar estos valores, que pueden causar ms o menos espacio a aparecer entre los elementos, creando as grupos. Si nos fijamos en las dos columnas de texto en la figura 1.16, se dar cuenta deque tienen un aspecto muy similar. La nica diferencia es en la colocacin de los ttulos. En la columna de la izquierda, la palabra "Unkgnome" es equidistantes de los puntos superior e inferior. esto da como resultado en una partida que se parece ms a un separador de un ttulo para el siguiente prrafo. en la segunda columna, el "Gnomenclature" la partida se coloca ms cerca del puntoque lo sigue. De acuerdo con las reglas de la proximidad, en este epgrafe parece pertenecer a la bloque de texto. Figura 1.16: La proximidad entre los encabezados y el contenido

repeticin Una bandada de gansos, un banco de peces, una manada de leones. Cada vez que usted trae un conjunto de elementos como en conjunto, forman un grupo. De la misma manera la repeticin, de colores, formas, texturas, o objetos similares, ayuda a unir un diseo de pgina web juntos para que se siente como una unidad cohesiva. El ejemplo de la Figura 1.17 ilustra la repeticin. A pesar de que hay otrossimilares movimientos en torno a los nueve trazos rojos en la parte izquierda aparecen como un grupo unificado porque se repiten de una forma, color y textura. Los golpes a la derecha de este grupo sin un patrn repetido, por lo que parecen aislados a pesar de que existen otras formas cercanas.

Ya sea que usted lo note o no, la repeticin se utiliza a menudo en los diseos depgina web para unificar los elementos de la disposicin. Un buen ejemplo de este concepto en el trabajo sin modificar loselementos HTML es la lista con vietas. La bala que precede a cada elemento de la lista es un indicador visual de que el

elementos de vieta son partes de un todo. Patrones que se repiten y las texturastambin pueden ayudar a unificar un diseo. Echa un vistazo a la captura de pantalla de justificado a la izquierda, el sitio personal de Australia diseador Andrew Krespanis. Este diseo contiene muchos elementos atractivos, pero el el uso repetido de la textura de madera de color rojo en la cabecera, el men, y los bordes de pgina, literalmente, mantener este diseo juntos. Figura 1.18: pgina de inicio justificados a la izquierda nfasis En estrecha relacin con la idea de unidad es el concepto de nfasis o la dominacin. ms bien que se centra en conseguir los distintos elementos de un plan para encajar juntos, se hace hincapi sobre toma de un elemento en particular llamar la atencin del espectador. Cuando se disea una pgina web diseo, a menudo te identifican un elemento en el contenido, o el propio diseo,que desea se destacan. Tal vez es un botn que desea que los usuarios de prensa, o un mensaje de error que desea leer. Una forma de lograr tal nfasis es hacer que el
elemento en un punto focal. Un punto focal es cualquier cosa en una pgina que atrae la mirada del espectador, y no slo sentirse parte de la pgina como un todo o en combinacin con su entorno. Al igual que con la unidad, hay un tratado de unos pocos y verdaderos mtodos de lograr un punto focal. colocacin A pesar de las limitaciones de diseo de pginas web prctica a menudo no lo permiten, el centro directo de una composicin es el punto en el que los usuarios buscan en primer lugar, y es siempre el ms fuerte ubicacin para la produccin de nfasis. El ms alejado del centro un elemento es, menos probable es que se observ por primera vez, para un ejemplo de esto, vase la figura 1.19. Figura 1.19: Continuacin de la colocacin y el nfasis de creacin de continuacin La idea detrs de la continuidad es que cuando los ojos empiezan a moverse enuna direccin, tienden a seguir por ese camino hasta que una caracterstica ms dominante llega.Figura 1.19 muestra este efecto. A pesar de que la mancha parte inferior es ms grande ytiende a atrapar el primer ojo, el cerebro no puede dejar de ir "Hey, miren all, una flecha!" Pronto te dars cuenta mirar fijamente el objeto ms pequeo. Continuidad es tambin uno de los mtodos ms comunes que los diseadoresWeb utilizan para unificar una diseo. De manera predeterminada, el borde izquierdo de las partidas, copiar, y las imgenes colocadas en una pgina web un formulario lnea vertical en el lado izquierdo de una pgina antes de que el estilo se aplica.Una manera sencilla de

ampliar este concepto es usar la regla de los tercios para alinear otros elementos de pgina a lo largo del las lneas de la cuadrcula. aislamiento De la misma manera que la cercana nos ayuda a crear la unidad en un diseo, el aislamiento promueve el nfasis. Un elemento que se destaca de su entorno tienden a la demanda de atencin. incluso aunque es triste no estar con sus amigos en la otra pgina, el mono aislado en la figura 1.20 se destaca como un punto focal en la pgina. contraste Contraste se define como la yuxtaposicin de diferentes elementos grficos, y es el ms mtodo comn utilizado para crear el nfasis en un diseo. El concepto es simple: a mayor la diferencia entre un elemento grfico y sus alrededores, ms que el elemento se se destacan. El contraste se pueden crear utilizando las diferencias de color (quevoy a discutir ms detalle en el captulo 2), el tamao y forma. Echa un vistazo a la Figura 1.21. Figura 1.21: Woot-con naranja para el cambio El sitio es Woot, un sitio web de comercio electrnico que vende un artculo porda.10 Cuando usted mira en este esquema, qu es lo primero que llama la atencin? Mi conjetura es que es probablemente el producto que estn vendiendo. Productos a cambio de Woot diaria, sin embargo,as que lo que agarra el ojo despus de eso? Para m, es el Yo quiero uno! botn. Aunque los mismos colores que se utilizan en otros lugares en el diseo, la forma oval no lo es. Cuando se compara con un espacio en blanco, el botn contraste y el aislamiento de trabajo para destacar. Los propietarios de Wootquieren que lo haga haga clic en ese botn.

proporcin Una forma interesante de crear el nfasis en una composicin es a travs de la utilizacin de proporcin. La proporcin es un principio de diseo que tiene que ver con las diferencias en la escala de los objetos. Si colocamos un objeto en un entorno que es de escala mayor o menor que el mismo objeto, ese objeto aparecer ms grande o ms pequeo que lo hace en la vida real. este diferencia en la proporcin llama la atencin de los espectadores hacia el objeto, lo que parece fuera de lugar en ese contexto.

En la columna izquierda de navegacin Independientemente de si estamos hablando de diseo de diseo lquido o de ancho fijo, el leftcolumn forma de navegacin es el estndar de facto. El sitio ThinkGeek, representado en la figura 1.24, es un ejemplo clsico de este configuration.12 Muchos sitios de web que se ajustan a este molde no no La desventaja de los sitios que utilizan la columna izquierda de navegacin que pueden carecer de la creatividad. Han sido hecho muchas veces y de tantas maneras, que tienden a buscar lo mismo. Eso no quiere decir que no se debe utilizar un diseo de navegacin de la izquierda de la columna. Me imagino que el 75% de los sitios que hemos diseado se han basado en el modelo de la columna izquierda de navegacin, sino que trato de hacer algo diferente en cuanto pueda. Hablando de diferentes, qu hay que elegir columna de la izquierda y pegarla en el otro parte del contenido? Entonces tendra un diseo de navegacin derecha de la columna. Derecho de la columna de navegacin Aunque es difcil encontrar sitios como Audi (que se muestra en la Figura 1.25) que el lugar principal la exploracin del sitio a lo largo del lado derecho de la disposicin, que es bastante fcil encontrar los sitios que utilizan una columna de la derecha para sub la navegacin, la publicidad, o sub-content.13 Dado que, en el oeste de culturas, nuestros ojos exploracin de izquierda a derecha, esto permite que el contenido principal de la pgina para ser el primero los espectadores lo ven. No estoy seguro de por qu no hay ms sitios que hacen uso de la columna derecha. Los estudios Yo he visto tienden a oscilar en ambos sentidos en lo que respecta a la usabilidad y la funcionalidad de la mano derecha los mens. En mi propia experiencia, mi cursor tiende a flotar en el lado derecho del navegador ventana de todos modos, para que yo pueda estar ms cerca de la barra de desplazamiento. En ltima instancia, esta es una decisin que es realmente acerca de las necesidades de sus clientes y cmo quieren que la gente percibe su presencia en lnea. En la columna izquierda de navegacin es familiar y ms estndar, pero eso no es siempre la prioridad nmero uno en el diseo de un nuevo sitio. Uno Lo que es seguro, sin embargo: si quieres que tu diseo sea diferente de la pgina web de promedio, pero an as desea que los usuarios puedan encontrar su navegacin, se debe dar una columna de la derecha diseo de una oportunidad.

Tres columnas de navegacin La tpica de tres columnas tiene una columna central de ancho, flanqueada por dos diminutos columnas de navegacin. La Apple Store del sitio web se muestra en la Figura 1.26 es un ejemplo de este comunes de diseo de pginas web staple.14 pesar de que tres columnas puede ser necesario en las pginas que tiene una tonelada de navegacin, pequeos segmentos de contenido, o para mostrar la publicidad, es importante recordar que los espacios en blanco es esencial si queremos mantener un esquema de aparecer desordenada. Afortunadamente en la tienda de Apple, las tres columnas slo existen en la pgina principal, y el columna central tiene algunos espacios en blanco que ayuda a promover el movimiento de los ojos. Cmo Inspirado El hecho de que la izquierda, derecha, y tres columnas configuraciones de diseo son el pan y la mantequilla de la mayora de diseos de pginas web no significa que tenga que limitarse a estos diseos. Una gran cantidad, s, una gran cantidad de escaparate de diseo y lugares de la galera han sido creados para funcin de ideas nuevas e innovadoras que pueden ayudar a pensar fuera de la caja, incluyendo el siguientes (slo para nombrar unos pocos): CSS Zen Garden en http://www.csszengarden.com/ Este sitio es el escaparate original de ideas frescas para la CSS. Incluso si usted no tiene la intencin de disear una plantilla de CSS Zen Garden, es una gran fuente de inspiracin. CSS belleza en http://www.cssbeauty.com/ Belleza CSS es a la vez una galera de bien diseado sitios web CSS y un portal para la CSS diseo de la comunidad. Stylegala Gallery en http://www.stylegala.com/archive/ Stylegala es una gran fuente de informacin sobre diseo web y estndares, pero la galera cuenta con los mejores de los mejores nuevos diseos de CSS. CSS Vault en http://cssvault.com/ Archivo de la bveda de la galera de CSS se remonta a noviembre de 2003, por lo que es no slo un gran fuente de inspiracin, sino un repositorio histrico de gran diseo CSS. Diseo de Interaccin del sitio de la semana en http://www.designinteract.com/sow/ Slo por si acaso, aqu hay una galera que no se centra en diseos basados en CSS. Interactuar es el diseo multimedia y la tecnologa centrada en spin-off de la Comunicacin Artes, una revista comercial lder para la comunicacin visual y diseo grfico. Diseo Interactuar ha destacado (y archivo) de un sitio web nuevo y nico a la semana desde enero de 1998

Utilizar un archivo de Morgue Yo s lo que ests pensando: "Muy bien, tengo un montn de galeras a la vista, ahora qu?" Uno de los ms tiles "ajustes" mi primer profesor de diseo grfico me ense fue la creacin de un morgue del archivo cada vez que he trabajado en un proyecto grande. El concepto es bastante simple: si usted est haciendo un proyecto de ilustracin o de marketing que incluye trenes, recortar e imprimir cualquier cosa que usted puede encontrar que pueden servir de inspiracin y mantener todo en una carpeta. ayuda a con el proyecto actual, y si alguna vez tiene que hacer otro proyecto que involucra a los trenes, usted tendr un montn de inspiracin a la mano. El archivo de la morgue tipo de idea se me olvid hasta hace unos aos cuando yo estaba trabajando en un diseo de sitio web. Me encontr a m mismo buscando un distribucin similar a la que yo quera crear en particular, que quera ver cmo los diseadores de otros maneja las texturas de fondo para un diseo. Fue entonces cuando decid empezar mi archivo morgue digital. Comenc a tomar imgenes de los sitios que he visto en algunas de las galeras que figuran arriba, y ellos ordenados en carpetas con nombres como leftnav, rightnav, 3column, y bicho raro. Tener un repositorio de diseos de sitios web que pueden ver en cualquier momento, ha sido un recurso muy til en numerosas ocasiones cuando he estado en busca de inspiracin. Fresh Trends Si usted se siente tan abrumado por los recursos anteriores que ni siquiera se puede contemplar a partir de un archivo morgue en busca de inspiracin, slo toma unos minutos para navegar a travs de esos sitios. Mira ms all de los colores y texturas a las cajas que componen el diseo, y tratar de identificar ideas comunes y las tendencias de diseo. Al hacer esto, he empezado a notar algunas tendencias que parecen estar surgiendo en los diseos de pgina web. Navegacin a pie expansiva Si se desplaza a la parte inferior de las pginas de muchos de los sitios ms recientemente rediseado, que est probable que veamos una nueva tendencia interesante. En lugar de utilizar el pie de pgina de los enlaces principales y un aviso de copyright, muchos sitios se estn expandiendo esta pieza olvidada de bienes races a la pgina incluyen informacin de contacto, la navegacin ampli el sitio, y el contenido extra como blogrolls,

linkrolls, tarjetas de Flickr, y as sucesivamente. A pesar de poner un sitio de elemento de navegacin principal en la parte inferior de la pgina no es una buena idea, el concepto de la inclusin de "bonus" de navegacin y contenido en ese espacio se ha quitado los ltimos tiempos. Como muestra la Figura 1.27, JeffCroft.com es slo uno de los sitios que intentan este approach.15

Tres columnas con contenido primero La mayora de los nuevos diseos de pgina de tres columnas que se han producido ltimamente han puesto el primer contenido. En primer lugar, quiero decir que es la localizacin del contenido en el extremo izquierdo de la pantalla. Como se puede ver en la figura 1.28, este mtodo produce un aspecto muy moderno y profesional para Vivabit.16 Aunque esto no es realmente una nueva idea, que ha sido recoger una gran cantidad de vapor ltimamente, tanto en de lquidos y de ancho fijo diseos de sitios. La mayora de las tres columnas diseos suelen cambiar a una estructura de dos columnas fuera de la pgina de inicio. Al colocar el contenido de la izquierda, el transicin de tres columnas de a dos es ms natural, como la columna de contenido, simplemente puede ampliar, en lugar de tener que trasladarse por completo. Por ejemplo, si usted visita cualquiera de los Otras pginas principales del sitio Vivabit, el ancho del rea de contenido parece simplemente para ampliar hacia arriba ya la derecha cuando se desplaza desde la pgina en el sitio. Cambiar el tamao: ancho fijo vs Ancho lquido Antes, cuando estbamos dibujando los bloques de diseo con lpiz y papel, me explic que la primera elemento de la pgina que tena que pensar era en el bloque de contencin, y si sera o no se expanden para llenar la pgina. Esta es una decisin que ha plagado a los diseadores web a cientos, si no miles de aos, todo el camino de regreso a los das en que utiliza las tablas y spacer.gif archivos de contenido de diseo de pgina web. Bueno, tal vez que no era en realidad hace miles de aos, pero este es un debate de larga data, no obstante. De hecho, el debate se fija-contralquido causada un poco de revuelo de nuevo en diciembre de 2003, cuando dos diseadores muy influyente, Douglas Bowman de Stopdesign17 y Dan Cedarholm de SimpleBits, 18 de forma

simultnea cambia de lquido a los diseos de anchura fija. Esto caus pnico instantneo e injustificada entre la comunidad de diseo y estndares web, cuyos miembros teman que este movimiento marc la muerte de los diseos lquidos. Desde entonces, la mayora de los diseadores han creado sus propias opiniones en lo que respecta a la fixedversus debate lquido. La decisin de utilizar un tipo de diseo sobre el otro debera ser determinado por el pblico objetivo y las metas de acceso de cada pgina web individual. Los pros y los contras de cada tipo de presentacin son bastante bien definidos, como muestra la Tabla 1.1.

Con estos pros y contras en mente, hemos diseado los diseos ms ancho fijo del lquido. Me gusta tener control sobre el contenido de pantalla, y trabajar con el espacio de fondo. Por otro lado, a veces disfrutan de los desafos que el diseo de lquido poner sobre la mesa. Sin embargo, independientemente de las preferencias personales, es importante poner las necesidades de su primer cliente. Si usted est decidir sobre la anchura de un diseo de ancho fijo, tienes que pensar en la audiencia de que va a disear y crear un diseo que satisface las necesidades de los usuarios.

Captulo 2: Colores Seleccin de colores no es un asunto simple. Hay consideraciones estticas, la identidad y la facilidad de uso tener en cuenta. Y la mayora, para colmo de males, muestra moderna puede hacer que ms de 16 millones de colores. Eso es un nmero infinito de combinaciones de colores horribles justo a punto de ocurrir! Afortunadamente, usted no tiene que ser un consultor de color muestrario de transporte de hacer una buena opciones de color. Una gran cantidad de conocimiento disponible, de sensiblero (como me gusta llamarlos) pautas psicolgicas para intentar-y-verdaderas teoras del color que le ayudar a hacer la decisiones correctas cuando se trata de color. La psicologa del color La psicologa del color es un campo de estudio que se dedica a analizar los aspectos emocionales y efectos en el comportamiento producido por los colores y combinaciones de colores. Web de comercio electrnico los propietarios del sitio quiere saber qu color har que su sitio web los visitantes gastan ms dinero. Casa decoradores quiere saber qu color va a transformar un dormitorio en un retiro zen tranquilo. Los dueos de restaurantes de alimentos rpidos se mueren por saber qu combinaciones de colores te harn quiere a aumentar el tamao de su comida. Como se puede imaginar, la psicologa del color es un gran negocio. Aunque es importante saber cmo las opciones de color pueden afectar a las masas, la idea que no hay una sola respuesta unificada, psicolgica a los colores especficos es espuria. Muchos de las respuestas que los psiclogos color acreditar a ciertos colores tienen su origen en individuales la experiencia. Tambin es interesante notar que muchas culturas han completamente diferente asociaciones, e interpretaciones de los colores. Con estas advertencias en mente, vamos a explorar algunas asociaciones psicolgicas en general que la mayora de la gente en la cultura occidental tener en respuesta a los colores especficos. Asociaciones de color Describir las conexiones emocionales que la gente pueda tener con los colores pueden ser muy "Hippy-esque" tema. Si no me creen, slo la cabeza a su msica favorita en lnea tienda y muestra algunas pistas de colores por Ken Nordine. Aunque la mayora de los diseadores no depender exclusivamente de los significados supone, caractersticas y personalidades de colores especficos, sigue siendo til para tener una comprensin de los atributos emocionales de algunas de las principales grupos de color. rojo El color rojo tiene una reputacin para estimular la adrenalina y la presin arterial. a lo largo de con los efectos fisiolgicos, el rojo tambin es conocido por aumentar el metabolismo humano. Lo es un color excitante, emocionante y rico, despus de todo, el rojo es tambin un color de la pasin. Nada dice "amor" como pintar una pared de color rojo brillante en el Da de San Valentn para su novia, como alguien ha hecho en la Figura 2.1. Los tonos ms oscuros de rojo, como el burdeos y marrn, tiene una sensacin rica, indulgente al respecto-de hecho, pueden ser muy hoitytoity. Piense en estos colores en el diseo de cualquier cosa para los amantes del vino o los conocedores del buen vivir. El ms terrenal, tonos de rojo amarronado se asocian con la temporada de otoo y la cosecha. naranja Como el rojo, el naranja es un color muy activo y enrgico, aunque no provoca la ira que el rojo hace a veces. En cambio, el naranja es pensado para promover la felicidad y la representa el sol, el entusiasmo y la creatividad. La naranja es una ms informal y menos corporaciones sensacin de color, que es quizs la razn a los gurs de marketing detrs de compaas como Cingular en los EE.UU. y Orange en Europa decidi crear marcas con ella. Desde el naranja tambin estimula el metabolismo y el apetito, que es un color ideal para la promocin de alimentos y la cocina. Tal vez por eso la imagen de una mandarina en la figura 2.2 es lo que tienes hambre, aunque no como los ctricos. amarillo El amarillo es un color muy activa y visible, por lo que se usa para taxis y seales de precaucin. Se asocia con la felicidad y la energa, y, como muestra la Figura 2.3, es el color de la firma de emoticonos. Como el rojo y el naranja, amarillo puro es un visiblemente activos color. Los sabores originales de naranja y lima-limn de la bebida deportiva Gatorade de energa siguen siendo los de mayor venta de productos de la marca. Esto se debe probablemente, al menos en parte, a las caractersticas de activo,

enrgico asociado con los colores naranja y amarillo. Un cita annima que a menudo se usa con las asociaciones de color, dice, "Los bebs lloran ms en habitaciones amarillas, esposos y esposas lucha ms en las cocinas de color amarillo, y cantantes de pera arrojar ms rabietas de vestuarios amarillo. "Si este comentario es cierto o no, el punto es que el amarillo en exceso puede ser abrumador. Vamos, si usted era un beb atrapado en un vestuario con cnyuges lucha y lanzar rabietas, cantantes de pera, se echara a llorar tambin! verde El verde se asocia con la naturaleza. Es un color muy suave, que simboliza el crecimiento, la frescura y la esperanza. Es mucho ms fcil en los ojos, y mucho menos activos de amarillo, naranja o rojo. Aunque muchos diseos de sitios web que utilizan verde apelar al sentido de los visitantes de la naturaleza, el verde Es un color muy verstil. cuando brillante verde sobre un fondo negro, lo que realmente aparece, y le da al diseo un techy sentir. Para m, lo trae de vuelta recuerdos de mi primer ordenador, un fiel vieja Apple IIe, la pantalla de la que se muestra en la Figura 2.4. azul Cuando yo era nio, mi color favorito era el azul. No cualquier tipo de azul, pero Crayn Crayola azul cerleo, que se muestra en la Figura 2.5. S, yo era un nio raro. En el nivel sensiblero, el azul simboliza la apertura, la inteligencia y la fe. Fisiolgicamente, el azul se ha encontrado tranquilizar a la gente, pero tambin puede reducir el apetito. Este efecto se debe probablemente a parte a la rareza de color azul en la comida real. Aparte de los arndanos, el nmero natural los azules puedes contar? Azul, al parecer, no es slo una parte de la naturaleza appetiteinducing paleta, as que no es una gran opcin para la promocin de los productos alimenticios. El azul es a veces visto como un smbolo de mala suerte y problemas. Esta conexin emocional color Es evidente en la msica blues y en los cuadros de depresin inducida por el azul de Picasso Perodo. No es todo acerca de los colorantes alimentarios artificiales y las formas oprimidas de arte, aunque- azul tambin tiene un atractivo universal debido a su asociacin con el cielo y el mar. Esta conexin visual con el agua, el cielo y el aire azul hace una opcin obvia para la web sitios asociados con las lneas areas, aire acondicionado, filtros de la piscina, y los cruceros. Alguna vez ha cuenta de que el azul es el color primario de los logos de IBM, Dell, HP y Microsoft? La Esto se debe a que el azul tambin transmite una sensacin de estabilidad y claridad de propsitos ... es decir, hasta que haya probado la pantalla azul de la muerte! prpura Histricamente, el color prpura se ha asociado con la realeza y el poder. el secreto detrs de un prestigioso pasado prpura tiene que ver con la dificultad de producir el tinte necesarios para crear vestidos de prpura. A da de hoy, todava prpura representa la riqueza y extravagancia. Que la extravagancia es trasladado a la naturaleza. El violeta es ms a menudo conectada con las flores, las piedras preciosas, y puestas de sol, que, si se considera la figura 2.6, Es realmente no es de extraar. Si usted est tratando de crear un diseo de sitio web que se destaca de la gente, piensa en utilizar un tono ms rico de la prpura. De acuerdo al diseo de CSS Zen Garden ndice de categoras, el prpura es el color por mucho menos de uso comn. blanco Cuando la gente piensa "limpio", piensan en blanco. El blanco es considerado como el color de la perfeccin, la luz y la pureza. Esta es la razn por sbanas blancas se utilizan en los detergentes comerciales y por qu una novia lleva un vestido blanco en el da de su boda. A menudo pasar por alto estas asociaciones por el uso por defecto de color blanco como color de fondo, sino que persisten, no obstante. Para tener una idea de cmo arraigado el sentido de blanco es en nuestra cultura, basta con leer el Diseo poema de Robert Frost. En ella, Frost simblicamente en contradiccin con las asociaciones mediante el uso de blanco para representar la muerte y la oscuridad. Uso los colores de forma inesperada puede ser una buena manera de hacer una declaracin contundente.

negro Aunque el negro suele tener connotaciones negativas, como la muerte y el mal, sino que tambin puede ser de un color de poder, la elegancia y la fuerza, dependiendo de cmo se utiliza. Si usted est considerando el uso de un color particular y se preguntan qu son las asociaciones de ese color, simplemente pregntese: "Cules son las tres primeras cosas que vienen a la mente cuando pensar en este color? "Cuando pienso en negro, por ejemplo, pienso en Johnny Dinero en efectivo, trajes de etiqueta, y Batman. Cuando pienso acerca de Johnny Cash, su ropa oscura y profunda voz y las canciones tristes darle un sentido tangible a las asociaciones mentales que percibo entre el hombre y el color. Si usted analiza sus tres principales asociaciones de este color As, usted est obligado a golpear algunos acordes comunes que comparten los dems en lo que respecta a las opciones de color. A pesar de que la psicologa del color juega un papel importante en la forma en que un visitante puede ver un sitio que diseo, tenga en cuenta que no hay color incorrecto para su uso. Aunque el razonamiento psicolgico puede ayudar a que su paleta de empezar, el xito de un esquema de color depende de la armona que existe entre todos los colores elegidos. Para lograr esta armona, tendremos que seguir unos pocos otros atributos de color en mente. Temperatura de color Uno de los atributos de color que existe en todo el espectro es la nocin de color la temperatura. Que le da color grifo de agua caliente? De qu color se asocia con hielo? Por qu? Las respuestas son obvias, y son impuestas por la cultura y la naturaleza. Los colores clidos son los colores del rojo al amarillo, como la naranja, rosa, marrn, y burdeos. Debido a su asociacin con el sol y el fuego, los colores clidos representan tanto el calor y el movimiento. Cuando se coloca cerca de un color fro, un color clido tender a salir, dominar, y producir el nfasis visual del que hablamos en el captulo 1. Los colores fros son los colores de verde a azul, y puede incluir algunos matices de violeta. Violeta es el intermediario entre el rojo y el azul, por lo que una violeta es ms fresco, como habr adivinado, uno que est ms cerca de azul, mientras que un violeta ms rojo se puede sentir muy caliente. Los colores fros pueden calmar la gente y reducir la tensin. En un diseo, los colores fros tienden a disminuir, lo que los grandes para los fondos y mayores elementos de una pgina, ya que no va a dominar su contenido. Valor del color La medida de la claridad u oscuridad de un color que se conoce como su valor. El uso de la luz y los colores oscuros ayudan a establecer la dicotoma clsica del bien contra el mal. cuando se piense en sus villanos favoritos de ficcin y los hroes, los colores que vienen a la mente? en una esquina tenemos el Dr. Evil, Freddy Krueger, y la Bruja Mala del Oeste. En los otros esquina tenemos a Luke Skywalker, Gandalf el Blanco, y William Wallace. Si tuviera que llegar a camisetas de colores para cada uno de estos equipos improbable, por dnde empezar? Si usted quera acentuar la ligereza de los buenos, te empiezan ya sea con un puro color, como el azul, o un tono ms claro de otro color fro. Tonos an ms ligera de colores clidos tienden a tener una calidad de cuento de hadas. Por otro lado, los colores oscuros se sienten pesados y densos. Los chicos malos en nuestro equipo de lucha contra todas se ven bien en negro, pero que podra ser un poco demasiado estereotipadas de este variopinto grupo. Si queremos asignarle un color, nos saturacin La saturacin o intensidad de un color se describe como el brillo u opacidad de ese color. Es obvio que los colores intensos y vivos se destacan. Aunque los colores fros tienden a disminuir, de un azul intenso se preste ms atencin a s misma que una naranja cremosa, sin brillo. Empec a tocar en este punto anterior, cuando dije que no debemos hacer jerseys de nuestros hroes demasiado claro. Cuando aadimos gris (blanco y negro) a un color, que empieza a convertirse en aburrido y no saturados. Al igual que el agua turbia en una piscina o una maana nublada de invierno, los colores no son tan atractivas visualmente excitante o como colores brillantes e intensos. En el juego de palabras brillantes secundarios no intencin-mate colores ayudan a reducir la tensin y dar a las composiciones un ambiente de meditacin y de ensueo.

Teora del Color 101 Para poner nuestro conocimiento fundacional de color ms lejos, tendremos que tener una conexin a tierra en algunos de los conceptos ms tcnicos relacionados con el tema, por ejemplo, cmo los colores se form y cmo pueden ser categorizados. Los colores mostrados en la pantalla del ordenador (es decir, los colores que usaremos en nuestro sitio web diseos) estn basadas en un modelo de color aditivo. En un modelo de color aditivo, los colores son muestra en porcentajes de rojo, verde y azul (RGB). Si volvemos a los tres de estos colores al mximo, tenemos luz blanca. Si se vuelve rojo y el verde hasta el final, pero el interruptor de azul, se obtiene amarillo. Si alguna vez propiedad de una impresora a color, que podra estar familiarizado con las siglas CMYK (cian, magenta, amarillo y negro). Su impresora de inyeccin de tinta, impresoras lser e industrial de cuatro colores imprenta, crean imgenes usando cian, magenta, amarillo, negro y tinta o tner. Este proceso se utiliza un modelo de color sustractivo. Mediante la combinacin de colores junto con un color sustractivo modelo, que nos acercamos a negro grisceo. Usted no puede contraer negro de slo cian, magenta y amarilla. Hay que tener tinta negro, que es donde entra en juego el K Echa un vistazo a la Figura 2,10 para obtener una mejor idea de cmo aditivo y sustractivo de color de trabajo los modelos. Independientemente de si usted est diseando para la impresin o la Web, las lecciones de color tradicionales teora son las claves que nos ayudan a clasificar los colores y los agrupan. estudios de grabado de la fecha de clasificacin de color de nuevo a el siglo III aC y las obras de Aristteles. Desde entonces, muchos otros artistas grandes y filsofos han contribuido a nuestro conocimiento de cmo colores de trabajo, por ejemplo, Isaac Newton, Johann Wolfgang von Goethe, y Johannes Itten. Las obras de estos tres individuos, en los siglos 17, 18 y 19, respectivamente, proporcionan los cimientos sobre los que gran parte de nuestra comprensin de color se encuentra. Los tres tericos explic colores en relacin con una rueda de color, usando rojo, amarillo y azul como el colores primarios. La rueda de colores es un esquema simple pero efectivo desarrollado para presentar la conceptos y la terminologa de la teora del color. Rueda de los artistas tradicionales de color es un crculo dividido en 12 sectores, como indica la figura 2.11. Cada rebanada es un color primario, uno secundario color o un color terciario. colores primarios Los colores primarios de la rueda de colores tradicionales son rojo, amarillo y azul. Estos tonos forman un tringulo equiltero en el crculo cromtico, y cada color de un cuarto color primario es otro de primaria. colores secundarios Al mezclar dos colores primarios vecinos, creamos colores secundarios, que se indican aqu por la pequeos tringulos de color gris. Los colores secundarios son naranja, verde y morado. colores terciarios Hay un total de seis colores terciarios: bermelln (rojo-naranja), calndula (amarillo naranja), chartreuse (amarillo-verde), aguamarina (azul-verde), violeta (azul-morado), y el magenta (rojo-violeta). a medida que Ya habrn adivinado, los colores terciarios son formado por la mezcla de un color primario con un lado color secundario.

Rojo, amarillo y azul o CMYK? Hace un tiempo, escrib un artculo para SitePoint derecho De color para los codificadores. Desde entonces, he sido sorprendido por la falta de respeto que existe para el rojo, amarillo y rueda de color azul primario. He odo que la gente lo llama un herramienta de jardn de nios, invlidos y arcaico. Es cierto que la rojo, amarillo, y la rueda de color azul no es un cientfico modelo exacto de la percepcin biolgica de la luz. Muchas personas quieren eliminar el rojo, amarillo y rueda de color azul de los programas de arte, y establecer la rueda de color CMYK, que se muestra en la figura 2.12, como el modelo de color universal. Adems, tenga en cuenta que la secundaria colores en la rueda de colores CMYK son de color rojo, verde y azul, lo que significa que podemos utilizar el modelo CMYK ilustran tanto los efectos aditivos (con luz) y de color sustractivo (en papel). Para ilustrar el razonamiento detrs de la presin para pasar a CMYK, he utilizado pinturas gouache, que son bsicamente las acuarelas que vienen en un

tubo. Cuando se mezcla con agua, se bastante transparente y producir los colores que se puede esperar a ver en el "moderno" CMYK rueda de color, como muestra la Figura 2.13. Magenta y amarillo para producir mezcla de tonos agradables de anaranjados rojos, mientras que el cian y el amarillo para producir mezcla de tonos de verde y menta. As es como Trabajos de impresin CMYK. Las tintas son muy transparente y la superposicin entre ellos (junto con el uso del negro-no lo olvides un buen ole K) nos da la mayor parte de los colores que puede ver en una aditivo, emisores de luz monitor o un televisor. Como Bob Ross podra decir, "que es un color poco feliz modelo ". Espera! Qu es eso violeta? S, la misma cantidad de cian y magenta formar una violeta o morado, no el azul puro sugerida por la rueda de color CMYK. Numerosas anomalas como este cultivo cuando se mezclan pigmentos opacos. Bsicamente, si su pintura es tan gruesa que no puede ver el papel blanco o lienzo en el que se pinta, los conceptos de color CMYK ruedas empiezan a fallar. En este sentido, la rueda de colores tradicionales rojo, amarillo y azul desarrollados por Goethe, Itten, y muchos otros en los ltimos cuatro siglos ms o menos es un modelo mucho mejor. Pero estamos con pxeles no, la pintura! La razn por la que muchos artistas digitales siguen manteniendo un rojo, amarillo, y la rueda de color azul es muy til porque los esquemas de color y los conceptos de color tradicionales La teora se basan en ese modelo. Los esquemas de color que he cubierto en mi artculo SitePoint (y que veremos en las pginas siguientes) se basan en el rojo, amarillo y azul modelo de color. No podemos simplemente mover el rojo y azul alrededor de la rueda de color y lo llaman un da. Como muchos de nuestros esquemas de colores y combinaciones de colores estn basados en el rojo, amarillo, y el modelo de color azul, los colores en movimiento alrededor de la rueda podra causar muchos problemas con combinaciones de color artstica. Hay fallas que se encuentran en los dos modelos de rueda de color, y complementarios los colores son un ejemplo de ello. Pero en realidad va a cocer al horno su pasta cuando te digo que no hay rueda de color que se puede describir completamente las complejidades de la forma en que percibimos el color de la luz. A pesar de que el diseo en su mayora de la Web, un medio que se muestra en RGB-I todava utilizan el color rojo, amarillo y azul como base para la seleccin de mi color. Yo creo que el color combinaciones creadas con la rueda de color rojo, amarillo y azul son estticamente ms agradable, y que un buen diseo es la esttica. Por lo tanto, voy a presentar color la teora como yo lo aprend en mi clase de fundamentos de diseo de segundo ao en la universidad, desde el tradicional rojo, amarillo, y la rueda de color azul. El esquema de las cosas En la actualidad, sabemos lo suficiente acerca de los colores para hablar de sus valores, intensidades, asociaciones psicolgicas, la temperatura, y lugares en la rueda de colores tradicionales. Todo eso est muy bien, pero cmo podemos encontrar mltiples colores que trabajan juntos? Es donde las combinaciones de colores son tiles. Los esquemas de color son las frmulas bsicas para la creacin de combinaciones de colores armoniosa y eficaz. Seis combinaciones de colores clsicas existen: monocromo anlogo complementario divisin complementaria tridica tetrdica (tambin llamado doble complementario) A fin de utilizar cualquiera de estas combinaciones de colores clsicos, hay que partir de un color. Considerar el tema de la pgina web que est trabajando, y elegir un color de base que se adapte a la del sitio propsito. Por supuesto, esta opcin puede no ser siempre en sus manos. A veces, usted tendr

que para trabajar dentro de las reglas de una empresa, tal vez la adhesin a color, aparentemente inane y excntrico directrices. Vamos a suponer que el sitio que usted est diseando es para una familia orgullosa de repipi circo monos. Estos monos del circo todava creen que tienen un linaje real, por lo que han pidi que se incorpora una prpura real en el diseo. Monos tontos ... pero Sabes lo que dicen: "el cliente siempre tiene la razn". Un esquema de color monocromtico Cuando hablamos sobre el valor del color anterior, hablamos de tonos y matices. A monocromtico color se compone de un solo color base y cualquier nmero de tintes o tonos de ese color. Aqu est nuestro mono real en la figura 2.14, donde se puede ver una esquema de color monocromtico de color morado. Ejemplos esquema de color monocromtico El sitio web de promocin de la Moneda, un sitio web las estadsticas de seguimiento de la aplicacin desarrollada por Shaun Inman, es tan til como elegante. Tanto el sitio web y la aplicacin de Casa de la Moneda se utiliza un esquema unificado, en su mayora de color monocromtico que comprende varios tonos y matices del color verde, como se puede ver en la figura 2.15. Cuando su imagen de marca y los esfuerzos de la identidad comienza con un color, monocromtica color esquema es una opcin obvia. Los chicos de la consultora y Sabor empresa de diseo azul se esta idea y corri con ella. tener un vistazo a la figura 2.16, en lugar que la eleccin de colores para adaptarse a la marca, que han tomado la color azul y lo hizo en su marca para una nica esquema de color simple. Bromas superfluo es el sitio personal del diseador Dan Rubin. En su ltimo rediseo del sitio web (o "reboot" de Dan le gusta llamarlo), Dan ha creado un tema llamado Orangina que utiliza el color naranja de una forma muy a lo grande. Al igual que con los dos ejemplos anteriores de esquemas de color monocromtico, este diseo realmente se destaca, como se puede ver en la figura 2.17. Estamos tan acostumbrados a ver varios colores diseos en la web que cuando un diseo que utiliza un solo color viene, lo que realmente las capturas nosotros con la guardia baja, especialmente cuando ese color es de color naranja brillante. Aunque resta khoi Vinh sitio web (Figura 2.18) utiliza naranja para el color hover de los enlaces y algunos grficos acento, su diseo es realmente un color acromtico esquema. La palabra acromtico significa literalmente "sin color" por lo que un esquema de color acromtico es el que se crea utilizando slo negro, blanco y tonos de gris. Porque los esquemas de color acromtico no son ms que matices y tonos de gris, siguen siendo monocromtica, aunque tal vez un poco ms especial. Un esquema de colores anlogos Un esquema de colores anlogos consiste en colores que son adyacentes entre s por el color rueda. Si nuestra rueda de color eran un pastel de queso, entonces un esquema de color anlogo sera un muy buena tajada. La clave para crear un buen sistema anlogo es recordar que su los ojos son ms grandes que el apetito. Por regla general, no tome una porcin mayor de un tercio de la totalidad, o que est obligado a hacer alguien enfermo. Volviendo a nuestro hoitytoity monos: en el diseo que se muestra en la Figura 2.19, hemos tomado su morada y lo hizo ambiente clido, con algunos tonos de naranja. Ejemplos de esquema de colores anlogos He mencionado antes que el naranja era un buen color a utilizar para promover la comida y cimarrones que burgundys y tener una sensacin muy rica para ellos. El sitio de Pastelera Regine toma ventaja de los efectos psicolgicos de estos dos colores. Este delicioso dulce de un sitio web es rebosante de sabor y calor, como muestra la Figura 2.20. Si los colores no kickstart el apetito, la fotografa de producto. Blinksale, que se muestra en la figura 2.21, es un anfitrin de aplicaciones web que crea, administra y enva facturas CSS con formato y texto sin formato. Tambin es un excelente ejemplo de lo que es un esquema creativo de colores anlogos puede hacer por un sitio web de negocios. Se arruga los nociones preconcebidas de cmo sitios web corporativos deben buscar, y los lanza en un lugar fresco mar de colores que van desde el azul-verde a amarillo. Aunque los colores del cambio Michael Angeles sitio web urlgreyhot de seccin a seccin, el esquema de color de la pgina de inicio es predominantemente

anlogo,

como

se

muestra

en

la

figura

2.22.

Una combinacin de colores complementarios Combinaciones de colores complementarios, como la que se ilustra en la Figura 2.23 consiste en los colores que son uno enfrente del otro en la rueda de colores, como verde y rojo, amarillo y violeta, o naranja y azul. Estos colores se dice que se complementan entre s Ejemplos de esquema de colores complementarios La Universidad de Florida es de mi esposa Alma mater de pregrado, y el naranja de la escuela y azul del equipo proporcionan una base ideal para un color complementario scheme.10 Algunos la gente puede ser puesto apagado por el fuerte contraste de colores complementarios se ilustra en la Figura 2.24, pero, cuando los colores representan la empresa o entidad para la que usted est diseando usted no puede ir mal. El grupo detrs de rediseo de la universidad hicieron un gran trabajo de unin estas opciones de color poco probable con un bello diseo y marcas de los estndares. Inkubators la fe es una organizacin dedicada a disear, probar, ajustar y educacin recursos para el crecimiento cristiano faith.11 La violeta de su logotipo se utiliza en todo el sitio, muestra en la figura 2.25, y se compensa con el uso de un color amarillo neutral. Con un nombre como Rob Goodlatte, cmo puedes ir mal con una paleta de tonos caf y colores de la tierra? Rob es un diseador y un estudiante de la Universidad de Duke, que parece contar con una empresa captar en los principios de grficos design.12 El uso de verde como una barra lateral y color de acento para el diseo que se muestra en la figura 2.26 no es una opcin obvia, pero se requiere el diseo general de ser un tema anlogo simple a una gama de colores complementarios sofisticados.

Errores comunes complementarias Ya que los colores complementarios son tan diferentes el uno del otro en de tantas maneras, que pueden causar un efecto conocido como simultneas diferencia de cuando se colocan juntos: cada color hace que el otro parece ms brillante y dominante. Este efecto es en realidad lo que hace Combinaciones de colores complementarios tanto xito en el movimiento ojos de los visitantes en torno a una composicin. Sin embargo, puede ser terriblemente doloroso cuando los colores complementarios se utilizan en un primer plano- relacin de fondo, como lo son en la figura 2.27. Otro error comn es elegir los colores que no son del todo justo enfrente de uno al otro en la rueda de color, sin embargo, no estn lo suficientemente cerca para ser colores anlogos. estas combinaciones que se conoce como discordants porque los colores a menudo chocan entre s, causando a los espectadores a sentir la discordia. De hecho, la dcada de 1980 la moda era todo acerca de los colores discordantes. Al ver a un esquema de colores discordantes en estos das tiende a traer buenos recuerdos de esa geomtrica "Diseador" serie de carpetas Trapper Keeper me amaba tanto en el medio escolar es un reproduce en la figura 2.28. En ese sentido dbilmente positivo, esta dificultad puede ser factible si se usa intencionalmente. Colores discordantes "whiz-bang" combinaciones que realmente atraen a los nios, as que usar los sitios para los nios o los productos no est fuera de cuestin. Tambin puede ser utilizado con moderacin en ms adulto diseos para crear un mayor nfasis que se puede lograr con un simple combinacin complementaria. Tenga en cuenta mi nfasis en la palabra moderacin, sin embargo! Split-complementarios, color tridico y tetrdica esquemas de sonido tcnico, pero en realidad son variaciones simples de un esquema de colores complementarios bsicos. Para crear un esquema de color dividida complementarios, los dos colores adyacentes a su base complemento del color. Por ejemplo, tomemos el esquema de color de la izquierda se muestra en la Figura 2.29

El rojo es el color de base aqu, as que en vez de usar verde para formar un esquema complementario, vamos a de los dos colores adyacentes al verde, amarillo verdoso (amarilloverde) y aguamarina (azul verdoso), para formar un esquema de divisin de tres colores complementarios. Tenga en cuenta que, desde que est utilizando el color base con dos colores discordantes, este tipo de esquema de color puede parecer juvenil y extrema. Por una combinacin de colores tridica, simplemente empujar a nuestros dividida complementa con una muesca ms en cada lado, de modo que todos los colores estn igualmente espaciados. En lugar de seleccionar chartreuse (yellowgreen), seleccionamos amarillo, y en lugar de aguamarina (azul-verde), seleccionamos azul. Al hacer esto, se divide la rueda de colores en tres partes, de ah el prefijo tri-en el nombre de tridica. En este ejemplo, que es el esquema de la izquierda en la figura 2.30, tenemos los tres colores primarios (rojo, amarillo y azul) que componen nuestro esquema de color. Si ha activado el plan de las agujas del reloj una muesca, usted tendra que chartreuse (amarillo-verde), violeta (azulmorado), y bermelln (redorange), como se muestra en el ejemplo del medio de la figura 2.30. Sabiendo que los esquemas de color tridico desarrollar en tres colores, usted probablemente ya habr deducido de su amplio conocimiento de la lengua griega (bueno, as que tal vez no) que un esquema de color tetrdica consta de cuatro colores. Un esquema de color tetrdica es aquella en la que se combina cualquier combinacin de colores complementarios con otra combinacin de colores complementarios. La izquierda esquema de color en la figura 2.31 es una combinacin de colores que combina tetrdica naranja y azul con amarillo y morado. Otras variantes En realidad es bastante difcil encontrar ejemplos puros de las seis combinaciones de colores clsicas I se ha descrito anteriormente. Aunque la mayora de los diseadores son conscientes de estos esquemas de color estndar, las combinaciones pueden tienden a sentirse bsica y sin inspiracin. Sin embargo, si el tratamiento del color rueda como una diana, y escoger cualquier color que la tierra en, es probable que llegar a con algunas combinaciones verdaderamente horrible. En lugar de tomar ese riesgo, hay un montn de maneras para modificar los esquemas de color clsico para crear algo nuevo. Una vez que haya una manija en monocromtica, las relaciones de colores anlogos y complementarios, trata de experimentar con algunos de los siguientes: monocromtica con pop mo ' En lugar de simplemente usar tonos y matices de su color base, trate de incorporar puro gris, negro y blanco. Esto va a crear ms contraste y ms "pop" dentro de un esquema de color monocromtico. analo-ajuste Ajusta la saturacin de uno de los colores en su esquema monocromtico y hasta ajustar a los dems. Un color muy saturado se destacan cuando se coloca entre los colores apagados. No debe haber analo de adivinar cul es el color saturado. mono-split-complemento Si tienes una buena cosa ir con un esquema de color dividida complemento, pero desea aadir cierta profundidad, trate de usar un tinte pocos y tonos de su color base en el diseo. Obviamente, me acaba de hacer esos nombres, pero te dars cuenta de que las tres variantes son muy similar a los esquemas tradicionales principales. Es fcil de ajustar los esquemas de color tradicionales un poco para tener ms carcter de ellos, pero recuerde que el color que le elegir es la base desde la que se basar la paleta de su sitio web en color. Es importante construir sobre una base firme, o el resto de su diseo se puede derrumbe.
monocromatico es un color basico al que le aplicas tintes y sombras anlaogo es un color primario con sus colores secundarios adyacentes tetradico es un color complemntario mezclado con otro color complementario que esta al otro extremo de loa rueda de color

Creacin de una paleta "Una paleta de colores?", Puede preguntar. "No es lo mismo que un esquema de color?" Bueno, s y no. A combinacin de colores slo le dan dos, tres, o cuatro colores para trabajar. Aunque un nmero limitado de gama de colores es una cosa hermosa, probablemente vas a necesitar algunos otros colores para el diseo de su del sitio web. Lo mejor es comenzar este proceso clavado mientras usted est pensando en la lengua de color, de escoger los colores complementarios al azar a medida que los necesita para su diseo. La nmero de colores que usted necesita depender de la complejidad de su diseo. Me gusta empezar por lo menos con seis opciones de color slido antes incluso de pensar en volver a aplicarlos a mi diseo. La notacin hexadecimal Dado que esta es la etapa en la que se especfica sobre cada color que estamos eligiendo, estamos va a necesitar una forma estndar para referirse a los colores de nuestra paleta. Es probable que ya saber acerca de los valores hexadecimales de color RGB, pero si no, aqu est la rpida y drive-thru versin de la teora. El sistema de conteo hexadecimal es muy similar al sistema decimal contando que est acostumbrado que, excepto que en lugar de estar basado en mltiplos de diez, el sistema hexadecimal contar se basa en mltiplos de 16, y tiene seis dgitos adicionales: A (que es el equivalente de decimal 10), B (11), C (12), D (13), E (14), y F (15). La Tabla 2.1 muestra cmo se cuenta a partir de 1 a 255 en decimal y hexadecimal. Entonces, qu tiene esto que ver con las paletas de colores? Anteriormente en este captulo, me explic que el monitor usa un modelo aditivo de color RGB, y que cada pxel de la pantalla "Pintadas" con una combinacin de rojo, verde y azul. Lo que yo no le dije fue que hay 256 diferentes niveles de luz roja, 256 niveles de luz verde, y 256 niveles de azul la luz, podemos utilizarlos para crear 16.777.216 colores diferentes. Afortunadamente, tenemos una manera de describir cada uno de estos colores de forma rpida y fcil de usarcdigos de color hexadecimal. Un cdigo de color hexadecimal especifica los niveles de rojo, verde y azul que van en un color determinado. Por ejemplo, el blanco se elabora combinando rojo, verde y azul en sus niveles ms altos posibles. Para utilizar el blanco en una pgina web, hemos creado el componente rojo a 255 (FF en hexadecimal), la componente verde a 255 (FF), y su componente azul a 255 (FF). A continuacin, combinar estos valores hexadecimales en el orden rojo, verde y azul, y vienen con el cdigo FFFFFF. Negro, que se realiza mediante el establecimiento de rojo, verde y azul a cero (00), tiene el cdigo 000000. Rojo, que puede crear mediante el establecimiento de rojo a FF y dejando verdes y azul en el 00, tiene el cdigo de FF0000. Magenta tiene la FF00FF cdigo, lo que significa que son de color rojo y azul establecido en FF y verde est establecido en 00. Todos estos cdigos de color, junto con los colores que producen, se muestra en la figura 2.32. Ahora todos tenemos una comprensin bsica de cmo los colores se representan en formato hexadecimal valores. El siguiente paso es conseguir que los valores de cada color con el que queremos trabajar. Hay muchos recursos disponibles para ayudarle a lograr este objetivo, incluyendo un montn de stand-alone aplicaciones y plug-ins para Mac y PC, pero mi opcin favorita es en lnea. Aunque hay muchos selectores de color en lnea hacia fuera all, mi favorito es el color Esquema del generador de WellStyled, que se muestra en la Figura 2.33.13 Cuando muchos otras aplicaciones utilizan una rueda RGB o CMYK, la herramienta de WellStyled utiliza el tradicional rojo, amarillo, y la rueda de color azul. Con unos pocos clics, usted puede elegir y personalizar un esquema de color e identificar una variedad de otros colores a partir de la cual construir un paleta armnica. Los cdigos hexadecimales para la paleta se muestran en la parte superior derecha esquina de la pgina.

Al elegir los colores restantes para mi paleta, el primer requisito que tengo es que Habr al menos dos colores que tienen suficiente contraste para ser utilizado como fondo y del texto colores. Tener un buen contraste entre el texto y los colores de fondo es esencial para diseo interactivo: sin ella, algunas personas pueden no ser capaces de leer su sitio. Una manera fcil de para confirmar que no hay suficiente contraste entre dos colores es conectar los valores RGB que en contraste de color Checker Jonathan Snook, que se ver en la figura 2.34.14 Al Elegir los colores restantes para mi paleta, imprimacin El Requisito Que tengo Que es Habra al Menos dos colores Que Tienen Suficiente Contraste Para Ser Utilizado Como Fondo y de texto del colores. Un buen receptor experimentado Contraste Entre El de texto y los colores de Fondo es Esencial prrafo Diseo Interactivo: sin Ella, personajes pueden no ALGUNAS servicios capaces de leer Su sitio. Una Manera Fcil de prrafo confirm Que No Hay Suficiente Contraste Entre dos colores es Conectar los Valores RGB Que en Contraste de color Checker Jonathan Snook, Que se Ver en la Figura 2.34.14 Aplicacin: el color del azulejo Volviendo a la tarea de dar con un diseo para el sitio Azulejos nuevos Florida Pas, ahora es el momento para aplicar el color a mi disposicin. Mi primer paso ser elegir un color de base de que puedo construir un esquema de color, y, finalmente, una paleta. Por lo general, esta decisin ser hecho para m. Muchas veces, el cliente va a decir algo como "hay que incorporar esta sombra de color rosa y ese color de verde. "Otras veces, puede ser dicho que el color dominante tiene que ser de color rojo. Pero incluso si usted no recibe la direccin de color especficas del cliente, su gama de colores puede tienen que trabajar en torno a un logotipo o una imagen de producto que tiene colores especficos dominante. Si eso es la situacin que estamos, lo mejor es tomar ese elemento-el grfico inspirado en la mano y hacer algo de ello. Basta con echar un vistazo a una rueda de color, y el uso de las constantes de color que tiene que construir un conjunto de colores basados en los esquemas de color que hablamos antes. En el caso de Azulejos de Pas de la Florida, sin embargo, la tarjeta de visita que mostr en la Figura 1.1 representa la grado de identidad de la empresa. Por lo tanto, el color de base que elegir probablemente se convierta en un parte de los esfuerzos de la compaa marca el futuro. No hay presin aqu! Tener una completa falta de color de entrada para empezar a puede ser casi tan difcil como tener una mala entrada, especialmente cuando no se sabe muy bien por dnde empezar. En este tipo de escenario, lo mejor es pensar en el pblico objetivo del cliente y trabajar hacia atrs para venir con un color que atraen a las personas. La mayor parte del trabajo de los Azulejos de Pas de la Florida es de baldosas de piedra de encargo y trabajos de instalacin de residencias de varios millones de dlares junto a la playa. A veces, la empresa se comunica directamente con los dueos de casa, pero por lo general propuesta solicita venir a travs de empresas de diseo interior. De todos modos, el pblico objetivo se compone de personas que buscan mejorar las casas junto a la playa, as que nuestras opciones de color debe ser indicativa de la vida junto a la playa. Incluso dentro de la Florida, sin embargo, este enfoque de la un tema de color es demasiado amplia. El concepto de vivir junto a la playa en Key West, por ejemplo, tiene una connotacin visual muy diferente que vivir junto a la playa de South Beach o Daytona. Viven junto a la playa en este particular lugar de la Florida tiene que ver con retirarse a lo grande. Piense en fro brisas marinas, manglares, playas privadas ... y casas muy, muy caro. Si usted est teniendo problemas para llegar a un color primario, piensa en los colores que se popular en la localidad de su cliente. Cuando pienso en esta combinacin de elementos, inmediatamente piensa en el color la temperatura. El calor del sol y la arena es balanceada por

la brisa salada del mar y la rodando las olas. Esta yuxtaposicin de temperatura de color pone inmediatamente en mi mente el modo de color complementario. Desde la rueda de color en s se divide claramente en caliente y los colores fros, casi cualquier combinacin de colores complementarios se proporcionar el equilibrio de temperaturas clidas y fras que estoy teniendo en cuenta. Por mi color base, voy a empezar con el color arena caliente. El complemento de "caliente arena" depende de cmo interpretar la color. Para m, la clida arena + = un color desaturado de color naranja como el que muestra en la figura 2.35. El complemento de la naranja es azul, pero a evitar que los colores de choque, el complemento no puede ser una muy saturado de color azul. Eleg un tono, ms que un tinte, por lo que habra una buena cantidad de contraste entre mis colores. Por supuesto, dos colores que no me van a llegar muy lejos, as que esto es slo el comienzo de mi paleta de colores web general del sitio. En lugar de obtener el valor hexadecimal de estos dos colores y en funcionamiento el generador de colores, Creo que voy a crear un tetrdica (o doble complementarias) esquema mediante la adicin de un segundo conjunto de colores complementarios. Cuando una lluvia de ideas sobre el significado de la vida junto a la playa hace un momento, mencion los rboles de mangle, as que voy a tirar en un color verde y exuberante manglar y el equilibrio con un complementario color rojo terroso, como el de Figura 2.36. Ahora tengo cuatro colores muy diferentes, por lo que no quieren introducir nuevos matices. Cualquier otra opcin que hacer para el sitio de ahora en adelante deben ser tonos y matices de mi paleta existente. Tenga en cuenta que los tonos y matices de los colores son blanco y negro. Definitivamente quiero usar blanco, por lo que es otra opcin del color hacia abajo. Yo tambin quiero un color de texto muy oscuro para poner sobre el blanco. Es fcil elegir slo negro y seguir adelante, pero me gusta usar un color gris oscuro en lugar de negro para el texto porque, si bien todava tiene el contraste necesario para hacer el texto fcil de leer, se ve un poco ms sofisticado que el negro y liso. Echa un vistazo a cmo mi paleta de colores pueden aparecer en la figura 2.37. Ahora que tengo mi paleta de colores elaborados, es hora de volver a escuchar que en escala de grises bloques diagrama de distribucin de nuevo y empezar a experimentar con la aplicacin del color. Por "experimentar", me refiero a llenar los bloques de colores para saber qu combinaciones funcionan y cules no. Me gusta empezar por llenar el fondo y el bloque de contencin de la concepcin, entonces el trabajo de mi forma de los colores en primer plano. Como los colores ms fros retroceden en lugar de la demanda la atencin de los ojos, trato de elegir un color fro para el bloque de fondo principal. En este caso, tengo verde y azul para elegir, as que voy a probar ambos. El azul se siente ms "playero", as que ir con l. Por mi bloque de contenido principal y rea de barra lateral, quiero usar los dos colores ms claros, ya que es donde aparecer el contenido. Elijo blanco para el rea de contenido principal, para hacer que se sienta fresco y limpio. Puedo guardar el color arena de la barra lateral, ya que esto ayudar a que el rea principal de contenido ms dominante. Para el texto de estos dos bloques, yo uso mi (casi) de color negro, como muestra la Figura 2.38. Ahora que he usado todo lo que no sea rojo y verde. Quiero usar el rojo con moderacin, ya que es el color ms intenso en mi paleta, as que decide aplicarlo como color de fondo para el encabezado de la barra lateral, y como el color de los enlaces seleccionados en mi navegacin. Yo probablemente tambin lo utilizan como un color de los enlaces en mi texto, pero ya llegaremos a eso ms adelante. Para crear un poco de juego complementarios, decido usar mi color verde de manglares como teln de fondo de mi bloque de identidad. Aunque este diseo

no est terminado ni de lejos, sin embargo, me parece que algunas imgenes de marcador de posicin temporal de mi rea de la foto de cabecera. Quiero hacer un par de fotos a cabo para tener una idea de cmo afectan los colores que he elegido, y esta combinacin parece aguantar bien con todos ellos. Hay que ir, nuestro diseo est empezando a parecerse a un sitio web. Las decisiones que tomo de aqu en adelante ayudar a dar a este cuerpo de diseo y carcter, pero son meros detalles, en comparacin con los sujetos de color y el diseo. Si ests trabajando en un proyecto propio que usted lo sigue a travs del libro, tomar una respiracin profunda y disfrutar del momento. Hemos recorrido un largo camino, y este es sin duda una base slida, sin embargo, tenemos muchas millas para viajes todava. Siguiente parada: la textura.