4 Principios para el Buen Diseño en sitios web

Este post expondrá esos cuatro principios, asociados al diseño Web. Teniendo estas teorías del diseño frescas y presentes, se mejorara en la usabilidad, practicidad y estética del diseño.

1. Contraste

El gran contraste puede dejar una primera impresión muy buena en el usuario, prosumer, individuo (como quieran decirle). Sin un punto focal, el espectador se pierde generalmente en un mar de elementos y con la tipografía igual... el usuario lo asocia como clasificados (gracias a google ad-sense).

Es el trabajo del diseñador crear los elementos visuales con significado que dirijan la experiencia del usuario. Ok, se puede alcanzar gran contraste en los sitios eligiendo imágenes, colores y fuentes sabiamente... HOW?

Contrastar con imágenes; es a menudo muy eficaz con una ilustración grande al lado de elementos más pequeños. Aquí les enseño a lo que me refiero:

INVOICE MACHINE

Este sitio utiliza una imagen grande para traer en la atención del lector. También la naturaleza monocromática del sitio, permite el uso limitado del azul a desempeñar un papel más grande.

INSTABOX

Mirando de reojo este sitio. ¿Qué es lo que ven primero? Es más que probable... la estrella en la caja, ¿no?. Justo como Invoice Machine, han creado un punto focal usando una imagen grande y un color limitado.

El contraste con los colores; es otra manera de crear contraste eficaz dentro de un Website. Puede ser creado usando un color diferente en los headers y en el copy del texto, así como dentro de los colores de una imagen o de una ilustración.

FATBURGR

Este sitio es un ejemplo fantástico de casi todos los principios del diseño. Para la prueba del contraste de color basta ver el amarillo grande en la tipografía contra la copia gris claro más pequeña. La alineación, el contraste de la imagen, la repetición y la proximidad son todas fuertes en todo el sitio.

I LOVE TYPOGRAPHY

Ninguna sorpresa debe ser para nosotros que un sitio con pura (no es despectivo, no me refiero en el tono de únicamente, es en el sentido de origen) tipografía, logre este site el equilibrio y peso en cada elemento. Excelente elección del verde y la fuente.

Contraste Tipográfico; si estás intentando crear contraste no debes de utilizar dos fuentes medianamente diferentes, deben ser realmente distintas. La semejanza de las fuentes tiende a crear confusión (en cualquier diseño) y puede blurear (hacerlo medio plain) el diseño. Sin embargo, puede ser muy eficaz hacer los tamaños de las fuente bien grandes, o mezclar la versión más ligera de la fuente conjuntamente con la más bold. Además se puede intentar por ejemplo una fuente sanserif con una tipo manuscrita, el resultado es bien diferente.

FIXIE CONSULTING

Me encanta la tipografía y los colores en este sitio. Miren la fuerza todas las variaciones del tamaño y del movimiento en su slogan (que cosa más brillante). También esta increíble la mancha del fondo, y el uso limitado del azul. WOW!

2. La Repetición

Así como se da la repetición en diseño de impresión y mucho más común en diseño de telas, puede ser súper efectivo en websites. Repitiendo los elementos de diseño se generara unidad y equilibrio, logrando con esto branding. En diseño Web una gran manera de alcanzar esto es repitiendo elementos en el header y al pie de la pagina a diseñar.

TEN24 MEDIA

Estos cuates utilizan una ilustración creativa de pasto en el header y en la parte de abajo.

SILVERBACK

Si, si, si. Lo se. Hubiera podido mostrarlo en la sección de contrastes, pero trabaja del mismo modo aquí. Chequen el uso de los plátanos como bullets, y la ilustración de ramas de bosque en el header. Claramente se ve la pasión por el detalle, la precisión y claro repetición.

3. La Alineación

Desempeña un papel fundamental en llevar TU diseño del sitio de parecer de aficionado a verse profesional. Muchos diseñadores comienzan al revés primero la ilustración y al final lo hacen encajar (o ni siquiera, se lo saltan), si revisas cualquier sitio usando una rejilla, muchos estáran completamente desalineados.

BLACK ESTATE VINEYARD

La alineación da constancia y unidad en el site. El contenido principal se deja justificado y rasante en su columna, no obstante algunos de los títulos más grandes rompen la regla y cambian de puesto en el sidebar izquierdo. También hacen un buen trabajo con cantidades abundantes de espacio blanco y de fuentes clasificadas que ponen el contraste.

4. La proximidad

Esto tiene que ver con hacer grupos de las cosas que son parecidas y separar las que no lo son (conjuntos en primaria). Puedes realmente arruinar la experiencia del usuario, si agrupas todo en un bloque de texto. Eso es porqué se vuelve muy importante utilizar tags o menús para el header y el espacio apropiado.

ENVATO

Este sitio hace un trabajo preciso organizando el contenido en tres categorías importantes. Tienen el aire suficiente y la claridad entre ellos.

Es increíble cuanto los diseños mejoran tomando como base estos 4 principios, hay veces que la vida profesional no permite practicar las bases o las borra debido al famoso URGE!!!, de todos nuestros clientes. Claro hay quienes las traen de cajón e innatas por eso diseñan mejor, pero esta disciplina de diseñar nos obliga a actualizarnos e investigar para mejorar, anteponiendo los principios funcionales a los estéticos.

Sin duda uno de mis libros preferidos del diseño es, Taller del diseño de Williams Robin (y no al reves). Tiene teorías prácticas del diseño y casos de éxito impresionantes.

El menciona estos cuatro principios: contraste, repetición, alineación, y proximidad.