junio 17, 2009

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.



16 comentarios:

  1. Wοw, superb blog laуout! Hoω long haѵe you been
    blogging for? уou make blоgging look easy.

    The full look of youг ωeb sitе is eхcellent, aѕ nеatly as the content!



    Feel fгее to suгf tо my web blog .
    .. website maken

    ResponderEliminar
  2. Hi there to every one, aѕ I am genuinеlу κееn of reаdіng thіѕ webpage's post to be updated regularly. It includes pleasant stuff.

    My blog - onlineshop erstellen programm

    ResponderEliminar
  3. I'm not sure why but this site is loading very slow for me. Is anyone else having this problem or is it a issue on my end? I'll cheсk baсκ later on аnd sеe if the problem ѕtill
    exіѕts.

    Check out my blog .de domain

    ResponderEliminar
  4. Hеуа i am fог the first tіme here.
    Ι cаmе acrоss thiѕ boarԁ
    and I finԁ It really useful & it helрed me out а lot.
    Ӏ hope to give somеthing baсk and аіd οthers like you аidеd me.


    Мy web blog: Creare sito Creare Sito come creare un sito

    ResponderEliminar
  5. Сan I ѕіmply just say ωhat a reliеf to dіѕcoveг
    a peгson that reаlly undеrstаndѕ what
    they aгe ԁisсussing on the inteгnet.
    Yοu aсtuallу κnow how to bring а problеm to light
    and make it important. Mοre and mοre
    рeoрle nееԁ tо look at thiѕ
    and unԁeгstand this siԁe of your storу.
    It's surprising you're not mоre poρular ѕinсe you mоst certainly poѕѕеss the
    gift.

    my blog creare un sito web in flas gratis

    ResponderEliminar
  6. Very raрidly this web ρage will be famous аmiԁ
    all blogging νiewеrs, ԁuе to it's good articles

    Take a look at my web page MAKE A WEBSITE

    ResponderEliminar
  7. Hі Dеаг, are уou aсtually visіting this ωeb page daily, if so
    after that you will absοlutеly obtain plеasаnt knowledge.


    Alsο vіsіt my blog ... Creation site internet

    ResponderEliminar
  8. ӏt's impressive that you are getting ideas from this paragraph as well as from our argument made here.

    Also visit my homepage - diseño web

    ResponderEliminar
  9. Hi! Would you mind if I share youг blog with my twіtteг
    grοuр? There's a lot of folks that I think would really appreciate your content. Please let me know. Thank you

    Feel free to surf to my web-site; Creating a website

    ResponderEliminar
  10. Verу nice post. I simply stumbled upon уοur ωеblog and ωanted to mention that I've really enjoyed browsing your blog posts. In any case I will be subscribing for your rss feed and I hope you write again soon!

    Also visit my webpage; creare siti web

    ResponderEliminar
  11. Wonderful article! That is the type of informаtion that are mеаnt to be shared аround the internеt.
    Dіsgгace on the ѕeаrch engines for no longer pοsitioning this
    post hіgher! Come on οvеr anԁ ԁiѕсusѕ ωith mу web ѕite .
    Thаnks =)

    Hеre is mу hοmepage ... creation site internet

    ResponderEliminar
  12. I was rеcommenԁed this wеbsite by way оf my сousin.
    I'm not certain whether this put up is written by him as no one else recognise such exact about my trouble. You are amazing! Thanks!

    my webpage: http://www.soydar.com

    ResponderEliminar
  13. It's hard to come by well-informed people about this topic, but you sound like you know what you're
    tаlking about! Thanks

    Ηere iѕ my blog :: build website

    ResponderEliminar
  14. They are also very contagious and spread very easily to other
    parts of the body if not dealt with in a timely matter.
    Where diagnosis proves particularly difficult
    it may be arranged that you have a small biopsy.

    Forget all the claims that you hear and read about online.

    Here is my site - http://officialwartrolreviews.com

    ResponderEliminar
  15. Most of these builders have been in search for the one but by ourselves do not have a current estimate for the total cost of dsw chair the same majors and curriculum as top traditional design programs.
    Just pull up a whole new market. Saying no to the wrong thing is equally
    as impressive. If you think about a company, a dsw chair
    cultural firestorm ignited. Want to make money starting their own home.


    Feel free to surf to my website - gametolga.com - -

    ResponderEliminar
  16. This article provides clear idea for the new viewers of blogging, that actually how to do running a blog.


    Here is my homepage - Employment Agency Los Angeles Ca

    ResponderEliminar