9 principios esenciales para un buen Diseño Web

Diseño web puede ser engañosamente difícil, ya que implica lograr un diseño que es a la vez útil y agradable, ofrece información y construye marca, es técnicamente sólida y coherente visualmente.

Añada a esto el hecho de que muchos diseñadores web (yo incluido) son autodidactas, que es el diseño web novela todavía lo suficiente como para ser sólo una parte de materia en muchas instituciones de diseño, y que el medio cambia con tanta frecuencia como la tecnología subyacente hace.

Así que hoy he creado mis 9 principios para un buen diseño web. Estos son sólo mis opiniones y he tratado de enlace fuera a más lectura sobre temas por lo que no sólo escuchar mi voz. Obviamente, tengo muchas renuncias: las normas están hechas para ser rotas, los diferentes tipos de trabajo de diseño diferente, y no siempre estar a la altura de mi propio consejo. Así que por favor lea estas en que están destinados - sólo algunas observaciones estoy compartiendo ...

Precedencia (rectores la del ojo)

Buen diseño de páginas web, tal vez incluso más que otro tipo de diseño, se trata de información. Una de las mayores herramientas en su arsenal de hacer esto es prioridad. Cuando navegue en un buen diseño, el usuario debe ser conducido por la pantalla por el diseñador. Hago un llamamiento esta prioridad, y es acerca de cuánto peso visual de diferentes partes de su diseño.

Un ejemplo sencillo de precedencia es que en la mayoría de los sitios, lo primero que ve es el logotipo. Esto es a menudo porque es grande y fijarse en lo que se ha demostrado en estudios para el primer lugar se buscan las personas (la parte superior izquierda). Esta es una buena cosa ya que usted probablemente querrá que un usuario de inmediato saber qué sitio que está viendo.

Pero precedencia debe ir mucho más allá. Usted debe dirigir el usuario a través de los ojos de una secuencia de pasos. Por ejemplo, usted desea que su usuario puede ir de logotipo / marca de una declaración de posición primaria, junto a una imagen de garra (para dar el sitio de personalidad) y, a continuación, el cuerpo principal de texto, con la navegación y una barra lateral a una posición secundaria en la secuencia.

Lo que su usuario debería estar buscando a depende de usted, el diseñador de Web, para averiguar.

Para lograr precedencia que tienen muchas herramientas a su disposición:

Posición - Cuando algo está en una página influye claramente en qué orden lo ve el usuario.
Color - Uso de negrita y sutiles colores es una forma sencilla de decirle a su usuario donde buscar.
Contraste - Ser diferentes marcas están las cosas, mientras que el mismo hace secundaria.
Tamaño - Grande tiene precedencia sobre poco (a no ser que todo es grande, en cuyo caso podría estar poco a cabo gracias a contraste)
Elementos de diseño - si hay una gigantesca flecha que señala hacia algo, supongo que el usuario se verá?

Espaciamiento
Cuando se empieza se quiere diseñar para llenar cada espacio con cosas. Espacio vacío parece un desperdicio. De hecho, lo opuesto es verdad.

Espaciamiento de las cosas más claras. En diseño web hay tres aspectos del espacio que usted debe considerar:

Espaciado de línea
Al establecer el texto, el espacio entre las líneas de lectura de cómo afecta directamente a lo que parece. Demasiado poco espacio hace que sea fácil para el ojo a extenderse de una línea a otra, demasiado espacio significa que cuando haya terminado de una línea de texto y pasar a la siguiente el ojo puede perderse. Por lo que necesita para encontrar un término medio. Puede controlar el espaciamiento de línea en el CSS con el "line-height 'selector. En general creo que el valor por defecto suele ser demasiado poco espaciamiento. Espaciado de línea es técnicamente llamado principal (que se pronuncia ledding), que se deriva del proceso que utilizan las impresoras a utilizar para separar líneas de texto en Ye Olde dias - colocando barras de plomo entre las líneas.

Relleno
En términos generales el texto nunca debe tocar otros elementos. Imágenes, por ejemplo, no se debe tocar el texto, ni debe fronteras o cuadros. Relleno es el espacio entre los elementos y el texto. La simple regla aquí es que siempre debe tener espacio allí. Hay excepciones, por supuesto, en particular, si el texto es una especie de partida / gráfica o su nombre es David Carson :-) Pero como regla general, poniendo el espacio entre el texto y el resto del mundo hace que sea mucho más legible y agradable .

