Share
¡Blog Action Day 2010 está sobre nosotros! Este año, Webdesigntuts + se está involucrando con una revisión de diseño especial de una de nuestras organizaciones benéficas acuáticas favoritas: charitywater.org. Exploraremos los elementos clave que hacen que el sitio web sea un éxito y cómo puede tomar prestadas las mismas estrategias de diseño para sus propios proyectos.!
En honor al Blog Action Day de este año, ofrecemos una revisión detallada del diseño del sitio web, charitywater.org. "Caridad: el agua es una organización sin fines de lucro que brinda agua potable limpia y segura a las personas en países en desarrollo".
Los sitios para organizaciones caritativas son siempre proyectos interesantes porque necesitan atraer a los visitantes a la acción. El sitio web supera con creces lo que normalmente esperaría de una organización sin fines de lucro; Cuenta con sólidos fundamentos de diseño en todos los ámbitos y tiene algunos excelentes trucos de diseño que le dan un sentido de carácter y refinamiento que pocos sitios web sin fines de lucro tienen. Vamos a profundizar en!
Lo primero que probablemente notará en el sitio web de charity: water es el uso disciplinado del color de su marca. Lo que es único aquí es que usan el color de la misma manera que una marca corporativa podría usar el color. Observe cómo el azul nunca varía de una página a otra: todo, desde los resaltados tipográficos hasta el fondo y los colores de infografía vinculan el diseño "caridad: azul agua". El uso del color es ubicuo en todo el sitio; Así que incluso si el diseño cambia de una página a otra, el color sirve como elemento unificador constante ... lo que en última instancia le da al diseñador un poco más de libertad para jugar..
… El uso de colores controlados creará una presentación profesional que le dará al visitante la sensación de que el sitio es creíble y confiable.
¿Qué hace este uso controlado del color a la estética del sitio? Crea una experiencia de usuario unificada y cohesiva. Más importante aún, el uso de un color uniforme le dará al visitante la sensación de que el sitio es creíble y confiable; algo que es vital para las organizaciones sin fines de lucro que necesitan luchar constantemente por la confianza de los posibles donantes.
La tipografía es una de esas cosas que todo diseñador. sabe en el fondo se encuentra el corazón de la participación de los visitantes, pero a menudo se descuida en favor del formato de texto de status quo. El sitio web charity: water se destaca por el uso de la tipografía para atraer al usuario y enfatizar los elementos clave que hacen que valga la pena conocer esta crisis específica..
Desde un punto de vista técnico, la tipografía utiliza principios establecidos para guiar los ojos: la navegación y la marca son moderadas pero fáciles de localizar; Las "llamadas a la acción" y otros datos clave son audaces y fáciles de escanear. Dentro de los 10 segundos de visitar el sitio, es probable que haya comprendido bastante bien el mensaje con solo escanear los principales titulares ... ¡esa es una tipografía efectiva! En lugar de enterrar los principales puntos de interés dentro de los bloques del texto del párrafo, el sitio los lleva al frente de la atención del visitante.
Dentro de los 10 segundos de haber visitado el sitio, es probable que haya comprendido bastante bien el mensaje solo al escanear los principales titulares ... esa es una tipografía efectiva!
Si bien la tipografía en todo el sitio se siente salvaje e innovadora en la cara, nunca se rompe de un conjunto central de reglas: los titulares principales se establecen en un tipo de letra de bloque que atrae la atención instantánea, los títulos se establecen en un tipo de letra serif que se siente digno y El resto del texto de la página está configurado en un simple sans-serif que es fácil de leer. El uso de unas pocas reglas simples como esta puede ayudar a unificar su diseño, incluso si desea estar en todos los ámbitos con sus diseños y uso de tipo. Echemos un vistazo rápido a la jerarquía de tipos en el sitio:
Debería mencionar una cosa que la caridad: el agua hace que no sea del todo perfecta desde el punto de vista técnico. Si navegas por el sitio lo suficiente, notarás pequeños lugares aquí y allá que rompen sus propias reglas. Por ejemplo, en algunos lugares, el texto del párrafo es serif, donde en la mayor parte del sitio es sans-serif. El resultado es una pequeña ruptura en la cohesión del sitio ... estas inconsistencias son menores en este sitio, pero es importante tener en cuenta que si su propio diseño se siente "desprevenido", vale la pena tomarse el tiempo para revisar cada una de ellas. Tipo de letra para reducir la variedad de estilos que tiene en uso..
Mantendré esta explicación breve y dulce: si tiene la información que está mejor representada como un gráfico, ¡muéstrela como un gráfico! Las personas son pensadores visuales, no anden por las ramas tratando de explicar algo con palabras que se describen más fácilmente con una imagen visual..
Esto es similar a la tercera estrategia, pero garantiza su propia explicación breve. A menudo, tratará de diseñar una página para contenido que sea tan complejo, tan académico, tan basado en datos, que usar solo texto o una infografía por sí solo no entregará el mensaje de manera efectiva. En estos casos, vale la pena considerar cómo puede emparejar una imagen con texto. El texto aún está donde estará la información en bruto, pero la imagen actuará como un "suavizador", haciendo que la información parezca más simple de lo que realmente es, lo que alienta a las personas a leerla realmente.!
Es el "One Trick Pony" de diseño web; El paradigma organizativo que ve cuando visita la mayoría de los sitios es el siguiente: 1 página de inicio personalizada, 1 página de llamada a la acción y 1 plantilla para todo lo demás. Sin embargo, ¡la noción de usar solo una plantilla para manejar la mayoría del contenido de un sitio es miope! Una sola plantilla aburre a los visitantes una vez que salen de la página de inicio ... en lugar de continuar con esa motivación, estas plantillas de "talla única" invitan a los usuarios a abandonar el sitio una vez que sienten que han captado la idea principal.
Donde la caridad: el agua tiene éxito es que utilizan una amplia variedad de diseños en todo el sitio. El resultado: el contenido se siente Fresco en cada pagina Se anima a los visitantes a seguir haciendo clic en el sitio solo para ver qué hay a la vuelta de la esquina. Aún mejor, el diseño de cada página en realidad coincide con el contenido de esa página (idea loca, ¿eh?). Si bien el desarrollo de una amplia variedad de plantillas de página únicas puede costar un poco más, el efecto neto es que el sitio realmente involucra a los visitantes y es más probable que tenga éxito en lograr que los visitantes participen..
Es importante tener en cuenta que usar una variedad de diseños no siempre es la solución correcta. En el caso de charity: water, funciona porque el sitio tiene una diversidad de contenido lo suficientemente grande como para que tenga sentido dar a cada tipo de contenido su propio diseño. Sin embargo, en otros sitios, el uso de diseños radicalmente diferentes de una página a otra puede romper la continuidad en un diseño y, de hecho, funcionar como un detrimento para la experiencia del sitio..
Sin embargo, no hay una regla difícil para decidir cuándo una plantilla de página personalizada está garantizada, así que solo tendrás que usar tus propios instintos. En caso de duda, use una plantilla de página genérica: si la plantilla genérica dificulta el contenido más de lo que lo ayuda, considere crear un diseño personalizado. Si decide que una plantilla de página personalizada es necesaria, tenga cuidado de mantener la información vital (marca, navegación, información de cuenta, carrito de compras, etc.) en el mismo lugar en todas y cada una de las páginas..
Enfrentémoslo: si estás trabajando en un sitio web sin fines de lucro, habrá muchas páginas informativas aburridas que, aunque son importantes, no inspirarán inspiración. Lo que Charity: water ha hecho con estas páginas de información es mostrarlas en un diseño de cuadrícula único. Al usar íconos e imágenes junto con los anuncios informativos, se recomienda a los visitantes que miren alrededor y encuentren algo de su interés. Más importante aún, hace que estas páginas normales se vean "divertidas", lo que transmite un mensaje sutil a los visitantes de que incluso las partes más aburridas del funcionamiento de esta organización se ejecutan con creatividad y pasión..
La conclusión aquí es simple: ¡no ignore las páginas de contenido ordinarias! Si bien estas páginas pueden parecer poco importantes, existe una oportunidad única para sorprender a los visitantes al crear enfoques inteligentes para mostrar este tipo de contenido..
Me gusta la caridad: sitio web de agua ... Realmente lo hago. Cada página se siente fresca y en realidad me da ganas de involucrarme. Algunos podrían decir que este es el signo de una causa genuina: una crisis tan importante que las personas simplemente se sienten atraídas a participar. Sin embargo, voy a arriesgarme y diré que la efectividad del sitio tiene tanto que ver con el diseño como con el contenido. Claro, si la causa fuera "donar $ 5 a Steve Jobs", realmente no me importaría a pesar de lo bien diseñado que esté el sitio (algunos podrían estar en desacuerdo con esto, ¡jaja!), Pero este es uno de esos momentos maravillosos en los que El diseño puede hacer del mundo un lugar mejor..
¡Gracias por leer la publicación del Día de Acción del Blog de este año! Deja algunos comentarios a continuación.
Accentsconagua