10 reglas de diseño web que puedes romper
A medida que el diseño web y el diseño en general han evolucionado, se han establecido reglas para garantizar diseños uniformes y utilizables.
Algunas de estas reglas se crearon simplemente porque los creadores de sitios web abusaron de ciertos principios sin tener en cuenta a sus usuarios.
Pero estas reglas no son impuestas por nadie y deberían romperse cuando sea necesario, especialmente cuando romperlas llevaría a un diseño deslumbrante.
En este artículo, presentamos 10 reglas que puede romper si se adapta a sus necesidades de diseño.
Regla n. ° 1: no mostrar la barra de desplazamiento horizontal
Un número significativo de ratones no tiene una rueda de mouse horizontal. Esto hace que sea incómodo desplazarse hacia la izquierda o hacia la derecha cuando el contenido de una página web se extiende más allá de los lados del navegador.
Puede ser molesto tener que llevar el cursor del mouse hasta la parte inferior de la ventana y arrastrar la barra de desplazamiento solo para ver una palabra o dos que se encuentran más allá del área visible de la página. Dicho esto, aquí hay algunos sitios bien diseñados que ponen la barra de desplazamiento a trabajar de manera efectiva.
Benek
Benek usa JavaScript para cambiar la dirección de desplazamiento de la rueda del mouse de vertical a horizontal. Cada elemento en la cartera de Benek está separado en su propia columna. El sitio tiene una sensación sorprendentemente fresca y fluye sin problemas.
Shoe Guru
Shoe Guru se sale con el desplazamiento horizontal porque aprovecha la forma en que la gente mira los zapatos. La gente mira la mayoría de los productos de arriba a abajo, pero los zapatos son diferentes. Los ojos de la gente generalmente se mueven a lo largo del zapato. Usando este hábito para su ventaja, Shoe Guru hace que el diseño de su sitio web fluya en la misma dirección, haciendo que el movimiento se sienta natural.
Stephane Tartelin
Stephane Tartelin utiliza la barra de desplazamiento horizontal para que su obra de arte se vea como si estuviera en una galería de arte. Aunque la rueda vertical del mouse no funciona como lo hace en los ejemplos anteriores, el efecto funciona sorprendentemente bien. Incluso podría argumentar que el efecto se vería disminuido si la rueda del mouse se redirige para desplazarse horizontalmente.
Terapia gráfica
Mientras Terapia gráfica no muestra una barra de desplazamiento horizontal en su página, aún permite el desplazamiento horizontal haciendo clic y arrastrando alrededor de la pantalla. La Teoría de gráficos utilizó la navegación horizontal porque todas sus imágenes tienen la misma altura pero no el mismo ancho. La navegación horizontal ayuda a que el sitio fluya sin problemas.
La forma horizontal
La forma horizontal es un escaparate de sitios web que usan desplazamiento horizontal. Los gráficos grungy son hermosos, y este sitio es único en lo que respecta a las galerías de CSS.
Regla # 2: Use un número mínimo de Caras de fuente
Demasiadas fuentes generalmente entran en conflicto entre sí y abruman al espectador. Cada fuente tiene una personalidad, y demasiadas personalidades pueden crear desorden.
Para utilizar efectivamente más que solo un par de fuentes, un diseño debe estar orientado al texto, y el resto del diseño debe ser relativamente silencioso. Estos son algunos ejemplos de sitios que usan este sentido de conflicto y desorden para involucrar al usuario.
Enlaces LA
Enlaces LA usa muchas fuentes en un diseño no lineal para crear una sensación de energía. La página es difícil de leer rápidamente pero atrae al usuario. También vale la pena señalar que ninguna de las fuentes es demasiado decorativa; cada palabra es legible, manteniendo el diseño nítido y limpio.
Geo Elements Design Studio
Usar una variedad de fuentes generalmente transmite una sensación de energía y caos, pero Geo Elements Design Studio El sitio web es muy abierto y limpio. Cada fuente tiene su propio espacio para que el espectador no lo asocie con otra fuente. La imagen del cielo en el fondo ayuda a reforzar la sensación de apertura.
Richard Stelmach
A diferencia del último ejemplo, Richard Stelmach empuja sus diferentes fuentes muy juntas. El diseño funciona porque solo una fuente no se ve dibujada a mano, y las otras dos funcionan bien con la ilustración. Las fuentes dibujadas a mano generalmente funcionan bien juntas, incluso cuando hay muchas caras de fuente diferentes.
Satsu
Satsu parece tener muchas fuentes diferentes, pero en realidad solo tiene tres (sin incluir el elemento del portafolio de Sports Council). Al espaciar todo cuidadosamente, Satsu asocia ciertas líneas de texto entre sí, aunque el texto puede estar en diferentes fuentes.
El título del logotipo está en una fuente, y los dos subtítulos tienen cada uno su propia fuente, pero el espectador agrupa de forma natural estos tres elementos de texto. Satsu puede crear energía sin abrumar la página con personalidades.
Regla # 3: no use demasiados colores
El miedo a ir demasiado lejos con un diseño es lo que separa a los profesionales de los novatos y los novatos de los olvidadizos. Los ajenos intentan hacer que sus diseños sean lo más extremos posible, con las palabras en llamas, el texto parpadeante y tantos colores como sea posible.
Los novatos quieren mantener sus diseños sutiles y fáciles a la vista, pero al final sus diseños a veces pueden parecer sin vida. Los siguientes diseños agradables a la vista son de algunos profesionales verdaderos que están empujando los límites.
Matt Mullenweg
Matt Mullenweg's el diseño de hermosos colores parece una pintura de acuarela (el sitio se ha actualizado desde que se escribió este artículo). Todos los colores en el fondo captarían la atención de todos.
Generalmente, los buenos diseños con una tonelada de colores tendrán estos colores en el fondo, con una paleta más simple en el frente. Leer texto es muy difícil cuando ocurren demasiadas cosas.
Travic Isaacs
Travis Isaacs el diseño tiene un gradiente vertical colorido en el fondo que hace que el diseño parezca colorido en todo. Este sitio web tiene un color rosa brillante como su color de enlace, que es una gran opción para los diseñadores que desean crear un efecto colorido.
James De Angelis
James De Angelis El sitio web muestra que el texto puede ser colorido sin parecer un rookie. El diseño es muy sobrio, y el eslogan se encuentra ciertamente en el centro del escenario.
Regla n. ° 4: haga que la meta de su sitio sea obvia
Algo que realmente se agolpa en los oídos de los jóvenes diseñadores es que un diseño debería decir instantáneamente a los espectadores lo que están mirando antes de leer cualquier texto.
El reconocimiento de marca es importante para las grandes corporaciones, pero a veces los chicos más pequeños necesitan ser un poco más listos para llamar la atención del espectador. Retener información puede intrigar al espectador y "provocar" a las personas para que quieran aprender más.
Aplicar esta técnica al diseño web puede aumentar en gran medida el tiempo que los usuarios permanecen en su sitio.
Cetrotrees
En la mayoría de las carteras actuales, el profesional independiente o la compañía generalmente se presentan y explican su trabajo. Cerotreees en su lugar coloca algunos enlaces vagamente etiquetados a la izquierda y muestras de su trabajo a la derecha, pero nada explica la idea o la persona detrás de él.
El aire de misterio que rodea el sitio atrae al usuario a quedarse.
The Last Mixtape
The Last Mixtape es otro portafolio que muestra su trabajo y nada más. Tales diseños exudan una sensación de extrema confianza. Nunca intentan venderse a sí mismos; solo esperan que el usuario se sorprenda y venga a pedir un contrato.
Peter Pearson
Usar una pantalla de bienvenida es una buena manera de desacelerar el proceso de pensamiento del usuario y de inspirarlo a profundizar más. El objetivo de la página de bienvenida suele ser explicar el sitio rápidamente con fotos o un poco de texto.
Pero en Peter Pearson caso, su objetivo es evocar un sentimiento. El gran cielo y el efecto de texto salpicado hacen un gran trabajo evocando curiosidad porque estas cosas no suelen aparecer juntas. Este sitio también hace un gran trabajo al continuar la emoción creada por la página de bienvenida en el contenido real.
El movimiento de desplazamiento lateral y las líneas animadas que siguen al usuario son realmente efectivos.
Piepmatzel
Una buena forma de evitar la barrera del idioma es no usar palabras. Piepmatzel es una galería de CSS, y las personas que han visto una galería de CSS antes probablemente la reconocerán como una de inmediato.
Aquellos que no lo han hecho pueden estar lo suficientemente intrigados como para dar un clic a algunas de las miniaturas con la esperanza de descubrir el patrón. La pequeña cantidad de texto en la parte inferior de la página ayuda con la clasificación y es superfluo.
Regla # 5: la navegación debería ser fácil de entender
La navegación no debe ser el cuello de botella de un sitio. Los usuarios deberían poder encontrar lo que quieren rápidamente. A veces, sin embargo, la navegación intuitiva pero atractiva puede ayudar al usuario a sentirse conectado con el sitio y lo que está promoviendo.
Alvin Tang
Como se mencionó en la sección anterior, se transmite un aire de confianza cuando una cartera no se explica por sí misma. Este es el caso en Alvin Tang portafolio de fotografía. Cuando llega por primera vez al sitio, el usuario no reconoce de inmediato las palabras que ven como enlaces.
Esta incertidumbre debería incitarlos a hurgar un poco. Mover el mouse sobre una palabra revela que en verdad es un enlace, y al hacer clic en él, se carga una hermosa foto. La foto atraerá a los usuarios a continuar navegando.
Para ver más fotos, los usuarios deben hacer clic en el botón "Atrás" en su navegador (algo que la mayoría de la gente entiende que hacer) y luego hacer clic en otro enlace. No hay asidero en el diseño, y funciona extremadamente bien. Este no es un "diseño magnífico" convencionalmente, pero ofrece exactamente lo que necesita.
Kasulo
Kasulo es la navegación no es muy difícil de descifrar, pero es posible que el usuario promedio no sepa exactamente qué hacer al llegar al sitio. Después del primer clic, sin embargo, todo se vuelve obvio.
El usuario navega por las piezas del portafolio en estilo tridimensional, y los últimos artículos aparecen más cerca del comienzo. Usar la rueda del mouse es aún más divertido.
Marcio Kogan
Marcio Kogan's sitio es otro ejemplo de gran navegación que no es inmediatamente obvio. La instrucción "Arrastrarme" es difícil de resistir, y una vez que el usuario hace eso, están en camino de navegar por los artículos de la cartera. Las vistas previas del mouse son un pequeño detalle pero realmente impresionante.
Ceranco
Si un cliente pidiera a un diseñador que creara su sitio en 3-D, como un videojuego de disparos en primera persona, la mayoría de los diseñadores se reirían silenciosamente, tomarían una respiración profunda y luego explicarían lentamente por qué sería una mala idea. .
Mientras que el sitio web para Ceranco no es exactamente un juego de disparos en 3-D, podría confundirse fácilmente con algún tipo de juego de computadora independiente. Los sitios como este son excelentes para captar usuarios. Si bien el largo tiempo de carga y la pobre optimización del motor de búsqueda hacen que este sea menos que ideal para la mayoría de los proyectos, definitivamente vale la pena pensarlo dos veces.
Regla # 6: Usa diferentes colores para el texto y el fondo
Esta regla quizás no está escrita en todas partes, pero muchos novatos tienen tanto miedo de que el texto no se pueda leer que no consideran utilizar el mismo color base para el fondo y la fuente en sí. Puedes seguir algunas técnicas simples para hacer que los colores similares funcionen.
Linksys
los Linksys El sitio está ordenado porque tiene un azul para todos sus enlaces, aunque el color de fondo sea de varios tonos de azul. Si bien es un riesgo y tal vez no la mejor decisión de color, funciona.
Brad Colbow
Brad Colbow's el diseño es similar al de Linksys debido al texto azul sobre fondo azul. Azul sobre azul es difícil de lograr muy bien, especialmente con tantos azules diferentes en todo el sitio.
Set de poder
Hasta ahora, en esta sección solo hemos visto sitios web azules, porque el texto azul es más difícil de leer para el ojo humano, y el tipo azul legible siempre es impresionante. Si un efecto de texto funciona en azul, lo más probable es que funcione en cualquier color.
Set de poder utiliza un estilo de tipografía para su fuente para crear un efecto tridimensional que separa efectivamente el texto del fondo.
Artista en diseño
Artista en diseño no solo tiene texto verde sobre fondo verde y texto amarillo / beige sobre fondo amarillo, sino que tiene texto directamente sobre una foto.
Si bien algunas letras individuales pueden ser difíciles de leer, las palabras en su totalidad siguen siendo legibles. Este tipo de efecto casi siempre debe ser el centro de atención en un diseño.
Horacio Bella
Horacio Bella usa otro efecto 3-D en su cartera. En este caso, las letras parecen salir en lugar de estar abolladas hacia adentro. Sin este efecto, la legibilidad se habría reducido en gran medida. Otro buen efecto que se usa aquí es el apretado kerning de letras, que mejora aún más la legibilidad.
Regla # 7: No coloque la animación en el camino de su contenido
En serio, no muestres pequeños anuncios Flash justo donde el usuario está leyendo. Lo mismo ocurre con los cuadros de encuesta que aparecen cada vez que el usuario está en el medio de una oración. Los usuarios no disfrutan de distraerse cuando están a la mitad de una oración. A no ser que…
Es muy difícil no dejarse cautivar por la pequeña araña en ABA El sitio de. El diseño está limpio, y aunque la araña es una distracción, está bien. Hasta ahora, este sitio creo que es la única excepción a la regla.
Regla n. ° 8: apegarse a las fuentes seguras para la Web
A pesar de que las técnicas de reemplazo de cara de fuente todavía son jóvenes, ya están causando un gran revuelo. sIFR fue el primero y recientemente Cufón y Typefasce.js Haber emergido.
Diseñorama
Sobre el Diseñorama sitio web, el texto rojo "reducido" es seleccionable. Una desventaja es que si el sitio no se carga al instante, el usuario verá la fuente simple original brevemente.
Otro inconveniente es que si el usuario tiene JavaScript o Flash deshabilitados, solo verán la fuente original. Considerado todo, sigue siendo genial. Esperemos que sea una vista previa de lo que vendrá en los próximos años.
Cactuslab
Cactuslab también usa sIFR para los sub-encabezados azules (como "Trabajo de invierno"). Aunque sIFR es la más complicada de las técnicas de reemplazo de fuentes, el texto se puede copiar y pegar, lo que le da una gran ventaja sobre las otras dos técnicas.
Regla n. ° 9: no tener una página de bienvenida / aterrizaje
Muchos diseñadores han tenido la misma discusión con sus clientes sobre por qué una página de bienvenida no es una buena idea. Google tiende a clasificar esas páginas más abajo y ralentiza al usuario para que obtenga el contenido que busca. Pero pueden ser increíblemente hermosos e inspiradores si se hacen bien.
Postproducción de brillo
El propósito de la muestra de cartera que aparece en la página de bienvenida de Postproducción de brillo El sitio web es para provocar una reacción emocional del usuario.
En cada visita, se carga una foto al azar de la cartera. Al hacer clic en la foto, se amplía y se coloca en su lugar entre las otras piezas del portafolio en el sitio. El efecto de escala y movimiento proporciona continuidad y ayuda a trasladar la emoción del usuario al resto del trabajo de la empresa.
Issa London
Cuando un sitio está completamente hecho en Flash, la barra de carga puede servir como una página de bienvenida. Cuando un usuario ve una barra de carga, cerrarán la página e irán a otro lugar o cambiarán a otra pestaña y buscarán en otro lado mientras esperan.
Una vez que se carga la página, es mejor esperar a que el usuario regrese antes de comenzar. En Issa London En este caso, la puerta es una metáfora perfecta para decir que el sitio está listo y que el usuario puede ingresar.
Cuando el usuario hace clic en la puerta, la puerta se abre y aparecen varios modelos ilustrados. Usar la puerta en la página de presentación es una gran idea de diseño porque al ingresar, el usuario se siente comprometido.
Regla # 10: No use Tablas
Cualquier diseñador de páginas web que use tablas en sus diseños será llamado rookie al instante por diseñadores experimentados. Las tablas no muestran lo mismo en todos los navegadores, y pueden hacer que el código fuente parezca desordenado, pero al menos sabrá lo que obtendrá con ellos. Aquí hay algunos ejemplos de diseños que incorporan tablas.
Esta mesa es un poco difícil de ver, pero está metida allí entre las dos sillas. Es una pequeña y agradable mesa auxiliar, pero lamentablemente no contribuye mucho al diseño de este sitio.
Las tablas están en el fondo de este diseño en Trabaja en Play , pero mantienen las laptops de los trabajadores y otros artículos al alcance de la mano. Sin estas tablas, la habitación se sentiría mucho más vacía, y la foto de fondo no tendría el mismo efecto.
Aunque este diseño presenta sillas en su mayoría, aparece una pequeña mesa en la esquina superior derecha de la miniatura. Parece que una olla está sentada sobre ella.
En cuanto a diseños con tablas, este es uno de los mejores. Con dos tablas presentadas en esta animación Flash, el diseño les da mucha atención. Este sitio debe estar en la lista de grandes diseños de diseñadores que usan tablas.
¡Romper las reglas!
Romper las reglas está bien cuando un diseño lo requiere. Muchas de las opciones de diseño revisadas aquí no serán consideradas por el diseñador promedio. Esto es lo que separa a los grandes diseñadores de los medios.
Aquellos que son lo suficientemente valientes como para ir en contra de lo que les han enseñado siempre se destacan.
Escrito exclusivamente para WDD bt Eli Penner. Dirige su propio sitio web en SleepyHero.com
¿Rompes alguna regla en tus diseños web? ¿Por qué o por qué no? Por favor comparta sus puntos de vista con nosotros ...