Espacio en blanco
En primer lugar, los espacios en blanco no tiene por qué ser blanco. El término se refiere simplemente al espacio vacío de una página (o en el espacio como es a veces llamado). Espacio en blanco se utiliza para dar equilibrio, proporción y contraste a una página. Una gran cantidad de espacio en blanco tiende a hacer que las cosas parecen más elegante y lujoso, así que por ejemplo si vas a un sitio caro arquitecto, usted casi siempre aparece un montón de espacio. Si quieres aprender a usar el blanco de manera eficaz, a través de una revista y ver cómo los anuncios tienen establecidos. Anuncios para grandes marcas de relojes y los automóviles y similares tienden a tener un montón de espacio vacío utilizado como un elemento de diseño.

Siguientes pasos:

Navegación
Una de las experiencias más frustrantes que puede tener en un sitio Web es no poder averiguar a dónde ir o dónde se encuentre. Me gustaría pensar que para la mayoría de los diseñadores de web, la navegación es un concepto que hemos conseguido dominar, pero yo todavía encontrar algunos ejemplos muy mal allí. Hay dos aspectos de la navegación a tener en cuenta:

Navegación - ¿Dónde puede ir?
Hay algunas normas de sentido común que recordar aquí. Botones para moverse por un sitio debe ser fácil de encontrar - en la parte superior de la página y fácil de identificar. Que debe ser similar a los botones de navegación y estar bien descritos. El texto de un botón debe ser bastante claro en cuanto a dónde es usted tomando. Aparte de el sentido común, también es importante hacer que la navegación sea utilizable. Por ejemplo, si usted tiene un sub-menú "rollover", asegurando que una persona puede llegar a la sub-elementos de menú sin perder la renovación es importante. Del mismo modo cambiar el color o la imagen de renovación es una excelente información para el usuario.

Orientación - ¿Dónde estás ahora?
Hay muchas maneras en que puede orientar a un usuario por lo que no hay excusa para no. En pequeños sitios, podría ser sólo una cuestión de una gran partida o un 'abajo' de la versión en el botón correspondiente en el menú. En un sitio más grande, puede hacer uso de la miga de pan senderos, subtítulos y un mapa del sitio para el verdaderamente perdida.

Siguientes pasos:
SmashingMagazine tiene una selección de la navegación basada en CSS estilos que son agradables para pasar, Lista Además también tiene un buen artículo sobre la orientación denominado ¿Dónde estoy?

Diseño para la creación de
La vida se ha hecho mucho más fácil la transición desde la web a los diseñadores de diseños CSS, pero incluso ahora sigue siendo importante para pensar en cómo va a construir un sitio cuando está todavía en Photoshop. Considere la posibilidad de cosas como:

¿Puede realmente hacer?
Puede que tenga recogido una fuente increíble para su cuerpo ejemplar, pero es en realidad un tipo de letra estándar de HTML? . Usted podría tener un diseño que se ve hermoso, pero es 1100px de ancho y se traducirá en un desplazador horizontal para la mayoría de los usuarios. Es importante saber lo que puede y no se puede hacer, por lo que creo que todos los diseñadores web también deben aprovechar los lugares, por lo menos a veces.
¿Qué sucede cuando una pantalla es el tamaño?
¿Es necesario repetir los fondos? ¿Cómo funcionan? Es el diseño centrado o la alineación a la izquierda?

¿Está usted haciendo todo lo que es técnicamente difícil?

Posicionamiento con CSS, incluso, algunas cosas como alineación vertical todavía están un poco doloroso y, a veces, es mejor evitar.
Podría pequeños cambios en su diseño de gran simplificar cómo construirlo?
A veces se desplazan alrededor de un objeto en un diseño puede hacer una gran diferencia en cómo se han de su código CSS más tarde. En particular, cuando los elementos de un diseño de cruz sobre la otra, se añade un poco de complejidad a la construcción. Por lo tanto, si su diseño, por ejemplo, tres elementos y cada uno de los elementos es completamente separados unos de otros, sería muy fácil de construir. Por otra parte, si los tres se solapan unos a otros, podría ser fácil, pero será probablemente un poco más complicado. Usted debe encontrar un equilibrio entre lo que se ve bien y los pequeños cambios que pueden simplificar su construcción.
Para los grandes sitios, en particular, se puede simplificar las cosas?

Hubo un tiempo en que he usado para hacer botones de imagen para mis sitios. Por lo tanto, si existe un botón de descarga, por ejemplo, me gustaría hacer un poco de descargar la imagen. En el último año o así, he cambiado a utilizar CSS para hacer mis botones y nunca han vuelto a mirar atrás. Claro, que significa mi botones no siempre cuentan con la flexibilidad que podría desear, pero el ahorro en el tiempo de no tener que hacer decenas de pequeño botón imágenes son enormes.


Tipografía

Texto es el elemento más común del diseño, así que no es de extrañar que una gran cantidad de pensamiento se le ha dedicado. Es importante tener en cuenta cosas como:

Las opciones de fuente - Diferentes tipos de fuentes dicen cosas diferentes acerca de un diseño. . Algunos mirada moderna, algunos mirada retro. Asegúrese de que está utilizando la herramienta correcta para el trabajo.

Tamaños de fuente - Hace años era la moda de tener realmente pequeño texto. Afortunadamente, en estos días la gente ha comenzado a darse cuenta de que el texto está destinado a ser leído, no sólo a mirar. Asegúrese de que su texto tamaños son compatibles, lo suficientemente grandes como para ser leído, y proporciones a fin de que las partidas y sub-partidas destacan adecuadamente.

Espaciado - Como se ha señalado anteriormente, el espaciamiento entre líneas y lejos de otros objetos es importante tener en cuenta. Usted también debe pensar en el espaciamiento entre las letras, aunque en la Web es de menos importancia, ya que no tienes que controlar mucho.

Longitud de la línea - No hay ninguna regla inamovible, pero en general sus líneas de texto no debe ser demasiado largo. Cuanto más tiempo estén, más difícil van a leer. Pequeñas columnas de texto de trabajo mucho mejor (pensar acerca de cómo un periódico establece el texto).
Color - Uno de mis peores hábitos está haciendo bajo contraste texto. . Se ve bien, pero no lee tan bien, por desgracia. Sin embargo, me parece que hacerlo con cada diseño de sitios Web que he hecho, tsk tsk tsk.

Párrafos - Antes de comenzar el diseño, me encantó para justificar el texto en todo. Es agradable para los bordes de cada lado de mi párrafos. Por desgracia, justificada texto tiende a crear extrañas lagunas entre las palabras que se han auto-espaciados. Esto no es agradable para el ojo al leer, por lo que se adhieren a la alineación a la izquierda a menos que le sucede que tiene una magia cuerpo de texto que pasa al espacio a cabo perfectamente.

saber dentro de la usabilidad, y su propio sitio es simple y fácil de usar.

Usabilidad

Diseño web no sólo se trata de cuadros bonitos. Con tanta información y la interacción que se efectúa en un sitio Web, es importante que usted, el diseñador, para proporcionar todo. Esto significa que su sitio Web de diseño utilizable.

Ya hemos discutido algunos aspectos de la usabilidad - navegación, prioridad, y el texto. Aquí están tres más importantes:

Adhiriéndose a las normas

Hay ciertas cosas que la gente espera, y no darles causa confusión. Por ejemplo, si un texto ha subrayado, que se espera que sea un enlace. Claro, puede romper algunos convenios, pero la mayor parte de su sitio web debe hacer exactamente lo que la gente espera que haga!
Piense en lo que los usuarios que realmente hacen
De prototipos es una herramienta utilizada en el diseño hecho a "prueba" de un diseño. Esto se hace porque a menudo cuando usted realmente utilizar un diseño, usted nota cosas pequeñas que hacen una gran diferencia. ALA había un artículo hace un tiempo llamado Nunca Use una advertencia cuando media Deshacer, que es un excelente ejemplo de un pequeño diseño de la interfaz de decisión que puede hacer la vida para aspirar a un usuario.

Piense en las tareas de usuario
Cuando un usuario entra a su sitio lo que realmente están tratando de hacer?.Lista de los diferentes tipos de tareas que la gente pueda hacer en un sitio, su forma de alcanzarlos, y cómo usted desea hacer por ellos. Esto puede significar tener realmente las tareas comunes en tu página principal (por ejemplo, "empezar a comprar", "aprender sobre lo que hacemos", etc) o puede significar algo así como garantizar que tengan un cuadro de búsqueda siempre de fácil acceso. Al final del día, el diseño web es una herramienta para las personas a utilizar, y la gente no les gusta usar herramientas molesto!

Siguientes pasos:
AListApart tiene un montón de artículos sobre la usabilidad web.

. Eléctrica pulpa logra ver bruto, pero si se mira de cerca te das cuenta hay una empresa de la red y todas las cosas realmente se alinean.

Alineación

Mantener las cosas alineadas es tan importante en el diseño web como en el diseño de impresión. Eso no quiere decir que todo debe ser en línea recta, sino que debe ir a través de y tratar de mantener las cosas constantemente colocado en una página. Alineación de su diseño hace más digerible y ordenado, así como lo que parece más pulido.

También puede basar sus diseños en una cuadrícula. Debo admitir que no lo hace conscientemente - aunque, evidentemente, un sitio como PSDTUTS, de hecho, tienen un compromiso muy firme estructura de la red. . Este año he visto muy bien unos pocos artículos sobre la cuadrícula de diseño incluyendo SmashingMagazine de Diseño de la red con el Método basado en una lista y además de pensar fuera de la cuadrícula. De hecho, si estás interesado en el diseño de red, debería pagar una visita a el acertadamente llamado DesignByGrid.com el hogar de todas las cosas griddy.

El sitio de ExpressionEngine es el alma de la claridad. Todo es fuerte y limpio.

Claridad (Nitidez)

Mantener su diseño fresco y fuerte es super importante en diseño web. Y cuando se trata de la claridad, todo se trata de los píxeles.

En tu CSS, todo será perfecto píxeles de manera que no hay nada de que preocuparse, pero en Photoshop no lo es. Para lograr un fuerte diseño usted tiene que:

Mantenga forma a los bordes se quebró píxeles. Esto podría implicar manualmente la limpieza de formas, líneas, cajas y si está en la creación de Photoshop.
Asegúrese de que cualquier texto se crea utilizando la configuración de anti-aliasing.
Garantizar que el contraste es alto a fin de que las fronteras están claramente definidas.
Haciendo hincapié en el exceso de fronteras sólo ligeramente a exagerar el contraste.

Veerle hace un gran trabajo de mantener incluso los más pequeños detalles coherentes en todos los ámbitos.

Coherencia

Coherencia significa hacer todo partido. Denominación tamaños, opciones de fuentes, para colorear, los estilos de botón, los espacios, elementos de diseño, los estilos de ilustración, fotografía opciones, etc Todo debería ser el tema para hacer su diseño coherente entre las páginas y en la misma página.

Mantener su diseño es coherente acerca de ser profesional. Incoherencias en un diseño son como faltas de ortografía en un ensayo. Sólo la percepción de menor calidad. Sea cual sea su diseño se parece, de mantenimiento de la coherencia que siempre que una muesca. Even if it's a bad design, at least make it a consistent, bad design. Incluso si se trata de un mal diseño, por lo menos lo convierten en un coherente, mal diseño.

La forma más sencilla de mantener la coherencia es hacer pronta adopción de decisiones y atenerse a ellos. Con un sitio muy grande, sin embargo, las cosas pueden cambiar en el proceso de diseño. Cuando me diseñado FlashDen, por ejemplo, el proceso toma meses, y al final algunas de mis ideas para botones y las imágenes ha cambiado, así que tuve que volver atrás y revisar las páginas anteriores para que coincida con las más tarde exactamente.

Tener un buen conjunto de hojas de estilo CSS también puede ir un largo camino para hacer un diseño. . Trate de definir etiquetas como núcleo <h1> y <p> de tal manera que los valores predeterminados para hacer su partido y evitar tener que recordar nombres específicos de la clase todo el tiempo.